@rancher/shell 1.2.0 → 2.0.0

package/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue

@@ -10,6 +10,7 @@ import { allHash } from '@shell/utils/promise';
 import ResourceManager from '@shell/mixins/resource-manager';
 
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Loading from '@shell/components/Loading.vue';
 import { Banner } from '@components/Banner';
@@ -98,7 +99,7 @@ const initialState = () => {
 
 export default {
   components: {
-    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect
+    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect, AppModal,
   },
 
   mixins: [ResourceManager],
@@ -123,7 +124,8 @@ export default {
   data() {
     return {
       ...initialState(),
-      secondaryResourceData: null
+      secondaryResourceData: null,
+      showModal:             false,
     };
   },
 
@@ -159,11 +161,11 @@ export default {
     },
 
     showDialog() {
-      this.$modal.show('catalogLoadDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('catalogLoadDialog');
+      this.showModal = false;
       this.$emit('closed', result);
 
       // Reset state
@@ -425,11 +427,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog()"
+    @close="closeDialog()"
   >
     <Loading
       v-if="$fetchState.loading"
@@ -469,7 +472,8 @@ export default {
             <div class="fields">
               <LabeledSelect
                 v-model="imagePullSecrets"
-                :label="t('workload.container.imagePullSecrets')"
+                :label="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.label')"
+                :tooltip="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.tooltip')"
                 :multiple="true"
                 :taggable="true"
                 :options="imagePullNamespacedSecrets"
@@ -506,7 +510,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

package/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -6,9 +6,10 @@ import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import { allHash } from '@shell/utils/promise';
 
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  components: { AsyncButton },
+  components: { AsyncButton, AppModal },
 
   async fetch() {
     if ( this.$store.getters['management/schemaFor'](UI_PLUGIN) ) {
@@ -20,7 +21,7 @@ export default {
 
   data() {
     return {
-      catalog: undefined, busy: false, plugins: null
+      catalog: undefined, busy: false, plugins: null, showModal: false,
     };
   },
 
@@ -36,11 +37,11 @@ export default {
     showDialog(catalog) {
       this.catalog = catalog;
       this.busy = false;
-      this.$modal.show('uninstallCatalogDialog');
+      this.showModal = true;
     },
 
     closeDialog(result) {
-      this.$modal.hide('uninstallCatalogDialog');
+      this.showModal = false;
       this.$emit('closed', result);
 
       if ( result ) {
@@ -113,10 +114,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="catalog"
@@ -148,7 +151,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

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

@@ -7,13 +7,12 @@ import { SERVICE, WORKLOAD_TYPES } from '@shell/config/types';
 import { UI_PLUGIN_LABELS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import { UI_PLUGIN_CATALOG } from '@shell/config/table-headers';
 
-import ActionMenu from '@shell/components/ActionMenu';
 import ResourceTable from '@shell/components/ResourceTable';
 
 export default {
   name: 'CatalogList',
 
-  components: { ActionMenu, ResourceTable },
+  components: { ResourceTable },
 
   mixins: [ResourceManager],
 
@@ -29,10 +28,7 @@ export default {
 
     return {
       actions,
-      catalogHeaders:    UI_PLUGIN_CATALOG,
-      menuTargetElement: null,
-      menuTargetEvent:   null,
-      menuOpen:          false,
+      catalogHeaders: UI_PLUGIN_CATALOG,
     };
   },
 
@@ -49,6 +45,7 @@ export default {
 
     catalogRows() {
       const rows = [];
+      const actions = this.actions;
 
       if ( !isEmpty(this.namespacedDeployments) ) {
         this.namespacedDeployments.forEach((deploy) => {
@@ -57,11 +54,13 @@ export default {
 
           if ( deployName ) {
             const out = {
-              name:    deployName,
-              state:   deploy.metadata?.state?.name,
-              image:   deploy.spec?.template?.spec?.containers[0]?.image,
-              service: null,
-              repo:    null
+              name:                       deployName,
+              state:                      deploy.metadata?.state?.name,
+              image:                      deploy.spec?.template?.spec?.containers[0]?.image,
+              service:                    null,
+              repo:                       null,
+              availableActions:           actions,
+              showCatalogUninstallDialog: () => this.$emit('showCatalogUninstallDialog', out)
             };
             const keys = ['service', 'repo'];
 
@@ -77,20 +76,6 @@ export default {
       return rows;
     }
   },
-
-  methods: {
-    setMenu(event) {
-      this.menuOpen = !!event;
-
-      if (event) {
-        this.menuTargetElement = this.$refs.catalogActions;
-        this.menuTargetEvent = event;
-      } else {
-        this.menuTargetElement = undefined;
-        this.menuTargetEvent = undefined;
-      }
-    }
-  }
 };
 </script>
 
@@ -118,27 +103,6 @@ export default {
             </button>
           </div>
         </template>
-        <template #row-actions="{row}">
-          <button
-            ref="catalogActions"
-            aria-haspopup="true"
-            type="button"
-            class="btn btn-sm role-multi-action actions"
-            data-testid="extensions-page-catalog-row-menu"
-            @click="setMenu"
-          >
-            <i class="icon icon-actions" />
-          </button>
-          <ActionMenu
-            :custom-actions="actions"
-            :open="menuOpen"
-            :use-custom-target-element="true"
-            :custom-target-element="menuTargetElement"
-            :custom-target-event="menuTargetEvent"
-            @close="setMenu(false)"
-            @showCatalogUninstallDialog="e => $emit('showCatalogUninstallDialog', row, e.event)"
-          />
-        </template>
       </ResourceTable>
     </div>
   </div>

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

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
@@ -10,6 +11,7 @@ export default {
     AsyncButton,
     Checkbox,
     LabeledInput,
+    AppModal,
   },
 
   data() {
@@ -19,6 +21,7 @@ export default {
       persist:           false,
       canModifyName:     true,
       canModifyLocation: true,
+      showModal:         false,
     };
   },
 
@@ -50,10 +53,10 @@ export default {
 
   methods: {
     showDialog() {
-      this.$modal.show('developerInstallPluginDialog');
+      this.showModal = true;
     },
     closeDialog(result) {
-      this.$modal.hide('developerInstallPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -104,7 +107,8 @@ export default {
               metadata: {
                 developer: 'true',
                 direct:    'true'
-              }
+              },
+              noAuth: true
             }
           }
         });
@@ -142,10 +146,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog()"
   >
     <div class="plugin-install-dialog">
       <h4>
@@ -194,7 +200,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,7 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import AppModal from '@shell/components/AppModal.vue';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
@@ -13,6 +14,7 @@ export default {
     AsyncButton,
     Banner,
     LabeledSelect,
+    AppModal,
   },
 
   async fetch() {
@@ -31,6 +33,8 @@ export default {
       version:                '',
       update:                 false,
       mode:                   '',
+      showModal:              false,
+      chartVersionInfo:       null
     };
   },
 
@@ -63,6 +67,10 @@ export default {
 
     buttonMode() {
       return this.update ? 'update' : 'install';
+    },
+
+    chartVersionLoadsWithoutAuth() {
+      return this.chartVersionInfo?.values?.plugin?.noAuth;
     }
   },
 
@@ -101,11 +109,37 @@ export default {
 
       this.busy = false;
       this.update = mode !== 'install';
-      this.$modal.show('installPluginDialog');
+      this.showModal = true;
+    },
+
+    async loadVersionInfo() {
+      try {
+        this.busy = true;
+        const plugin = this.plugin;
+
+        // Find the version that the user wants to install
+        const version = plugin.versions?.find((v) => v.version === this.version);
+
+        if (!version) {
+          this.busy = false;
+
+          return;
+        }
+
+        this.chartVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
+          repoType:    version.repoType,
+          repoName:    version.repoName,
+          chartName:   plugin.chart.chartName,
+          versionName: this.version,
+        });
+      } catch (e) {
+      } finally {
+        this.busy = false;
+      }
     },
 
     closeDialog(result) {
-      this.$modal.hide('installPluginDialog');
+      this.showModal = false;
       this.$emit('closed', result);
     },
 
@@ -125,21 +159,9 @@ export default {
         return;
       }
 
+      const image = this.chartVersionInfo?.values?.image?.repository || '';
       // is the image used by the chart in the rancher org?
-      let isRancherImage = false;
-
-      try {
-        const chartVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
-          repoType:    version.repoType,
-          repoName:    version.repoName,
-          chartName:   plugin.chart.chartName,
-          versionName: this.version,
-        });
-
-        const image = chartVersionInfo?.values?.image?.repository || '';
-
-        isRancherImage = image.startsWith('rancher/');
-      } catch (e) {}
+      const isRancherImage = image.startsWith('rancher/');
 
       // See if there is already a plugin with this name
       let exists = false;
@@ -210,15 +232,23 @@ export default {
         this.closeDialog(plugin);
       }
     }
+  },
+  watch: {
+    version() {
+      this.chartVersionInfo = null;
+      this.loadVersionInfo();
+    }
   }
 };
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    @close="closeDialog(false)"
   >
     <div
       v-if="plugin"
@@ -232,6 +262,11 @@ export default {
           <p>
             {{ t(`plugins.${ mode }.prompt`) }}
           </p>
+          <Banner
+            v-if="chartVersionLoadsWithoutAuth"
+            color="warning"
+            :label="t('plugins.warnNoAuth')"
+          />
           <Banner
             v-if="!plugin.certified"
             color="warning"
@@ -266,7 +301,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>