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

package/assets/images/providers/sks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 57" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x=".5" y=".5"/><symbol id="A" overflow="visible"><path d="M32 0L0 55.426h4.44L32 7.963v7.8L9.033 55.426h4.593L32 23.733v7.962l-13.78 23.73h4.593L32 39.656v7.8l-4.593 7.962H64z" stroke="none" fill="#da291c" fill-rule="nonzero"/></symbol></svg>

package/assets/styles/base/_helpers.scss

@@ -131,6 +131,10 @@ $spacing-property-map: (
   color: var(--input-label);
 }
 
+.text-no-break {
+  white-space: nowrap;
+}
+
 .hide {
   display: none !important;
 }

package/assets/styles/base/_variables.scss

@@ -8,6 +8,7 @@ $min-width: 75% !default;
 $input-height: 61px;
 $unlabeled-input-height: 40px;
 $unlabaled-select-padding: 3px 0;
+$footer-height: 60px;
 
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;

package/assets/translations/en-us.yaml

@@ -144,6 +144,7 @@ nav:
     localClusterIcon: Local Cluster icon
     clusterProvIcon: Cluster {cluster} provider icon
     topLevelMenu: Main menu
+    sideNav: Secondary menu
     homePage: Home page navigation menu
     cluster: Cluster menu item
     harvesterCluster: Harvester cluster menu item
@@ -237,9 +238,10 @@ nav:
     clusters: clusters
     ariaLabel: Filter clusters on main menu
   resourceSearch:
-    label: Resource Search
-    toolTip: Resource Search {key}
-    placeholder: Type to search for a resource...
+    label: Resource Type Search
+    prompt: Search for a Kubernetes Resource/Custom Resource type
+    toolTip: Resource Type Search {key}
+    placeholder: Type to search for a resource type...
     filteringDescription: Using this input will immediately filter the results in the list below
   header:
     setLoginPage: Set as login page
@@ -328,7 +330,7 @@ layouts:
   unauthenticated: unauthenticated layout
   logout: logout layout
   verify: verify layout
-  
+
 windowmanager:
   closeTab: Close tab {tabId}
 about:
@@ -497,7 +499,7 @@ authConfig:
          4: 'Under Scopes for Google APIs, enable "email", "profile", and "openid".'
          5: 'Click on "Save".'
         topPrivateDomain: 'Top private domain of:'
-        ariaLabel: 
+        ariaLabel:
           hostname: Copy Hostname to clipboard
           serverUrl: Copy Server URL to clipboard
       2:
@@ -508,7 +510,7 @@ authConfig:
           3: 'Authorized redirect URIs:'
           4: 'Click "Create", and then click on the "Download JSON" button.'
           5: 'Upload the downloaded JSON file in the OAuth credentials box.'
-        ariaLabel: 
+        ariaLabel:
           serverUrlVerify: Copy Server Auth Verfication URL to clipboard
       3:
         title: 'Create Service Account credentials'
@@ -871,13 +873,13 @@ asyncButton:
     success: Generated
     waiting: Generating…
 
-backupRestoreOperator: 
+backupRestoreOperator:
   backup:
     label: Resource Set
     description: The Resource Set determines which resources the backup-restore-operator collects in a backup
     enableEncryptionWarning: 'Enabling encryption is highly recommended when using <b><i>Full Rancher backup resource set</i></b>, otherwise sensitive information will be backed up as plain-text. <a target="_blank" rel="noopener noreferrer nofollow" href="https://ranchermanager.docs.rancher.com/reference-guides/backup-restore-configuration/backup-configuration#resourcesets">Read more</a>.'
     missingResourceSetWarning: The <b><i>{resourceSet}</i></b> resource set doesn't exist, it's possible it has been deleted. Please select a different option.
-    resourceSetOptions: 
+    resourceSetOptions:
       'rancher-resource-set-basic': 'Basic Rancher backup resource set'
       'rancher-resource-set-full': 'Full Rancher backup resource set'
       custom: Custom
@@ -1365,7 +1367,7 @@ cluster:
     registrationCommand:
       label: Registration Command
       linuxDetail: Run this command on each of the existing Linux machines you want to register.
