@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.3

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,
   },
 
@@ -22,6 +20,15 @@ export default {
     mode: {
       type:    String,
       default: _EDIT
+    },
+
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
     }
   },
 
@@ -40,9 +47,7 @@ export default {
 
     return {
       codeMirrorOptions,
-      text:                this.value,
-      showModal:           false,
-      returnFocusSelector: '#known-ssh-hosts-trigger'
+      text: this.value,
     };
   },
 
@@ -56,83 +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"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    @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;
     },

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>

package/edit/__tests__/service.test.ts

@@ -61,7 +61,8 @@ describe('service edit', () => {
             $store: {
               getters: {
                 'management/all': jest.fn(),
-                'i18n/t':         jest.fn()
+                'i18n/t':         jest.fn(),
+                currentStore:     () => 'cluster',
               }
             }
           },

package/edit/auth/azuread.vue

@@ -363,7 +363,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="azuread"

package/edit/auth/github.vue

@@ -143,7 +143,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="github"

package/edit/auth/googleoauth.vue

@@ -90,7 +90,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="googleoauth"