@rancher/shell 3.0.4 → 3.0.5-rc.2

package/{pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue → dialog/ExtensionCatalogInstallDialog.vue}

@@ -10,7 +10,6 @@ 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,14 +97,41 @@ const initialState = () => {
 };
 
 export default {
-  emits: ['closed', 'refresh'],
+  emits: ['close'],
 
   components: {
-    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect, AppModal,
+    AsyncButton, Banner, LabeledInput, Loading, LabeledSelect
   },
 
   mixins: [ResourceManager],
 
+  props: {
+    /**
+     * Callback to trigger refresh banner on extensions screen
+     */
+    refresh: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
+  },
+
   async fetch() {
     const hash = {};
 
@@ -126,9 +152,7 @@ export default {
   data() {
     return {
       ...initialState(),
-      secondaryResourceData: null,
-      showModal:             false,
-      returnFocusSelector:   '[data-testid="extensions-catalog-load-dialog"]'
+      secondaryResourceData: null
     };
   },
 
@@ -163,18 +187,15 @@ export default {
       };
     },
 
-    showDialog() {
-      this.showModal = true;
-    },
-
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
 
       // Reset state
       Object.assign(this.$data, initialState());
       this.secondaryResourceData = this.secondaryResourceDataConfig();
       this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);
+
+      this.$emit('close');
     },
 
     async loadImage(btnCb) {
@@ -205,7 +226,8 @@ export default {
                 message: this.t('plugins.manageCatalog.imageLoad.success.message'),
                 timeout: 4000,
               }, { root: true });
