2b. TopNavSidecar View

The TopNavSidecar is designed to present tab-structured content. It allows commands to fetch data, parcel the data into one or more tabs, and then pass this model on for subsequent rendering in the TopNavSidecar view. It also allows for the view to be given a multi-part title, and to have buttons that can operate on the resource represented by this data.

• Basic Layout
• Commands Response

Basic Layout

The UI of TopNavSidecar is divided into three areas:

• Title Bar: Displays the kind and descriptive metadata of the resource with Breadcrumb. The Breadcrumb item may have onclick handler, which allows you to quickly browse resources in related contexts.
• Tab: Allows you to switch between different views.
• Tab Content:
  • Toolbar: Contains information about the resource you view and files you edit. Also contains buttons that allows you to perform action that are related to the resource.
  • Content: The main area to view your resource. You can also edit your files with the built-in Monaco Editor support of Kui.

Command Response

When a command execution completes, Kui will broadcast an even that signifies and describes the command response. The TopNavSidecar listens for command responses of type MultiModalResponse, and renders them.

Coming Soon: Using the Kui EventBus

Example of MultiModalResponse

import { MultiModalResponse } from '@kui-shell/core'

/** A no-argument Command Handler */
function printCatInTopNavSidecar(): MultiModalResponse {
  kind: 'American Shorthair', // shown in the image labeled A
  metadata: {
     name: 'tumble', // shown in A
     namespace: 'orange cat' // shown in A
  }, 
  modes: [
    {
      mode: 'Yaml Tab', // shown in B
      content: 'kind: Aerican Shorthair\nmetadata:...', // shown in D
      contentType: 'yaml'
    },
    {
      mode: 'Markdown Tab', // shown in B
      content: markdownContent, // shown in D
      contentType: 'text/markdown'
    },
    {
      mode: 'React Tab', // shown in B
      react: reactContent() // shown in D
    }
  ],
  buttons: [
    { mode: 'show dog', command: 'hello dog', kind: 'drilldown' }, // shown in E
    { mode: 'catnav', command: 'hello catnav', kind: 'drilldown' } // shown in E
  ]
}

In this example code, printCatInTopNavSidecar is a Kui Command Handler that happens to take no arguments. For more information on Command Handlers, how they can consume required and optional parameters, and how to link your handler to a particular command-line string, consult the Kui Command Documentation.