dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -2,11 +2,13 @@
 import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 interface Option {
   value: unknown,
   label: string,
   description?: string,
+  radioOptionId?: string,
 }
 
 export default defineComponent({
@@ -106,7 +108,10 @@ export default defineComponent({
   emits: ['update:value'],
 
   data() {
-    return { currFocusedElem: undefined as undefined | EventTarget | null };
+    return {
+      currFocusedElem:      undefined as undefined | EventTarget | null,
+      radioOptionsIdPrefix: `radio-option-${ generateRandomAlphaString(12) }-`
+    };
   },
 
   computed: {
@@ -120,16 +125,21 @@ export default defineComponent({
         const opt = this.options[i];
 
         if (typeof opt === 'object' && opt) {
-          out.push(opt);
+          out.push({
+            ...opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
+          });
         } else if (this.labels) {
           out.push({
-            label: this.labels[i],
-            value: opt
+            label:         this.labels[i],
+            value:         opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
           });
         } else {
           out.push({
-            label: opt,
-            value: opt
+            label:         opt,
+            value:         opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
           });
         }
       }
@@ -150,8 +160,36 @@ export default defineComponent({
     isDisabled(): boolean {
       return (this.disabled || this.isView);
     },
-    radioGroupLabel(): string {
-      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : '';
+    /**
+     * Radio Group Aria Label based on the label present on this input
+     */
+    radioGroupAriaLabel(): string | undefined {
+      // seems like VoiceOver screen reader isn't really picking up aria-labelledby
+      // let's just gather the label that comes in and assign it.
+      // We allow override with $attrs['aria-label'] for more control
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'] as string || undefined;
+      }
+
+      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : undefined;
+    },
+    /**
+     * Radio Group Aria DescribedBy parent attribute for extendability
+     */
+    radioGroupAriaDescribedBy(): string | undefined {
+      return this.$attrs['aria-describedby'] as string || undefined;
+    },
+    /**
+     * Radio Group value for aria-activedescendant HTML prop
+     */
+    ariaActiveDescendant(): string | undefined {
+      const activeOpt = this.normalizedOptions.find((opt) => opt.value === this.value);
+
+      if (this.value && activeOpt) {
+        return activeOpt.radioOptionId;
+      }
+
+      return '';
     }
   },
 
@@ -199,45 +237,46 @@ export default defineComponent({
 </script>
 
 <template>
-  <fieldset>
+  <div style="display: flex;">
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
-      class="radio-group label"
+      class="radio-group label radio-group-labelBox"
     >
-      <legend>
-        <slot name="label">
-          <span class="radio-group-title">
-            <t
-              v-if="labelKey"
-              :k="labelKey"
-            />
-            <template v-else-if="label">
-              {{ label }}
-            </template>
-            <i
-              v-if="tooltipKey"
-              v-clean-tooltip="t(tooltipKey)"
-              class="icon icon-info icon-lg"
-            />
-            <i
-              v-else-if="tooltip"
-              v-clean-tooltip="tooltip"
-              class="icon icon-info icon-lg"
-            />
-          </span>
-        </slot>
-      </legend>
+      <slot name="label">
+        <span class="radio-group-title">
+          <t
+            v-if="labelKey"
+            :k="labelKey"
+          />
+          <template v-else-if="label">
+            {{ label }}
+          </template>
+          <i
+            v-if="tooltipKey"
+            v-clean-tooltip="t(tooltipKey)"
+            class="icon icon-info icon-lg"
+          />
+          <i
+            v-else-if="tooltip"
+            v-clean-tooltip="tooltip"
+            class="icon icon-info icon-lg"
+          />
+        </span>
+      </slot>
     </div>
 
     <!-- Group -->
     <div
       ref="radioGroup"
       role="radiogroup"
-      :aria-label="radioGroupLabel"
+      :aria-label="radioGroupAriaLabel"
+      :aria-describedby="radioGroupAriaDescribedBy"
+      :aria-activedescendant="ariaActiveDescendant"
       class="radio-group"
       :class="{'row':row}"
-      tabindex="0"
+      :tabindex="isDisabled ? -1 : 0"
+      :aria-disabled="isDisabled"
       @keydown.down.prevent.stop="clickNext(1)"
       @keydown.up.prevent.stop="clickNext(-1)"
       @keydown.space.enter.stop.prevent
@@ -257,6 +296,7 @@ export default defineComponent({
             :name="name"
             :value="value"
             :label="option.label"
+            :radio-option-id="option.radioOptionId"
             :description="option.description"
             :val="option.value"
             :disabled="isDisabled"
@@ -268,7 +308,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </fieldset>
+  </div>
 </template>
 
 <style lang='scss'>
@@ -298,8 +338,11 @@ export default defineComponent({
   }
 }
 .radio-group-title{
-  font-size: 14px;
-  margin-bottom: 15px;
+  font-size: 12px !important;
+  margin-bottom: 0px !important;
   display: inline-block;
 }
+.radio-group-labelBox {
+  width: 160px;
+}
 </style>

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -165,10 +165,14 @@ export default defineComponent({
         return;
       }
 
+      // el.style.height = '1px';
+
       const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
       const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
 
       el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
+      // el.style.height = `${ neu }px`;
+
       this.curHeight = neu;
     }
   }

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -29,6 +29,11 @@ export default defineComponent({
       type:    String,
       default: '',
     },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:value'],
@@ -84,8 +89,12 @@ export default defineComponent({
 </script>
 
 <template>
-  <span class="toggle-container">
+  <span
+    class="toggle-container"
+    :class="{'toggle-disabled': disabled}"
+  >
     <span
+      style="width: 160px;"
       class="label no-select hand"
       :class="{ active: !state}"
       @click="toggle(false)"
@@ -126,6 +135,18 @@ $toggle-height: 16px;
   span:last-child {
     padding-left: 6px;
   }
+
+  &.toggle-disabled {
+    pointer-events: none;
+
+    .slider {
+      background-color: var(--checkbox-disabled-bg);
+
+      &:before {
+        opacity: 0.6;
+      }
+    }
+  }
 }
 /* The switch - the box around the slider */
 .switch {

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -73,6 +73,7 @@ export default defineComponent({
         class="icon status-icon"
         tabindex="0"
         :data-testid="componentTestid"
+        role="tooltip"
       />
     </template>
     <template v-else>

package/rancher-components/RcButton/RcButton.vue

@@ -51,7 +51,7 @@ defineExpose({ focus });
   <button
     ref="RcFocusTarget"
     role="button"
-    :class="{ ...buttonClass, ...($attrs.class || { }) }"
+    :class="{ ...buttonClass }"
   >
     <slot name="before">
       <!-- Empty Content -->

package/rancher-components/RcDropdown/RcDropdown.test.ts

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { RcDropdown } from '@components/RcDropdown';
+
+const vDropdownMock = defineComponent({
+  template: `
+    <div class="popper">
+      <slot name="popper" />
+    </div>
+  `,
+});
+
+describe('component: RcDropdown.vue', () => {
+  it('should not change the height if the dropdown fits within the screen', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 600,
+        height: 400,
+      }),
+      writable: true,
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('');
+  });
+
+  it('should apply correct height if dropdown exceeds the top edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    2, // Exceeds (top - padding)
+        bottom: 300,
+        height: 298,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('268px');
+  });
+
+  it('should apply correct height if dropdown exceeds the bottom edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 925 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 920, // Exceeds (bottom + padding)
+        height: 720,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('693px');
+  });
+
+  it('should apply correct height if dropdown exceeds both top and bottom edges', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 400 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    -800, // Exceeds top
+        bottom: 800, // Exceeds bottom
+        height: 1600,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('368px');
+  });
+});

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -47,6 +47,7 @@ const {
   provideDropdownContext,
   registerDropdownCollection,
   handleKeydown,
+  setDropdownDimensions
 } = useDropdownContext(emit);
 
 provideDropdownContext();
@@ -57,6 +58,7 @@ const dropdownTarget = ref(null);
 useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
+  setDropdownDimensions(dropdownTarget.value);
   registerDropdownCollection(dropdownTarget.value);
   setFocus('down');
 };
@@ -137,6 +139,7 @@ const applyShow = () => {
         }
 
         .v-popper__inner {
+          overflow: unset;
           /* padding: 10px 0 10px 0; */
           padding: 0px;
           /* min-width: 145px; */
@@ -146,6 +149,9 @@ const applyShow = () => {
   }
 
   .dropdownTarget {
+    overflow: auto;
+    padding: 3px 0; // Need padding at top and bottom in order to show the focus border for the notification
+
     &:focus-visible, &:focus {
       outline: none;
     }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -2,56 +2,17 @@
 /**
  * An item for a dropdown menu. Used in conjunction with RcDropdown.
  */
-import { inject } from 'vue';
-import { DropdownContext, defaultContext } from './types';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
 
 const props = defineProps({ disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { close, dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
-
-/**
- * Handles keydown events to navigate between dropdown items.
- * @param {KeyboardEvent} e - The keydown event.
- */
-const handleKeydown = (e: KeyboardEvent) => {
-  const activeItem = document.activeElement;
-
-  const activeIndex = dropdownItems.value.indexOf(activeItem || new HTMLElement());
-
-  if (activeIndex < 0) {
-    return;
-  }
-
-  const shouldAdvance = e.key === 'ArrowDown';
-
-  const newIndex = findNewIndex(shouldAdvance, activeIndex, dropdownItems.value);
-
-  if (dropdownItems.value[newIndex] instanceof HTMLElement) {
-    dropdownItems.value[newIndex].focus();
-  }
-};
-
-/**
- * Finds the new index for the dropdown item based on the key pressed.
- * @param shouldAdvance - Whether to advance to the next or previous item.
- * @param activeIndex - Current active index.
- * @param itemsArr - Array of dropdown items.
- * @returns The new index.
- */
-const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Element[]) => {
-  const newIndex = shouldAdvance ? activeIndex + 1 : activeIndex - 1;
-
-  if (newIndex > itemsArr.length - 1) {
-    return 0;
-  }
-
-  if (newIndex < 0) {
-    return itemsArr.length - 1;
-  }
-
-  return newIndex;
-};
+const {
+  handleKeydown,
+  close,
+  handleActivate,
+  scrollIntoView,
+} = useDropdownItem();
 
 const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
@@ -62,15 +23,6 @@ const handleClick = (e: MouseEvent) => {
   close();
 };
 
-/**
- * Handles keydown events to activate the dropdown item.
- * @param e - The keydown event.
- */
-const handleActivate = (e: KeyboardEvent) => {
-  if (e?.target instanceof HTMLElement) {
-    e?.target?.click();
-  }
-};
 </script>
 
 <template>
@@ -84,6 +36,7 @@ const handleActivate = (e: KeyboardEvent) => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
   >
     <slot name="before">
       <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownItemCheckbox.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import { Checkbox as RcCheckbox } from '@components/Form/Checkbox';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+
+const props = defineProps({ modelValue: Boolean, disabled: Boolean });
+const emits = defineEmits(['click']);
+
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
+
+const handleClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  emits('click', !props.modelValue);
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitemcheckbox"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
+  >
+    <rc-checkbox :value="modelValue">
+      <template #label>
+        <slot name="default">
+          <!--Empty slot content-->
+        </slot>
+      </template>
+    </rc-checkbox>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+import { ref } from 'vue';
+
+type LabeledSelectComponent = {
+  focusSearch: () => void;
+};
+
+defineProps({
+  modelValue: {
+    type:    String,
+    default: ''
+  },
+  disabled: Boolean,
+  options:  {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+});
+const emits = defineEmits(['click', 'select']);
+
+const { handleKeydown, handleActivate, scrollIntoView } = useDropdownItem();
+
+const dropdownMenuItem = ref<HTMLDivElement | null>(null);
+const menuItemSelect = ref<LabeledSelectComponent | null>(null);
+
+const handleClick = () => {
+  menuItemSelect?.value?.focusSearch();
+};
+
+const focusMenuItem = () => {
+  dropdownMenuItem?.value?.focus();
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitem"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
+  >
+    <LabeledSelect
+      ref="menuItemSelect"
+      :value="modelValue"
+      :label="t('wm.containerLogs.range.label')"
+      :options="options"
+      :clearable="false"
+      placement="top"
+      @keydown.enter.stop
+      @update:value="emits('select', $event)"
+      @on-close="focusMenuItem"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -33,10 +33,10 @@ const hasOptions = (options: DropdownOption[]) => {
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >
-    <div v-if="showIcon">
-      <i data-v-5db2c2c7="" class="icon icon-actions" alt="More actions icon"></i>
-    </div>
-    <a v-else href="javascript:;">操作</a>
+      <div v-if="showIcon">
+        <i class="icon icon-actions" />
+      </div>
+      <a v-else href="javascript:;">操作</a>
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template
@@ -58,16 +58,15 @@ const hasOptions = (options: DropdownOption[]) => {
           </template> -->
           {{ a.label }}
         </rc-dropdown-item>
-        <!-- <rc-dropdown-separator
+        <rc-dropdown-separator
           v-else
-        /> -->
+        />
       </template>
       <rc-dropdown-item
         v-if="!hasOptions(options)"
         disabled
       >
-        <!-- No actions available -->
-         暂无可执行的操作。
+        暂无可执行的操作。
       </rc-dropdown-item>
     </template>
   </rc-dropdown>