-      windowsDetail: Run this command in PowerShell on each of the existing Windows machines you want to register. 
+      windowsDetail: Run this command in PowerShell on each of the existing Windows machines you want to register.
       windowsWorkersOnly: <b>Windows nodes can only be workers.</b>
       windowsNotReady: The cluster must be up and running with Linux etcd, control plane, and worker nodes before the registration command for adding Windows workers will display.<br /> <br /><b>Windows nodes can only be workers.</b>
       windowsWarning: Workload pods, including some deployed by Rancher charts, will be scheduled on both Linux and Windows nodes by default. Edit NodeSelector in the chart to direct them to be placed onto a compatible node.
@@ -1883,11 +1885,11 @@ cluster:
     subGroups:
       podAffinityAnti: Pod Affinity/Anti-Affinity
       nodeAffinity: Node Affinity
-      schedulingCustomization: 
+      schedulingCustomization:
         label: Prevent Rancher cluster agent pod eviction
         description: This ensures that the cluster agent pod is not evicted due to node pressure, resource constraints or scheduler policies.
         banner: This feature has been enabled with settings that are different from the global default settings.
-        innerCheckbox: Apply global settings for Priority Class and Pod Disruption Budget  
+        innerCheckbox: Apply global settings for Priority Class and Pod Disruption Budget
     banners:
       advanced: These are advanced configuration options. Generally, they should be left as-is.
       tolerations: Additional Pod Tolerations will be added to the default Tolerations applied by Rancher.
@@ -2056,6 +2058,7 @@ cluster:
     docker: Docker
     eks: Amazon EKS
     exoscale: Exoscale
+    sks: Exoscale SKS
     gcp: Google
     google: Google GCE
     googlegke: Google GKE
@@ -2214,7 +2217,7 @@ cluster:
       snapshotScheduleCron:
         label: Cron Schedule
       snapshotRetention:
-        label: Snapshot retention count 
+        label: Snapshot retention count
         tooltip: Each backup records 1 snapshot per etcd node. If you specify 3 snapshots and you have 3 etcd nodes you will only retain 1 full backup.
       exportMetric:
         label: Metrics
@@ -3943,6 +3946,10 @@ namespaceFilter:
       one {1 item selected}
       other {{total} items selected}
       }
+  input: Filter namespace options
+  button:
+    clear: Remove applied namespace filters
+    clearFilter: Clear namespace options filter 
 
 namespaceList:
   selectLabel: Namespace
@@ -4743,6 +4750,7 @@ prefs:
     allNamespaces: Show dynamic Namespaces managed by Rancher (not intended for editing or deletion)
     themeShortcut: Enable Dark/Light Theme keyboard shortcut toggle (shift+T)
     pluginDeveloper: Enable Extension developer features
+    pluginDeveloperTooltip: Enables the ability to perform a developer load of UI extensions
   hideDesc:
     label: Hide Type Description banners above resource lists
   helm:
@@ -4759,6 +4767,8 @@ principal:
   name: Name
   loginName: Username
   type: Type
+  alt:
+    avatar: User avatar image
 
 probe:
   checkInterval:
@@ -5138,6 +5148,8 @@ rbac:
         label: Login Access
       clustertemplaterevisions-create:
         label: Create RKE Template Revisions
+  errors:
+    escalation: You cannot assign Global Permissions that are higher than your own. Please verify the permissions you are attempting to assign.
 
 resourceDetail:
   detailTop:
@@ -5214,6 +5226,7 @@ resourceTable:
     role: Group by Role
     cluster: Group by Cluster
     device: Group by Device
+    pool: Group by Pool
   groupLabel:
     cluster: "<span>Cluster:</span> {name}"
     notInACluster: Not in a Cluster
@@ -7571,6 +7584,9 @@ typeLabel:
     }
 
 action:
+  ariaLabel:
+    hidePass: Hide {area}
+    showPass: Reveal {area}
   clone: Clone
   disable: Disable
   download: Download YAML
@@ -7822,9 +7838,9 @@ performance:
 banner:
   label: Fixed Banners
   settingName: Banners
-  headerBanner: Header Banner
-  footerBanner: Footer Banner
-  loginScreenBanner: Login Screen Banner
+  bannerHeader: Header Banner
+  bannerFooter: Footer Banner
+  bannerConsent: Login Screen Banner
   text: Text
   buttonText: Accept Button Text
   textColor: Text Color

package/assets/translations/zh-hans.yaml

@@ -1773,6 +1773,7 @@ cluster:
     docker: Docker
     eks: Amazon EKS
     exoscale: Exoscale
+    sks: Exoscale SKS
     gcp: Google
     google: Google GCE
     googlegke: Google GKE
