@rancher/shell 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -138,6 +138,7 @@
     "vue-server-renderer": "2.6.14",
     "vue-shortkey": "3.1.7",
     "vue-template-compiler": "2.6.14",
+    "vue-virtual-scroll-list": "^2.3.4",
     "vue2-transitions": "0.3.0",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",

package/pages/c/_cluster/apps/charts/index.vue

@@ -21,6 +21,7 @@ import { CATALOG } from '@shell/config/labels-annotations';
 import { isUIPlugin } from '@shell/config/uiplugins';
 
 export default {
+  name:       'Charts',
   components: {
     AsyncButton,
     Banner,
@@ -53,6 +54,7 @@ export default {
       searchQuery:     null,
       showDeprecated:  null,
       showHidden:      null,
+      isPspLegacy:     false,
       chartOptions:    [
         {
           label: 'Browse',
@@ -239,6 +241,14 @@ export default {
     }
   },
 
+  created() {
+    const release = this.currentCluster?.status?.version.gitVersion || '';
+    const isRKE2 = release.includes('rke2');
+    const version = release.match(/\d+/g);
+
+    this.isPspLegacy = version?.length ? isRKE2 && (+version[0] === 1 && +version[1] < 25) : false;
+  },
+
   methods: {
     colorForChart(chart) {
       const repos = this.repoOptions;
@@ -363,6 +373,13 @@ export default {
         @clicked="(row) => selectChart(row)"
       />
     </div>
+
+    <Banner
+      v-if="isPspLegacy"
+      color="warning"
+      :label="t('catalog.chart.banner.legacy')"
+    />
+
     <TypeDescription resource="chart" />
     <div class="left-right-split">
       <Select

package/pages/c/_cluster/explorer/index.vue

@@ -40,6 +40,9 @@ import { isEmpty } from '@shell/utils/object';
 import ConfigBadge from './ConfigBadge';
 import EventsTable from './EventsTable';
 import { fetchClusterResources } from './explorer-utils';
+import SimpleBox from '@shell/components/SimpleBox';
+import { ExtensionPoint, CardLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 export const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
 
@@ -71,6 +74,7 @@ export default {
     EmberPage,
     ConfigBadge,
     EventsTable,
+    SimpleBox,
   },
 
   mixins: [metricPoller],
@@ -126,6 +130,7 @@ export default {
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
       selectedTab:        'cluster-events',
+      extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
     };
   },
 
@@ -492,6 +497,27 @@ export default {
       />
     </div>
 
+    <!-- extension cards -->
+    <div
+      v-if="extensionCards.length"
+      class="extension-card-container mt-20"
+    >
+      <SimpleBox
+        v-for="item, i in extensionCards"
+        :key="`extensionCards${i}`"
+        class="extension-card"
+        :style="item.style"
+      >
+        <h3>
+          {{ item.label }}
+        </h3>
+        <component
+          :is="item.component"
+          :resource="currentCluster"
+        />
+      </SimpleBox>
+    </div>
+
     <h3
       v-if="!hasV1Monitoring && hasStats"
       class="mt-40"
@@ -631,6 +657,19 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.extension-card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc((100%/3) - 40px), 1fr));
+  grid-column-gap: 15px;
+  grid-row-gap: 20px;
+}
+
+@media only screen and (max-width: map-get($breakpoints, "--viewport-9")) {
+  .extension-card-container {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 .cluster-dashboard-glance {
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -181,12 +181,14 @@ export default {
         <div class="dialog-buttons mt-20">
           <button
             class="btn role-secondary"
+            data-testid="dev-install-ext-modal-cancel-btn"
             @click="closeDialog()"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="load"
+            data-testid="dev-install-ext-modal-install-btn"
             @click="loadPlugin"
           />
         </div>

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -243,6 +243,7 @@ export default {
             label-key="plugins.install.version"
             :options="versionOptions"
             class="version-selector mt-10"
+            data-testid="install-ext-modal-select-version"
           />
           <div v-else>
             {{ t('plugins.install.version') }} {{ version }}
@@ -252,12 +253,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="install-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             :mode="buttonMode"
+            data-testid="install-ext-modal-install-btn"
             @click="install"
           />
         </div>

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -113,10 +113,12 @@ export default {
     <div
       v-if="showSlideIn"
       class="glass"
+      data-testid="extension-details-bg"
       @click="hide()"
     />
     <div
       class="slideIn"
+      data-testid="extension-details"
       :class="{'hide': false, 'slideIn__show': showSlideIn}"
     >
       <div
@@ -142,8 +144,11 @@ export default {
             >
           </div>
           <div class="plugin-title">
-            <h2 class="slideIn__header">
-              {{ info.name }}
+            <h2
+              class="slideIn__header"
+              data-testid="extension-details-title"
+            >
+              {{ info.label }}
             </h2>
             <p class="plugin-description">
               {{ info.description }}
@@ -153,6 +158,7 @@ export default {
             <div class="slideIn__header__buttons">
               <div
                 class="slideIn__header__button"
+                data-testid="extension-details-close"
                 @click="showSlideIn = false"
               >
                 <i class="icon icon-close" />
@@ -224,8 +230,11 @@ export default {
         </div>
         <div v-if="!info.versions.length">
           <h3>
-            {{ t('plugins.version', { version: info.displayVersion }) }}
+            {{ t('plugins.info.versions') }}
           </h3>
+          <div class="version-link version-active version-builtin">
+            {{ info.displayVersion }}
+          </div>
         </div>
       </div>
     </div>
@@ -236,6 +245,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 1;
 
     $slideout-width: 35%;
     $title-height: 50px;
@@ -345,6 +355,10 @@ export default {
           color: var(--link-text);
           background: var(--link);
         }
+
+        &.version-builtin {
+          display: inline-block;
+        }
       }
 
       &__header {

package/pages/c/_cluster/uiplugins/RemoveUIPlugins.vue

@@ -107,6 +107,7 @@ export default {
     name="confirm-uiplugins-remove"
     :title="t('plugins.setup.remove.title')"
     mode="disable"
+    data-testid="disable-ext-modal"
     @okay="doRemove"
   >
     <template>
@@ -121,6 +122,7 @@ export default {
           v-model="removeRepo"
           :primary="true"
           label-key="plugins.setup.remove.registry.title"
+          data-testid="disable-ext-modal-remove-repo"
         />
         <div class="checkbox-info">
           {{ t('plugins.setup.remove.registry.prompt') }}

package/pages/c/_cluster/uiplugins/SetupUIPlugins.vue

@@ -214,6 +214,7 @@ export default {
               :manual="true"
               :current-phase="buttonState"
               class="enable-plugin-support"
+              data-testid="extension-enable-operator"
               @click="enable"
             />
           </div>

package/pages/c/_cluster/uiplugins/UninstallDialog.vue

@@ -84,12 +84,14 @@ export default {
           <button
             :disabled="busy"
             class="btn role-secondary"
+            data-testid="uninstall-ext-modal-cancel-btn"
             @click="closeDialog(false)"
           >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton
             mode="uninstall"
+            data-testid="uninstall-ext-modal-uninstall-btn"
             @click="uninstall()"
           />
         </div>

package/pages/c/_cluster/uiplugins/index.vue

@@ -221,10 +221,12 @@ export default {
         const chart = all.find(c => c.name === p.name);
 
         if (!chart) {
-          // A pluign is loaded, but there is no chart, so add an item so that it shows up
+          // A plugin is loaded, but there is no chart, so add an item so that it shows up
+          const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
+          const label = rancher[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
             name:           p.name,
-            label:          p.name,
+            label,
             description:    p.metadata?.description,
             icon:           p.metadata?.icon,
             id:             p.id,
@@ -492,10 +494,13 @@ export default {
 <template>
   <div class="plugins">
     <div class="plugin-header">
-      <h2>{{ t('plugins.title') }}</h2>
+      <h2 data-testid="extensions-page-title">
+        {{ t('plugins.title') }}
+      </h2>
       <div
         v-if="reloadRequired"
         class="plugin-reload-banner mr-20"
+        data-testid="extension-reload-banner"
       >
         <i class="icon icon-checkmark mr-10" />
         <span>
@@ -503,6 +508,7 @@ export default {
         </span>
         <button
           class="ml-10 btn btn-sm role-primary"
+          data-testid="extension-reload-banner-reload-btn"
           @click="reload()"
         >
           {{ t('generic.reload') }}
@@ -514,6 +520,7 @@ export default {
         aria-haspopup="true"
         type="button"
         class="btn actions role-secondary"
+        data-testid="extensions-page-menu"
         @click="setMenu"
       >
         <i class="icon icon-actions" />
@@ -555,15 +562,18 @@ export default {
       <Tabbed
         ref="tabs"
         :tabs-only="true"
+        data-testid="extension-tabs"
         @changed="filterChanged"
       >
         <Tab
           name="installed"
+          data-testid="extension-tab-installed"
           label-key="plugins.tabs.installed"
           :weight="20"
         />
         <Tab
           name="available"
+          data-testid="extension-tab-available"
           label-key="plugins.tabs.available"
           :weight="19"
         />
@@ -606,6 +616,7 @@ export default {
             v-for="plugin in list"
             :key="plugin.name"
             class="plugin"
+            :data-testid="`extension-card-${plugin.name}`"
             @click="showPluginDetail(plugin)"
           >
             <div
@@ -709,6 +720,7 @@ export default {
                   <button
                     v-if="!plugin.builtin"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
                     @click="showUninstallDialog(plugin, $event)"
                   >
                     {{ t('plugins.uninstall.label') }}
@@ -716,6 +728,7 @@ export default {
                   <button
                     v-if="plugin.upgrade"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-update-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'update', $event)"
                   >
                     {{ t('plugins.update.label') }}
@@ -723,6 +736,7 @@ export default {
                   <button
                     v-if="!plugin.upgrade && plugin.versions.length > 1"
                     class="btn role-secondary"
+                    :data-testid="`extension-card-rollback-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'rollback', $event)"
                   >
                     {{ t('plugins.rollback.label') }}
@@ -734,6 +748,7 @@ export default {
                 >
                   <button
                     class="btn role-secondary"
+                    :data-testid="`extension-card-install-btn-${plugin.name}`"
                     @click="showInstallDialog(plugin, 'install', $event)"
                   >
                     {{ t('plugins.install.label') }}
@@ -867,7 +882,6 @@ export default {
         width: 40px;
         -o-object-fit: contain;
         object-fit: contain;
-        position: relative;
         top: 2px;
         left: 2px;
       }

package/plugins/dashboard-store/resource-class.js

@@ -37,6 +37,9 @@ import Vue from 'vue';
 
 import { normalizeType } from './normalize';
 
+import { ExtensionPoint, ActionLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+
 const STRING_LIKE_TYPES = [
   'string',
   'date',
@@ -851,7 +854,11 @@ export default class Resource {
 
   // You can add custom actions by overriding your own availableActions (and probably reading super._availableActions)
   get _availableActions() {
-    const all = [
+    // get menu actions available by plugins configuration
+    const currentRoute = this.currentRouter().app._route;
+    const extensionMenuActions = getApplicableExtensionEnhancements(this.$rootState, ExtensionPoint.ACTION, ActionLocation.TABLE, currentRoute, this);
+
+    let all = [
       { divider: true },
       {
         action:  this.canUpdate ? 'goToEdit' : 'goToViewConfig',
@@ -899,6 +906,13 @@ export default class Resource {
       },
     ];
 
+    // Extension actions get added to the end, so add a divider if there are any
+    if (extensionMenuActions.length) {
+      // Add a divider first
+      all.push({ divider: true });
+      all = all.concat(extensionMenuActions);
+    }
+
     return all;
   }
 
@@ -1051,6 +1065,7 @@ export default class Resource {
   async _save(opt = {}) {
     delete this.__rehydrate;
     delete this.__clone;
+
     const forNew = !this.id;
 
     const errors = await this.validationErrors(this, opt.ignoreFields);

package/rancher-components/components/Banner/Banner.vue

@@ -121,6 +121,7 @@ $icon-size: 24px;
   margin: 15px 0;
   position: relative;
   width: 100%;
+  color: var(--body-text);
 
   &__icon {
     width: $icon-size * 2;

package/store/action-menu.js

@@ -22,9 +22,10 @@ export const state = function() {
 };
 
 export const getters = {
-  showing: state => state.show,
-  elem:    state => state.elem,
-  event:   state => state.event,
+  showing:   state => state.show,
+  elem:      state => state.elem,
+  event:     state => state.event,
+  resources: state => state.resources,
 
   options(state) {
     let selected = state.resources;

package/store/prefs.js

@@ -136,12 +136,13 @@ export const state = function() {
   return {
     cookiesLoaded: false,
     data:          {},
+    definitions,
   };
 };
 
 export const getters = {
   get: state => (key) => {
-    const definition = definitions[key];
+    const definition = state.definitions[key];
 
     if (!definition) {
       throw new Error(`Unknown preference: ${ key }`);
@@ -159,7 +160,7 @@ export const getters = {
   },
 
   defaultValue: state => (key) => {
-    const definition = definitions[key];
+    const definition = state.definitions[key];
 
     if (!definition) {
       throw new Error(`Unknown preference: ${ key }`);
@@ -169,7 +170,7 @@ export const getters = {
   },
 
   options: state => (key) => {
-    const definition = definitions[key];
+    const definition = state.definitions[key];
 
     if (!definition) {
       throw new Error(`Unknown preference: ${ key }`);
@@ -252,19 +253,25 @@ export const mutations = {
   },
 
   reset(state) {
-    for (const key in definitions) {
-      if ( definitions[key]?.asCookie ) {
+    for (const key in state.definitions) {
+      if ( state.definitions[key]?.asCookie ) {
         continue;
       }
       delete state.data[key];
     }
-  }
+  },
+
+  setDefinition(state, { name, definition = {} }) {
+    state.definitions[name] = definition;
+  },
 };
 
 export const actions = {
-  async set({ dispatch, commit, rootGetters }, opt) {
+  async set({
+    dispatch, commit, rootGetters, state
+  }, opt) {
     let { key, value } = opt; // eslint-disable-line prefer-const
-    const definition = definitions[key];
+    const definition = state.definitions[key];
     let server;
 
     if ( opt.val ) {
@@ -326,8 +333,8 @@ export const actions = {
       return;
     }
 
-    for (const key in definitions) {
-      const definition = definitions[key];
+    for (const key in state.definitions) {
+      const definition = state.definitions[key];
 
       if ( !definition.asCookie ) {
         continue;
@@ -441,8 +448,8 @@ export const actions = {
       prefsBeforeLogin = {};
     }
 
-    for (const key in definitions) {
-      const definition = definitions[key];
+    for (const key in state.definitions) {
+      const definition = state.definitions[key];
       let value = clone(server.data[key]);
 
       if (value === undefined && definition.inheritFrom) {

package/store/type-map.js

@@ -148,6 +148,8 @@ import { sortBy } from '@shell/utils/sort';
 import { haveV1Monitoring, haveV2Monitoring } from '@shell/utils/monitoring';
 import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 
+import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
+
 export const NAMESPACED = 'namespaced';
 export const CLUSTER_LEVEL = 'cluster';
 export const BOTH = 'both';
@@ -222,6 +224,30 @@ export function DSL(store, product, module = 'type-map') {
     },
 
     headers(type, headers) {
+      const extensionCols = store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+
+      // Try and insert the columns before the Age column, if that is the last column
+      let insertPosition = headers.length;
+
+      if (headers.length > 0) {
+        const lastColumn = headers[headers.length - 1];
+
+        if (lastColumn?.name === AGE.name) {
+          insertPosition--;
+        }
+      }
+
+      // adding extension defined cols to the correct header config
+      extensionCols.forEach((col) => {
+        if (col.locationConfig.resource) {
+          col.locationConfig.resource.forEach((resource) => {
+            if (resource && type === resource) {
+              headers.splice(insertPosition, 0, col);
+            }
+          });
+        }
+      });
+
       headers.forEach((header) => {
         // If on the client, then use the value getter if there is one
         if (header.getValue) {

package/types/shell/index.d.ts

@@ -47,6 +47,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";