feat: show buttons of related resources in sidecar footer

Fixes #6856

Author: myan9

packages/core/src/models/mmr/types.ts

@@ -122,6 +122,9 @@ export type DrilldownButton<T = MetadataBearing> = Label &
 
     /** Execute the command in place of the current block? Default: execute in a new block */
     inPlace?: boolean
+
+    /** Drilldown to related resource? */
+    showRelatedResource?: boolean
   }
 
 export type ViewButton<T = MetadataBearing> = Label &

packages/test/src/api/sidecar-expect.ts

@@ -98,7 +98,7 @@ export const badge = (title: string, css?: string, absent = false) => async (res
 
 export const button = (button: { mode: string; label?: string }) => async (res: AppAndCount) => {
   await res.app.client
-    .$(Selectors.SIDECAR_TOOLBAR_BUTTON(res.count, button.mode, res.splitIndex))
+    .$(Selectors.SIDECAR_MODE_BUTTON(res.count, button.mode, res.splitIndex))
     .then(_ => _.waitForDisplayed({ timeout: waitTimeout }))
   return res
 }

plugins/plugin-client-common/src/components/Views/Sidecar/Toolbar.tsx

@@ -27,6 +27,7 @@ export type Props = LocationProps & {
   response: MultiModalResponse
   toolbarText?: ToolbarText
   noAlerts?: boolean
+  bottom?: boolean
   args: {
     argvNoOptions: string[]
     parsedOptions: ParsedOptions
@@ -63,6 +64,7 @@ export default class Toolbar extends React.PureComponent<Props> {
   private buttons() {
     if (this.props.buttons) {
       return this.props.buttons
+        .sort() // sort alphabetically first
         .sort((a, b) => {
           return (a.order || 0) - (b.order || 0)
         })
@@ -83,7 +85,11 @@ export default class Toolbar extends React.PureComponent<Props> {
     try {
       return (
         <div className="sidecar-bottom-stripe-toolbar">
-          <div className="sidecar-toolbar-text" data-type={this.props.toolbarText && this.props.toolbarText.type}>
+          <div
+            className="sidecar-toolbar-text"
+            data-location-bottom={this.props.bottom}
+            data-type={this.props.toolbarText && this.props.toolbarText.type}
+          >
             <div className="sidecar-toolbar-text-icon">{this.icon()}</div>
             {this.props.toolbarText &&
               (typeof this.props.toolbarText.text === 'string' ? (
@@ -98,7 +104,10 @@ export default class Toolbar extends React.PureComponent<Props> {
               ))}
           </div>
 
-          <div className="sidecar-bottom-stripe-mode-bits sidecar-bottom-stripe-button-container">
+          <div
+            className="sidecar-bottom-stripe-mode-bits sidecar-bottom-stripe-button-container"
+            data-location-bottom={this.props.bottom}
+          >
             <div className="fill-container flex-layout flush-right">{this.buttons()}</div>
           </div>
         </div>

plugins/plugin-client-common/src/components/Views/Sidecar/TopNavSidecarV2.tsx

@@ -35,6 +35,7 @@ import {
 import Badge from './Badge'
 import KuiContext from '../../Client/context'
 import ToolbarContainer from './ToolbarContainer'
+import Toolbar from './Toolbar'
 import { BreadcrumbView } from '../../spi/Breadcrumb'
 import BaseSidecar, { Props, State } from './BaseSidecarV2'
 
@@ -291,7 +292,7 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, TopNa
             didUpdateToolbar={this._didUpdateToolbar}
             toolbarText={this.state.toolbarText}
             noAlerts={this.current.currentTabIndex !== this.current.defaultMode}
-            buttons={this.current.buttons}
+            buttons={this.current.buttons.filter(_ => !(_.kind === 'drilldown' && _.showRelatedResource))}
           >
             {this.bodyContent(idx)}
           </ToolbarContainer>
@@ -347,6 +348,19 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, TopNa
     }
   }
 
+  private footer() {
+    return (
+      <Toolbar
+        bottom={true}
+        tab={this.props.tab}
+        execUUID={this.props.execUUID}
+        response={this.state.response}
+        args={{ argvNoOptions: this.props.argvNoOptions, parsedOptions: this.props.parsedOptions }}
+        buttons={this.current.buttons.filter(_ => _.kind === 'drilldown' && _.showRelatedResource)}
+      />
+    )
+  }
+
   private kindBreadcrumb(): BreadcrumbView {
     const { kind, onclick } = this.state.response
     return { label: kind, command: onclick && onclick.kind, className: 'kui--sidecar-kind' }
@@ -434,6 +448,7 @@ export default class TopNavSidecar extends BaseSidecar<MultiModalResponse, TopNa
           <div className="kui--sidecar-header-and-body" style={{ flexDirection: 'column' }}>
             {this.header()}
             {this.tabs()}
+            {this.footer()}
           </div>
         </div>
       )

plugins/plugin-client-common/web/css/static/sidecar-main.css

@@ -119,6 +119,14 @@ $toolbar-height: 1.5rem;
     flex: 1;
     overflow: visible; /* for tooltip visibility */
   }
+
+  .sidecar-toolbar-text[data-location-bottom="true"],
+  .sidecar-bottom-stripe-mode-bits[data-location-bottom="true"] {
+    background-color: var(--color-sidecar-header);
+    color: var(--color-text-01);
+    font-size: calc(12em / 16);
+  }
+
   .sidecar-toolbar-text svg path {
     fill: var(--color-sidecar-toolbar-foreground);
     &[data-icon-path="inner-path"] {
@@ -168,7 +176,7 @@ $toolbar-height: 1.5rem;
   .sidecar-bottom-stripe-button {
     display: flex;
     line-height: 1.5em;
-    padding: 0 0.5em;
+    padding: 0 0.25em;
 
     & > button {
       padding: 0;
@@ -193,6 +201,24 @@ $toolbar-height: 1.5rem;
       display: flex;
     }
   }
+  .sidecar-bottom-stripe-mode-bits[data-location-bottom="true"] {
+    .sidecar-bottom-stripe-button {
+      padding: 1em;
+
+      &:hover {
+        background-color: var(--color-table-border3);
+      }
+
+      a,
+      button {
+        &:hover {
+          [role="tab"] {
+            color: var(--color-text-01);
+          }
+        }
+      }
+    }
+  }
   .graphical-icon svg {
     fill: var(--color-sidecar-toolbar-foreground);
   }

plugins/plugin-kubectl/src/lib/view/modes/Events.tsx

@@ -69,7 +69,7 @@ export const eventsMode: ModeRegistration<KubeResource> = {
     mode: 'events',
     label: strings('Show Events'),
     kind: 'drilldown',
-    order: 110,
+    showRelatedResource: true,
     command
   }
 }

plugins/plugin-kubectl/src/lib/view/modes/ShowNodeOfPodButton.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import { Icons } from '@kui-shell/plugin-client-common'
 import { i18n, Tab, ModeRegistration } from '@kui-shell/core'
 
 import { isPod, Pod } from '../../model/resource'
@@ -40,9 +38,8 @@ const mode: ModeRegistration<Pod> = {
   mode: {
     mode: 'show-node',
     kind: 'drilldown',
-    order: 80, // we want this to appear before DeleteButton, but after others...
+    showRelatedResource: true,
     label: strings('Show Node'),
-    icon: <Icons icon="Server" />,
     command
   }
 }

plugins/plugin-kubectl/src/lib/view/modes/ShowOwnerButton.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import { Icons } from '@kui-shell/plugin-client-common'
 import { i18n, encodeComponent, Tab, ModeRegistration } from '@kui-shell/core'
 
 import { fqn } from '../../../controller/kubectl/fqn'
@@ -55,9 +53,8 @@ const mode: ModeRegistration<KubeResourceWithOwnerReferences> = {
   mode: {
     mode: 'ownerReference',
     kind: 'drilldown',
-    order: 90, // we want this to appear before DeleteButton, but after others...
+    showRelatedResource: true,
     label: strings('Show Owner Reference'),
-    icon: <Icons icon="Up" />,
     command
   }
 }