@rancher/shell 0.3.1 → 0.3.2

package/components/ActionMenu.vue

@@ -3,15 +3,16 @@ import { mapGetters } from 'vuex';
 import $ from 'jquery';
 import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
 import { isAlternate } from '@shell/utils/platform';
+import IconOrSvg from '@shell/components/IconOrSvg';
 
 const HIDDEN = 'hide';
 const CALC = 'calculate';
 const SHOW = 'show';
 
 export default {
-  name: 'ActionMenu',
-
-  props: {
+  name:       'ActionMenu',
+  components: { IconOrSvg },
+  props:      {
     customActions: {
       // Custom actions can be used if you need the action
       // menu to work for something that is not a Kubernetes
@@ -194,7 +195,23 @@ export default {
         return;
       }
 
-      if (this.useCustomTargetElement) {
+      // this will come from extensions...
+      if (action.invoke) {
+        const fn = action.invoke;
+
+        if (fn && action.enabled) {
+          const resources = this.$store.getters['action-menu/resources'];
+          const opts = {
+            event,
+            action,
+            isAlt: isAlternate(event)
+          };
+
+          if (resources.length === 1) {
+            fn.apply(this, [opts, resources]);
+          }
+        }
+      } else if (this.useCustomTargetElement) {
         // If the state of this component is controlled
         // by props instead of Vuex, we assume you wouldn't want
         // the mutation to have a dependency on Vuex either.
@@ -247,12 +264,16 @@ export default {
         :data-testid="componentTestid + '-' + i + '-item'"
         @click="execute(opt, $event)"
       >
-        <i
-          v-if="opt.icon"
-          :class="{icon: true, [opt.icon]: true}"
+        <IconOrSvg
+          v-if="opt.icon || opt.svg"
+          :icon="opt.icon"
+          :src="opt.svg"
+          class="icon"
+          color="header"
         />
         <span v-html="opt.label" />
       </li>
+
       <li
         v-if="!hasOptions(menuOptions)"
         class="no-actions"

package/components/DetailTop.vue

@@ -3,11 +3,15 @@ import Tag from '@shell/components/Tag';
 import isEmpty from 'lodash/isEmpty';
 import DetailText from '@shell/components/DetailText';
 import { _VIEW } from '@shell/config/query-params';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 export const SEPARATOR = { separator: true };
 
 export default {
-  components: { DetailText, Tag },
+  components: {
+    DetailText, Tag, ExtensionPanel
+  },
 
   props: {
     value: {
@@ -49,6 +53,8 @@ export default {
 
   data() {
     return {
+      extensionType:      ExtensionPoint.PANEL,
+      extensionLocation:  PanelLocation.DETAIL_TOP,
       annotationsVisible: false,
       showAllLabels:      false,
       view:               _VIEW
@@ -287,6 +293,13 @@ export default {
         />
       </div>
     </div>
+
+    <!-- Extensions area -->
+    <ExtensionPanel
+      :resource="value"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
   </div>
 </template>
 

package/components/ExtensionPanel.vue

@@ -0,0 +1,42 @@
+<script>
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+
+export default {
+  name:  'ExtensionPanel',
+  props: {
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    type: {
+      type:    String,
+      default: ''
+    },
+    location: {
+      type:    String,
+      default: ''
+    },
+  },
+  data() {
+    return { extensionData: getApplicableExtensionEnhancements(this, this.type, this.location, this.$route) };
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="extensionData.length"
+  >
+    <div
+      v-for="item, i in extensionData"
+      :key="`extensionData${location}${i}`"
+    >
+      <component
+        :is="item.component"
+        :resource="resource"
+      />
+    </div>
+  </div>
+</template>

package/components/IconOrSvg.vue

@@ -63,8 +63,34 @@ export default {
 
   methods: {
     setColor() {
-      const uiColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].color).trim());
-      const hoverColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].hover).trim());
+      const currTheme = this.$store.getters['prefs/theme'];
+      let uiColor, hoverColor;
+
+      // grab css vars values based on the actual stylesheets, depending on the theme applied
+      // use for loops to minimize computation
+      for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
+        let found = false;
+        const stylesheet = document.styleSheets[i];
+
+        if (stylesheet && stylesheet.cssRules) {
+          for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
+            const cssRules = stylesheet.cssRules[x];
+            const selectorText = currTheme === 'light' ? 'body, .theme-light' : '.theme-dark';
+
+            if (cssRules.selectorText && cssRules.selectorText === selectorText) {
+              uiColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].color).trim());
+              hoverColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].hover).trim());
+              found = true;
+              break;
+            }
+          }
+        }
+        if (found) {
+          break;
+        } else {
+          continue;
+        }
+      }
 
       const uiColorRGB = colorToRgb(uiColor);
       const hoverColorRGB = colorToRgb(hoverColor);
@@ -105,6 +131,9 @@ export default {
           button:hover > img.${ className } {
             ${ hoverFilter };
           }
+          li:hover > img.${ className } {
+            ${ hoverFilter };
+          }
           a.option:hover > img.${ className } {
             ${ hoverFilter };
           }      `;

package/components/ResourceDetail/Masthead.vue

@@ -10,6 +10,8 @@ import { HIDE_SENSITIVE } from '@shell/store/prefs';
 import {
   AS, _DETAIL, _CONFIG, _YAML, MODE, _CREATE, _EDIT, _VIEW, _UNFLAG, _GRAPH
 } from '@shell/config/query-params';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 /**
  * Resource Detail Masthead component.
@@ -21,7 +23,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup
+    BadgeState, Banner, ButtonGroup, ExtensionPanel
   },
   props: {
     value: {
@@ -83,7 +85,11 @@ export default {
   },
 
   data() {
-    return { DETAIL_VIEW: _DETAIL };
+    return {
+      DETAIL_VIEW:       _DETAIL,
+      extensionType:     ExtensionPoint.PANEL,
+      extensionLocation: PanelLocation.DETAILS_MASTHEAD,
+    };
   },
 
   computed: {
@@ -451,7 +457,7 @@ export default {
         </div>
       </div>
       <slot name="right">
-        <div class="actions-container">
+        <div class="actions-container align-start">
           <div class="actions">
             <button
               v-if="detailsAction && currentView === DETAIL_VIEW && isView"
@@ -493,6 +499,13 @@ export default {
       </slot>
     </header>
 
+    <!-- Extension area -->
+    <ExtensionPanel
+      :resource="value"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
+
     <Banner
       v-if="banner && isView && !parent.hideBanner"
       class="state-banner mb-10"

package/components/ResourceList/index.vue

@@ -6,6 +6,8 @@ import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import IconMessage from '@shell/components/IconMessage.vue';
 import { ResourceListComponentName } from './resource-list.config';
+import { PanelLocation, ExtensionPoint } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 export default {
   name: ResourceListComponentName,
@@ -15,7 +17,8 @@ export default {
     ResourceTable,
     Masthead,
     ResourceLoadingIndicator,
-    IconMessage
+    IconMessage,
+    ExtensionPanel
   },
   mixins: [ResourceFetch],
 
@@ -96,6 +99,8 @@ export default {
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
+      extensionType:                    ExtensionPoint.PANEL,
+      extensionLocation:                PanelLocation.RESOURCE_LIST,
       loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
       hasFetch:                         false,
       // manual refresh
@@ -127,7 +132,8 @@ export default {
 
     showIncrementalLoadingIndicator() {
       return this.perfConfig?.incrementalLoading?.enabled;
-    }
+    },
+
   },
 
   watch: {
@@ -191,6 +197,13 @@ export default {
         <slot name="extraActions" />
       </template>
     </Masthead>
+    <!-- Extensions area -->
+    <ExtensionPanel
+      :resource="{}"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
+
     <div v-if="hasListComponent">
       <component
         :is="listComponent"

package/components/ResourceTable.vue

@@ -404,7 +404,9 @@ export default {
     },
 
     handleEnterKeyPress(event) {
-      this.keyAction('detail');
+      if (event.key === 'Enter') {
+        this.keyAction('detail');
+      }
     }
   }
 };

package/components/SortableTable/THead.vue

@@ -348,7 +348,7 @@ export default {
         }
       }
       .table-options-container {
-        width: 320px;
+        width: 350px;
         border: 1px solid var(--primary);
         background-color: var(--body-bg);
         padding: 20px;
@@ -369,11 +369,10 @@ export default {
           list-style: none;
           margin: 0;
           padding: 0;
-          display: flex;
-          flex-wrap: wrap;
+          max-height: 200px;
+          overflow-y: auto;
 
           li {
-            flex: 1 1 136px;
             margin: 0;
             padding: 0;
 
@@ -486,12 +485,10 @@ export default {
     }
   </style>
   <style lang="scss">
+    .table-options-checkbox .checkbox-custom {
+      min-width: 14px;
+    }
     .table-options-checkbox .checkbox-label {
       color: var(--body-text);
-      text-overflow: ellipsis;
-      width: 100px;
-      display: inline-block;
-      white-space: nowrap;
-      overflow: hidden;
     }
   </style>

package/components/SortableTable/filtering.js

@@ -254,7 +254,7 @@ function matches(fields, token, item) {
     }
 
     if ( !modifier ) {
-      if ( val.includes(token) ) {
+      if ( val.includes((`${ token }`).toLowerCase()) ) {
         return true;
       }
     } else if ( modifier === 'exact' ) {

package/components/SortableTable/selection.js

@@ -504,7 +504,7 @@ export default {
     },
 
     applyTableAction(action, args, event) {
-      const opts = { alt: event && isAlternate(event) };
+      const opts = { alt: event && isAlternate(event), event };
 
       // Go through the table selection and filter out those actions that can't run the chosen action
       const executableSelection = this.selectedRows.filter((row) => {
@@ -513,7 +513,7 @@ export default {
         return matchingResourceAction?.enabled;
       });
 
-      _execute(executableSelection, action, args, opts);
+      _execute(executableSelection, action, args, opts, this);
 
       this.actionOfInterest = null;
     },
@@ -575,8 +575,20 @@ function _filter(map, disableAll = false) {
   return out;
 }
 
-function _execute(resources, action, args, opts = {}) {
+function _execute(resources, action, args, opts = {}, ctx) {
   args = args || [];
+
+  // New pattern for extensions - always call invoke
+  if (action.invoke) {
+    const actionOpts = {
+      action,
+      event: opts.event,
+      isAlt: !!opts.alt,
+    };
+
+    return action.invoke.apply(ctx, [actionOpts, resources || [], args]);
+  }
+
   if ( resources.length > 1 && action.bulkAction && !opts.alt ) {
     const fn = resources[0][action.bulkAction];
 

package/components/Tabbed/Tab.vue

@@ -99,7 +99,7 @@ export default {
       class="tab-header"
     >
       <h2>
-        {{ label }}
+        {{ labelDisplay }}
         <i
           v-if="tooltip"
           v-tooltip="tooltip"

package/components/form/ResourceTabs/index.vue

@@ -11,6 +11,8 @@ import { EVENT } from '@shell/config/types';
 import SortableTable from '@shell/components/SortableTable';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
+import { ExtensionPoint, TabLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 export default {
 
@@ -69,6 +71,7 @@ export default {
       allEvents:     [],
       selectedTab:   this.defaultTab,
       didLoadEvents: false,
+      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route),
     };
   },
 
@@ -221,5 +224,25 @@ export default {
         direction="to"
       />
     </Tab>
+
+    <!-- Extension tabs -->
+    <Tab
+      v-for="tab, i in extensionTabs"
+      :key="`${tab.name}${i}`"
+      :name="tab.name"
+      :label="tab.label"
+      :label-key="tab.labelKey"
+      :weight="tab.weight"
+      :tooltip="tab.tooltip"
+      :show-header="tab.showHeader"
+      :display-alert-icon="tab.displayAlertIcon"
+      :error="tab.error"
+      :badge="tab.badge"
+    >
+      <component
+        :is="tab.component"
+        :resource="value"
+      />
+    </Tab>
   </Tabbed>
 </template>

package/components/nav/Header.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
 import { NORMAN, STEVE } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
-import { isMac } from '@shell/utils/platform';
+import { isAlternate, isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
 import { getProduct } from '@shell/config/private-label';
@@ -15,6 +15,9 @@ import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
 import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
+import { ActionLocation, ExtensionPoint } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import IconOrSvg from '@shell/components/IconOrSvg';
 
 const PAGE_HEADER_ACTION = 'page-action';
 
@@ -29,6 +32,7 @@ export default {
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
+    IconOrSvg
   },
 
   props: {
@@ -43,13 +47,15 @@ export default {
     const shellShortcut = '(Ctrl+`)';
 
     return {
-      show:              false,
-      showTooltip:       false,
-      kubeConfigCopying: false,
+      show:                   false,
+      showTooltip:            false,
+      kubeConfigCopying:      false,
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:    null,
+      navHeaderRight:         null,
+      extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
+      ctx:                    this
     };
   },
 
@@ -170,6 +176,12 @@ export default {
       if (nue && old && nue.id !== old.id) {
         this.checkClusterName();
       }
+    },
+    // since the Header is a "persistent component" we need to update it at every route change...
+    $route(nue) {
+      if (nue) {
+        this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+      }
     }
   },
 
@@ -288,6 +300,33 @@ export default {
           button.classList.remove('header-btn-active');
         }
       });
+    },
+
+    handleExtensionAction(action, event) {
+      const fn = action.invoke;
+      const opts = {
+        event,
+        action,
+        isAlt:   isAlternate(event),
+        product: this.currentProduct.name,
+        cluster: this.currentCluster,
+      };
+      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
+
+      if (fn && enabled) {
+        fn.apply(this, [opts, []]);
+      }
+    },
+
+    handleExtensionTooltip(action) {
+      if (action.tooltipKey || action.tooltip) {
+        const tooltip = action.tooltipKey ? this.t(action.tooltipKey) : action.tooltip;
+        const shortcut = action.shortcutLabel ? action.shortcutLabel() : '';
+
+        return `${ tooltip } ${ shortcut }`;
+      }
+
+      return null;
     }
   }
 };
