@rancher/shell 3.0.2-rc.5 → 3.0.2

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

@@ -105,6 +105,10 @@ export default defineComponent({
 
   emits: ['update:value'],
 
+  data() {
+    return { currFocusedElem: undefined as undefined | EventTarget | null };
+  },
+
   computed: {
     /**
      * Creates a collection of Options from the provided props.
@@ -151,12 +155,33 @@ export default defineComponent({
     }
   },
 
+  beforeUnmount() {
+    const radioGroup = this.$refs?.radioGroup as HTMLInputElement;
+
+    radioGroup.removeEventListener('focusin', this.focusChanged);
+  },
+
+  mounted() {
+    const radioGroup = this.$refs?.radioGroup as HTMLInputElement;
+
+    radioGroup.addEventListener('focusin', this.focusChanged);
+  },
+
   methods: {
+    focusChanged(ev: Event) {
+      this.currFocusedElem = ev.target;
+    },
     /**
      * Keyboard left/right event listener to select next/previous option. Emits
      * the input event.
      */
     clickNext(direction: number): void {
+      // moving focus away from a custom group element and pressing arrow keys
+      // should not have any effect on the group - custom UI for radiogroup option(s)
+      if (this.currFocusedElem !== this.$refs?.radioGroup) {
+        return;
+      }
+
       const opts = this.normalizedOptions;
       const selected = opts.find((x) => x.value === this.value);
       let newIndex = (selected ? opts.indexOf(selected) : -1) + direction;
@@ -205,12 +230,15 @@ export default defineComponent({
 
     <!-- Group -->
     <div
+      ref="radioGroup"
       role="radiogroup"
       :aria-label="radioGroupLabel"
       class="radio-group"
       :class="{'row':row}"
-      @keyup.down.stop="clickNext(1)"
-      @keyup.up.stop="clickNext(-1)"
+      tabindex="0"
+      @keydown.down.prevent.stop="clickNext(1)"
+      @keydown.up.prevent.stop="clickNext(-1)"
+      @keydown.space.enter.stop.prevent
     >
       <div
         v-for="(option, i) in normalizedOptions"
@@ -230,7 +258,9 @@ export default defineComponent({
             :description="option.description"
             :val="option.value"
             :disabled="isDisabled"
+            :data-testid="`radio-button-${i}`"
             :mode="mode"
+            :prevent-focus-on-radio-groups="true"
             @update:value="$emit('update:value', $event)"
           />
         </slot>
@@ -241,9 +271,13 @@ export default defineComponent({
 
 <style lang='scss'>
 .radio-group {
-  &:focus {
-    border:none;
-    outline:none;
+  &:focus, &:focus-visible {
+    border: none;
+    outline: none;
+  }
+
+  &:focus-visible .radio-button-checked {
+    @include focus-outline;
   }
 
   h3 {

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -31,6 +31,16 @@ export default defineComponent({
   computed: {
     iconClass(): string {
       return this.status === 'error' ? 'icon-warning' : 'icon-info';
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    tooltipContent(): {[key: string]: any} | string {
+      if (this.isObject(this.value)) {
+        return {
+          ...{ content: this.value.content, popperClass: [`tooltip-${ status }`] }, ...this.value, triggers: ['hover', 'touch', 'focus']
+        };
+      }
+
+      return this.value ? { content: this.value, triggers: ['hover', 'touch', 'focus'] } : '';
     }
   },
   methods: {
@@ -49,9 +59,11 @@ export default defineComponent({
   >
     <template v-if="hover">
       <i
-        v-clean-tooltip="isObject(value) ? { ...{content: value.content, popperClass: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="tooltipContent"
+        v-stripped-aria-label="isObject(value) ? value.content : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
+        tabindex="0"
       />
     </template>
     <template v-else>

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

@@ -0,0 +1,97 @@
+import { mount } from '@vue/test-utils';
+import RcButton from './RcButton.vue';
+
+describe('rcButton.vue', () => {
+  it('renders with default role', () => {
+    const wrapper = mount(RcButton);
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('btn');
+    expect(button.classes()).toContain('role-primary');
+  });
+
+  it('applies correct role', () => {
+    const wrapper = mount(RcButton, { props: { primary: true } });
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('role-primary');
+  });
+
+  it('defaults to primary role if multiple roles are provided', () => {
+    const wrapper = mount(
+      RcButton,
+      {
+        props: {
+          primary:   true,
+          secondary: true,
+          tertiary:  true,
+        }
+      }
+    );
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('role-primary');
+  });
+
+  it('defaults to secondary role if both secondary and tertiary roles are provided', () => {
+    const wrapper = mount(
+      RcButton,
+      {
+        props: {
+          secondary: true,
+          tertiary:  true,
+        }
+      }
+    );
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('role-secondary');
+  });
+
+  it('applies correct size class', () => {
+    const wrapper = mount(RcButton, { props: { small: true } });
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('btn-sm');
+  });
+
+  it('renders slots correctly', () => {
+    const wrapper = mount(RcButton, {
+      slots: {
+        default: 'Click Me',
+        before:  'Before',
+        after:   'After',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Before');
+    expect(wrapper.text()).toContain('Click Me');
+    expect(wrapper.text()).toContain('After');
+  });
+
+  it('focuses the button when focus method is called', async() => {
+    const wrapper = mount(
+      RcButton,
+      { attachTo: document.body }
+    );
+
+    await wrapper.vm.focus();
+    const button = wrapper.find('button');
+
+    expect(button.element).toBe(document.activeElement);
+  });
+
+  it('applies additional classes from $attrs', () => {
+    const wrapper = mount(RcButton, { attrs: { class: 'extra-class' } });
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('extra-class');
+  });
+
+  it('applies ghost button styles correctly', () => {
+    const wrapper = mount(RcButton, { props: { ghost: true } });
+    const button = wrapper.find('button');
+
+    expect(button.classes()).toContain('role-ghost');
+  });
+});

package/rancher-components/RcButton/RcButton.vue

@@ -65,25 +65,30 @@ defineExpose({ focus });
 </template>
 
 <style lang="scss" scoped>
-.role-link {
-   &:focus, &.focused {
-    outline: var(--outline-width) solid var(--border);
-    box-shadow: 0 0 0 var(--outline-width) var(--outline);
-   }
-}
-
 button {
+  &.role-link {
+    &:focus, &.focused {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+
+    &:hover {
+      background-color: var(--accent-btn);
+      box-shadow: none;
+    }
+  }
+
   &.role-ghost {
     padding: 0;
     background-color: transparent;
 
     &:focus, &.focused {
-      outline: 2px solid var(--primary-keyboard-focus);
+      @include focus-outline;
       outline-offset: 0;
     }
 
     &:focus-visible {
-      outline: 2px solid var(--primary-keyboard-focus);
+      @include focus-outline;
       outline-offset: 0;
     }
   }

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -28,6 +28,8 @@ defineProps<{
   ariaLabel?: string
 }>();
 
+const emit = defineEmits(['update:open']);
+
 const {
   isMenuOpen,
   showMenu,
@@ -36,7 +38,7 @@ const {
   provideDropdownContext,
   registerDropdownCollection,
   handleKeydown,
-} = useDropdownContext();
+} = useDropdownContext(emit);
 
 provideDropdownContext();
 

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -53,12 +53,12 @@ const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Ele
   return newIndex;
 };
 
-const handleClick = () => {
+const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
     return;
   }
 
-  emits('click');
+  emits('click', e);
   close();
 };
 
@@ -85,6 +85,9 @@ const handleActivate = (e: KeyboardEvent) => {
     @keydown.enter.space="handleActivate"
     @keydown.up.down.stop="handleKeydown"
   >
+    <slot name="before">
+      <!--Empty slot content-->
+    </slot>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
@@ -93,6 +96,9 @@ const handleActivate = (e: KeyboardEvent) => {
 
 <style lang="scss" scoped>
   [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
     padding: 9px 8px;
     margin: 0 9px;
     border-radius: 4px;

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {
+  RcDropdown,
+  RcDropdownItem,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
+import { RcDropdownMenuComponentProps, DropdownOption } from './types';
+import IconOrSvg from '@shell/components/IconOrSvg';
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { buttonRole = 'primary', buttonSize = '' } = defineProps<RcDropdownMenuComponentProps>();
+
+const emit = defineEmits(['update:open', 'select']);
+
+const hasOptions = (options: DropdownOption[]) => {
+  return options.length !== undefined ? options.length : Object.keys(options).length > 0;
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :aria-label="dropdownAriaLabel"
+    @update:open="(e: boolean) => emit('update:open', e)"
+  >
+    <rc-dropdown-trigger
+      :[buttonRole]="true"
+      :[buttonSize]="true"
+      :data-testid="dataTestid"
+      :aria-label="buttonAriaLabel"
+    >
+      <i class="icon icon-actions" />
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <template
+        v-for="(a) in options"
+        :key="a.label"
+      >
+        <rc-dropdown-item
+          v-if="!a.divider"
+          @click="(e: MouseEvent) => emit('select', e, a)"
+        >
+          <template #before>
+            <IconOrSvg
+              v-if="a.icon || a.svg"
+              :icon="a.icon"
+              :src="a.svg"
+              class="icon"
+              color="header"
+            />
+          </template>
+          {{ a.label }}
+        </rc-dropdown-item>
+        <rc-dropdown-separator
+          v-else
+        />
+      </template>
+      <rc-dropdown-item
+        v-if="!hasOptions(options)"
+        disabled
+      >
+        No actions available
+      </rc-dropdown-item>
+    </template>
+  </rc-dropdown>
+</template>

package/rancher-components/RcDropdown/index.ts

@@ -2,3 +2,4 @@ export { default as RcDropdown } from './RcDropdown.vue';
 export { default as RcDropdownItem } from './RcDropdownItem.vue';
 export { default as RcDropdownSeparator } from './RcDropdownSeparator.vue';
 export { default as RcDropdownTrigger } from './RcDropdownTrigger.vue';
+export { default as RcDropdownMenu } from './RcDropdownMenu.vue';

package/rancher-components/RcDropdown/types.ts

@@ -1,5 +1,6 @@
 import { Ref, ref } from 'vue';
 import type { RcButtonType } from '@components/RcButton';
+import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
 
 export type DropdownContext = {
   handleKeydown: () => void;
@@ -20,3 +21,29 @@ export const defaultContext: DropdownContext = {
   isMenuOpen:        ref(false),
   close:             () => null,
 };
+
+export type DropdownOption = {
+  action?: string;
+  divider?: boolean;
+  enabled: boolean;
+  icon?: string;
+  svg?: string;
+  label?: string;
+  total: number;
+  allEnabled: boolean;
+  anyEnabled: boolean;
+  available: number;
+  bulkable?: boolean;
+  bulkAction?: string;
+  altAction?: string;
+  weight?: number;
+}
+
+export type RcDropdownMenuComponentProps = {
+  options: DropdownOption[];
+  buttonRole?: keyof ButtonRoleProps;
+  buttonSize?: keyof ButtonSizeProps;
+  buttonAriaLabel?: string;
+  dropdownAriaLabel?: string;
+  dataTestid?: string;
+}

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -1,7 +1,9 @@
-import { ref, provide, nextTick } from 'vue';
+import { ref, provide, nextTick, defineEmits } from 'vue';
 import { useDropdownCollection } from './useDropdownCollection';
 import { RcButtonType } from '@components/RcButton';
 
+const rcDropdownEmits = defineEmits(['update:open']);
+
 /**
  * Composable that provides the context for a dropdown menu. Includes methods
  * and state for managing the dropdown's visibility, focus, and keyboard
@@ -11,7 +13,7 @@ import { RcButtonType } from '@components/RcButton';
  * @returns Dropdown context methods and state. Used for programmatic
  * interactions and setting focus.
  */
-export const useDropdownContext = () => {
+export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
   const {
     dropdownItems,
     firstDropdownItem,
@@ -30,6 +32,7 @@ export const useDropdownContext = () => {
       didKeydown.value = false;
     }
     isMenuOpen.value = show;
+    emit('update:open', show);
   };
 
   /**

package/scripts/extension/helm/charts/ui-plugin-server/templates/_helpers.tpl

@@ -38,7 +38,7 @@ Common labels
 helm.sh/chart: {{ include "extension-server.chart" . }}
 {{ include "extension-server.selectorLabels" . }}
 {{- if .Chart.AppVersion }}
-app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | replace "+" "_" | quote }}
 {{- end }}
 app.kubernetes.io/managed-by: {{ .Release.Service }}
 {{- end }}
@@ -60,4 +60,4 @@ Pkg annotations
 {{ $key }}: {{ $value | quote }}
 {{- end }}
 {{- end }}
-{{- end }}
+{{- end }}

package/scripts/typegen.sh

@@ -34,6 +34,7 @@ ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/resource-
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/classify.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/dashboard-store/actions.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/steve/steve-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/steve/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/plugins/steve/hybrid-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/steve/ > /dev/null
 
 # # mixins
 ${BASE_DIR}/node_modules/.bin/tsc ${SHELL_DIR}/mixins/create-edit-view/index.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins/create-edit-view > /dev/null

package/store/__tests__/auth.test.ts

@@ -0,0 +1,120 @@
+import { actions } from '@shell/store/auth';
+import { createStore } from 'vuex';
+
+// jest.mock('@shell/utils/url', () => ({
+//   addParams:   () => ({}),
+//   parse:       () => ({}),
+//   removeParam: () => ({}),
+// }));
+
+describe('action: redirectTo', () => {
+  it('should include query parameters from redirect', async() => {
+    jest.spyOn(window, 'window', 'get');
+    const store = { dispatch: jest.fn() };
+    const clientId = '123';
+    const uri = 'anyURI';
+    const scope = 'anything';
+    const expectation = `:///?client_id=${ clientId }&redirect_uri=${ uri }&response_type=code&response_mode=query&scope=${ scope }&state=undefined`;
+    const options = {
+      provider:    'azuread',
+      redirect:    false,
+      redirectUrl: `?client_id=${ clientId }&redirect_uri=${ uri }&scope=${ scope }`,
+    };
+
+    const url = await actions.redirectTo(store as any, options);
+
+    expect(url).toStrictEqual(expectation);
+  });
+
+  it.each([
+    ['genericoidc', '://myhost/?redirect_uri=anyURI&scope=openid%20profile%20email&state=undefined'],
+  ])('given provider %p should return URL %p', async(provider, expectation) => {
+    jest.spyOn(window, 'window', 'get');
+    const store = { dispatch: jest.fn() };
+    const uri = 'anyURI'; // This field is added anyway, so we set a random value
+    const options = {
+      provider,
+      redirect:    false,
+      redirectUrl: `myhost?redirect_uri=${ uri }`,
+    };
+
+    const url = await actions.redirectTo(store as any, options);
+
+    expect(url).toStrictEqual(expectation);
+  });
+
+  describe.each([
+    // 'whatever',
+    // 'github',
+    // 'googleoauth',
+    // 'azuread',
+    // 'keycloakoidc',
+    'genericoidc',
+  ])('given provider %p', (provider) => {
+    it('should keep scope from options', async() => {
+      const customScope = 'myScope';
+      const options = {
+        provider,
+        redirectUrl: 'anyURL',
+        scopes:      customScope,
+        // scopesJoinChar: ' ', // it's not used for genericoidc
+        test:        true,
+        redirect:    false
+      };
+      const store = { dispatch: jest.fn() };
+
+      jest.spyOn(window, 'window', 'get');
+      const url = await actions.redirectTo(store as any, options);
+
+      expect(url).toContain(customScope);
+    });
+
+    it('should merge scopes into a single string and avoid duplication', async() => {
+      const defaultScopes = 'openid profile email';
+      const customScope = 'myScope';
+      const options = {
+        provider,
+        redirectUrl: 'anyURL',
+        scopes:      `${ defaultScopes } ${ customScope }`,
+        test:        true,
+        redirect:    false
+      };
+      const store = { dispatch: jest.fn() };
+
+      jest.spyOn(window, 'window', 'get');
+      const url = await actions.redirectTo(store as any, options);
+
+      expect(url).toContain('scope=openid%20profile%20email%20myScope&');
+    });
+  });
+});
+
+jest.mock('@shell/utils/auth');
+
+describe('action: test', () => {
+  describe('given providers with an action (github, google, azuread, oidc)', () => {
+    it('should call redirectTo with all the options', async() => {
+      const dispatchSpy = jest.fn().mockReturnValue('anyURL');
+      const store = createStore({
+        actions: {
+          getAuthConfig: () => ({ doAction: () => 'no action' }),
+          redirectTo:    dispatchSpy,
+        }
+      });
+      const provider = 'anyProvider';
+      const redirectUrl = undefined;
+      const body = { scope: ['any scope'] };
+      const options = {
+        provider,
+        redirectUrl,
+        scopes:   body.scope,
+        test:     true,
+        redirect: false
+      };
+
+      await actions.test(store, { provider, body });
+
+      expect(dispatchSpy.mock.calls[0][1]).toStrictEqual(options);
+    });
+  });
+});

package/store/action-menu.js

@@ -27,7 +27,7 @@ export const getters = {
   event:     (state) => state.event,
   resources: (state) => state.resources,
 
-  options(state) {
+  optionsArray(state) {
     let selected = state.resources;
 
     if ( !selected ) {
@@ -41,7 +41,7 @@ export const getters = {
     const map = {};
 
     for ( const node of selected ) {
-      if (node.availableActions) {
+      if (node?.availableActions) {
         for ( const act of node.availableActions ) {
           _add(map, act);
         }
@@ -50,7 +50,10 @@ export const getters = {
 
     const out = _filter(map);
 
-    return { ...out };
+    return [...out];
+  },
+  options(_state, getters) {
+    return { ...getters.optionsArray };
   },
 
 };
@@ -144,12 +147,19 @@ export const mutations = {
 
     state.modalData = data;
   },
+
+  SET_RESOURCE(state, resources) {
+    state.resources = !isArray(resources) ? [resources] : resources;
+  }
 };
 
 export const actions = {
   execute({ state }, { action, args, opts }) {
     return _execute(state.resources, action, args, opts);
   },
+  setResource({ commit }, resource) {
+    commit('SET_RESOURCE', resource);
+  }
 };
 
 // -----------------------------