@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -4,11 +4,9 @@ import { useStore } from 'vuex';
 import ResourcePopoverCard from '@shell/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue';
 import RcStatusIndicator from '@components/Pill/RcStatusIndicator/RcStatusIndicator.vue';
 import { useI18n } from '@shell/composables/useI18n';
-import { computed, ref, watch } from 'vue';
-import {
-  DEFAULT_FOCUS_TRAP_OPTS,
-  useWatcherBasedSetupFocusTrapWithDestroyIncluded
-} from '@shell/composables/focusTrap';
+import { computed, ref } from 'vue';
+import PopoverCard from '@shell/components/PopoverCard.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
 
 export interface Props {
   type: string;
@@ -23,14 +21,14 @@ const store = useStore();
 const i18n = useI18n(store);
 const props = defineProps<Props>();
 const card = ref<any>(null);
-const popoverContainer = ref(null);
 const showPopover = ref<boolean>(false);
-const focusOpen = ref<boolean>(false);
 
 const fetch = useFetch(async() => {
   const currentStore = props.currentStore || store.getters['currentStore'](props.type);
 
-  return store.dispatch(`${ currentStore }/find`, { type: props.type, id: props.id });
+  const r = await store.dispatch(`${ currentStore }/find`, { type: props.type, id: props.id });
+
+  return r;
 });
 
 const resourceTypeLabel = computed(() => {
@@ -45,88 +43,63 @@ const resourceTypeLabel = computed(() => {
   return resource.parentNameOverride || store.getters['type-map/labelFor'](schema);
 });
 
+const nameDisplay = computed(() => {
+  return fetch.value.data?.nameDisplay || '';
+});
+
 const actionInvoked = () => {
   showPopover.value = false;
 };
-
-// Set focus trap when card opened using keyboard
-watch(
-  () => card.value,
-  (neu) => {
-    if (neu && focusOpen.value) {
-      const opts = {
-        ...DEFAULT_FOCUS_TRAP_OPTS,
-        fallbackFocus:  '#first-glance-item',
-        setReturnFocus: () => '.focus-button'
-      };
-
-      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => showPopover.value, '#resource-popover-card', opts);
-    }
-  }
-);
 </script>
 
 <template>
-  <div
+  <PopoverCard
     class="resource-popover"
-    @mouseleave="showPopover=false"
+    :card-title="nameDisplay"
+    fallback-focus="[data-testid='resource-popover-action-menu']"
+    :show-popover-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: nameDisplay, resource: resourceTypeLabel })"
   >
-    <v-dropdown
-      :triggers="[]"
-      :container="popoverContainer"
-      :shown="showPopover"
-      placement="bottom-start"
-      :aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: fetch.data?.nameDisplay, resource: resourceTypeLabel })"
-    >
-      <div class="target">
-        <span class="display-container">
-          <span
-            v-if="fetch.data"
-            class="display"
-            @mouseenter="showPopover=true"
-          >
-            <RcStatusIndicator
-              shape="disc"
-              :status="fetch.data?.stateBackground || 'unknown'"
-            />
-            <router-link
-              :to="props.detailLocation || fetch.data.detailLocation || '#'"
-            >
-              {{ fetch.data.nameDisplay }}
-            </router-link>
-            <div
-              ref="popoverContainer"
-              class="resource-popover-container"
-            >
-              <!--Empty container for mounting popper content-->
-            </div>
-          </span>
-          <span v-else>...</span>
-          <button
-            v-if="fetch.data"
-            class="focus-button role-secondary"
-            :aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: fetch.data?.nameDisplay, resource: resourceTypeLabel })"
-            aria-haspopup="true"
-            :aria-expanded="showPopover"
-            @click="showPopover=true; focusOpen=true;"
-          >
-            <i class="icon icon-chevron-down icon-sm" />
-          </button>
-        </span>
-      </div>
-
-      <template #popper>
-        <ResourcePopoverCard
-          v-if="showPopover"
-          id="resource-popover-card"
-          ref="card"
-          :resource="fetch.data"
-          @action-invoked="actionInvoked"
-          @keydown.escape="showPopover=false; focusOpen=false"
+    <span>
+      <span
+        v-if="fetch.data"
+        class="display"
+        @mouseenter="showPopover=true"
+      >
+        <RcStatusIndicator
+          shape="disc"
+          :status="fetch.data?.stateBackground || 'unknown'"
         />
