@rancher/shell 0.3.16 → 0.3.18

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

@@ -0,0 +1,177 @@
+<script>
+import { CATALOG } from '@shell/config/types';
+import Dialog from '@shell/components/Dialog.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import {
+  UI_PLUGINS_REPO_NAME,
+  UI_PLUGINS_REPO_URL,
+  UI_PLUGINS_REPO_BRANCH,
+  UI_PLUGINS_PARTNERS_REPO_NAME,
+  UI_PLUGINS_PARTNERS_REPO_URL,
+  UI_PLUGINS_PARTNERS_REPO_BRANCH,
+} from '@shell/config/uiplugins';
+
+export default {
+  components: {
+    Checkbox,
+    Dialog,
+  },
+
+  async fetch() {
+    if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
+      this.repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
+    }
+  },
+
+  data() {
+    return {
+      errors:   [],
+      repos:    [],
+      addRepos: {
+        official: true,
+        partners: true
+      },
+      reposInfo: {
+        official: {
+          repo:   undefined,
+          name:   UI_PLUGINS_REPO_NAME,
+          url:    UI_PLUGINS_REPO_URL,
+          branch: UI_PLUGINS_REPO_BRANCH,
+        },
+        partners: {
+          repo:   undefined,
+          name:   UI_PLUGINS_PARTNERS_REPO_NAME,
+          url:    UI_PLUGINS_PARTNERS_REPO_URL,
+          branch: UI_PLUGINS_PARTNERS_REPO_BRANCH,
+        }
+      }
+    };
+  },
+
+  computed: {
+    hasRancherUIPluginsRepo() {
+      return !!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL);
+    },
+    hasRancherUIPartnersPluginsRepo() {
+      return !!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL);
+    },
+    isAnyRepoAvailableForInstall() {
+      return !this.hasRancherUIPluginsRepo || !this.hasRancherUIPartnersPluginsRepo;
+    }
+  },
+
+  methods: {
+    showDialog() {
+      this.addRepos = {
+        official: !this.hasRancherUIPluginsRepo,
+        partners: !this.hasRancherUIPartnersPluginsRepo,
+      };
+      this.$modal.show('add-extensions-repos');
+    },
+
+    async doAddRepos(btnCb) {
+      this.errors = [];
+      const promises = [];
+
+      for (const key in this.addRepos) {
+        if (this.addRepos[key]) {
+          const pluginCR = await this.$store.dispatch('management/create', {
+            type:     CATALOG.CLUSTER_REPO,
+            metadata: { name: this.reposInfo[key].name },
+            spec:     {
+              gitBranch: this.reposInfo[key].branch,
+              gitRepo:   this.reposInfo[key].url,
+            }
+          });
+
+          promises.push(pluginCR.save());
+        }
+      }
+
+      if (promises.length) {
+        const res = await Promise.allSettled(promises);
+
+        res.forEach((result) => {
+          if (result.status === 'rejected') {
+            console.error(result.reason); // eslint-disable-line no-console
+
+            this.errors.push(result.reason);
+          }
+        });
+      }
+
+      this.$emit('done');
+
+      btnCb(true);
+    },
+  }
+};
+</script>
+<template>
+  <Dialog
+    name="add-extensions-repos"
+    :title="t('plugins.addRepos.title')"
+    mode="add"
+    data-testid="add-extensions-repos-modal"
+    @okay="doAddRepos"
+  >
+    <template>
+      <p class="mb-20">
+        {{ t('plugins.addRepos.prompt', {}, true) }}
+      </p>
+      <!-- Official repo -->
+      <div
+        class="mb-15"
+      >
+        <Checkbox
+          v-model="addRepos.official"
+          :disabled="hasRancherUIPluginsRepo"
+          :primary="true"
+          label-key="plugins.setup.install.addRancherRepo"
+          data-testid="add-extensions-repos-modal-add-official-repo"
+        />
+        <div
+          v-if="hasRancherUIPluginsRepo"
+          class="checkbox-info"
+        >
+          ({{ t('plugins.setup.installed') }})
+        </div>
+      </div>
+      <!-- Partners repo -->
+      <div
+        class="mb-15"
+      >
+        <Checkbox
+          v-model="addRepos.partners"
+          :disabled="hasRancherUIPartnersPluginsRepo"
+          :primary="true"
+          label-key="plugins.setup.install.addPartnersRancherRepo"
+          data-testid="add-extensions-repos-modal-add-partners-repo"
+        />
+        <div
+          v-if="hasRancherUIPartnersPluginsRepo"
+          class="checkbox-info"
+        >
+          ({{ t('plugins.setup.installed') }})
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<style lang="scss" scoped>
+  .enable-plugin-support {
+    font-size: 14px;
+    margin-top: 20px;
+  }
+
+  .plugin-setup-error {
+    font-size: 14px;
+    color: var(--error);
+    margin: 10px 0 0 0;
+  }
+
+  .checkbox-info {
+    margin-left: 20px;
+    opacity: 0.7;
+  }
+</style>

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

