@rancher/shell 3.0.6 → 3.0.8-rc.1

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

@@ -1,14 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
 import ChartReadme from '@shell/components/ChartReadme';
-import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
 import { getPluginChartVersionLabel, getPluginChartVersion } from '@shell/utils/uiplugins';
+import { isChartVersionHigher } from '@shell/config/uiplugins';
+import RcButton from '@components/RcButton/RcButton.vue';
+import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter.vue';
 
 export default {
+  emits: ['action'],
+
   async fetch() {
     const bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
     const { showHeader, bannerHeader } = JSON.parse(bannerSetting.value);
@@ -20,9 +24,10 @@ export default {
     }
   },
   components: {
-    Banner,
     ChartReadme,
-    LazyImage
+    LazyImage,
+    RcButton,
+    AppChartCardFooter
   },
   data() {
     return {
@@ -49,6 +54,60 @@ export default {
 
       return {};
     },
+
+    panelActions() {
+      const actions = [];
+
+      if (!this.info) {
+        return actions;
+      }
+
+      const selectedVersion = this.infoVersion;
+      const installedVersion = this.info.installedVersion;
+
+      if (!this.info.installed) {
+        if (this.info.installableVersions?.length) {
+          actions.push({
+            label:   this.t('catalog.chart.chartButton.action.install'),
+            action:  'install',
+            role:    'primary',
+            version: selectedVersion,
+            icon:    'icon-plus'
+          });
+        }
+      } else {
+        if (selectedVersion && installedVersion && selectedVersion !== installedVersion) {
+          if (isChartVersionHigher(selectedVersion, installedVersion)) {
+            actions.push({
+              label:   this.t('catalog.chart.chartButton.action.upgrade'),
+              action:  'upgrade',
+              role:    'primary',
+              version: selectedVersion,
+              icon:    'icon-upgrade-alt'
+            });
+          } else {
+            actions.push({
+              label:   this.t('catalog.chart.chartButton.action.downgrade'),
+              action:  'downgrade',
+              role:    'primary',
+              version: selectedVersion,
+              icon:    'icon-downgrade-alt'
+            });
+          }
+        }
+
+        if (!this.info.builtin) {
+          actions.push({
+            label:  this.t('plugins.uninstall.label'),
+            action: 'uninstall',
+            role:   'secondary',
+            icon:   'icon-delete'
+          });
+        }
+      }
+
+      return actions;
+    }
   },
   watch: {
     showSlideIn: {
@@ -65,12 +124,18 @@ export default {
     }
   },
   methods: {
+    onButtonClick(button) {
+      this.$emit('action', { ...button, plugin: this.info });
+      this.hide();
+    },
+
     show(info) {
       this.info = info;
       this.showSlideIn = true;
       this.version = null;
       this.versionInfo = null;
       this.versionError = null;
+      this.infoVersion = undefined;
 
       this.loadPluginVersionInfo();
     },
@@ -153,7 +218,13 @@ export default {
     },
 
     getVersionLabel(version) {
-      return getPluginChartVersionLabel(version);
+      const label = getPluginChartVersionLabel(version);
+
+      if (this.info.installed && version.version === this.info.installedVersion) {
+        return `${ label } (${ this.t('plugins.labels.current') })`;
+      }
+
+      return label;
     }
   }
 };
@@ -230,49 +301,66 @@ export default {
               </div>
             </div>
           </div>
-          <div>
-            <Banner
-              v-if="info.builtin"
-              color="warning"
-              :label="t('plugins.descriptions.built-in')"
-              class="mt-10"
-            />
-            <template v-else>
-              <Banner
-                v-if="!info.certified"
-                color="warning"
-                :label="t('plugins.descriptions.third-party')"
-                class="mt-10"
-              />
-              <Banner
-                v-if="info.experimental"
-                color="warning"
-                :label="t('plugins.descriptions.experimental')"
-                class="mt-10"
-              />
-            </template>
-          </div>
+          <AppChartCardFooter
+            v-if="info.tags && info.tags.length"
+            :items="info.tags"
+            class="plugin-tags-container"
+          />
 
-          <h3 v-if="info.versions.length">
-            {{ t('plugins.info.versions') }}
-          </h3>
-          <div class="plugin-versions mb-10">
+          <div class="plugin-versions-container">
+            <h3>
+              {{ t('plugins.info.versions') }}
+            </h3>
+            <div v-if="!info.versions.length">
+              <div class="version-link version-active version-builtin">
+                {{ info.displayVersion }}
+              </div>
+            </div>
             <div
-              v-for="v in info.versions"
-              :key="`${v.name}-${v.version}`"
+              v-else
+              class="plugin-versions"
             >
-              <a
-                v-clean-tooltip="handleVersionBtnTooltip(v)"
-                class="version-link"
-                :class="handleVersionBtnClass(v)"
-                :tabindex="!v.isVersionCompatible ? -1 : 0"
-                role="button"
-                :aria-label="t('plugins.viewVersionDetails', {name: v.name, version: v.version})"
-                @click="loadPluginVersionInfo(v.version)"
-                @keyup.enter.space="loadPluginVersionInfo(v.version)"
+              <div
+                v-for="v in info.versions"
+                :key="`${v.name}-${v.version}`"
               >
-                {{ getVersionLabel(v) }}
-              </a>
+                <a
+                  v-clean-tooltip="handleVersionBtnTooltip(v)"
+                  class="version-link"
+                  :class="handleVersionBtnClass(v)"
+                  :tabindex="!v.isVersionCompatible ? -1 : 0"
+                  role="button"
+                  :aria-label="t('plugins.viewVersionDetails', {name: v.name, version: v.version})"
+                  @click="loadPluginVersionInfo(v.version)"
+                  @keyup.enter.space="loadPluginVersionInfo(v.version)"
+                >
+                  {{ getVersionLabel(v) }}
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="plugin-actions-container">
+            <h3>
+              {{ t('plugins.info.actions') }}
+            </h3>
+            <div class="plugin-actions">
+              <template v-if="panelActions.length">
+                <RcButton
+                  v-for="btn in panelActions"
+                  :key="btn.action"
+                  class="mmr-3 mmb-3"
+                  :[btn.role]="true"
+                  @click="onButtonClick(btn)"
+                >
+                  <i :class="['icon', btn.icon, 'mmr-2']" />{{ btn.label }}
+                </RcButton>
+              </template>
+              <div
+                v-else
+                class="no-actions"
+              >
+                {{ t('plugins.info.noActions') }}
+              </div>
             </div>
           </div>
 
@@ -291,14 +379,6 @@ export default {
               :version-info="versionInfo"
             />
           </div>
-          <div v-if="!info.versions.length">
-            <h3>
-              {{ t('plugins.info.versions') }}
-            </h3>
-            <div class="version-link version-active version-builtin">
-              {{ info.displayVersion }}
-            </div>
-          </div>
         </div>
       </aside>
     </transition>
@@ -312,8 +392,6 @@ export default {
     z-index: 1;
 
     $slideout-width: 35%;
-    $title-height: 50px;
-    $padding: 5px;
     $slideout-width: 35%;
     --banner-top-offset: 0;
     $header-height: calc(54px + var(--banner-top-offset));
@@ -339,7 +417,7 @@ export default {
       z-index: 10;
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      padding: 12px;
 
       &.active {
         right: 0;
@@ -373,6 +451,10 @@ export default {
         flex-direction: column;
         overflow: hidden;
 
+        .banner.warning {
+          margin-top: 0;
+        }
+
         .plugin-info-detail {
           overflow: auto;
         }
@@ -380,15 +462,16 @@ export default {
 
       h3 {
         font-size: 14px;
-        margin: 15px 0 10px 0;
-        opacity: 0.7;
+        margin-bottom: 12px;
+        color: var(--disabled-text);
         text-transform: uppercase;
       }
 
       .plugin-header {
         border-bottom: 1px solid var(--border);
         display: flex;
-        padding-bottom: 20px;
+        padding-bottom: 16px;
+        margin-bottom: 16px;
 
         .plugin-title {
           flex: 1;
@@ -397,8 +480,7 @@ export default {
 
       .plugin-icon {
         font-size: 40px;
-        margin-right:10px;
-        color: #888;
+        margin-right: 12px;
         width: 44px;
         height: 44px;
 
@@ -419,11 +501,26 @@ export default {
         }
       }
 
-      .plugin-versions {
+      .plugin-tags-container {
+        margin-top: -8px;
+      }
+
+      .plugin-tags-container,
+      .plugin-versions-container,
+      .plugin-actions-container {
+        margin-bottom: 24px;
+      }
+
+      .plugin-versions,
+      .plugin-actions {
         display: flex;
         flex-wrap: wrap;
       }
 
+      .no-actions {
+        color: var(--disabled-text);
+      }
+
       .plugin-description {
         font-size: 15px;
       }
@@ -434,7 +531,7 @@ export default {
         padding: 2px 8px;
         border-radius: 5px;
         user-select: none;
-        margin: 0 5px 5px 0;
+        margin: 0 4px 4px 0;
         display: block;
 
         &.version-active {
@@ -498,7 +595,7 @@ export default {
 
         height: 0;
 
-        padding-bottom: 10px;
+        padding-bottom: 12px;
 
         :deep() .chart-readmes {
           flex: 1;

package/pages/c/_cluster/uiplugins/__tests__/PluginInfoPanel.test.ts

@@ -0,0 +1,102 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import PluginInfoPanel from '@shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue';
+
+jest.mock('@shell/config/uiplugins', () => ({
+  ...jest.requireActual('@shell/config/uiplugins'),
+  isChartVersionHigher: jest.fn((v1: string, v2: string) => v1 > v2),
+}));
+
+jest.mock('@shell/utils/uiplugins', () => ({
+  getPluginChartVersionLabel: jest.fn((v) => v.version),
+  getPluginChartVersion:      jest.fn(),
+}));
+
+const t = (key: string): string => key;
+
+describe('component: PluginInfoPanel', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mountComponent = () => {
+    return shallowMount(PluginInfoPanel, { global: { mocks: { t } } });
+  };
+
+  describe('panelActions', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should be empty if no info is provided', () => {
+      expect(wrapper.vm.panelActions).toStrictEqual([]);
+    });
+
+    it('should show install action if not installed and installable versions exist', () => {
+      wrapper.vm.info = { installed: false, installableVersions: [{ version: '1.0.0' }] };
+      wrapper.vm.infoVersion = '1.0.0';
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions).toHaveLength(1);
+      expect(actions[0].action).toBe('install');
+    });
+
+    it('should be empty if not installed and no installable versions exist', () => {
+      wrapper.vm.info = { installed: false, installableVersions: [] };
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions).toHaveLength(0);
+    });
+
+    it('should show uninstall action if installed and not builtin', () => {
+      wrapper.vm.info = { installed: true, builtin: false };
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions.some((action: any) => action.action === 'uninstall')).toBe(true);
+    });
+
+    it('should show upgrade action for a higher active version', () => {
+      wrapper.vm.info = { installed: true, installedVersion: '1.0.0' };
+      wrapper.vm.infoVersion = '1.1.0';
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions.some((action: any) => action.action === 'upgrade')).toBe(true);
+    });
+
+    it('should show downgrade action for a lower active version', () => {
+      wrapper.vm.info = { installed: true, installedVersion: '1.0.0' };
+      wrapper.vm.infoVersion = '0.9.0';
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions.some((action: any) => action.action === 'downgrade')).toBe(true);
+    });
+
+    it('should not show upgrade/downgrade if active version is same as installed', () => {
+      wrapper.vm.info = { installed: true, installedVersion: '1.0.0' };
+      wrapper.vm.infoVersion = '1.0.0';
+      const actions = wrapper.vm.panelActions;
+
+      expect(actions.some((action: any) => action.action === 'upgrade')).toBe(false);
+      expect(actions.some((action: any) => action.action === 'downgrade')).toBe(false);
+    });
+  });
+
+  describe('getVersionLabel', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should return the version label', () => {
+      wrapper.vm.info = { installed: false };
+      const version = { version: '1.0.0' };
+      const label = wrapper.vm.getVersionLabel(version);
+
+      expect(label).toBe('1.0.0');
+    });
+
+    it('should append (current) for the installed version', () => {
+      wrapper.vm.info = { installed: true, installedVersion: '1.0.0' };
+      const version = { version: '1.0.0' };
+      const label = wrapper.vm.getVersionLabel(version);
+
+      expect(label).toBe('1.0.0 (plugins.labels.current)');
+    });
+  });
+});