@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

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

@@ -7,7 +7,9 @@ import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 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 { isChartVersionHigher, uiPluginHasAnnotation } from '@shell/config/uiplugins';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import Banner from '@components/Banner/Banner.vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter.vue';
 
@@ -25,6 +27,7 @@ export default {
     }
   },
   components: {
+    Banner,
     ChartReadme,
     LazyImage,
     RcButton,
@@ -48,6 +51,24 @@ export default {
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    errorMessage() {
+      return this.info?.installedError || (this.info?.helmError ? this.t('plugins.helmError') : null);
+    },
+
+    warningMessages() {
+      const warnings = [];
+
+      if (uiPluginHasAnnotation(this.info?.chart, CATALOG_ANNOTATIONS.DEPRECATED, 'true')) {
+        warnings.push(this.t('plugins.deprecatedExtension'));
+      }
+
+      if (this.info?.incompatibilityMessage) {
+        warnings.push(this.info.incompatibilityMessage);
+      }
+
+      return warnings;
+    },
+
     applyDarkModeBg() {
       if (this.theme === 'dark') {
         return { 'dark-mode': true };
@@ -307,6 +328,20 @@ export default {
             :items="info.tags"
             class="plugin-tags-container"
           />
+          <Banner
+            v-for="(msg, i) in warningMessages"
+            :key="i"
+            color="warning"
+          >
+            {{ msg }}
+          </Banner>
+
+          <Banner
+            v-if="errorMessage"
+            color="error"
+          >
+            {{ errorMessage }}
+          </Banner>
 
           <div class="plugin-versions-container">
             <h3>
@@ -350,6 +385,7 @@ export default {
                   v-for="btn in panelActions"
                   :key="btn.action"
                   class="mmr-3 mmb-3"
+                  size="large"
                   :variant="btn.role"
                   @click="onButtonClick(btn)"
                 >
@@ -452,8 +488,10 @@ export default {
         flex-direction: column;
         overflow: hidden;
 
-        .banner.warning {
+        .banner.warning,
+        .banner.error {
           margin-top: 0;
+          margin-bottom: 32px;
         }
 
         .plugin-info-detail {

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

@@ -1,5 +1,6 @@
 import { shallowMount, VueWrapper } from '@vue/test-utils';
 import PluginInfoPanel from '@shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 jest.mock('@shell/config/uiplugins', () => ({
   ...jest.requireActual('@shell/config/uiplugins'),
@@ -99,4 +100,64 @@ describe('component: PluginInfoPanel', () => {
       expect(label).toBe('1.0.0 (plugins.labels.current)');
     });
   });
+
+  describe('errorMessage', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should return installedError if present', () => {
+      wrapper.vm.info = { installedError: 'install error' };
+
+      expect(wrapper.vm.errorMessage).toBe('install error');
+    });
+
+    it('should return translated helmError if present', () => {
+      wrapper.vm.info = { helmError: true };
+
+      expect(wrapper.vm.errorMessage).toBe('plugins.helmError');
+    });
+
+    it('should return null if no error', () => {
+      wrapper.vm.info = {};
+
+      expect(wrapper.vm.errorMessage).toBeNull();
+    });
+  });
+
+  describe('warningMessages', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should include deprecated message if the extension chart has the deprecated annotation', () => {
+      wrapper.vm.info = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] } };
+
+      expect(wrapper.vm.warningMessages).toContain('plugins.deprecatedExtension');
+    });
+
+    it('should include incompatibilityMessage if present', () => {
+      wrapper.vm.info = { incompatibilityMessage: 'incompatibility error' };
+
+      expect(wrapper.vm.warningMessages).toContain('incompatibility error');
+    });
+
+    it('should include both deprecated and incompatibility messages if both are present', () => {
+      wrapper.vm.info = {
+        chart:                  { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] },
+        incompatibilityMessage: 'incompatibility error'
+      };
+
+      expect(wrapper.vm.warningMessages).toStrictEqual([
+        'plugins.deprecatedExtension',
+        'incompatibility error'
+      ]);
+    });
+
+    it('should return an empty array if neither is present', () => {
+      wrapper.vm.info = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.CERTIFIED]: 'rancher' } }] } };
+
+      expect(wrapper.vm.warningMessages).toStrictEqual([]);
+    });
+  });
 });