@rancher/shell 3.0.2-rc.3 → 3.0.2-rc.5

package/assets/styles/base/_basic.scss

@@ -61,13 +61,13 @@ BODY {
 INPUT,
 SELECT,
 TEXTAREA,
-.labeled-input,
 .checkbox-custom {
   &:focus, &.focused {
     @include form-focus;
   }
 }
 
+.labeled-input,
 .radio-custom,
 .labeled-select,
 .unlabeled-select {
@@ -76,6 +76,7 @@ TEXTAREA,
   }
 }
 
+.labeled-input,
 .labeled-select,
 .unlabeled-select {
   &.focused {

package/assets/styles/global/_form.scss

@@ -27,7 +27,8 @@ TEXTAREA,
 
   @include input-status-color;
 
-  &:focus:not(.unlabeled-select):not(.labeled-select), &.focused:not(.unlabeled-select):not(.labeled-select) {
+  &:focus:not(.labeled-input):not(.unlabeled-select):not(.labeled-select), 
+  &.focused:not(.labeled-input):not(.unlabeled-select):not(.labeled-select) {
     @include form-focus;
   }
 

package/assets/styles/themes/_dark.scss

@@ -72,7 +72,7 @@
   --banner-text-color          : #{$lightest};
 
   --nav-bg                     : #{$darkest};
-  --nav-active                 : var(--primary-active-bg);
+  --nav-active                 : #333;
   --nav-border                 : #{$medium};
   --nav-hover                  : var(--primary);
   --nav-expander-hover         : var(--primary-banner-bg);

package/assets/translations/en-us.yaml

@@ -16,6 +16,8 @@ generic:
   comingSoon: Coming Soon
   comma: ', '
   copy: Copy
+  copyToClipboard: Copy text to Clipboard
+  copiedToClipboard: Text copied to Clipboard
   create: Create
   created: Created
   customize: Customize
@@ -949,6 +951,7 @@ catalog:
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
   charts:
+    iconAlt: Icon for {app} card/grid item
     refresh: refresh charts
     all: All
     categories:
@@ -1132,6 +1135,7 @@ catalog:
       label: Refresh Interval
       placeholder: 'default: {hours}'
   tools:
+    iconAlt: Icon for {app} Cluster Tool
     header: Cluster Tools
     noTools: "No Cluster Tools found"
     action:
@@ -2440,6 +2444,7 @@ fleet:
       resources: Resources
       unready: Non-Ready
     auth:
+      title: Authentication
       label: Authentication
       git: Git Authentication
       helm: Helm Authentication
@@ -2450,20 +2455,20 @@ fleet:
       label: Paths
       placeholder: e.g. /directory/in/your/repo
       addLabel: Add Path
-      empty: The root of the repo is used by default.  To use one or more different directories, add them here.
+      empty: The root of the repo is used by default. Multiple different directories can be provided.
     repo:
+      title: Source
       label: Repository URL
       placeholder: e.g. https://github.com/rancher/fleet-examples.git or git@github.com:rancher/fleet-examples.git
       addRepo: Add Repository
       noRepos: No repositories have been added
       noWorkspaces: There are no workspaces. <br/> Please create a workspace before adding repositories
-      protocolBanner: Enter a valid HTTPS or SSH URL to a git repository.
     resources:
       label: 'Resource Handling'
       keepResources: Always Keep Resources
-      keepResourcesBanner: When enabled above, resources will be kept when deleting a GitRepo or Bundle - only Helm release secrets will be deleted.
+      keepResourcesTooltip: When enabled, resources will be kept when deleting a GitRepo or Bundle - only Helm release secrets will be deleted.
       correctDrift: Enable Self-Healing
-      correctDriftBanner: When enabled, Fleet will ensure that the cluster resources are kept in sync with the git repository. All resource changes made on the cluster will be lost.
+      correctDriftTooltip: When enabled, Fleet will ensure that the cluster resources are kept in sync with the git repository. All resource changes made on the cluster will be lost.
     add:
       steps:
         repoInfo:
@@ -4374,12 +4379,15 @@ inactivity:
 
 # Rancher Extensions
 plugins:
+  altIcon: Icon for {extension} extension card
   incompatibleRancherVersion: "The latest version of this extension ({ version }) is not compatible with the current Rancher version ({ required })."
   incompatibleKubeVersion: "The latest version of this extension ({ version }) is not compatible with the current Kube version ({ required })."
   incompatibleUiExtensionsApiVersionMissing: 'The latest version of this extension ({ version }) is missing the mandatory annotation catalog.cattle.io/ui-extensions-version from Rancher 2.10 and onwards.'
   incompatibleUiExtensionsApiVersion: "The latest version of this extension ({ version }) is not compatible with the current Extensions API version ({ required })."
   incompatibleHost: 'The latest version of this extension ({ version }) has a host of "{ required }" which is not compatible with this application "{ mainHost }".'
   currentInstalledVersionBlockedByKubeVersion: "This version is not compatible with the current Kubernetes version ({ kubeVersion }  Vs  { kubeVersionToCheck })."
+  closePluginPanel: Close plugin description panel
+  viewVersionDetails: View extension {name} version {version} details/Readme
   labels:
     builtin: Built-in
     experimental: Experimental
@@ -4387,6 +4395,8 @@ plugins:
     image: Image
     installing: Installing ...
     uninstalling: Uninstalling ...
+    menu: Extensions menu
+    reloadRancher: Reload Rancher
   descriptions:
     experimental: This Extension is marked as experimental
     third-party: This Extension is provided by a Third-Party
@@ -4705,6 +4715,7 @@ projectMembers:
     workloadsView: View Workloads
 
 projectNamespaces:
+  tableActionsLabel: More actions for project { resource }
   createNamespace: Create Namespace
   createProject: Create Project
   label: Projects/Namespaces
@@ -5139,10 +5150,22 @@ secret:
     username: Username
   ssh:
     keys: Keys
+    keysAndHosts: Keys and Known Hosts
     public: Public Key
     publicPlaceholder: "Paste in your public key"
     private: Private Key
     privatePlaceholder: "Paste in your private key"
+    knownHosts: Known Hosts
+    knownHostsPlaceholder: "Known hosts metadata, one per line"
+    editKnownHosts:
+      title: SSH Known Hosts Configuration
+      entries:  |-
+        {entries, plural,
+          =0 {Empty}
+          =1 {1 Entry}
+          other {{entries} Entries}
+        }
+
   serviceAcct:
     ca: CA Certificate
     token: Token
@@ -5368,6 +5391,8 @@ setup:
   welcome: Welcome to {vendor}!
 
 sortableTable:
+  tableActionsLabel: More actions - { resource }
+  tableActionsImgAlt: More actions icon
   bulkActions:
     collapsed:
       label: Actions
@@ -6182,6 +6207,8 @@ wm:
     disconnected: Disconnected
     error: Error
   containerLogs:
+    options: Additional container logs options
+    expand: Expand additional container logs options
     clear: Clear
     containerName: "Container: {label}"
     download: Download
@@ -6208,6 +6235,9 @@ wm:
     timestamps: Show Timestamps
     wrap: Wrap Lines
   containerShell:
+    resizeShellWindow: Resize Shell window
+    tabIcon: Shell tab icon
+    closeShellTab: Close Shell tab - {tab}
     clear: Clear
     containerName: "Container: {label}"
     failed: "Unable to open a shell to the container (none of the shell commands succeeded)\n\r"
@@ -7480,6 +7510,7 @@ advancedSettings:
   none: None
   modified: Modified
   edit:
+    moreActions: More actions for setting - { setting }
     label: Edit Setting
     changeSetting: "Change Setting:"
     trueOption: "True"

package/assets/translations/zh-hans.yaml

@@ -2153,13 +2153,12 @@ fleet:
       addRepo: 添加仓库
       noRepos: 未添加任何仓库
       noWorkspaces: 没有工作空间。<br/>请在添加仓库之前创建一个工作空间
-      protocolBanner: 输入指向 git 仓库的有效 HTTPS 或 SSH URL。
     resources:
       label: '资源处理'
       keepResources: 永远保留资源
-      keepResourcesBanner: 启用时，删除 GitRepo 或 Bundle 后将保留资源，只会删除 Helm Release Secret。
+      keepResourcesTooltip: 启用时，删除 GitRepo 或 Bundle 后将保留资源，只会删除 Helm Release Secret。
       correctDrift: 启用自我修复
-      correctDriftBanner: 启用后，Fleet 将确保集群资源与 Git 仓库保持同步。在 ecluster 上进行的所有资源更改都将丢失。
+      correctDriftTooltip: 启用后，Fleet 将确保集群资源与 Git 仓库保持同步。在 ecluster 上进行的所有资源更改都将丢失。
     add:
       steps:
         repoInfo:

package/components/AppModal.vue

@@ -1,5 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+
+export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
 export default defineComponent({
   name: 'AppModal',
@@ -56,6 +59,27 @@ export default defineComponent({
     name: {
       type:    String,
       default: '',
+    },
+    /**
+     * trigger focus trap
+     */
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * forcefully set return focus element based on this selector
+     */
+    returnFocusSelector: {
+      type:    String,
+      default: '',
+    },
+    /**
+     * will return focus to the first iterable node of this container select
+     */
+    returnFocusFirstIterableNodeSelector: {
+      type:    String,
+      default: DEFAULT_ITERABLE_NODE_SELECTOR,
     }
   },
   computed: {
@@ -85,6 +109,31 @@ export default defineComponent({
       };
     }
   },
+  setup(props) {
+    if (props.triggerFocusTrap) {
+      let opts:any = DEFAULT_FOCUS_TRAP_OPTS;
+
+      // if we have a "returnFocusFirstIterableNodeSelector" on top of "returnFocusSelector"
+      // then we will use "returnFocusFirstIterableNodeSelector" as a fallback of "returnFocusSelector"
+      if (props.returnFocusFirstIterableNodeSelector && props.returnFocusFirstIterableNodeSelector !== DEFAULT_ITERABLE_NODE_SELECTOR && props.returnFocusSelector) {
+        opts = {
+          ...DEFAULT_FOCUS_TRAP_OPTS,
+          setReturnFocus: () => {
+            return document.querySelector(props.returnFocusSelector) ? props.returnFocusSelector : getFirstFocusableElement(document.querySelector(props.returnFocusFirstIterableNodeSelector));
+          }
+        };
+      // otherwise, if we are sure of permanent existance of "returnFocusSelector"
+      // we just return to that element
+      } else if (props.returnFocusSelector) {
+        opts = {
+          ...DEFAULT_FOCUS_TRAP_OPTS,
+          setReturnFocus: props.returnFocusSelector
+        };
+      }
+
+      useBasicSetupFocusTrap('#modal-container-element', opts);
+    }
+  },
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
@@ -134,6 +183,7 @@ export default defineComponent({
       >
         <div
           v-bind="$attrs"
+          id="modal-container-element"
           ref="modalRef"
           :class="customClass"
           class="modal-container"

package/components/ButtonGroup.vue

@@ -64,6 +64,12 @@ export default {
   methods: {
     change(value) {
       this.$emit('update:value', value);
+    },
+    actionDescription(opt) {
+      const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
+      const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
+
+      return tooltip || label || '';
     }
   }
 };
@@ -83,7 +89,7 @@ export default {
       :class="opt.class"
       :disabled="disabled || opt.disabled"
       role="button"
-      :aria-label="opt.labelKey ? t(opt.labelKey) : opt.label"
+      :aria-label="actionDescription(opt)"
       @click="change(opt.value)"
     >
       <slot
@@ -94,6 +100,7 @@ export default {
         <i
           v-if="opt.icon"
           :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }"
+          :alt="actionDescription(opt)"
         />
         <t
           v-if="opt.labelKey"

package/components/ButtonMultiAction.vue

@@ -22,10 +22,14 @@ const buttonClass = computed(() => {
   <button
     type="button"
     class="btn btn-sm role-multi-action actions"
+    role="button"
     :class="buttonClass"
     @click="(e: Event) => $emit('click', e)"
   >
-    <i class="icon icon-actions" />
+    <i
+      class="icon icon-actions"
+      :alt="t('sortableTable.tableActionsImgAlt')"
+    />
   </button>
 </template>
 

package/components/Carousel.vue

@@ -43,24 +43,29 @@ export default {
       activeItemId:            0,
       autoScroll:              true,
       autoScrollSlideInterval: null,
+      isTransitionning:        false, // prevents showing empty spaces caused by aggressive clicking
+      shouldDisableTransition: false // smoothes the move from the first/last slides to the previous/next slide
     };
   },
 
   computed: {
     ...mapGetters(['clusterId']),
     trackStyle() {
-      let sliderItem = ( this.activeItemId + 1) * 100 / (this.slider.length + 2);
-      const width = 60 * (this.slider.length + 2);
-
       if (this.slider.length === 1) {
-        sliderItem = 0;
+        return `
+          width: 100%;
+          left: 0%;
+        `;
       }
 
-      return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
-    },
+      const width = 60 * (this.slider.length + 2);
+      const left = -(40 + this.activeItemId * 60);
 
-    test() {
-      return 'test';
+      return `
+        width: ${ width }%;
+        left: ${ left }%;
+        transition: ${ this.shouldDisableTransition ? 'none' : '700ms ease-in-out' };
+      `;
     }
   },
 
@@ -77,10 +82,14 @@ export default {
     },
 
     nextPrev(direction) {
-      this.autoScroll = false;
-      const slideTrack = document.getElementById('slide-track');
+      if (this.isTransitionning) {
+        return;
+      }
 
-      slideTrack.style.transition = `transform 450ms ease-in-out`;
+      this.isTransitionning = true;
+      this.autoScroll = false;
+      this.shouldDisableTransition = false;
+      const slideTrack = this.$refs.slider;
 
       direction !== 'prev' ? (this.activeItemId++) : (this.activeItemId--);
 
@@ -88,21 +97,27 @@ export default {
     },
 
     slideTransition() {
-      const slideTrack = document.getElementById('slide-track');
       const slidesArray = this.slider.length + 2;
 
       if (this.activeItemId === -1) {
-        slideTrack.style.transition = 'none';
+        this.shouldDisableTransition = true;
         this.activeItemId = this.slider.length - 1;
       }
+
       if (this.activeItemId === slidesArray - 2) {
-        slideTrack.style.transition = 'none';
+        this.shouldDisableTransition = true;
         this.activeItemId = 0;
       }
+
+      this.isTransitionning = false;
     },
 
     autoScrollSlide() {
-      if (this.activeItemId < (this.slider.length + 1) && this.autoScroll ) {
+      if (!this.autoScroll) {
+        return;
+      }
+
+      if (this.activeItemId < (this.slider.length + 1)) {
         this.activeItemId++;
       }
 
@@ -120,23 +135,21 @@ export default {
   },
 
   mounted() {
-    const slideTrack = document.getElementById('slide-track');
+    const slideTrack = this.$refs.slider;
 
-    if (this.slider.length === 1) {
-      slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
-    } else {
-      const node = document.getElementById('slide0');
+    if (this.slider.length > 1) {
+      const firstSlide = this.$refs['slide0']?.[0];
 
-      if (node) {
-        const clone = node.cloneNode(true);
+      if (firstSlide) {
+        const clone = firstSlide.cloneNode(true);
 
         slideTrack.appendChild(clone);
       }
 
-      const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
+      const lastSlide = this.$refs[`slide${ this.slider.length - 1 }`]?.[0];
 
-      if (nodeLast) {
-        const cloneLast = nodeLast.cloneNode(true);
+      if (lastSlide) {
+        const cloneLast = lastSlide.cloneNode(true);
 
         slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
       }
@@ -159,7 +172,7 @@ export default {
 <template>
   <div
     class="slider"
-    :class="{'disable': sliders.length === 1}"
+    :class="{'disabled': sliders.length === 1}"
   >
     <div
       id="slide-track"
@@ -170,8 +183,8 @@ export default {
       <component
         :is="asLink ? 'a' : 'div'"
         v-for="(slide, i) in sliders"
-        :id="`slide` + i"
-        ref="slide"
+        :id="`slide${i}`"
+        :ref="`slide${i}`"
         :key="get(slide, keyField)"
         class="slide"
         :class="{'singleSlide': sliders.length === 1}"
@@ -187,7 +200,7 @@ export default {
           <div class="slide-content-right">
             <BadgeState
               :label="slide.repoName"
-              color="slider-badge mb-20"
+              color="slide-badge mb-20"
             />
             <h1>{{ slide.chartNameDisplay }}</h1>
             <p>{{ slide.chartDescription }}</p>
@@ -196,12 +209,11 @@ export default {
       </component>
     </div>
     <div
-      ref="prev"
       role="button"
       class="prev"
       :aria-label="t('carousel.previous')"
       :aria-disabled="sliders.length === 1"
-      :class="{'disable': sliders.length === 1}"
+      :class="{'disabled': sliders.length === 1}"
       tabindex="0"
       @click="nextPrev('prev')"
       @keyup.enter.space="nextPrev('prev')"
@@ -211,12 +223,11 @@ export default {
       />
     </div>
     <div
-      ref="next"
       role="button"
       class="next"
       :aria-label="t('carousel.next')"
       :aria-disabled="sliders.length === 1"
-      :class="{'disable': sliders.length === 1}"
+      :class="{'disabled': sliders.length === 1}"
       tabindex="0"
       @click="nextPrev('next')"
       @keyup.enter.space="nextPrev('next')"
@@ -226,8 +237,8 @@ export default {
       />
     </div>
     <div
+      v-if="sliders.length > 1"
       class="controls"
-      :class="{'disable': sliders.length === 1}"
     >
       <div
         v-for="(slide, i) in slider"
@@ -252,23 +263,21 @@ export default {
   place-items: center;
   overflow: hidden;
   margin-bottom: 30px;
-  // min-width: 700px;
+  height: 245px;
 
-  &.disable::before,
-  &.disable::after {
+  &.disabled::before,
+  &.disabled::after {
     display: none;
   }
 }
 
 .slide-track {
   display: flex;
-  animation: scrolls 10s ;
-  position: relative;
-  transition: 1s ease-in-out;
-  left: 21%;
+  position: absolute;
+  top: 0;
 }
 
-.slider-badge {
+.slide-badge {
   background: var(--app-partner-accent);
   color: var(--body-bg);
 }
@@ -333,7 +342,7 @@ export default {
 .slider::before {
   left: 0;
   top: 0;
-  &.disable {
+  &.disabled {
     display: none;
   }
 }
@@ -344,15 +353,13 @@ export default {
 }
 
 .controls {
+  position: absolute;
+  bottom: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   margin-top: 10px;
 
-  &.disable {
-    display: none;
-  }
-
   .control-item {
     width: 10px;
     height: 10px;

package/components/CopyToClipboardText.vue

@@ -48,13 +48,18 @@ export default {
   <a
     v-if="text"
     class="copy-to-clipboard-text"
+    role="button"
+    :aria-label="t('generic.copyToClipboard')"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
     @click="clicked"
+    @keyup.space="clicked"
   >
-    {{ text }} <i
+    {{ text }}
+    <i
       class="icon"
       :class="{ 'icon-copy': !copied, 'icon-checkmark': copied}"
+      :alt="!copied ? t('generic.copyToClipboard') : t('generic.copiedToClipboard')"
     />
   </a>
 </template>

package/components/Dialog.vue

@@ -1,6 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
+import AppModal, { DEFAULT_ITERABLE_NODE_SELECTOR } from '@shell/components/AppModal.vue';
 
 export default {
   emits: ['okay', 'closed'],
@@ -21,6 +21,22 @@ export default {
     mode: {
       type:    String,
       default: '',
+    },
+
+    /**
+     * forcefully set return focus element based on this selector
+     */
+    returnFocusSelector: {
+      type:    String,
+      default: '',
+    },
+
+    /**
+     * will return focus to the first iterable node of this container select
+     */
+    returnFocusFirstIterableNodeSelector: {
+      type:    String,
+      default: DEFAULT_ITERABLE_NODE_SELECTOR,
     }
   },
 
@@ -60,6 +76,9 @@ export default {
     :name="name"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
     @close="closeDialog(false)"
     @before-open="beforeOpen"
   >

package/components/ExplorerProjectsNamespaces.vue

@@ -368,6 +368,12 @@ export default {
       return project?.description;
     },
 
+    projectResource(group) {
+      const row = group.rows[0];
+
+      return row.nameDisplay || row.id || '';
+    },
+
     clearSelection() {
       this.$refs.table.clearSelection();
     },
@@ -462,6 +468,7 @@ export default {
             <ButtonMultiAction
               class="project-action mr-10"
               :borderless="true"
+              :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
               :invisible="!showProjectActionButton(group.group)"
               @click="showProjectAction($event, group.group)"
             />

package/components/PromptChangePassword.vue

@@ -43,6 +43,7 @@ export default {
     name="password-modal"
     :width="500"
     :height="465"
+    :trigger-focus-trap="true"
     @close="show(false)"
   >
     <Card
@@ -68,6 +69,8 @@ export default {
         <!-- type reset is required by lastpass -->
         <button
           class="btn role-secondary"
+          role="button"
+          :aria-label="t('changePassword.cancel')"
           type="reset"
           @click="show(false)"
         >

package/components/ResourceDetail/Masthead.vue

@@ -609,7 +609,7 @@ export default {
       .masthead-resource-title {
         padding: 0 8px;
         text-overflow: ellipsis;
-        overflow-x: hidden;
+        overflow: hidden;
         white-space: nowrap;
       }