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

package/components/CommunityLinks.vue

@@ -1,6 +1,5 @@
 <script>
 import SimpleBox from '@shell/components/SimpleBox';
-import AppModal from '@shell/components/AppModal.vue';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -9,11 +8,11 @@ import { isRancherPrime } from '@shell/config/version';
 import { fetchLinks } from '@shell/config/home-links';
 import { processLink } from '@shell/plugins/clean-html';
 
-// i18n-ignore footer.wechat.title, footer.wechat.modalText, footer.wechat.modalText2
+// i18n-ignore footer.wechat.title
 export default {
   name: 'CommunityLinks',
 
-  components: { SimpleBox, AppModal },
+  components: { SimpleBox },
 
   props: {
     linkOptions: {
@@ -87,10 +86,7 @@ export default {
   },
   methods: {
     show() {
-      this.showWeChatModal = true;
-    },
-    close() {
-      this.showWeChatModal = false;
+      this.$store.dispatch('management/promptModal', { component: 'WechatDialog' });
     }
   },
 };
@@ -146,32 +142,6 @@ export default {
         </a>
       </div>
     </SimpleBox>
-    <app-modal
-      v-if="showWeChatModal"
-      name="wechat-modal"
-      height="auto"
-      :width="640"
-      :trigger-focus-trap="true"
-      @close="close"
-    >
-      <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>
-    </app-modal>
   </div>
 </template>
 
@@ -188,29 +158,4 @@ export default {
   .support-link:not(:last-child) {
     margin-bottom: 15px;
   }
-
-  .wechat-modal {
-    margin: 60px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .link {
-    cursor: pointer;
-  }
-
-  .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/components/CruResource.vue

@@ -265,7 +265,7 @@ export default {
       return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
         ...acc,
         [error]: {
-          message: error,
+          message: this.formatError(error),
           icon:    null
         }
       }), {});
@@ -371,19 +371,23 @@ export default {
     },
 
     async clickSave(buttonDone) {
-      try {
-        await this.createNamespaceIfNeeded();
-
-        // If the attempt to create the new namespace
-        // is successful, save the resource.
-        this.$emit('finish', buttonDone);
-      } catch (err) {
+      if (this.createNamespace) {
+        try {
+          await this.createNamespaceIfNeeded();
+        } catch (err) {
         // After the attempt to create the namespace,
         // show any applicable errors if the namespace is
         // invalid.
-        this.$emit('error', exceptionToErrorsArray(err.message));
-        buttonDone(false);
+          this.$emit('error', exceptionToErrorsArray(err.message));
+          buttonDone(false);
+
+          return;
+        }
       }
+
+      // If the attempt to create the new namespace
+      // was successful or no ns needs to be created, save the resource.
+      this.$emit('finish', buttonDone);
     },
 
     save() {
@@ -395,17 +399,13 @@ export default {
       const newNamespaceName = get(this.resource, this.namespaceKey);
       let namespaceAlreadyExists = false;
 
-      if (!this.createNamespace) {
-        return;
-      }
-
       try {
         // This is in a try-catch block because the call to fetch
         // a namespace throws an error if the namespace is not found.
         namespaceAlreadyExists = !!(await this.$store.dispatch(`${ inStore }/find`, { type: NAMESPACE, id: newNamespaceName }));
       } catch {}
 
-      if (this.createNamespace && !namespaceAlreadyExists) {
+      if (!namespaceAlreadyExists) {
         try {
           const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: newNamespaceName }, { root: true });
 
@@ -427,6 +427,94 @@ export default {
 
     shouldProvideSlot(slot) {
       return slot !== 'default' && typeof this.$slots[slot] === 'function';
+    },
+
+    formatError(err) {
+      if ( typeof err === 'string') {
+        return err;
+      }
+
+      if ( err?.code === 'ActionNotAvailable' ) {
+        return this.t('errors.actionNotAvailable');
+      }
+      const msg = !!err?.message ? err.message : '';
+      let messageDetail = '';
+
+      if (!!err?.message && !!err.detail) {
+        messageDetail = this.t('errors.messageAndDetail', { message: err.message, detail: err.detail });
+      } else if (!!err?.message || !!err.detail) {
+        const val = err.message ? err.message : err.detail;
+
+        messageDetail = this.t('errors.messageOrDetail', { val });
+      }
+
+      if ( err?.status === 422 ) {
+        const name = err?.fieldName;
+        const code = err?.code;
+        let codeExplanation = '';
+
+        switch ( err?.code ) {
+        case 'MissingRequired':
+          codeExplanation = this.t('errors.missingRequired'); break;
+        case 'NotUnique':
+          codeExplanation = this.t('errors.notUnique'); break;
+        case 'NotNullable':
+          codeExplanation = this.t('errors.notNullable'); break;
+        case 'InvalidOption':
+          codeExplanation = this.t('errors.invalidOption'); break;
+        case 'InvalidCharacters':
+          codeExplanation = this.t('errors.invalidCharacters'); break;
+        case 'MinLengthExceeded':
+          codeExplanation = this.t('errors.minLengthExceeded'); break;
+        case 'MaxLengthExceeded':
+          codeExplanation = this.t('errors.maxLengthExceeded'); break;
+        case 'MinLimitExceeded':
+          codeExplanation = this.t('errors.minLimitExceeded'); break;
+        case 'MaxLimitExceded':
+          codeExplanation = this.t('errors.maxLimitExceded'); break;
+        }
+
+        if (!!name) {
+          if (!!codeExplanation) {
+            if (!!messageDetail) {
+              return this.t('errors.failedInApi.withName.withCodeExplanation.withMessageDetail', {
+                name, codeExplanation, messageDetail
+              });
+            }
+
+            return this.t('errors.failedInApi.withName.withCodeExplanation.withoutMessageDetail', { name, codeExplanation });
+          }
+          if (!!messageDetail) {
+            return this.t('errors.failedInApi.withName.withMessageDetail', { name, messageDetail });
+          }
+
+          return this.t('errors.failedInApi.withName.withoutAnythingElse', { name });
+        } else {
+          if (!!messageDetail) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withMessageDetail.withCodeExplanation', { codeExplanation, messageDetail });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withMessageDetail.withoutCodeExplanation', { messageDetail });
+          } else if (!!code) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withCode.withCodeExplanation', { code, codeExplanation });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withCode.withoutCodeExplanation', { code });
+          }
+
+          return this.t('errors.failedInApi.withoutAnything');
+        }
+      } else if ( err?.status === 404 ) {
+        if (!!err?.opt?.url) {
+          return this.t('errors.notFound.withUrl', { msg, url: err.opt.url });
+        }
+
+        return this.t('errors.notFound.withoutUrl', { msg });
+      }
+
+      return messageDetail.length > 0 ? messageDetail : err;
     }
   },
 
@@ -544,7 +632,10 @@ export default {
                       class="flex-right"
                     >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
                   </div>
-                  <hr v-if="subtype.description">
+                  <hr
+                    v-if="subtype.description"
+                    role="none"
+                  >
                   <div
                     v-if="subtype.description"
                     class="description"
@@ -906,6 +997,8 @@ form.create-resource-container .cru {
     position: sticky;
     bottom: 0;
     background-color: var(--header-bg);
+    height: $footer-height;
+    box-sizing: border-box;
 
     // Overrides outlet padding
     margin-left: -$space-m;

package/components/ExplorerProjectsNamespaces.vue

@@ -1,7 +1,9 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
-import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
+import {
+  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
+} from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
@@ -9,13 +11,13 @@ import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
-import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import { escapeHtml } from '@shell/utils/string';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
@@ -24,7 +26,6 @@ export default {
   components: {
     ExtensionPanel,
     Masthead,
-    MoveModal,
     ResourceTable,
     ButtonMultiAction,
     ActionMenu,
@@ -89,9 +90,20 @@ export default {
       }
     };
   },
-
+  watch: {
+    actionCb: {
+      handler(neu) {
+        if (neu?.moveNamespaceCb) {
+          this.clearSelection();
+          this.$store.dispatch('action-menu/clearCallbackData');
+        }
+      },
+      immediate: true
+    }
+  },
   computed: {
     ...mapGetters(['currentCluster', 'currentProduct']),
+    ...mapGetters({ actionCb: 'action-menu/performCallbackData' }),
     namespaces() {
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
 
@@ -101,7 +113,7 @@ export default {
       return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
     },
     showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
+      return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
@@ -113,6 +125,7 @@ export default {
       const headers = [
         STATE,
         NAME,
+        DESCRIPTION
       ];
 
       if (this.groupPreference === 'none') {
@@ -493,6 +506,7 @@ export default {
               <ActionMenu
                 v-if="showProjectActionButton(group.group)"
                 :resource="getProjectActions(group.group)"
+                data-testid="action-button"
                 :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
               />
               <div
@@ -569,7 +583,6 @@ export default {
         </tr>
       </template>
     </ResourceTable>
-    <MoveModal @moving="clearSelection" />
   </div>
 </template>
 <style lang="scss" scoped>

package/components/FixedBanner.vue

@@ -164,7 +164,7 @@ export default {
       class="banner"
       data-testid="fixed__banner"
       :style="bannerStyle"
-      :class="{'banner-consent': consent}"
+      :class="{'banner-consent': consent, 'banner-text': !!banner.text}"
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
@@ -177,11 +177,16 @@ export default {
         </div>
       </div>
       <div
-        v-else
+        v-else-if="banner.text"
         class="single-row"
       >
         {{ banner.text }}
       </div>
+      <div
+        v-else-if="banner.html"
+        v-clean-html="banner.html"
+        class="single-row"
+      />
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -205,13 +210,19 @@ export default {
               </div>
             </div>
             <div
-              v-else
+              v-else-if="banner.text"
               class="single-row"
             >
               {{ banner.text }}
             </div>
+            <div
+              v-else-if="banner.html"
+              v-clean-html="banner.html"
+              class="single-row"
+            />
           </div>
           <button
+            data-testid="login-confirmation-accept-button"
             class="btn role-primary"
             @click="hideDialog()"
           >
@@ -225,10 +236,13 @@ export default {
 
 <style lang="scss" scoped>
   .banner {
-    text-align: center;
     line-height: 2em;
     width: 100%;
-    padding: 0 20px;
+
+    &.banner-text {
+      padding: 0 20px;
+      text-align: center;
+    }
 
     &.banner-consent {
       height: unset;

package/components/GlobalRoleBindings.vue

@@ -49,6 +49,10 @@ export default {
     userId: {
       type:    String,
       default: ''
+    },
+    watchOverride: {
+      type:    Boolean,
+      default: true,
     }
   },
   async fetch() {
@@ -138,7 +142,7 @@ export default {
       this.update();
     },
     userId(userId, oldUserId) {
-      if (userId === oldUserId) {
+      if (userId === oldUserId || this.watchOverride === true) {
         return;
       }
       this.update();

package/components/GrowlManager.vue

@@ -107,6 +107,7 @@ export default {
               @click="close(growl)"
             />
             <div
+              v-if="growl.title"
               :id="`growl-title-${ growl.id }`"
               class="growl-text-title"
             >

package/components/LandingPagePreference.vue

@@ -108,6 +108,7 @@ export default {
       :value="afterLoginRoute"
       name="login-route"
       :options="routeRadioOptions"
+      :aria-label="`${t('prefs.landing.label')} - ${ t('landing.landingPrefs.body')}`"
       @update:value="updateLoginRoute"
     >
       <template #label>
@@ -119,6 +120,7 @@ export default {
         <div class="custom-page">
           <RadioButton
             :label="option.label"
+            :radio-option-id="option.radioOptionId"
             :val="false"
             :value="afterLoginRoute=== 'home' || afterLoginRoute === 'last-visited'"
             :v-bind="$attrs"

package/components/LocaleSelector.vue

@@ -4,7 +4,7 @@ import Select from '@shell/components/form/Select.vue';
 import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
-  name: 'LocalSelector',
+  name: 'LocaleSelector',
 
   components: {
     Select,

package/components/ModalManager.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+import AppModal from '@shell/components/AppModal.vue';
+
+const store = useStore();
+
+const isOpen = computed(() => store.getters['modal/isOpen']);
+const component = computed(() => store.getters['modal/component']);
+const componentProps = computed(() => store.getters['modal/componentProps']);
+const resources = computed(() => store.getters['modal/resources']);
+const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
+const modalWidth = computed(() => store.getters['modal/modalWidth']);
+// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
+
+const backgroundClosing = ref<Function | null>(null);
+
+function close() {
+  if (!isOpen.value) return;
+
+  if (backgroundClosing.value) {
+    backgroundClosing.value();
+  }
+
+  store.commit('modal/closeModal');
+}
+
+function registerBackgroundClosing(fn: Function) {
+  backgroundClosing.value = fn;
+}
+</script>
+
+<template>
+  <Teleport to="#modals">
+    <app-modal
+      v-if="isOpen && component"
+      :click-to-close="closeOnClickOutside"
+      :width="modalWidth"
+      :style="{ '--prompt-modal-width': modalWidth }"
+      :trigger-focus-trap="true"
+      tabindex="0"
+      @close="close"
+    >
+      <component
+        :is="component"
+        v-bind="componentProps || {}"
+        data-testid="modal-manager-component"
+        :resources="resources"
+        :register-background-closing="registerBackgroundClosing"
+        @close="close"
+      />
+    </app-modal>
+  </Teleport>
+</template>

package/components/PaginatedResourceTable.vue

@@ -95,6 +95,12 @@ export default defineComponent({
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
+  },
+
+  methods: {
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
   }
 });
 
@@ -103,6 +109,7 @@ export default defineComponent({
 <template>
   <div>
     <ResourceTable
+      ref="table"
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"

package/components/PromptModal.vue

@@ -13,12 +13,15 @@ export default {
   components: { AppModal },
 
   data() {
-    return { opened: false, backgroundClosing: null };
+    return {
+      opened:            false,
+      backgroundClosing: null,
+      componentRendered: false
+    };
   },
 
   computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
-
     resources() {
       let resources = this.modalData?.resources;
 
@@ -28,11 +31,28 @@ export default {
 
       return resources || [];
     },
-
+    testId() {
+      return this.modalData?.testId || 'prompt-modal-generic-testid';
+    },
+    returnFocusSelector() {
+      return this.modalData?.returnFocusSelector || undefined;
+    },
+    returnFocusFirstIterableNodeSelector() {
+      return this.modalData?.returnFocusFirstIterableNodeSelector || undefined;
+    },
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
       return this.modalData?.modalWidth || '600px';
     },
+    customClass() {
+      return this.modalData?.customClass || undefined;
+    },
+    styles() {
+      return this.modalData?.styles || undefined;
+    },
+    height() {
+      return this.modalData?.height || undefined;
+    },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
       return this.$store.getters['type-map/importDialog'](this.modalData?.component);
@@ -48,27 +68,36 @@ export default {
     },
     closeOnClickOutside() {
       return this.modalData?.closeOnClickOutside;
+    },
+    modalName() {
+      return this.modalData?.modalName;
     }
   },
 
   watch: {
     showModal(show) {
       this.opened = show;
-    },
+    }
   },
 
   methods: {
-    close() {
+    onSlotComponentMounted() {
+      // variable for the watcher based focus-trap
+      // so that we know when the component is rendered
+      this.componentRendered = true;
+    },
+    close(data) {
       if (!this.opened) {
         return;
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal');
+      this.$store.commit('action-menu/togglePromptModal', data);
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
 
+      this.componentRendered = false;
       this.opened = false;
     },
 
@@ -83,16 +112,26 @@ export default {
 <template>
   <app-modal
     v-if="opened && component"
+    :name="modalName"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    @close="close()"
+    :data-testid="testId"
+    :custom-class="customClass"
+    :styles="styles"
+    :height="height"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
+    :focus-trap-watcher-based-variable="componentRendered"
+    @close="close"
   >
     <component
       v-bind="modalData.componentProps || {}"
       :is="component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
-      @close="close()"
+      @vue:mounted="onSlotComponentMounted"
+      @close="close"
     />
   </app-modal>
 </template>