@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/nav/WindowManager/ContainerLogs.vue

@@ -10,8 +10,11 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
+import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
+import { useStore } from 'vuex';
 import { debounce } from 'lodash';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 import { escapeRegex } from '@shell/utils/string';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
@@ -91,6 +94,7 @@ export default {
     Checkbox,
     AsyncButton,
     VirtualList,
+    ContainerLogsActions,
   },
 
   props: {
@@ -130,6 +134,13 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       container:           this.initialContainer || this.pod?.defaultContainerName,
@@ -145,7 +156,8 @@ export default {
       lines:               [],
       now:                 new Date(),
       logItem:             shallowRef(LogItem),
-      isContainerMenuOpen: false
+      isContainerMenuOpen: false,
+      range:               '',
     };
   },
 
@@ -636,72 +648,85 @@ export default {
         </div>
 
         <div class="log-action log-action-group ml-5">
-          <div
-            role="menu"
-            tabindex="0"
-            :aria-label="t('wm.containerLogs.logActionMenu')"
-            @click="openContainerMenu"
-            @blur.capture="closeContainerMenu"
-            @keyup.enter="openContainerMenu"
-            @keyup.space="openContainerMenu"
-          >
-            <v-dropdown
-              :triggers="[]"
-              :shown="isContainerMenuOpen"
-              placement="top"
-              popperClass="containerLogsDropdown"
-              :autoHide="false"
-              :flip="false"
-              :container="false"
-              @focus.capture="openContainerMenu"
+          <template v-if="featureDropdownMenu">
+            <ContainerLogsActions
+              :range="range"
+              :range-options="rangeOptions"
+              :wrap="wrap"
+              :timestamps="timestamps"
+              @toggle-range="toggleRange"
+              @toggle-wrap="toggleWrap"
+              @toggle-timestamps="toggleTimestamps"
+            />
+          </template>
+          <template v-else>
+            <div
+              role="menu"
+              tabindex="0"
+              :aria-label="t('wm.containerLogs.logActionMenu')"
+              @click="openContainerMenu"
+              @blur.capture="closeContainerMenu"
+              @keyup.enter="openContainerMenu"
+              @keyup.space="openContainerMenu"
             >
-              <button
-                class="btn role-primary btn-cog"
-                role="button"
-                :aria-label="t('wm.containerLogs.options')"
+              <v-dropdown
+                :triggers="[]"
+                :shown="isContainerMenuOpen"
+                placement="top"
+                popperClass="containerLogsDropdown"
+                :autoHide="false"
+                :flip="false"
+                :container="false"
+                @focus.capture="openContainerMenu"
               >
-                <i
-                  class="icon icon-gear"
-                  :alt="t('wm.containerLogs.options')"
-                />
-                <i
-                  class="icon icon-chevron-up"
-                  :alt="t('wm.containerLogs.expand')"
-                />
-              </button>
-
-              <template #popper>
-                <div class="filter-popup">
-                  <LabeledSelect
-                    v-model:value="range"
-                    class="range"
-                    :label="t('wm.containerLogs.range.label')"
-                    :options="rangeOptions"
-                    :clearable="false"
-                    placement="top"
-                    role="menuitem"
-                    @update:value="toggleRange($event)"
+                <button
+                  class="btn role-primary btn-cog"
+                  role="button"
+                  :aria-label="t('wm.containerLogs.options')"
+                >
+                  <i
+                    class="icon icon-gear"
+                    :alt="t('wm.containerLogs.options')"
                   />
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.wrap')"
-                      :value="wrap"
-                      role="menuitem"
-                      @update:value="toggleWrap"
-                    />
-                  </div>
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.timestamps')"
-                      :value="timestamps"
+                  <i
+                    class="icon icon-chevron-up"
+                    :alt="t('wm.containerLogs.expand')"
+                  />
+                </button>
+
+                <template #popper>
+                  <div class="filter-popup">
+                    <LabeledSelect
+                      v-model:value="range"
+                      class="range"
+                      :label="t('wm.containerLogs.range.label')"
+                      :options="rangeOptions"
+                      :clearable="false"
+                      placement="top"
                       role="menuitem"
-                      @update:value="toggleTimestamps"
+                      @update:value="toggleRange($event)"
                     />
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.wrap')"
+                        :value="wrap"
+                        role="menuitem"
+                        @update:value="toggleWrap"
+                      />
+                    </div>
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.timestamps')"
+                        :value="timestamps"
+                        role="menuitem"
+                        @update:value="toggleTimestamps"
+                      />
+                    </div>
                   </div>
-                </div>
-              </template>
-            </v-dropdown>
-          </div>
+                </template>
+              </v-dropdown>
+            </div>
+          </template>
         </div>
 
         <div class="log-action log-action-group ml-5">
@@ -874,4 +899,5 @@ export default {
       }
     }
   }