@@ -66,8 +66,9 @@ export default {
       const versionName = version || this.info.displayVersion;
 
       const isVersionNotCompatibleWithUi = this.info.versions?.find((v) => v.version === versionName && !v.isCompatibleWithUi);
+      const isVersionNotCompatibleWithKubeVersion = this.info.versions?.find((v) => v.version === versionName && !v.isCompatibleWithKubeVersion);
 
-      if (!this.info.chart || isVersionNotCompatibleWithUi) {
+      if (!this.info.chart || isVersionNotCompatibleWithUi || isVersionNotCompatibleWithKubeVersion) {
         return;
       }
 
@@ -103,6 +104,21 @@ export default {
         this.versionError = true;
         console.error('Unable to fetch VersionInfo: ', e); // eslint-disable-line no-console
       }
+    },
+
+    handleVersionBtnTooltip(version) {
+      if (version.requiredUiVersion) {
+        return this.t('plugins.info.requiresRancherVersion', { version: version.requiredUiVersion });
+      }
+      if (version.requiredKubeVersion) {
+        return this.t('plugins.info.requiresKubeVersion', { version: version.requiredKubeVersion });
+      }
+
+      return '';
+    },
+
+    handleVersionBtnClass(version) {
+      return { 'version-active': version.version === this.infoVersion, disabled: !version.isCompatibleWithUi || !version.isCompatibleWithKubeVersion };
     }
   }
 };