@@ -502,6 +541,31 @@ export default {
         </modal>
       </div>
 
+      <!-- Extension header actions -->
+      <div
+        v-if="extensionHeaderActions.length"
+        class="header-buttons"
+      >
+        <button
+          v-for="action, i in extensionHeaderActions"
+          :key="`${action.label}${i}`"
+          v-tooltip="handleExtensionTooltip(action)"
+          v-shortkey="action.shortcutKey"
+          :disabled="action.enabled ? !action.enabled(ctx) : false"
+          type="button"
+          class="btn header-btn role-tertiary"
+          @shortkey="handleExtensionAction(action, $event)"
+          @click="handleExtensionAction(action, $event)"
+        >
+          <IconOrSvg
+            class="icon icon-lg"
+            :icon="action.icon"
+            :src="action.svg"
+            color="header"
+          />
+        </button>
+      </div>
+
       <div
         v-if="showPageActions"
         id="page-actions"

package/config/product/backup.js

@@ -43,7 +43,7 @@ export function init(store) {
       formatter: 'Date'
     },
     {
-      name:      'nextBackup',
+      name:      'lastBackup',
       labelKey:  'backupRestoreOperator.lastBackup',
       value:     'status.lastSnapshotTs',
       formatter: 'Date'

package/config/query-params.js

@@ -30,6 +30,7 @@ export const MODE = 'mode';
 export const _CREATE = 'create';
 export const _VIEW = 'view';
 export const _EDIT = 'edit';
+export const _LIST = 'list';
 export const _CLONE = 'clone';
 export const _STAGE = 'stage';
 export const _IMPORT = 'import';

package/config/uiplugins.js

@@ -1,7 +1,7 @@
 import semver from 'semver';
 
 // Version of the plugin API supported
-export const UI_PLUGIN_API_VERSION = '1.0.0';
+export const UI_PLUGIN_API_VERSION = '1.1.0';
 export const UI_PLUGIN_HOST_APP = 'rancher-manager';
 
 export const UI_PLUGIN_BASE_URL = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy';
@@ -32,8 +32,8 @@ export const UI_PLUGINS_REPO_BRANCH = 'main';
 // Chart annotations
 export const UI_PLUGIN_CHART_ANNOTATIONS = {
   RANCHER_VERSION:    'catalog.cattle.io/rancher-version',
-  EXTENSIONS_VERSION: 'catalog.cattle.io/ui-extenstions-version',
-  EXTENSIONS_HOST:    'catalog.cattle.io/ui-extenstions-host',
+  EXTENSIONS_VERSION: 'catalog.cattle.io/ui-extensions-version',
+  EXTENSIONS_HOST:    'catalog.cattle.io/ui-extensions-host',
   DISPLAY_NAME:       'catalog.cattle.io/display-name',
 };