dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/dialog/OidcClientSecretDialog.vue

@@ -0,0 +1,117 @@
+<script>
+import { Card } from '@components/Card';
+import { OIDC_CLIENT_SECRET_ACTION } from '@shell/detail/management.cattle.io.oidcclient.vue';
+
+export default {
+  name: 'PromptRemove',
+
+  emits: ['disable', 'close'],
+
+  components: { Card },
+  props:      {
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'oidc-client-secret'
+    },
+    actionCb: {
+      type:    Function,
+      default: () => {}
+    },
+    type: {
+      type:    String,
+      default: ''
+    }
+  },
+  computed: {
+    translationKey() {
+      if (this.type === OIDC_CLIENT_SECRET_ACTION.REGEN) {
+        return 'regenModal';
+      } else if (this.type === OIDC_CLIENT_SECRET_ACTION.REMOVE) {
+        return 'deleteModal';
+      }
+
+      return '';
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    action() {
+      this.actionCb();
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="oidc-secret-modal"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t(`oidcclient.${ translationKey }.title`) }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="mb-10">
+        <p v-clean-html="t(`oidcclient.${ translationKey }.content`)" />
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <button
+        class="btn role-primary bg-error ml-10"
+        :data-testid="componentTestid + '-confirm-button'"
+        @click="action"
+      >
+        {{ t(`oidcclient.${ translationKey }.action`) }}
+      </button>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss'>
+  .oidc-secret-modal {
+    &.card-container {
+      box-shadow: none;
+    }
+    #confirm {
+      width: 90%;
+      margin-left: 3px;
+    }
+
+    .remove-modal {
+        border-radius: var(--border-radius);
+        overflow: scroll;
+        max-height: 100vh;
+        & ::-webkit-scrollbar-corner {
+          background: rgba(0,0,0,0);
+        }
+    }
+
+    .actions {
+      text-align: right;
+    }
+
+    .card-actions {
+      display: flex;
+
+      .spacer {
+        flex: 1;
+      }
+    }
+  }
+</style>

package/dialog/RedeployWorkloadDialog.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { TIMESTAMP } from '@shell/config/labels-annotations';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+interface Workload {
+  nameDisplay: string;
+  type: string;
+  schema?: any;
+  spec: {
+    template: {
+      metadata?: {
+        annotations?: Record<string, string>;
+      };
+    };
+  };
+  save: () => Promise<void>;
+}
+
+export default {
+  name: 'RedeployWorkloadDialog',
+
+  emits: ['close'],
+
+  components: {
+    Card,
+    AsyncButton,
+    Banner,
+  },
+
+  props: {
+    workloads: {
+      type:     Array as () => Workload[],
+      required: true,
+    },
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t', labelFor: 'type-map/labelFor' }),
+
+    names(): string[] {
+      return this.workloads.map(({ nameDisplay }) => nameDisplay);
+    },
+
+    type(): string {
+      const types = new Set(this.workloads.map(({ type }) => type));
+
+      if (types.size > 1) {
+        return this.t('generic.resource', { count: this.workloads.length });
+      }
+
+      const [{ schema } = {}] = this.workloads;
+
+      if (!schema) {
+        return `resource${ this.workloads.length === 1 ? '' : 's' }`;
+      }
+
+      return this.labelFor(schema, this.workloads.length);
+    },
+  },
+
+  methods: {
+    resourceNames,
+
+    close(): void {
+      this.$emit('close');
+    },
+
+    async apply(buttonDone?: (success: boolean) => void): Promise<void> {
+      try {
+        const now = new Date().toISOString().replace(/\.\d+Z$/, 'Z');
+
+        for (const workload of this.workloads) {
+          const metadata = workload.spec.template.metadata ??= {};
+          const annotations = metadata.annotations ??= {};
+
+          annotations[TIMESTAMP] = now;
+
+          await workload.save();
+        }
+
+        buttonDone?.(true);
+        this.close();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone?.(false);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <Card
+    role="alertdialog"
+    aria-modal="true"
+    class="prompt-redeploy"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRedeploy.title', { type }) }}
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="mb-10">
+        <span
+          v-clean-html="t('promptRedeploy.attemptingToRedeploy', {
+            type,
+            names: resourceNames(names, null, t),
+          })"
+        />
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+          role="alert"
+          color="error"
+          :label="error"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <button
+        role="button"
+        class="btn role-secondary"
+        :aria-label="t('generic.cancel')"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <AsyncButton
+        role="button"
+        class="btn bg-error ml-10"
+        :action-label="t('asyncButton.redeploy.action')"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang="scss">
+.prompt-redeploy {
+  &.card-container {
+    box-shadow: none;
+  }
+
+  .card-actions {
+    .spacer {
+      flex: 1;
+    }
+  }
+}
+</style>

package/dialog/RollbackWorkloadDialog.vue

@@ -204,7 +204,7 @@ export default {
   >
     <template #title>
       <h4 class="text-default-text">
-        {{ t('promptRollback.modalTitle', { workloadName }, true) }}
+        {{ t('promptRollback.modalTitle', { workloadName }) }}
       </h4>
     </template>
     <template #body>

package/dialog/RotateEncryptionKeyDialog.vue

@@ -1,5 +1,5 @@
 <script>
-import { SNAPSHOT, NORMAN } from '@shell/config/types';
+import { SNAPSHOT } from '@shell/config/types';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
@@ -64,23 +64,11 @@ export default {
     },
 
     async getEtcdBackups() {
-      if ( this.cluster.isRke1) {
-        let etcdBackups = await this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
+      let etcdBackups = await this.$store.dispatch('management/findAll', { type: SNAPSHOT });
 
-        etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.metadata.name);
+      etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.id);
 
-        return etcdBackups;
-      }
-
-      if (this.cluster.isRke2) {
-        let etcdBackups = await this.$store.dispatch('management/findAll', { type: SNAPSHOT });
-
-        etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.id);
-
-        return etcdBackups;
-      }
-
-      return [];
+      return etcdBackups;
     },
 
     getFormattedCreatedDate(createdDate) {
@@ -93,23 +81,15 @@ export default {
     },
 
     async apply(buttonDone) {
-      const isRke2 = this.cluster.isRke2;
-
       try {
-        if (isRke2) {
-          const currentGeneration = this.cluster.spec?.rkeConfig?.rotateEncryptionKeys?.generation || 0;
-
-          // To rotate the encryption keys, increment
-          // rkeConfig.rotateEncyrptionKeys.generation in the YAML.
-          set(this.cluster, 'spec.rkeConfig.rotateEncryptionKeys.generation', currentGeneration + 1);
-          await this.cluster.save();
+        const currentGeneration = this.cluster.spec?.rkeConfig?.rotateEncryptionKeys?.generation || 0;
 
-          this.close(buttonDone);
-        } else {
-          await this.cluster.mgmt.doAction('rotateEncryptionKey');
+        // To rotate the encryption keys, increment
+        // rkeConfig.rotateEncyrptionKeys.generation in the YAML.
+        set(this.cluster, 'spec.rkeConfig.rotateEncryptionKeys.generation', currentGeneration + 1);
+        await this.cluster.save();
 
-          this.close(buttonDone);
-        }
+        this.close(buttonDone);
       } catch (err) {
         this.errors = exceptionToErrorsArray(err);
         buttonDone(false);

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;
     },

package/{components/nav/Jump.vue → dialog/SearchDialog.vue}

@@ -6,7 +6,7 @@ import { BOTH, TYPE_MODES } from '@shell/store/type-map';
 import { COUNT } from '@shell/config/types';
 
 export default {
-  emits: ['closeSearch'],
+  emits: ['close'],
 
   components: { Group },
 
@@ -41,7 +41,7 @@ export default {
       const allTypes = allTypesByMode[TYPE_MODES.ALL];
       const out = this.$store.getters['type-map/getTree'](productId, TYPE_MODES.ALL, allTypes, clusterId, BOTH, null, this.value);
 
-      // Suplement the output with count info. Usualy the `Type` component would handle this individualy... but scales real bad so give it
+      // Supplement the output with count info. Usually the `Type` component would handle this individually... but scales real bad so give it
       // some help
       const counts = this.$store.getters[`${ product.inStore }/all`](COUNT)?.[0]?.counts || {};
 
@@ -77,16 +77,22 @@ export default {
     >
       {{ t('nav.resourceSearch.filteringDescription') }}
     </p>
-    <input
-      ref="input"
-      v-model="value"
-      :placeholder="t('nav.resourceSearch.placeholder')"
-      class="search"
-      role="textbox"
-      :aria-label="t('nav.resourceSearch.label')"
-      aria-describedby="describe-filter-resource-search"
-      @keyup.esc="$emit('closeSearch')"
-    >
+    <div class="dialog-title">
+      <div>{{ t('nav.resourceSearch.label') }}</div>
+      <p>{{ t('nav.resourceSearch.prompt') }}</p>
+    </div>
+    <div class="search-box">
+      <input
+        ref="input"
+        v-model="value"
+        :placeholder="t('nav.resourceSearch.placeholder')"
+        class="search"
+        role="textbox"
+        :aria-label="t('nav.resourceSearch.label')"
+        aria-describedby="describe-filter-resource-search"
+        @keyup.esc="$emit('close')"
+      >
+    </div>
     <div class="results">
       <div
         v-for="g in groups"
@@ -100,7 +106,7 @@ export default {
           :group="g"
           :can-collapse="false"
           :fixed-open="true"
-          @close="$emit('closeSearch')"
+          @close="$emit('close')"
         >
           <template #accordion>
             <h6>{{ g.label }}</h6>
@@ -119,17 +125,31 @@ export default {
     box-shadow: none;
   }
 
+  .search-box {
+    margin: 8px;
+  }
+
   .search:focus-visible {
     outline-offset: -2px;
   }
 
+  .dialog-title {
+    padding: 8px;
+
+    > div {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 8px 0;
+    }
+  }
+
   .results {
     margin-top: -1px;
     overflow-y: auto;
     padding: 10px;
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
-    border: 1px solid var(--dropdown-border);
+    border-top: 1px solid var(--dropdown-border);
     height: 75vh;
   }
 </style>

package/{pages/c/_cluster/uiplugins/UninstallDialog.vue → dialog/UninstallExtensionDialog.vue}

@@ -2,47 +2,70 @@
 import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
 import { CATALOG } from '@shell/config/types';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 
 export default {
-  emits: ['closed', 'update'],
-
-  components: {
-    AsyncButton,
-    AppModal,
+  emits: ['close'],
+
+  components: { AsyncButton },
+
+  props: {
+    /**
+     * Plugin object
+     */
+    plugin: {
+      type:     Object,
+      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: () => {}
+    }
   },
 
   data() {
-    return {
-      plugin: undefined, busy: false, showModal: false
-    };
+    return { busy: false };
   },
 
-  computed: {
-    ...mapGetters({ allCharts: 'catalog/charts' }),
-    returnFocusSelector() {
-      return `[data-testid="extension-card-uninstall-btn-${ this.plugin?.name }"]`;
-    }
-  },
+  computed: { ...mapGetters({ allCharts: 'catalog/charts' }) },
 
   methods: {
     showDialog(plugin) {
       this.plugin = plugin;
       this.busy = false;
-      this.showModal = true;
     },
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
+      this.$emit('close');
     },
     async uninstall() {
       this.busy = true;
 
       const plugin = this.plugin;
 
-      this.$emit('update', plugin.name, 'uninstall');
+      this.updateStatus(plugin.name, 'uninstall');
 
       // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
       if (plugin.uiplugin?.isDeveloper) {
@@ -78,47 +101,33 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="uninstallPluginDialog"
-    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.uninstall.title', { name: plugin.label }) }}
-      </h4>
-      <div class="mt-10 dialog-panel">
-        <div class="dialog-info">
-          <p>
-            {{ t('plugins.uninstall.prompt') }}
-          </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: plugin?.label }) }}
+    </h4>
+    <div class="mt-10 dialog-panel">
+      <div class="dialog-info">
+        <p>
+          {{ t('plugins.uninstall.prompt') }}
+        </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/WechatDialog.vue

@@ -0,0 +1,57 @@
+<script>
+// i18n-ignore footer.wechat.modalText, footer.wechat.modalText2
+export default {
+  emits: ['close'],
+
+  name: 'WechatModal',
+
+  methods: {
+    close() {
+      this.$emit('close');
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="wechat-modal">
+    <h1>{{ t('footer.wechat.modalText') }}</h1>
+    <h1>{{ t('footer.wechat.modalText2') }}</h1>
+    <div class="qr-img" />
+    <div>
+      <button
+        class="btn role-primary"
+        tabindex="0"
+        :aria-label="t('generic.close')"
+        role="button"
+        @click="close"
+        @keydown.enter.stop
+      >
+        {{ t('generic.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .wechat-modal {
+    margin: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    margin: 20px auto 0;
+  }
+
+  .qr-img {
+    background-image: url('../assets/images/wechat-qr-code.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    height: 128px;
+    width: 128px;
+    margin: 15px auto 10px;
+  }
+</style>