@@ -206,9 +222,9 @@ export default {
             :key="v.version"
           >
             <a
-              v-clean-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
+              v-clean-tooltip="handleVersionBtnTooltip(v)"
               class="version-link"
-              :class="{'version-active': v.version === infoVersion, 'disabled': !v.isCompatibleWithUi}"
+              :class="handleVersionBtnClass(v)"
               @click="loadPluginVersionInfo(v.version)"
             >
               {{ v.version }}

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

@@ -1,13 +1,18 @@
 <script>
+import { mapGetters } from 'vuex';
 import { CATALOG, UI_PLUGIN } from '@shell/config/types';
 import Dialog from '@shell/components/Dialog.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import {
   UI_PLUGIN_NAMESPACE,
   UI_PLUGIN_CHARTS,
+  UI_PLUGIN_OPERATOR_CRD_CHART_NAME,
   UI_PLUGINS_REPO_NAME,
   UI_PLUGINS_REPO_URL,
-  UI_PLUGIN_OPERATOR_CRD_CHART_NAME,
+  UI_PLUGINS_REPO_BRANCH,
+  UI_PLUGINS_PARTNERS_REPO_NAME,
+  UI_PLUGINS_PARTNERS_REPO_URL,
+  UI_PLUGINS_PARTNERS_REPO_BRANCH,
 } from '@shell/config/uiplugins';
 
 export default {
@@ -18,9 +23,8 @@ export default {
 
   async fetch() {
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
-      const repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
-
-      this.defaultRepo = repos.find((r) => r.name === UI_PLUGINS_REPO_NAME && r.spec.gitRepo === UI_PLUGINS_REPO_URL);
+      // we need to force the request, so that we know at all times if what's the status of the offical and partners repos (installed or not)
+      await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
     }
 
     if (this.$store.getters['management/schemaFor'](UI_PLUGIN)) {
@@ -34,14 +38,42 @@ export default {
 
   data() {
     return {
-      errors:              [],
-      defaultRepo:         undefined,
-      removeRepo:          false,
+      errors:      [],
+      removeRepos: {
+        official: true,
+        partners: true
+      },
+      reposInfo: {
+        official: {
+          name:   UI_PLUGINS_REPO_NAME,
+          url:    UI_PLUGINS_REPO_URL,
+          branch: UI_PLUGINS_REPO_BRANCH,
+        },
+        partners: {
+          name:   UI_PLUGINS_PARTNERS_REPO_NAME,
+          url:    UI_PLUGINS_PARTNERS_REPO_URL,
+          branch: UI_PLUGINS_PARTNERS_REPO_BRANCH,
+        }
+      },
       removeCRD:           true,
       hasPluginsInstalled: false,
     };
   },
 
+  computed: {
+    ...mapGetters({ repos: 'catalog/repos' }),
+    officialRepo() {
+      const repo = this.repos.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL);
+
+      return repo?.id ? repo : undefined;
+    },
+    partnersRepo() {
+      const repo = this.repos.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL);
+
+      return repo?.id ? repo : undefined;
+    }
+  },
+
   methods: {
     async removeChart(name) {
       const apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
@@ -58,7 +90,10 @@ export default {
     },
 
     showDialog() {
-      this.removeRepo = !!this.defaultRepo;
+      this.removeRepos = {
+        official: !!this.officialRepo,
+        partners: !!this.partnersRepo,
+      };
       this.$modal.show('confirm-uiplugins-remove');
     },
 
@@ -83,14 +118,26 @@ export default {
         }
       }
 
-      if (this.removeRepo && this.defaultRepo) {
-        try {
-          await this.defaultRepo.remove();
-        } catch (e) {
-          this.errors.push(e.message);
+      // remove extension repos that have been picked
+      const promises = [];
+
+      for (const key in this.removeRepos) {
+        if (this.removeRepos[key] && this[`${ key }Repo`]) {
+          promises.push(this[`${ key }Repo`].remove());
         }
       }
 
+      const res = await Promise.allSettled(promises);
+
+      res.forEach((result) => {
+        if (result.status === 'rejected') {
+          console.error(result.reason); // eslint-disable-line no-console
+
+          this.errors.push(result.reason);
+        }
+      });
+
+      // forget PLUGINS type from store as it's not needed
       this.$store.dispatch('management/forgetType', UI_PLUGIN);
 
       await new Promise((resolve) => setTimeout(resolve, 5000));
@@ -111,21 +158,43 @@ export default {
     @okay="doRemove"
   >
     <template>
-      <p>
+      <p class="mb-20">
         {{ t('plugins.setup.remove.prompt') }}
       </p>
+      <!-- Official repo -->
       <div
-        v-if="!!defaultRepo"
-        class="mt-20"
+        class="mb-15"
       >
         <Checkbox
-          v-model="removeRepo"
+          v-model="removeRepos.official"
           :primary="true"
-          label-key="plugins.setup.remove.registry.title"
-          data-testid="disable-ext-modal-remove-repo"
+          :disabled="!officialRepo"
+          label-key="plugins.setup.remove.registry.official.title"
+          data-testid="disable-ext-modal-remove-official-repo"
         />
-        <div class="checkbox-info">
-          {{ t('plugins.setup.remove.registry.prompt') }}
+        <div
+          v-if="!officialRepo"
+          class="checkbox-info"
+        >
+          ({{ t('plugins.setup.uninstalled') }})
+        </div>
+      </div>
+      <!-- Partners repo -->
+      <div
+        class="mb-15"
+      >
+        <Checkbox
+          v-model="removeRepos.partners"
+          :primary="true"
+          :disabled="!partnersRepo"
+          label-key="plugins.setup.remove.registry.partners.title"
+          data-testid="disable-ext-modal-remove-partners-repo"
+        />
+        <div
+          v-if="!partnersRepo"
+          class="checkbox-info"
+        >
+          ({{ t('plugins.setup.uninstalled') }})
         </div>
       </div>
       <div

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

@@ -1,10 +1,12 @@
 <script>
+import { mapGetters } from 'vuex';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton';
 import IconMessage from '@shell/components/IconMessage.vue';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import Dialog from '@shell/components/Dialog.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import Banner from '@components/Banner/Banner.vue';
 
 import {
   UI_PLUGIN_NAMESPACE,
@@ -13,12 +15,16 @@ import {
   UI_PLUGINS_REPO_NAME,
   UI_PLUGINS_REPO_URL,
   UI_PLUGINS_REPO_BRANCH,
+  UI_PLUGINS_PARTNERS_REPO_NAME,
+  UI_PLUGINS_PARTNERS_REPO_URL,
+  UI_PLUGINS_PARTNERS_REPO_BRANCH,
 } from '@shell/config/uiplugins';
 
 export default {
   components: {
     AsyncButton,
     Checkbox,
+    Banner,
     IconMessage,
     Dialog,
   },
@@ -43,7 +49,8 @@ export default {
       this.installCharts = found;
 
       if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
-        await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO });
+        // we need to force the request, so that we know at all times if what's the status of the offical and partners repos (installed or not)
+        await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
       }
     }
 
@@ -57,22 +64,41 @@ export default {
 
   data() {
     return {
-      loading:                true,
-      haveCharts:             false,
-      installCharts:          [],
-      errors:                 [],
-      addRepo:                true,
+      loading:       true,
+      haveCharts:    false,
+      installCharts: [],
+      errors:        [],
+      addRepos:      {
+        official: true,
+        partners: true,
+      },
+      reposInfo: {
+        official: {
+          name:   UI_PLUGINS_REPO_NAME,
+          url:    UI_PLUGINS_REPO_URL,
+          branch: UI_PLUGINS_REPO_BRANCH,
+        },
+        partners: {
+          name:   UI_PLUGINS_PARTNERS_REPO_NAME,
+          url:    UI_PLUGINS_PARTNERS_REPO_URL,
+          branch: UI_PLUGINS_PARTNERS_REPO_BRANCH,
+        }
+      },
       buttonState:            ASYNC_BUTTON_STATES.ACTION,
       defaultRegistrySetting: null,
     };
   },
 
   computed: {
+    ...mapGetters({ repos: 'catalog/repos' }),
     hasRancherUIPluginsRepo() {
-      // Look to see if the Rancher UI Plugins repository is already installed
-      const repos = this.$store.getters['catalog/repos'];
-
-      return !!repos.find((r) => r.name === UI_PLUGINS_REPO_NAME);
+      return !!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_REPO_URL);
+    },
+    hasRancherUIPartnersPluginsRepo() {
+      return !!this.repos.find((r) => r.urlDisplay === UI_PLUGINS_PARTNERS_REPO_URL);
+    },
+    isAnyRepoAvailableForInstall() {
+      return !this.hasRancherUIPluginsRepo || !this.hasRancherUIPartnersPluginsRepo;
     }
   },
 
@@ -121,11 +147,17 @@ export default {
       });
     },
 
-    enable() {
+    async enable() {
       this.errors = [];
 
-      // Reset checkbox bsed on if the repo is already installed
-      this.addRepo = !this.hasRancherUIPluginsRepo;
+      // force update of cluster repos so that modal have the correct information about the official and partners repo
+      this.$emit('refreshCharts');
+
+      // Reset checkbox based on if the repo is already installed
+      this.addRepos = {
+        official: !this.hasRancherUIPluginsRepo,
+        partners: !this.hasRancherUIPartnersPluginsRepo,
+      };
 
       this.$modal.show('confirm-uiplugins-setup');
     },
@@ -137,8 +169,8 @@ export default {
       if (ok) {
         this.buttonState = ASYNC_BUTTON_STATES.WAITING;
 
-        if (this.addRepo) {
-          await this.addDefaultHelmRepository();
+        if (Object.values(this.addRepos).find((v) => v)) {
+          await this.addDefaultHelmRepositories();
         }
 
         await this.installPluginCharts();
@@ -151,25 +183,33 @@ export default {
       }
     },
 
-    async addDefaultHelmRepository() {
-      const name = UI_PLUGINS_REPO_NAME;
+    async addDefaultHelmRepositories() {
+      const promises = [];
+
+      for (const key in this.addRepos) {
+        if (this.addRepos[key]) {
+          const pluginCR = await this.$store.dispatch('management/create', {
+            type:     CATALOG.CLUSTER_REPO,
+            metadata: { name: this.reposInfo[key].name },
+            spec:     {
+              gitBranch: this.reposInfo[key].branch,
+              gitRepo:   this.reposInfo[key].url,
+            }
+          });
+
+          promises.push(pluginCR.save());
+        }
+      }
 
-      try {
-        const pluginCR = await this.$store.dispatch('management/create', {
-          type:     CATALOG.CLUSTER_REPO,
-          metadata: { name },
-          spec:     {
-            gitBranch: UI_PLUGINS_REPO_BRANCH,
-            gitRepo:   UI_PLUGINS_REPO_URL,
-          }
-        });
+      const res = await Promise.allSettled(promises);
 
-        return pluginCR.save();
-      } catch (e) {
-        console.error(e); // eslint-disable-line no-console
+      res.forEach((result) => {
+        if (result.status === 'rejected') {
+          console.error(result.reason); // eslint-disable-line no-console
 
-        this.errors.push(e.message);
-      }
+          this.errors.push(result.reason);
+        }
+      });
     },
 
     async installPluginCharts() {
@@ -234,20 +274,50 @@ export default {
       @closed="dialogClosed"
     >
       <template>
-        <p>
+        <p class="mb-20">
           {{ t('plugins.setup.install.prompt') }}
         </p>
+        <Banner
+          v-if="isAnyRepoAvailableForInstall"
+          color="info"
+          class="mb-20"
+        >
+          {{ t('plugins.setup.install.airgap') }}
+        </Banner>
+        <!-- Official rancher repo -->
         <div
-          v-if="!hasRancherUIPluginsRepo"
-          class="mt-20"
+          class="mb-15"
         >
           <Checkbox
-            v-model="addRepo"
+            v-model="addRepos.official"
+            :disabled="hasRancherUIPluginsRepo"
             :primary="true"
             label-key="plugins.setup.install.addRancherRepo"
+            data-testid="extension-enable-operator-official-repo"
+          />
+          <div
+            v-if="hasRancherUIPluginsRepo"
+            class="checkbox-info"
+          >
+            ({{ t('plugins.setup.installed') }})
+          </div>
+        </div>
+        <!-- Partners rancher repo -->
+        <div
+          class="mb-15"
+        >
+          <Checkbox
+            v-model="addRepos.partners"
+            :disabled="hasRancherUIPartnersPluginsRepo"
+            :primary="true"
+            label-key="plugins.setup.install.addPartnersRancherRepo"
+            data-testid="extension-enable-operator-partners-repo"
           />
-          <div class="checkbox-info">
-            {{ t('plugins.setup.install.airgap') }}
+          <div
+            v-if="hasRancherUIPartnersPluginsRepo"
+            class="checkbox-info"
+          >
+            ({{ t('plugins.setup.installed') }})
           </div>
         </div>
       </template>