-      </template>
-    </v-dropdown>
-  </div>
+        <router-link
+          :to="props.detailLocation || fetch.data.detailLocation || '#'"
+        >
+          {{ nameDisplay }}
+        </router-link>
+      </span>
+      <span v-else>{{ fetch.loading }}...</span>
+    </span>
+    <template
+      v-if="fetch.data"
+      #heading-action="{close}"
+    >
+      <ActionMenu
+        :resource="fetch.data"
+        :button-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.actionMenu', { resource: nameDisplay })"
+        data-testid="resource-popover-action-menu"
+        @action-invoked="close"
+      />
+    </template>
+    <template
+      v-if="fetch.data"
+      #card-body
+    >
+      <ResourcePopoverCard
+        id="resource-popover-card"
+        ref="card"
+        :resource="fetch.data"
+        @action-invoked="actionInvoked"
+      />
+    </template>
+  </PopoverCard>
 </template>
 
 <style lang="scss" scoped>
@@ -134,44 +107,8 @@ watch(
   position: relative;
   width: 100%;
 
-  .target, a {
-    @include clip;
-  }
-
-  .display-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
   .display {
     display: inline-flex;
-    max-width: 100%;
-    a {
-      flex: 1;
-    }
-  }
-
-  .target {
-    width: 100%;
-    height: 17px;
-  }
-
-  .focus-button {
-    margin-left: 4px;
-    padding: 0;
-    width: 0px;
-    height: initial;
-    min-height: initial;
-    overflow: hidden;
-    border-width: 0;
-
-    &:focus {
-      width: initial;
-      border-width: 1px;
-    }
   }
 
   .rc-status-indicator {
@@ -180,47 +117,5 @@ watch(
       height: initial;
       line-height: initial;
   }
-
-  .resource-popover-card {
-    border: none;
-  }
-
-  .resource-popover-container {
-    position: absolute;
-    $size: 10px;
-    height: $size;
-    bottom: -$size;
-    width: 100%;
-  }
-
-  &:deep() {
-    & > .v-popper > .btn.role-link {
-      padding: 0;
-      min-height: initial;
-      line-height: initial;
-
-      &:hover {
-        background: none;
-      }
-    }
-
-    .resource-popover-container > .v-popper__popper {
-      border-radius: 6px;
-      box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.04);
-
-      & > .v-popper__wrapper {
-        .v-popper__arrow-container {
-          display: none;
-        }
-
-        & > .v-popper__inner {
-          overflow: initial;
-          &, & > div > .dropdownTarget {
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
 }
 </style>

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -3,8 +3,6 @@ import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
 
-jest.mock(`@shell/assets/images/icons/document.svg`, () => `@shell/assets/images/icons/document.svg`);
-
 describe('component: TitleBar/index', () => {
   const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
   const resourceTo = 'RESOURCE_TO';

package/components/Resource/Detail/TitleBar/composables.ts

@@ -1,3 +1,4 @@
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { computed, Ref, toValue } from 'vue';
 import { useRoute } from 'vue-router';
@@ -23,7 +24,7 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         resource:  resourceValue.type
       }
     };
-    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : useOnShowConfiguration(resource);
 
     return {
       resource:           resourceValue,

package/components/Resource/Detail/TitleBar/index.vue

@@ -32,8 +32,6 @@ export interface TitleBarProps {
   actionMenuResource?: any;
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
-
-const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
 </script>
 
 <script setup lang="ts">
@@ -84,6 +82,7 @@ watch(
         </span>
         <BadgeState
           v-if="badge"
+          v-ui-context="{ store: store, icon: 'icon-folder', hookable: true, value: resource, tag: '__details-state', description: 'Details' }"
           class="badge-state"
           :color="badge.color"
           :label="badge.label"
@@ -99,11 +98,10 @@ watch(
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
           @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
-          <img
-            :src="showConfigurationIcon"
-            class="mmr-3"
+          <i
+            class="icon icon-document"
             aria-hidden="true"
-          >
+          />
           {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
         </RcButton>
         <ActionMenu
@@ -139,6 +137,12 @@ watch(
     position: relative;
   }
 
+  .icon-document {
+    width: 15px;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
   .show-configuration {
     margin-left: 16px;
   }

package/components/Resource/Detail/composables.ts

@@ -2,6 +2,7 @@ import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
 import { Props as BannerProps } from '@components/Banner/Banner.vue';
 import { useI18n } from '@shell/composables/useI18n';
+import ResourceClass from '@shell/plugins/dashboard-store/resource-class';
 
 export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
   const store = useStore();
@@ -43,3 +44,14 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
     return undefined;
   });
 };
+
+export const useOnShowConfiguration = (resource: any) => {
+  return (returnFocusSelector?: string, defaultTab?: string) => {
+    const resourceValue = toValue(resource);
+    // Because extensions can make a copy of the resource-class it's possible that an extension will have a resource-class which predates the inclusion of showConfiguration
+    // to still the rest of shell to consume
+    const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
+
+    showConfiguration(returnFocusSelector, defaultTab);
+  };
+};

package/components/ResourceDetail/Masthead/latest.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable */
 import { Banner } from '@components/Banner';
 import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
@@ -7,6 +8,7 @@ import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resourc
 import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
 import { computed } from 'vue';
 
+// We are disabling eslint for this script to allow the use of the Props interface
 export interface Props {
   value?: Object;
   resourceSubtype?: string;
@@ -15,18 +17,45 @@ export interface Props {
 </script>
 
 <script lang="ts" setup>
+import { useStore } from 'vuex';
+
 const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
 
+const uiCtxResource = computed(() => {
+  const {
+    name, metadata, kind, state
+  } = (props.value || {}) as any;
+
+  return {
+    name,
+    namespace: metadata?.namespace,
+    kind,
+    state,
+  };
+});
 const resourceSubtype = computed(() => props.resourceSubtype);
 const titleBarProps = useDefaultTitleBarProps(props.value, resourceSubtype);
 const metadataProps = useDefaultMetadataForLegacyPagesProps(props.value);
 const bannerProps = useResourceDetailBannerProps(props.value);
+
+const store = useStore();
 </script>
 
 <template>
   <TitleBar v-bind="titleBarProps" />
   <Banner
     v-if="bannerProps"
+    v-ui-context="{
+      store: store,
+      icon: 'icon-info',
+      hookable: true,
+      value: {
+        bannerProps,
+        resource: uiCtxResource
+      },
+      tag: '__details-state-banner',
+      description: 'Status Message'
+    }"
     class="new state-banner"
     v-bind="bannerProps"
   />

package/components/ResourceDetail/index.vue

@@ -310,7 +310,7 @@ export default {
       }), {});
     },
     isFullPageOverride() {
-      return this.isView && this.value.fullDetailPageOverride;
+      return this.isView && this.value.fullDetailPageOverride && !this.isYaml;
     }
   },
 
@@ -430,6 +430,7 @@ export default {
     :is="showComponent"
     v-else-if="isFullPageOverride"
     v-model:value="value"
+    v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
     v-bind="$data"
     :done-params="doneParams"
     :done-route="doneRoute"
@@ -446,6 +447,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
+      v-ui-context="{ icon: 'icon-folder', value: liveModel.name, tag: liveModel.kind?.toLowerCase(), description: liveModel.kind }"
       :resource="resourceType"
       :value="liveModel"
       :mode="mode"
@@ -499,6 +501,7 @@ export default {
       v-else
       ref="comp"
       v-model:value="value"
+      v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
       v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"

package/components/ResourceList/Masthead.vue

@@ -141,7 +141,7 @@ export default {
       }
 
       // blocked-post means you can post through norman, but not through steve.
-      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+      if ( this.schema && this.schema?.collectionMethods && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
         return false;
       }
 

package/components/ResourceTable.vue

@@ -316,7 +316,7 @@ export default {
 
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
-      if (this.$store.$plugin?.getUIConfig) {
+      if (this.$store.$extension?.getUIConfig) {
         // { column: TableColumn, paginationColumn: PaginationTableColumn }[]
         const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 

package/components/SortableTable/index.vue

@@ -765,7 +765,7 @@ export default {
                 needRef = true;
               } else {
                 // Check if we have a formatter from a plugin
-                const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
+                const pluginFormatter = this.$extension?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
                   component = defineAsyncComponent(pluginFormatter);
@@ -1474,6 +1474,7 @@ export default {
                     <td
                       v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
                       :key="col.col.name"
+                      v-ui-context="col.col.name === 'state' ? { icon: 'icon-folder', hookable: true, value: row.row, tag: '__sortable-table-row', description: 'Row' } : undefined"
                       :data-title="col.col.label"
                       :data-testid="`sortable-cell-${ i }-${ j }`"
                       :align="col.col.align || 'left'"

package/components/Tabbed/__tests__/index.test.ts

@@ -0,0 +1,86 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+
+jest.mock('@shell/components/form/ResourceTabs/composable', () => ({ useTabCountWatcher: () => ({}) }));
+
+const mockT = (key: string) => key;
+
+const defaultGlobalMountOptions = {
+  components: { Tab },
+  mocks:      {
+    $router: {
+      replace:      jest.fn(),
+      currentRoute: { _value: { hash: '' } }
+    },
+    $route: { hash: '' },
+    t:      mockT,
+    store:  { getters: { 'i18n/t': mockT } }
+  }
+};
+
+describe('component: Tabbed', () => {
+  const findTabNav = (wrapper: VueWrapper<any>) => wrapper.find('[data-testid="tabbed-block"]');
+
+  it('should display tab navigation for a single tab when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should NOT display tab navigation for a single tab when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props:  { hideSingleTab: true },
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(false);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props: { hideSingleTab: true },
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+});

package/components/{nav/WindowManager → Window}/ContainerLogs.vue

@@ -10,7 +10,7 @@ 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 ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
 import { debounce } from 'lodash';

package/components/{nav/WindowManager → Window}/ContainerLogsActions.vue

@@ -49,6 +49,7 @@ defineEmits([
       <rc-dropdown-item-select
         :model-value="range"
         :options="rangeOptions"
+        :label="t('wm.containerLogs.range.label')"
         @select="$emit('toggleRange', $event)"
       />
       <rc-dropdown-item-checkbox

package/components/{nav/WindowManager → Window}/__tests__/ContainerLogs.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import ContainerLogs from '@shell/components/nav/WindowManager/ContainerLogs.vue';
+import ContainerLogs from '@shell/components/Window/ContainerLogs.vue';
 import { base64Encode } from '@shell/utils/crypto';
 import { Buffer } from 'buffer';
 import { addEventListener } from '@shell/utils/socket';

package/components/{nav/WindowManager → Window}/__tests__/ContainerShell.test.ts

@@ -1,9 +1,9 @@
 import { flushPromises, mount, Wrapper } from '@vue/test-utils';
-import ContainerShell from '@shell/components/nav/WindowManager/ContainerShell.vue';
+import ContainerShell from '@shell/components/Window/ContainerShell.vue';
 import Socket, {
   addEventListener, EVENT_CONNECTED, EVENT_CONNECTING, EVENT_DISCONNECTED, EVENT_MESSAGE, EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
-import Window from '@shell/components/nav/WindowManager/Window.vue';
+import Window from '@shell/components/Window/Window.vue';
 
 jest.mock('@shell/utils/socket');
 jest.mock('@shell/utils/crypto', () => {