+
 </style>

package/components/nav/WindowManager/ContainerLogsActions.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  RcDropdown,
+  RcDropdownTrigger,
+  RcDropdownItemCheckbox,
+  RcDropdownItemSelect,
+} from '@components/RcDropdown';
+
+defineProps({
+  range: {
+    type:    String,
+    default: '',
+  },
+  rangeOptions: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  wrap:       Boolean,
+  timestamps: Boolean,
+});
+
+defineEmits([
+  'toggleRange',
+  'toggleWrap',
+  'toggleTimestamps',
+]);
+
+</script>
+
+<template>
+  <rc-dropdown>
+    <rc-dropdown-trigger
+      class="condensed"
+    >
+      <i
+        class="icon icon-gear"
+        :alt="t('wm.containerLogs.options')"
+      />
+      <template #after>
+        <i
+          class="icon icon-chevron-up"
+          :alt="t('wm.containerLogs.expand')"
+        />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item-select
+        :model-value="range"
+        :options="rangeOptions"
+        @select="$emit('toggleRange', $event)"
+      />
+      <rc-dropdown-item-checkbox
+        :model-value="wrap"
+        @click="$emit('toggleWrap', $event)"
+      >
+        {{ t('wm.containerLogs.wrap') }}
+      </rc-dropdown-item-checkbox>
+      <rc-dropdown-item-checkbox
+        :model-value="timestamps"
+        @click="$emit('toggleTimestamps', $event)"
+      >
+        {{ t('wm.containerLogs.timestamps') }}
+      </rc-dropdown-item-checkbox>
+    </template>
+  </rc-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .condensed {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    min-height: 30px;
+  }
+</style>

package/components/templates/blank.vue

@@ -9,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.blank')"
+  >
     <router-view :key="$route.path" />
 
     <Inactivity />

package/components/templates/default.vue

@@ -7,11 +7,12 @@ import {
 } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
 import PromptModal from '@shell/components/PromptModal';
-import AssignTo from '@shell/components/AssignTo';
 import Header from '@shell/components/nav/Header';
 import Inactivity from '@shell/components/Inactivity';
 import Brand from '@shell/mixins/brand';