@@ -7131,9 +7132,9 @@ performance:
 banner:
   label: 固定横幅
   settingName: 横幅
-  headerBanner: 标题横幅
-  footerBanner: 页脚横幅
-  loginScreenBanner: 登录屏幕横幅
+  bannerHeader: 标题横幅
+  bannerFooter: 页脚横幅
+  bannerConsent: 登录屏幕横幅
   text: 文本
   buttonText: 同意按钮文本
   textColor: 文本颜色

package/chart/monitoring/index.vue

@@ -72,7 +72,9 @@ export default {
     const { existing = false } = this.$attrs;
 
     // If needed, fetch all the workloads that have prometheus operator like containers
-    this.workloadTypes = !existing ? Object.values(WORKLOAD_TYPES) : [];
+    const { CRON_JOB, ...validWorkloads } = WORKLOAD_TYPES;
+
+    this.workloadTypes = !existing ? Object.values(validWorkloads) : [];
 
     this.workloadTypes.forEach((type) => {
       // We'll use a filter to fetch the results. Atm there's no neat way to differentiate between ALL results and JUST filtered

package/components/ActionDropdownShell.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
+type HiddenAction = {
+  action: string;
+  enabled: boolean;
+  icon: string;
+  label: string;
+  bulkable: boolean;
+  bulkAction: string;
+  allEnabled: boolean;
+  anyEnabled: boolean;
+}
+
+defineProps<{
+  disabled: boolean,
+  hiddenActions: HiddenAction[],
+  actionTooltip: unknown,
+}>();
+
+const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
+
+const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
+  emit('click', act, args, event);
+};
+
+const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
+  emit(event, act);
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :distance="14"
+    placement="bottom"
+  >
+    <rc-dropdown-trigger
+      class="bulk-actions-dropdown"
+      :disabled="disabled"
+    >
+      <template #before>
+        <i class="icon icon-gear" />
+      </template>
+      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
+      <template #after>
+        <i class="ml-10 icon icon-chevron-down" />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item
+        v-for="(act, i) in hiddenActions"
+        :key="i"
+        v-clean-tooltip="{
+          content: actionTooltip,
+          placement: 'right'
+        }"
+        :disabled="!act.enabled"
+        @click="applyTableAction(act, null, $event)"
+        @mouseover="setBulkActionOfInterest(act)"
+        @mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
+      >
+        <template #before>
+          <i
+            v-if="act.icon"
+            :class="act.icon"
+          />
+        </template>
+        <span v-clean-html="act.label" />
+      </rc-dropdown-item>
+    </template>
+  </rc-dropdown>
+</template>

package/components/AppModal.vue

@@ -1,6 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+import { defineComponent, ref } from 'vue';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  getFirstFocusableElement,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
 
 export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
@@ -80,6 +84,13 @@ export default defineComponent({
     returnFocusFirstIterableNodeSelector: {
       type:    String,
       default: DEFAULT_ITERABLE_NODE_SELECTOR,
+    },
+    /**
+     * watcher-based focus trap variable to watch
+     */
+    focusTrapWatcherBasedVariable: {
+      type:    Boolean,
+      default: undefined,
     }
   },
   computed: {
@@ -107,7 +118,7 @@ export default defineComponent({
         width: this.modalWidth,
         ...this.stylesPropToObj,
       };
-    },
+    }
   },
   setup(props) {
     if (props.triggerFocusTrap) {
@@ -131,7 +142,10 @@ export default defineComponent({
         };
       }
 
-      useBasicSetupFocusTrap('#modal-container-element', opts);
+      // prop used to immediately trigger the focus trap when a proper watch variable is not required
+      const autoTriggerFocusTrapWatcher = ref(true);
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => props.focusTrapWatcherBasedVariable ?? autoTriggerFocusTrapWatcher, '#modal-container-element', opts, true);
     }
   },
   mounted() {

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

@@ -544,7 +544,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 +909,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

@@ -9,7 +9,6 @@ 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';
@@ -24,7 +23,6 @@ export default {
   components: {
     ExtensionPanel,
     Masthead,
-    MoveModal,
     ResourceTable,
     ButtonMultiAction,
     ActionMenu,
@@ -89,9 +87,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);
 
@@ -569,7 +578,6 @@ export default {
         </tr>
       </template>
     </ResourceTable>
-    <MoveModal @moving="clearSelection" />
   </div>
 </template>
 <style lang="scss" scoped>

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>