@rancher/shell 3.0.5-rc.8 → 3.0.5

package/components/auth/login/saml.vue

@@ -22,12 +22,69 @@ export default {
       window.location.href = idpRedirectUrl;
     },
   },
+
+  computed: {
+    // If any of the 3 params is specified, this is a CLI login
+    isCLILogin() {
+      const {
+        cli,
+        requestId,
+        publicKey,
+        responseType
+      } = this.$route.query;
+
+      return cli || publicKey || responseType || requestId;
+    },
+    // If this is a CLI login, we must have the correct respone type and the other params must not be empty
+    invalidCLILogin() {
+      const { requestId, publicKey, responseType } = this.$route.query;
+
+      if (this.isCLILogin) {
+        return responseType !== 'kubeconfig' || !requestId || !publicKey;
+      }
+
+      return false;
+    },
+    cliLoginCode() {
+      const { requestId } = this.$route.query;
+
+      return requestId;
+    },
+    warningMessageKey() {
+      const { cli } = this.$route.query;
+
+      return cli === 'true' ? 'login.cli.warning' : 'login.cli.warningLegacy';
+    }
+  }
 };
 </script>
 
 <template>
   <div class="text-center">
+    <div
+      v-if="isCLILogin"
+      class="cli-login"
+    >
+      <div class="cli-message">
+        {{ t('login.cli.welcome') }}
+      </div>
+      <div
+        v-if="invalidCLILogin"
+        class="cli-message cli-error"
+      >
+        {{ t('login.cli.invalidParams') }}
+      </div>
+      <template v-else>
+        <div class="cli-message">
+          {{ t(warningMessageKey, {}, true) }}
+        </div>
+        <div class="cli-login-code">
+          {{ cliLoginCode }}
+        </div>
+      </template>
+    </div>
     <button
+      v-if="!invalidCLILogin"
       ref="btn"
       class="btn bg-primary"
       style="font-size: 18px;"
@@ -37,3 +94,32 @@ export default {
     </button>
   </div>
 </template>
+<style lang="scss" scoped>
+  .cli-login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > div {
+      margin-bottom: 8px
+    }
+
+    .cli-message {
+      font-size: 16px;
+
+      &.cli-error {
+        color: var(--error);
+      }
+    }
+
+    .cli-login-code {
+      font-family: 'Courier New', Courier, monospace;
+      border: 1px solid var(--border);
+      border-radius: var(--border-radius);
+      padding: 4px 8px;
+      margin: 8px 0 16px 0;
+      letter-spacing: 1px;
+      font-size: 16px;
+    }
+  }
+</style>

package/components/form/LabeledSelect.vue

@@ -4,7 +4,7 @@ import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
-import { onClickOption, calculatePosition } from '@shell/utils/select';
+import { calculatePosition } from '@shell/utils/select';
 import { generateRandomAlphaString } from '@shell/utils/string';
 import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