@@ -34,11 +35,12 @@ export default {
   components: {
     PromptRemove,
     PromptRestore,
-    AssignTo,
     PromptModal,
     Header,
     ActionMenu,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     WindowManager,
     FixedBanner,
     AwsComplianceBanner,
@@ -198,6 +200,7 @@ export default {
       <main
         v-if="clusterAndRouteReady"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -206,8 +209,8 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
-        <AssignTo />
         <PromptModal />
+        <ModalManager />
         <button
           v-if="noLocaleShortcut"
           v-shortkey.once="['shift','l']"
@@ -235,6 +238,7 @@ export default {
       <main
         v-else-if="unmatchedRoute"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -257,6 +261,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>

package/components/templates/home.vue

@@ -3,6 +3,8 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
@@ -17,6 +19,8 @@ export default {
     Header,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AzureWarning,
     AwsComplianceBanner,
     Inactivity,
@@ -58,6 +62,7 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
     <PromptModal />
+    <ModalManager />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"
@@ -67,7 +72,10 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.home')"
+      >
         <router-view
           :key="$route.path"
           class="outlet"
@@ -76,6 +84,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <button
       v-if="themeShortcut"
       v-shortkey.once="['shift','t']"

package/components/templates/plain.vue

@@ -3,11 +3,12 @@ import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import Header from '@shell/components/nav/Header';
 import PromptRemove from '@shell/components/PromptRemove';
-import AssignTo from '@shell/components/AssignTo';
 import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
@@ -19,13 +20,14 @@ export default {
 
   components: {
     ActionMenu,
-    AssignTo,
     Header,
     IndentedPanel,
     PromptRemove,
     PromptModal,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
     Inactivity
@@ -68,7 +70,10 @@ export default {
       :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header :simple="true" />
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.plain')"
+      >
         <IndentedPanel class="pt-20">
           <router-view
             :key="$route.path"
@@ -78,7 +83,7 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptModal />
-        <AssignTo />
+        <ModalManager />
         <button
           v-if="themeShortcut"
           v-shortkey.once="['shift','t']"
@@ -96,6 +101,7 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <SlideInPanelManager />
     <Inactivity />
   </div>
 </template>

package/composables/focusTrap.ts

@@ -46,12 +46,12 @@ export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:
   });
 }
 
-export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS, useUnmountHook = false) {
   let focusTrapInstance: FocusTrap;
   let focusEl;
 
   watch(watchVar, (neu) => {
-    if (neu) {
+    if (neu && !focusTrapInstance) {
       nextTick(() => {
         focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
 
@@ -61,8 +61,16 @@ export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, f
           focusTrapInstance.activate();
         });
       });
-    } else if (!neu && Object.keys(focusTrapInstance).length) {
+    } else if (!neu && focusTrapInstance && Object.keys(focusTrapInstance).length && !useUnmountHook) {
       focusTrapInstance.deactivate();
     }
-  });
+  }, { immediate: true });
+
+  if (useUnmountHook) {
+    onBeforeUnmount(() => {
+      if (focusTrapInstance && Object.keys(focusTrapInstance).length) {
+        focusTrapInstance.deactivate();
+      }
+    });
+  }
 }

package/composables/useRuntimeFlag.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { Store } from 'vuex';
+import semver from 'semver';
+
+import { getVersionInfo } from '@shell/utils/version';
+
+let store: Store<any>;
+
+/**
+ * Initializes runtime flags.
+ * @param vuexStore The Vuex store instance
+ */
+export const useRuntimeFlag = (vuexStore: Store<any>) => {
+  store = vuexStore;
+
+  return { featureDropdownMenu };
+};
+
+/**
+ * Check if the dropdown menu feature is enabled
+ * @returns A boolean indicating whether the dropdownMenu feature is enabled.
+ */
+const featureDropdownMenu = computed(() => {
+  const { fullVersion } = getVersionInfo(store);
+
+  const coerced = semver.coerce(fullVersion) || { version: '0.0.0' };
+
+  return semver.gte(coerced.version, '2.11.0');
+});

package/config/router/routes.js

@@ -276,14 +276,24 @@ export default [
         name:      'c-cluster-neuvector',
         meta:      { ...installRedirectRouteMeta(NEUVECTOR_NAME, NEUVECTOR_CHART_NAME, undefined, false) }
       }, {
-        path:      '/c/:cluster/apps/charts',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
-        name:      'c-cluster-apps-charts'
-      },
-      {
-        path:      '/c/:cluster/apps/charts/install',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
-        name:      'c-cluster-apps-charts-install'
+        path:     '/c/:cluster/apps/charts',
+        children: [
+          {
+            path:      '',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
+            name:      'c-cluster-apps-charts'
+          },
+          {
+            path:      'chart',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
+            name:      'c-cluster-apps-charts-chart',
+          },
+          {
+            path:      'install',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
+            name:      'c-cluster-apps-charts-install',
+          },
+        ]
       },
       {
         path:      '/c/:cluster/auth/config',
@@ -353,10 +363,6 @@ export default [
         path:      '/c/:cluster/settings/performance',
         component: () => interopDefault(import('@shell/pages/c/_cluster/settings/performance.vue')),
         name:      'c-cluster-settings-performance'
-      }, {
-        path:      '/c/:cluster/apps/charts/chart',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
-        name:      'c-cluster-apps-charts-chart'
       }, {
         path:      '/c/:cluster/auth/group.principal/assign-edit',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/group.principal/assign-edit.vue')),
@@ -364,7 +370,8 @@ export default [
       }, {
         path:      '/c/:cluster/auth/user.retention',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/user.retention/index.vue')),
-        name:      'c-cluster-auth-user.retention'
+        name:      'c-cluster-auth-user.retention',
+        meta:      { nav: '/c/:cluster/auth/management.cattle.io.user' }
       }, {
         path:      '/c/:cluster/manager/cloudCredential/create',
         component: () => interopDefault(import('@shell/pages/c/_cluster/manager/cloudCredential/create.vue')),

package/config/store.js

@@ -27,10 +27,12 @@ let store = {};
   resolveStoreModules(require('../store/growl.js'), 'growl.js');
   resolveStoreModules(require('../store/i18n.js'), 'i18n.js');
   resolveStoreModules(require('../store/linode.js'), 'linode.js');
+  resolveStoreModules(require('../store/modal.ts'), 'modal.ts');
   resolveStoreModules(require('../store/plugins.js'), 'plugins.js');
   resolveStoreModules(require('../store/pnap.js'), 'pnap.js');
   resolveStoreModules(require('../store/prefs.js'), 'prefs.js');
   resolveStoreModules(require('../store/resource-fetch.js'), 'resource-fetch.js');
+  resolveStoreModules(require('../store/slideInPanel.ts'), 'slideInPanel.ts');
   resolveStoreModules(require('../store/type-map.js'), 'type-map.js');
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
   resolveStoreModules(require('../store/wm.js'), 'wm.js');
@@ -54,10 +56,12 @@ let store = {};
       '../store/i18n.js',
       '../store/index.js',
       '../store/linode.js',
+      '../store/modal.ts',
       '../store/plugins.js',
       '../store/pnap.js',
       '../store/prefs.js',
       '../store/resource-fetch.js',
+      '../store/slideInPanel.ts',
       '../store/type-map.js',
       '../store/uiplugins.ts',
       '../store/wm.js',

package/config/uiplugins.js

@@ -148,7 +148,11 @@ function checkIncompatibility(currentVersion, requiredVersion, incompatibilityDa
  * @returns String | Boolean
  */
 export function shouldNotLoadPlugin(UIPluginResource, { rancherVersion, kubeVersion }, loadedPlugins) {
-  if (!UIPluginResource.name || !UIPluginResource.version || !UIPluginResource.endpoint) {
+  const {
+    name, version, endpoint, compressedEndpoint
+  } = UIPluginResource;
+
+  if (!name || !version || (!endpoint && !compressedEndpoint)) {
     return 'plugins.error.generic';
   }
 

package/core/types.ts

@@ -40,7 +40,7 @@ export type OnNavToPackage = (store: any, config: OnEnterLeavePackageConfig) =>
 export type OnNavAwayFromPackage = (store: any, config: OnEnterLeavePackageConfig) => Promise<void>;
 export type OnLogOut = (store: any) => Promise<void>;
 
-/** Enum regarding the extensionable areas/places of the UI */
+/** Enum regarding the extensible areas/places of the UI */
 export enum ExtensionPoint {
   ACTION = 'Action', // eslint-disable-line no-unused-vars
   TAB = 'Tab', // eslint-disable-line no-unused-vars
@@ -49,31 +49,32 @@ export enum ExtensionPoint {
   TABLE_COL = 'TableColumn', // eslint-disable-line no-unused-vars
 }
 
-/** Enum regarding action locations that are extensionable in the UI */
+/** Enum regarding action locations that are extensible in the UI */
 export enum ActionLocation {
   HEADER = 'header-action', // eslint-disable-line no-unused-vars
   TABLE = 'table-action', // eslint-disable-line no-unused-vars
 }
 
-/** Enum regarding panel locations that are extensionable in the UI */
+/** Enum regarding panel locations that are extensible in the UI */
 export enum PanelLocation {
+  ABOUT_TOP = 'about-top', // eslint-disable-line no-unused-vars
   DETAILS_MASTHEAD = 'details-masthead', // eslint-disable-line no-unused-vars
   DETAIL_TOP = 'detail-top', // eslint-disable-line no-unused-vars
   RESOURCE_LIST = 'resource-list', // eslint-disable-line no-unused-vars
 }
 
-/** Enum regarding tab locations that are extensionable in the UI */
+/** Enum regarding tab locations that are extensible in the UI */
 export enum TabLocation {
   RESOURCE_DETAIL = 'tab', // eslint-disable-line no-unused-vars
   CLUSTER_CREATE_RKE2 = 'cluster-create-rke2', // eslint-disable-line no-unused-vars
 }
 
-/** Enum regarding card locations that are extensionable in the UI */
+/** Enum regarding card locations that are extensible in the UI */
 export enum CardLocation {
   CLUSTER_DASHBOARD_CARD = 'cluster-dashboard-card', // eslint-disable-line no-unused-vars
 }
 
-/** Enum regarding table col locations that are extensionable in the UI */
+/** Enum regarding table col locations that are extensible in the UI */
 export enum TableColumnLocation {
   RESOURCE = 'resource-list', // eslint-disable-line no-unused-vars
 }
@@ -373,6 +374,11 @@ export interface ConfigureTypeOptions {
    */
   customRoute?: Object;
 
+  /**
+   * Custom options vary pre resource type
+   */
+  custom?: any;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */