@rancher/shell 3.0.4 → 3.0.5-rc.2

package/dialog/ForceMachineRemoveDialog.vue

@@ -34,7 +34,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
 
     nameToMatch() {
-      return this.machine.spec.infrastructureRef.name;
+      return this.machine?.spec?.infrastructureRef?.name;
     },
 
     deleteDisabled() {
@@ -88,7 +88,10 @@ export default {
           {{ t('promptForceRemove.confirmName') }}
         </div>
         <div class="mb-10">
-          <CopyToClipboardText :text="nameToMatch" />
+          <CopyToClipboardText
+            :aria-label="t('promptForceRemove.ariaLabel')"
+            :text="nameToMatch"
+          />
         </div>
         <input
           id="confirm"

package/{components/Import.vue → dialog/ImportDialog.vue}

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import YamlEditor from '@shell/components/YamlEditor';
 import FileSelector from '@shell/components/form/FileSelector';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -20,7 +19,6 @@ export default {
     AsyncButton,
     Banner,
     Card,
-    Loading,
     YamlEditor,
     FileSelector,
     LabeledSelect,
@@ -120,12 +118,9 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <Card
-    v-else
     :show-highlight-border="false"
     data-testid="import-yaml"
-    :trigger-focus-trap="true"
   >
     <template #title>
       <div style="display: block; width: 100%;">

package/{pages/c/_cluster/uiplugins/InstallDialog.vue → dialog/InstallExtensionDialog.vue}

@@ -1,7 +1,6 @@
 <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';
@@ -11,16 +10,89 @@ import { SETTING } from '@shell/config/settings';
 // Note: This dialog handles installation and update of a plugin
 
 export default {
-  emits: ['closed', 'update'],
+  emits: ['close'],
 
   components: {
     AsyncButton,
     Banner,
-    LabeledSelect,
-    AppModal,
+    LabeledSelect
+  },
+
+  props: {
+    /**
+     * Plugin object
+     */
+    plugin: {
+      type:     Object,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Modal mode
+     */
+    mode: {
+      type:     String,
+      default:  '',
+      required: true
+    },
+    /**
+     * Callback to update install status on extensions main screen
+     */
+    updateStatus: {
+      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() {
+    // Default to latest version on install (this is default on the plugin)
+    this.version = this.plugin?.displayVersion;
+
+    if (this.mode === 'update') {
+      this.currentVersion = this.plugin?.displayVersion;
+
+      // Update to latest version, so take the first version
+      if (this.plugin?.installableVersions?.length > 0) {
+        this.version = this.plugin?.installableVersions?.[0]?.version;
+      }
+    } else if (this.mode === 'rollback') {
+      // Find the newest version once we remove the current version
+      const versionNames = this.plugin?.installableVersions.filter((v) => v.version !== this.plugin?.displayVersion);
+
+      this.currentVersion = this.plugin?.displayVersion;
+
+      if (versionNames.length > 0) {
+        this.version = versionNames[0].version;
+      }
+    }
+
+    // Make sure we have the version available
+    const versionChart = this.plugin?.installableVersions?.find((v) => v.version === this.version);
+
+    if (!versionChart) {
+      this.version = this.plugin?.installableVersions?.[0]?.version;
+    }
+
+    this.busy = false;
+    this.update = this.mode !== 'install';
+
     this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.SETTING,
       id:   SETTING.SYSTEM_DEFAULT_REGISTRY,
@@ -31,12 +103,9 @@ export default {
     return {
       currentVersion:         '',
       defaultRegistrySetting: null,
-      plugin:                 undefined,
       busy:                   false,
       version:                '',
       update:                 false,
-      mode:                   '',
-      showModal:              false,
       chartVersionInfo:       null
     };
   },
@@ -82,43 +151,6 @@ export default {
   },
 
   methods: {
-    showDialog(plugin, mode) {
-      this.plugin = plugin;
-      this.mode = mode;
-
-      // Default to latest version on install (this is default on the plugin)
-      this.version = plugin.displayVersion;
-
-      if (mode === 'update') {
-        this.currentVersion = plugin.displayVersion;
-
-        // Update to latest version, so take the first version
-        if (plugin.installableVersions?.length > 0) {
-          this.version = plugin.installableVersions?.[0]?.version;
-        }
-      } else if (mode === 'rollback') {
-        // Find the newest version once we remove the current version
-        const versionNames = plugin.installableVersions.filter((v) => v.version !== plugin.displayVersion);
-
-        this.currentVersion = plugin.displayVersion;
-
-        if (versionNames.length > 0) {
-          this.version = versionNames[0].version;
-        }
-      }
-
-      // Make sure we have the version available
-      const versionChart = plugin.installableVersions?.find((v) => v.version === this.version);
-
-      if (!versionChart) {
-        this.version = plugin.installableVersions?.[0]?.version;
-      }
-
-      this.busy = false;
-      this.update = mode !== 'install';
-      this.showModal = true;
-    },
-
     async loadVersionInfo() {
       try {
         this.busy = true;
@@ -146,8 +178,8 @@ export default {
     },
 
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
+      this.$emit('close');
     },
 
     async install() {
@@ -155,7 +187,7 @@ export default {
 
       const plugin = this.plugin;
 
-      this.$emit('update', plugin.name, 'install');
+      this.updateStatus(plugin.name, 'install');
 
       // Find the version that the user wants to install
       const version = plugin.versions?.find((v) => v.version === this.version);
@@ -250,68 +282,54 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="installPluginDialog"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    :return-focus-first-iterable-node-selector="'#extensions-main-page'"
-    @close="closeDialog(false)"
-  >
-    <div
-      v-if="plugin"
-      class="plugin-install-dialog"
-    >
-      <h4 class="mt-10">
-        {{ t(`plugins.${ mode }.title`, { name: plugin.label }) }}
-      </h4>
-      <div class="custom mt-10">
-        <div class="dialog-panel">
-          <p>
-            {{ t(`plugins.${ mode }.prompt`) }}
-          </p>
-          <Banner
-            v-if="chartVersionLoadsWithoutAuth"
-            color="warning"
-            :label="t('plugins.warnNoAuth')"
-          />
-          <Banner
-            v-if="!plugin.certified"
-            color="warning"
-            :label="t('plugins.install.warnNotCertified')"
-          />
-          <LabeledSelect
-            v-if="showVersionSelector"
-            v-model:value="version"
-            label-key="plugins.install.version"
-            :options="versionOptions"
-            class="version-selector mt-10"
-            data-testid="install-ext-modal-select-version"
-          />
-          <div v-else>
-            {{ t('plugins.install.version') }} {{ version }}
-          </div>
-        </div>
-        <div class="dialog-buttons">
-          <button
-            :disabled="busy"
-            class="btn role-secondary"
-            data-testid="install-ext-modal-cancel-btn"
-            @click="closeDialog(false)"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-          <AsyncButton
-            :mode="buttonMode"
-            data-testid="install-ext-modal-install-btn"
-            @click="install"
-          />
+  <div class="plugin-install-dialog">
+    <h4 class="mt-10">
+      {{ t(`plugins.${ mode }.title`, { name: plugin?.label }) }}
+    </h4>
+    <div class="custom mt-10">
+      <div class="dialog-panel">
+        <p>
+          {{ t(`plugins.${ mode }.prompt`) }}
+        </p>
+        <Banner
+          v-if="chartVersionLoadsWithoutAuth"
+          color="warning"
+          :label="t('plugins.warnNoAuth')"
+        />
+        <Banner
+          v-if="!plugin?.certified"
+          color="warning"
+          :label="t('plugins.install.warnNotCertified')"
+        />
+        <LabeledSelect
+          v-if="showVersionSelector"
+          v-model:value="version"
+          label-key="plugins.install.version"
+          :options="versionOptions"
+          class="version-selector mt-10"
+          data-testid="install-ext-modal-select-version"
+        />
+        <div v-else>
+          {{ t('plugins.install.version') }} {{ version }}
         </div>
       </div>
+      <div class="dialog-buttons">
+        <button
+          :disabled="busy"
+          class="btn role-secondary"
+          data-testid="install-ext-modal-cancel-btn"
+          @click="closeDialog(false)"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          :mode="buttonMode"
+          data-testid="install-ext-modal-install-btn"
+          @click="install"
+        />
+      </div>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/{components/form/SSHKnownHosts → dialog}/KnownHostsEditDialog.vue

@@ -2,14 +2,12 @@
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import CodeMirror from '@shell/components/CodeMirror';
 import FileSelector from '@shell/components/form/FileSelector.vue';
-import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  emits: ['closed'],
+  emits: ['close'],
 
   components: {
     FileSelector,
-    AppModal,
     CodeMirror,
   },
 
@@ -23,6 +21,15 @@ export default {
       type:    String,
       default: _EDIT
     },
+
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    }
   },
 
   data() {
@@ -40,8 +47,7 @@ export default {
 
     return {
       codeMirrorOptions,
-      text:      this.value,
-      showModal: false,
+      text: this.value,
     };
   },
 
@@ -55,81 +61,68 @@ export default {
     onTextChange(value) {
       this.text = value?.trim();
     },
-
-    showDialog() {
-      this.showModal = true;
-    },
-
     closeDialog(result) {
       if (!result) {
         this.text = this.value;
       }
 
-      this.showModal = false;
-
-      this.$emit('closed', {
+      this.closed({
         success: result,
         value:   this.text,
       });
+
+      this.$emit('close');
     },
   }
 };
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
+  <div
     ref="sshKnownHostsDialog"
-    data-testid="sshKnownHostsDialog"
-    height="auto"
-    :scrollable="true"
-    @close="closeDialog(false)"
+    class="ssh-known-hosts-dialog"
   >
-    <div
-      class="ssh-known-hosts-dialog"
-    >
-      <h4 class="mt-10">
-        {{ t('secret.ssh.editKnownHosts.title') }}
-      </h4>
-      <div class="custom mt-10">
-        <div class="dialog-panel">
-          <CodeMirror
-            :value="text"
-            data-testid="ssh-known-hosts-dialog_code-mirror"
-            :options="codeMirrorOptions"
-            :showKeyMapBox="true"
-            @onInput="onTextChange"
+    <h4 class="mt-10">
+      {{ t('secret.ssh.editKnownHosts.title') }}
+    </h4>
+    <div class="custom mt-10">
+      <div class="dialog-panel">
+        <CodeMirror
+          :value="text"
+          data-testid="ssh-known-hosts-dialog_code-mirror"
+          :options="codeMirrorOptions"
+          :showKeyMapBox="true"
+          @onInput="onTextChange"
+        />
+      </div>
+      <div class="dialog-actions">
+        <div class="action-pannel file-selector">
+          <FileSelector
+            class="btn role-secondary"
+            data-testid="ssh-known-hosts-dialog_file-selector"
+            :label="t('generic.readFromFile')"
+            @selected="onTextChange"
           />
         </div>
-        <div class="dialog-actions">
-          <div class="action-pannel file-selector">
-            <FileSelector
-              class="btn role-secondary"
-              data-testid="ssh-known-hosts-dialog_file-selector"
-              :label="t('generic.readFromFile')"
-              @selected="onTextChange"
-            />
-          </div>
-          <div class="action-pannel form-actions">
-            <button
-              class="btn role-secondary"
-              data-testid="ssh-known-hosts-dialog_cancel-btn"
-              @click="closeDialog(false)"
-            >
-              {{ t('generic.cancel') }}
-            </button>
-            <button
-              class="btn role-primary"
-              data-testid="ssh-known-hosts-dialog_save-btn"
-              @click="closeDialog(true)"
-            >
-              {{ t('generic.save') }}
-            </button>
-          </div>
+        <div class="action-pannel form-actions">
+          <button
+            class="btn role-secondary"
+            data-testid="ssh-known-hosts-dialog_cancel-btn"
+            @click="closeDialog(false)"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <button
+            class="btn role-primary"
+            data-testid="ssh-known-hosts-dialog_save-btn"
+            @click="closeDialog(true)"
+          >
+            {{ t('generic.save') }}
+          </button>
         </div>
       </div>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/dialog/MoveNamespaceDialog.vue

@@ -0,0 +1,157 @@
+<script>
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { MANAGEMENT } from '@shell/config/types';
+import { PROJECT } from '@shell/config/labels-annotations';
+
+export default {
+  emits: ['close'],
+
+  components: {
+    AsyncButton, Card, LabeledSelect
+  },
+
+  props: {
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    movingCb: {
+      type:    Function,
+      default: () => {}
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    this.toMove = this.resources;
+    this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
+  },
+
+  data() {
+    return {
+      projects:      [],
+      toMove:        [],
+      targetProject: null
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    excludedProjects() {
+      return this.toMove.filter((namespace) => !!namespace.project).map((namespace) => namespace.project.shortId);
+    },
+
+    projectOptions() {
+      return this.projects.reduce((inCluster, project) => {
+        if (!this.excludedProjects.includes(project.shortId) && project.spec?.clusterName === this.currentCluster.id) {
+          inCluster.push({
+            value: project.shortId,
+            label: project.nameDisplay
+          });
+        }
+
+        return inCluster;
+      }, []);
+    }
+  },
+
+  methods: {
+    close(data) {
+      this.$emit('close', data);
+    },
+
+    async move(finish) {
+      const cluster = this.$store.getters['currentCluster'];
+      const clusterWithProjectId = `${ cluster.id }:${ this.targetProject }`;
+
+      const promises = this.toMove.map((namespace) => {
+        namespace.setLabel(PROJECT, this.targetProject);
+        namespace.setAnnotation(PROJECT, clusterWithProjectId);
+
+        return namespace.save();
+      });
+
+      try {
+        await Promise.all(promises);
+        finish(true);
+        this.targetProject = null;
+        this.close({ performCallback: true, moveNamespaceCb: true });
+      } catch (ex) {
+        finish(false);
+      }
+    }
+  }
+};
+</script>
+<template>
+  <Card
+    class="move-modal-card"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('moveModal.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div>
+        {{ t('moveModal.description') }}
+        <ul class="namespaces">
+          <li
+            v-for="(namespace, i) in toMove"
+            :key="i"
+          >
+            {{ namespace.nameDisplay }}
+          </li>
+        </ul>
+      </div>
+      <LabeledSelect
+        v-model:value="targetProject"
+        :options="projectOptions"
+        :label="t('moveModal.targetProject')"
+      />
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        :action-label="t('moveModal.moveButtonLabel')"
+        class="btn bg-primary ml-10"
+        :disabled="!targetProject"
+        @click="move"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss'>
+  .namespaces {
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+
+  .move-modal-card {
+      box-shadow: none;
+
+      border-radius: var(--border-radius);
+  }
+
+  .actions {
+    text-align: right;
+  }
+  .card-actions {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dialog/ScalePoolDownDialog.vue

@@ -27,7 +27,7 @@ export default {
   },
   computed: {
     machinenName() {
-      const name = this.resources.length > 0 ? this.resources[0].id.split('/')[1] : '';
+      const name = this.resources.length > 0 ? this.resources[0]?.id?.split('/')[1] : '';
 
       return name;
     },