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

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,7 @@ generic:
   comingSoon: Coming Soon
   comma: ', '
   copy: Copy
+  copyToClipboard: Copy text to Clipboard
   create: Create
   created: Created
   customize: Customize
@@ -2440,6 +2441,7 @@ fleet:
       resources: Resources
       unready: Non-Ready
     auth:
+      title: Authentication
       label: Authentication
       git: Git Authentication
       helm: Helm Authentication
@@ -2450,20 +2452,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:
@@ -4380,6 +4382,8 @@ plugins:
   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 +4391,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
@@ -5139,10 +5145,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

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/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,9 +48,12 @@ 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
       class="icon"

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

package/components/Tabbed/index.vue

@@ -276,12 +276,11 @@ export default {
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
-          :aria-label="tab.labelDisplay"
+          :aria-label="tab.labelDisplay || ''"
           role="tab"
           tabindex="0"
           @click.prevent="select(tab.name, $event)"
-          @keyup.enter="select(tab.name, $event)"
-          @keyup.space="select(tab.name, $event)"
+          @keyup.enter.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -409,10 +408,8 @@ export default {
 
       &:focus-visible {
         @include focus-outline;
-
-        span {
-          text-decoration: underline;
-        }
+        outline-offset: -4px;
+        text-decoration: none;
       }
     }
 

package/components/__tests__/Carousel.test.ts

@@ -1,35 +1,41 @@
 import { mount } from '@vue/test-utils';
 import Carousel from '@shell/components/Carousel.vue';
 
+const sliders = [
+  {
+    key:              'key-0',
+    repoName:         'some-repo-name-0',
+    chartNameDisplay: 'chart-name-display-0',
+    chartDescription: 'chart-description-0'
+  },
+  {
+    key:              'key-1',
+    repoName:         'some-repo-name-1',
+    chartNameDisplay: 'chart-name-display-1',
+    chartDescription: 'chart-description-1'
+  },
+  {
+    key:              'key-2',
+    repoName:         'some-repo-name-2',
+    chartNameDisplay: 'chart-name-display-2',
+    chartDescription: 'chart-description-2'
+  },
+  {
+    key:              'key-3',
+    repoName:         'some-repo-name-3',
+    chartNameDisplay: 'chart-name-display-3',
+    chartDescription: 'chart-description-3'
+  },
+  {
+    key:              'key-4',
+    repoName:         'some-repo-name-4',
+    chartNameDisplay: 'chart-name-display-4',
+    chartDescription: 'chart-description-4'
+  }
+];
+
 describe('component: Carousel', () => {
   it('should render component with the correct data applied', async() => {
-    const sliders = [
-      {
-        key:              'key-0',
-        repoName:         'some-repo-name-0',
-        chartNameDisplay: 'chart-name-display-0',
-        chartDescription: 'chart-description-0'
-      },
-      {
-        key:              'key-1',
-        repoName:         'some-repo-name-1',
-        chartNameDisplay: 'chart-name-display-1',
-        chartDescription: 'chart-description-1'
-      },
-      {
-        key:              'key-2',
-        repoName:         'some-repo-name-2',
-        chartNameDisplay: 'chart-name-display-2',
-        chartDescription: 'chart-description-2'
-      },
-      {
-        key:              'key-3',
-        repoName:         'some-repo-name-3',
-        chartNameDisplay: 'chart-name-display-3',
-        chartDescription: 'chart-description-3'
-      }
-    ];
-
     const wrapper = mount(Carousel, {
       props:  { sliders },
       global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
@@ -40,4 +46,27 @@ describe('component: Carousel', () => {
       expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
     });
   });
+
+  it.each([
+    [sliders.slice(0, 2)],
+    [sliders.slice(0, 3)],
+    [sliders.slice(0, 4)],
+    [sliders.slice(0, 5)]
+  ])('should have the correct width and left position', async(sliders) => {
+    const wrapper = mount(Carousel, {
+      props:  { sliders },
+      global: { mocks: { $store: { getters: { clusterId: () => 'some-cluster-id' } } } }
+    });
+
+    const width = 60 * (wrapper.vm.slider.length + 2);
+    const initialLeft = -(40 + wrapper.vm.activeItemId * 60);
+
+    expect(wrapper.vm.trackStyle).toContain(`width: ${ width }%`);
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId + 1; // next slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ -(40 + wrapper.vm.activeItemId * 60) }`);
+    wrapper.vm.activeItemId = wrapper.vm.activeItemId - 1; // previous slide
+    expect(wrapper.vm.trackStyle).toContain(`left: ${ initialLeft }`);
+  });
 });

package/components/form/LabeledSelect.vue

@@ -291,7 +291,7 @@ export default {
     ]"
     :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @keyup.enter.space.down="focusSearch"
+    @keydown.enter.space.down="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"