@@ -169,14 +169,19 @@ export default {
   },
 
   methods: {
-    // Ensure we only focus on open, otherwise we re-open on close
-    clickSelect() {
+    clickSelect(event) {
       if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
         return;
       }
 
+      // Ensure we don't toggle when clicking the clear button on multi-select
+      if (this.$attrs.multiple && event?.target.className === 'vs__deselect') {
+        return;
+      }
+
       this.isOpen = !this.isOpen;
 
+      // Ensure we only focus on open, otherwise we re-open on close
       if (this.isOpen) {
         this.focusSearch();
       }
@@ -262,10 +267,6 @@ export default {
 
     get,
 
-    onClickOption(option, event) {
-      onClickOption.call(this, option, event);
-    },
-
     dropdownShouldOpen(instance, forceOpen = false) {
       if (!this.isOpen) {
         return false;
@@ -428,7 +429,6 @@ export default {
           v-else
           class="vs__option-kind"
           :class="{ 'has-icon' : hasGroupIcon}"
-          @mousedown="(e) => onClickOption(option, e)"
         >
           {{ getOptionLabel(option) }}
           <i

package/components/form/ProjectMemberEditor.vue

@@ -286,6 +286,7 @@ export default {
       <template v-slot:body>
         <RadioGroup
           v-model:value="value.permissionGroup"
+          :mode="mode"
           data-testid="permission-options"
           :options="options"
           name="permission-group"
@@ -301,6 +302,7 @@ export default {
           >
             <Checkbox
               v-model:value="permission.value"
+              :mode="mode"
               :data-testid="`custom-permission-${i}`"
               :disabled="permission.locked"
               class="mb-5"

package/components/form/ResourceTabs/composable.ts

@@ -0,0 +1,54 @@
+import { randomStr } from '@shell/utils/string';
+import { sum } from 'lodash';
+import { computed, inject, provide, ref } from 'vue';
+
+const UPDATE_COUNT_PROVIDER_KEY = 'update-count';
+const USE_COUNTS_KEY = 'is-inside-resource-tabs';
+
+type UpdateCountFn = (key: string, count: number | undefined) => void;
+
+export const useIndicateUseCounts = () => {
+  provide(USE_COUNTS_KEY, true);
+};
+
+export const useTabCountWatcher = () => {
+  if (!inject<boolean>(USE_COUNTS_KEY, false)) {
+    return { isCountVisible: ref<boolean>(false) };
+  }
+
+  const countLedger = ref<{ [key: string]: number | undefined }>({});
+
+  const isCountVisible = computed(() => {
+    // Some tables are destroyed and recreated depending on visibility so we count keys
+    // to check if a table has been present in the tab even if the count has been cleared
+    return Object.keys(countLedger.value).length > 0;
+  });
+
+  const count = computed(() => {
+    return sum(Object.values(countLedger.value).map((count) => count || 0));
+  });
+
+  const updateCount = (key: string, count: number | undefined) => {
+    countLedger.value[key] = count;
+  };
+
+  provide(UPDATE_COUNT_PROVIDER_KEY, updateCount);
+
+  return { isCountVisible, count };
+};
+
+export const useTabCountUpdater = () => {
+  const tabKey = randomStr();
+  const updateCount = inject<UpdateCountFn>(UPDATE_COUNT_PROVIDER_KEY);
+
+  const updateTabCount = (count: number | undefined) => {
+    updateCount?.(tabKey, count);
+  };
+
+  const clearTabCount = () => updateTabCount(undefined);
+
+  return {
+    updateTabCount,
+    clearTabCount
+  };
+};

package/components/form/ResourceTabs/index.vue

@@ -16,6 +16,7 @@ import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { MESSAGE, REASON } from '@shell/config/table-headers';
 import { STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
+import { useIndicateUseCounts } from '@shell/components/form/ResourceTabs/composable';
 
 export default {
 
@@ -75,6 +76,12 @@ export default {
     }
   },
 
+  setup(props) {
+    if (props.mode === _VIEW) {
+      useIndicateUseCounts();
+    }
+  },
+
   data() {
     const inStore = this.$store.getters['currentStore'](EVENT);
     const eventSchema = this.$store.getters[`${ inStore }/schemaFor`](EVENT); // @TODO be smarter about which resources actually ever have events
@@ -155,15 +162,13 @@ export default {
       }
 
       return false;
+    },
+    children() {
+      return this.$slots?.default?.() || [];
     }
   },
 
   methods: {
-    // Ensures we only fetch events and show the table when the events tab has been activated
-    tabChange(neu) {
-      this.selectedTab = neu?.selectedName;
-    },
-
     /**
     * Conditions come from a resource's `status`. They are used by both core resources like workloads as well as those from CRDs
     * - Workloads
@@ -243,7 +248,6 @@ export default {
     @changed="tabChange"
   >
     <slot />
-
     <Tab
       v-if="showConditions"
       label-key="resourceTabs.conditions.tab"
@@ -262,7 +266,6 @@ export default {
     >
       <!-- namespaced: false given we don't want the default handling of namespaced resource (apply header filter)  -->
       <PaginatedResourceTable
-        v-if="selectedTab === 'events'"
         :schema="eventSchema"
         :local-filter="filterEventsLocal"
         :api-filter="filterEventsApi"

package/components/form/Select.vue

@@ -4,7 +4,7 @@ import LabeledFormElement from '@shell/mixins/labeled-form-element';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { generateRandomAlphaString } from '@shell/utils/string';
 import { LabeledTooltip } from '@components/LabeledTooltip';
-import { onClickOption, calculatePosition } from '@shell/utils/select';
+import { calculatePosition } from '@shell/utils/select';
 import { _VIEW } from '@shell/config/query-params';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { ref } from 'vue';
@@ -94,7 +94,11 @@ export default {
     isLangSelect: {
       type:    Boolean,
       default: false
-    }
+    },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
   setup() {
     const select = ref(null);
@@ -134,14 +138,19 @@ export default {
       calculatePosition(dropdownList, component, width, this.placement);
     },
 
-    // Ensure we only focus on open, otherwise we re-open on close
     clickSelect(ev) {
       if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
         return;
       }
 
+      // Ensure we don't toggle when clicking the clear button on multi-select
+      if (this.$attrs.multiple && ev?.target.className === 'vs__deselect') {
+        return;
+      }
+
       this.isOpen = !this.isOpen;
 
+      // Ensure we only focus on open, otherwise we re-open on close
       if (this.isOpen) {
         this.focusSearch(ev);
       }
@@ -163,9 +172,6 @@ export default {
 
     get,
 
-    onClickOption(option, event) {
-      onClickOption.call(this, option, event);
-    },
     selectable(opt) {
       // Lets you disable options that are used
       // for headings on groups of options.
@@ -352,10 +358,7 @@ export default {
       <template
         #option="option"
       >
-        <div
-          :lang="isLangSelect ? option.value : undefined"
-          @mousedown="(e) => onClickOption(option, e)"
-        >
+        <div :lang="isLangSelect ? option.value : undefined">
           {{ getOptionLabel(option.label) }}
         </div>
       </template>

package/components/form/__tests__/LabeledSelect.test.ts

@@ -291,4 +291,137 @@ describe('component: LabeledSelect', () => {
     expect(spyFocus).toHaveBeenCalled();
     expect(spyPreventDefault).not.toHaveBeenCalled();
   });
+
+  describe('function: clickSelect', () => {
+    it('should open dropdown when clickSelect is called and not disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  false,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(true);
+    });
+
+    it('should not open dropdown when clickSelect is called and disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: true,
+          loading:  false,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when loading is true', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  true,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when mode is _VIEW', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  false,
+          mode:     _VIEW
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not clear value if disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          multiple: true,
+          disabled: true,
+          mode:     _EDIT
+        }
+      });
+
+      const clearBtn = wrapper.find('.vs__deselect');
+
+      expect(clearBtn.exists()).toBe(true);
+
+      await clearBtn.trigger('mousedown');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('update:value')).toBeUndefined();
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when remove button is clicked', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          multiple: true,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      const clearBtn = wrapper.find('.vs__deselect');
+
+      await clearBtn.trigger('mousedown');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('update:value')).toBeUndefined();
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+  });
 });

package/components/form/__tests__/Select.test.ts

@@ -1,6 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 import Select from '@shell/components/form/Select.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 const SelectComponent = Select as ReturnType<typeof defineComponent>;
 
@@ -100,4 +101,137 @@ describe('select.vue', () => {
     expect(spyFocus).toHaveBeenCalled();
     expect(spyPreventDefault).not.toHaveBeenCalled();
   });
+
+  describe('function: clickSelect', () => {
+    it('should open dropdown when clickSelect is called and not disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  false,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(true);
+    });
+
+    it('should not open dropdown when clickSelect is called and disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: true,
+          loading:  false,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when loading is true', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  true,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when mode is _VIEW', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          disabled: false,
+          loading:  false,
+          mode:     _VIEW
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      wrapper.vm.clickSelect();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not clear value if disabled', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          multiple: true,
+          disabled: true,
+          mode:     _EDIT
+        }
+      });
+
+      const clearBtn = wrapper.find('.vs__deselect');
+
+      expect(clearBtn.exists()).toBe(true);
+
+      await clearBtn.trigger('mousedown');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('update:value')).toBeUndefined();
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+
+    it('should not open dropdown when remove button is clicked', async() => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(Select, {
+        props: {
+          value,
+          options:  [{ label, value }],
+          multiple: true,
+          mode:     _EDIT
+        }
+      });
+
+      expect(wrapper.vm.isOpen).toBe(false);
+
+      const clearBtn = wrapper.find('.vs__deselect');
+
+      await clearBtn.trigger('mousedown');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('update:value')).toBeUndefined();
+      expect(wrapper.vm.isOpen).toBe(false);
+    });
+  });
 });

package/components/nav/Header.vue

@@ -29,6 +29,7 @@ import {
   RcDropdownSeparator,
   RcDropdownTrigger
 } from '@components/RcDropdown';
+import { SLO_AUTH_PROVIDERS } from '@shell/store/auth';
 
 export default {
 
@@ -99,10 +100,10 @@ export default {
       'showWorkspaceSwitcher'
     ]),
 
-    samlAuthProviderEnabled() {
+    sloAuthProviderEnabled() {
       const publicAuthProviders = this.$store.getters['rancher/all']('authProvider');
 
-      return publicAuthProviders.find((authProvider) => configType[authProvider.id] === 'saml') || {};
+      return publicAuthProviders.find((authProvider) => SLO_AUTH_PROVIDERS.includes(configType[authProvider?.id])) || {};
     },
 
     shouldShowSloLogoutModal() {
@@ -111,7 +112,7 @@ export default {
         return false;
       }
 
-      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = this.samlAuthProviderEnabled;
+      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = this.sloAuthProviderEnabled;
 
       return logoutAllSupported && logoutAllEnabled && !logoutAllForced;
     },
@@ -276,8 +277,8 @@ export default {
     showSloModal() {
       this.$store.dispatch('management/promptModal', {
         component:      'SloDialog',
-        componentProps: { authProvider: this.samlAuthProviderEnabled },
-        modalWidth:     '500px'
+        componentProps: { authProvider: this.sloAuthProviderEnabled },
+        modalWidth:     '600px'
       });
     },
     // Sizes the product area of the header such that it shrinks to ensure the whole header bar can be shown

package/composables/useExtensionManager.ts

@@ -0,0 +1,17 @@
+import { ExtensionManager } from '@shell/types/extension-manager';
+import { getExtensionManager } from '@shell/core/extension-manager-impl';
+
+/**
+ * Provides access to the registered extension manager instance. Used within Vue
+ * components or other composables that require extension functionality.
+ * @returns The extension manager instance
+ */
+export const useExtensionManager = (): ExtensionManager => {
+  const extension = getExtensionManager();
+
+  if (!extension) {
+    throw new Error('useExtensionManager must be called after the extensionManager has been initialized');
+  }
+
+  return extension;
+};