-              this.$emit('refresh');
+
+              this.refresh();
             }
           } else {
             throw new Error('Unable to determine image name');
@@ -430,90 +452,80 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="catalogLoadDialog"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    @close="closeDialog()"
+  <Loading
+    v-if="$fetchState.loading"
+    mode="relative"
+  />
+  <div
+    v-else
+    class="plugin-install-dialog"
   >
-    <Loading
-      v-if="$fetchState.loading"
-      mode="relative"
-    />
-    <div
-      v-else
-      class="plugin-install-dialog"
-    >
-      <div>
-        <h4>
-          {{ t('plugins.manageCatalog.imageLoad.load') }}
-        </h4>
-        <p>
-          {{ t('plugins.manageCatalog.imageLoad.prompt') }}
-        </p>
-
-        <div class="custom mt-10">
-          <Banner
-            color="info"
-            :label="t('plugins.manageCatalog.imageLoad.banner')"
-            class="mt-10"
-          />
-        </div>
+    <div>
+      <h4>
+        {{ t('plugins.manageCatalog.imageLoad.load') }}
+      </h4>
+      <p>
+        {{ t('plugins.manageCatalog.imageLoad.prompt') }}
+      </p>
 
-        <div class="custom mt-10">
-          <div class="fields">
-            <LabeledInput
-              v-model:value.trim="deploymentValues.spec.template.spec.containers[0].image"
-              label-key="plugins.manageCatalog.imageLoad.fields.image.label"
-              placeholder-key="plugins.manageCatalog.imageLoad.fields.image.placeholder"
-            />
-          </div>
-        </div>
-        <div class="custom mt-10">
-          <div class="fields">
-            <LabeledSelect
-              v-model:value="imagePullSecrets"
-              :label="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.label')"
-              :tooltip="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.tooltip')"
-              :multiple="true"
-              :taggable="true"
-              :options="imagePullNamespacedSecrets"
-              option-label="metadata.name"
-              :reduce="service => service.metadata.name"
-            />
-            <Banner
-              color="warning"
-              class="mt-10"
-            >
-              <span v-clean-html="t('plugins.manageCatalog.imageLoad.fields.secrets.banner', {}, true)" />
-            </Banner>
-          </div>
-        </div>
+      <div class="custom mt-10">
+        <Banner
+          color="info"
+          :label="t('plugins.manageCatalog.imageLoad.banner')"
+          class="mt-10"
+        />
       </div>
 
       <div class="custom mt-10">
         <div class="fields">
-          <div class="dialog-buttons mt-20">
-            <button
-              class="btn role-secondary"
-              data-testid="image-load-ext-modal-cancel-btn"
-              @click="closeDialog()"
-            >
-              {{ t('generic.cancel') }}
-            </button>
-            <AsyncButton
-              mode="load"
-              data-testid="image-load-ext-modal-install-btn"
-              @click="loadImage"
-            />
-          </div>
+          <LabeledInput
+            v-model:value.trim="deploymentValues.spec.template.spec.containers[0].image"
+            label-key="plugins.manageCatalog.imageLoad.fields.image.label"
+            placeholder-key="plugins.manageCatalog.imageLoad.fields.image.placeholder"
+          />
+        </div>
+      </div>
+      <div class="custom mt-10">
+        <div class="fields">
+          <LabeledSelect
+            v-model:value="imagePullSecrets"
+            :label="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.label')"
+            :tooltip="t('plugins.manageCatalog.imageLoad.fields.imagePullSecrets.tooltip')"
+            :multiple="true"
+            :taggable="true"
+            :options="imagePullNamespacedSecrets"
+            option-label="metadata.name"
+            :reduce="service => service.metadata.name"
+          />
+          <Banner
+            color="warning"
+            class="mt-10"
+          >
+            <span v-clean-html="t('plugins.manageCatalog.imageLoad.fields.secrets.banner', {}, true)" />
+          </Banner>
+        </div>
+      </div>
+    </div>
+
+    <div class="custom mt-10">
+      <div class="fields">
+        <div class="dialog-buttons mt-20">
+          <button
+            class="btn role-secondary"
+            data-testid="image-load-ext-modal-cancel-btn"
+            @click="closeDialog()"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="load"
+            data-testid="image-load-ext-modal-install-btn"
+            @click="loadImage"
+          />
         </div>
       </div>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/{pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue → dialog/ExtensionCatalogUninstallDialog.vue}

@@ -6,12 +6,46 @@ 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 {
-  emits: ['closed', 'refresh', 'update'],
-
-  components: { AsyncButton, AppModal },
+  emits: ['close'],
+
+  components: { AsyncButton },
+
+  props: {
+    /**
+     * Catalog object
+     */
+    catalog: {
+      type:     Object,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback to trigger refresh banner on extensions screen
+     */
+    refresh: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
+  },
 
   async fetch() {
     if ( this.$store.getters['management/schemaFor'](UI_PLUGIN) ) {
@@ -23,11 +57,8 @@ export default {
 
   data() {
     return {
-      catalog:             undefined,
-      busy:                false,
-      plugins:             null,
-      showModal:           false,
-      returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]'
+      busy:    false,
+      plugins: null,
     };
   },
 
@@ -40,19 +71,14 @@ export default {
   },
 
   methods: {
-    showDialog(catalog) {
-      this.catalog = catalog;
-      this.busy = false;
-      this.showModal = true;
-    },
-
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
 
       if ( result ) {
-        this.$emit('refresh');
+        this.refresh();
       }
+
+      this.$emit('close');
     },
 
     async uninstall() {
@@ -76,7 +102,6 @@ export default {
       if ( pluginApps.length ) {
         try {
           pluginApps.forEach((app) => {
-            this.$emit('update', app.name, 'uninstall');
             app.remove();
           });
         } catch (e) {
@@ -120,46 +145,33 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="uninstallCatalogDialog"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    @close="closeDialog(false)"
-  >
-    <div
-      v-if="catalog"
-      class="plugin-install-dialog"
-    >
-      <h4 class="mt-10">
-        {{ t('plugins.uninstall.title', { name: catalog.name }) }}
-      </h4>
-      <div class="mt-10 dialog-panel">
-        <div class="dialog-info">
-          <p>
-            {{ t('plugins.uninstall.catalog') }}
-          </p>
-        </div>
-        <div class="dialog-buttons">
-          <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>
+  <div class="plugin-install-dialog">
+    <h4 class="mt-10">
+      {{ t('plugins.uninstall.title', { name: catalog.name }) }}
+    </h4>
+    <div class="mt-10 dialog-panel">
+      <div class="dialog-info">
+        <p>
+          {{ t('plugins.uninstall.catalog') }}
+        </p>
+      </div>
+      <div class="dialog-buttons">
+        <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>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/dialog/FeatureFlagListDialog.vue

@@ -0,0 +1,288 @@
+
+<script>
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import AsyncButton from '@shell/components/AsyncButton';
+
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  name: 'FeatureFlagListDialog',
+
+  emits: ['close'],
+
+  components: {
+    Card, Banner, LabeledInput, AsyncButton
+  },
+
+  props: {
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    // Only support updating one at a time - bulk does not make sense, as they may
+    // be in different states and with different restart values
+    this.update = this.resources[0];
+
+    if (this.update) {
+      this.restart = this.update.restartRequired;
+      // If the value is currently false, then we will be enabling it
+      this.enabling = !this.update.enabled;
+      this.updateMode = this.enabling ? 'activate' : 'deactivate';
+    }
+
+    this.serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
+
+    if (this.serverUrlSetting?.value) {
+      this.serverUrl = this.serverUrlSetting.value;
+    } else {
+      this.noUrlSet = true;
+      this.serverUrl = window.location.origin;
+    }
+  },
+
+  data() {
+    return {
+      update:           [],
+      updateMode:       'activate',
+      error:            null,
+      enabling:         false,
+      restart:          false,
+      waiting:          false,
+      timer:            null,
+      serverUrlSetting: {},
+      serverUrl:        '',
+      noUrlSet:         false,
+      vendor:           getVendor(),
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    promptForUrl() {
+      return this.update?.id === 'multi-cluster-management' && this.noUrlSet;
+    }
+  },
+
+  methods: {
+    close() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+
+      this.$emit('close');
+    },
+
+    toggleFlag(btnCB) {
+      if (this.restart) {
+        this.doToggleWithRestart(btnCB);
+      } else {
+        this.doToggle(btnCB);
+      }
+    },
+
+    async doToggle(btnCB) {
+      this.error = null;
+      try {
+        this.update.spec.value = !this.update.enabled;
+        await this.update.save();
+        btnCB(true);
+        this.close();
+      } catch (err) {
+        // An error occurred, so toggle back the value - the call failed, so the change was not made
+        this.update.spec.value = !this.update.enabled;
+        this.error = err.message || err;
+        btnCB(false);
+      }
+    },
+
+    doToggleWithRestart(btnCB) {
+      this.error = null;
+      try {
+        this.update.spec.value = !this.update.enabled;
+        // await can go back in when backend returns from the save before restarting
+        this.update.save();
+      } catch (err) {}
+
+      this.waitForBackend(btnCB, this.update.id);
+      this.waiting = true;
+    },
+
+    waitForBackend(btnCB, id) {
+      const url = `/v3/features/${ id }`;
+
+      this.timer = setTimeout(async() => {
+        try {
+          const response = await this.$axios.get(url, { timeout: 5000 });
+
+          if (response?.status === 200) {
+            btnCB(true);
+            this.waiting = false;
+            this.close();
+
+            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
+          }
+        } catch (e) {}
+
+        if (this.waiting) {
+          this.waitForBackend(btnCB, id);
+        }
+      }, 5000);
+    },
+
+    async saveUrl(btnCB) {
+      try {
+        this.serverUrlSetting.value = this.serverUrl;
+        await this.serverUrlSetting.save();
+        btnCB(true);
+      } catch (err) {
+        this.error = err;
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Card
+    v-if="!waiting"
+    class="prompt-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('featureFlags.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div
+        v-if="update"
+        class="mb-10"
+      >
+        <div v-if="enabling">
+          <span>
+            {{ t('featureFlags.promptActivate', {flag: update.id}) }}
+          </span>
+          <div
+            v-if="promptForUrl"
+            class="mt-10"
+          >
+            <span> {{ t('featureFlags.requiresSetting') }}</span>
+            <div
+              :style="{'align-items':'center'}"
+              class="row mt-10"
+            >
+              <LabeledInput
+                v-model:value="serverUrl"
+                :label="t('setup.serverUrl.label')"
+              />
+              <div class="col pl-5">
+                <AsyncButton @click="saveUrl" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <span v-else>
+          {{ t('featureFlags.promptDeactivate', {flag: update.id}) }}
+        </span>
+        <Banner
+          v-if="restart"
+          color="error"
+          :label="t('featureFlags.restartRequired', vendor)"
+        />
+      </div>
+      <div class="text-error mb-10">
+        {{ error }}
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        :disabled="promptForUrl && !serverUrlSetting.value"
+        :mode="updateMode"
+        class="btn bg-error ml-10"
+        @click="toggleFlag"
+      />
+    </template>
+  </Card>
+  <Card
+    v-else
+    class="prompt-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('featureFlags.restart.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="waiting">
+        <p>{{ t('featureFlags.restart.wait') }}</p>
+        <span class="restarting-icon">
+          <i class=" icon icon-spinner icon-spin" />
+        </span>
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.prompt-update {
+  &.card-container {
+    box-shadow: none;
+  }
+
+  :deep() .card-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .waiting {
+    text-align: center;
+    font-size: 14px;
+    margin: 10px 0;
+
+    p {
+      line-height: 20px;;
+    }
+  }
+
+  .restarting-icon {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+
+    > I {
+    font-size: 24px;
+    }
+  }
+}
+</style>