@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

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

@@ -3,7 +3,6 @@ import { useDefaultIdentifyingInformation } from '@shell/components/Resource/Det
 import { useDefaultLabels } from '@shell/components/Resource/Detail/Metadata/Labels/composable';
 import { useDefaultAnnotations } from '@shell/components/Resource/Detail/Metadata/Annotations/composable';
 import { computed, toValue, Ref } from 'vue';
-import { useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import {
   useCreatedBy,
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
@@ -12,13 +11,14 @@ import {
 export const useBasicMetadata = (resource: any) => {
   const labels = useDefaultLabels(resource);
   const annotations = useDefaultAnnotations(resource);
-  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+  const resourceValue = toValue(resource);
 
   return computed(() => {
     return {
+      resource:            toValue(resource),
       labels:              labels.value,
       annotations:         annotations.value,
-      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+      onShowConfiguration: () => resourceValue.showConfiguration()
     };
   });
 };
@@ -29,14 +29,15 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
   const basicMetaData = useBasicMetadata(resource);
-  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+  const resourceValue = toValue(resource);
 
   return computed(() => {
     return {
+      resource:               toValue(resource),
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => openResourceDetailDrawer(resource, returnFocusSelector)
+      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
     };
   });
 };
@@ -48,6 +49,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
   const createdBy = useCreatedBy(resource);
+  const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
     const defaultInfo = [
@@ -65,14 +67,14 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
     return info.filter((info) => typeof info !== 'undefined');
   });
   const basicMetaData = useBasicMetadata(resource);
-  const { openResourceDetailDrawer } = useResourceDetailDrawer();
 
   return computed(() => {
     return {
+      resource:               toValue(resource),
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    () => openResourceDetailDrawer(resource)
+      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
     };
   });
 };

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

@@ -7,15 +7,20 @@ import KeyValue from '@shell/components/Resource/Detail/Metadata/KeyValue.vue';
 import { computed } from 'vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
 
 export interface MetadataProps {
+  resource: any;
   identifyingInformation: IdentifyingInformationRow[],
   labels: Label[],
   annotations: Annotation[],
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
-const { identifyingInformation, labels, annotations } = defineProps<MetadataProps>();
+const {
+  resource, identifyingInformation, labels, annotations
+} = defineProps<MetadataProps>();
 const emit = defineEmits(['show-configuration']);
 
 const store = useStore();
@@ -25,7 +30,10 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 </script>
 
 <template>
-  <SpacedRow class="metadata ppb-3">
+  <SpacedRow
+    class="metadata ppb-3"
+    v-bind="$attrs"
+  >
     <div
       class="identifying-info"
     >
@@ -62,6 +70,13 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
       />
     </div>
   </SpacedRow>
+  <!-- Extensions area -->
+  <ExtensionPanel
+    class="ppb-3"
+    :resource="resource"
+    :type="ExtensionPoint.PANEL"
+    :location="PanelLocation.DETAIL_TOP"
+  />
 </template>
 
 <style lang="scss" scoped>

package/components/Resource/Detail/Page.vue

@@ -1,29 +1,43 @@
+<script setup lang="ts">
+import Loading from '@shell/components/Loading.vue';
+
+interface Props {
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), { loading: false });
+
+</script>
+
 <template>
-  <div class="resource-detail-page">
-    <div
-      v-if="$slots['top-area']"
-      class="top-area"
-    >
-      <slot name="top-area" />
-    </div>
-    <div
-      v-if="$slots['middle-area']"
-      class="middle-area mmt-6"
-    >
-      <slot name="middle-area" />
-    </div>
-    <div
-      v-if="$slots['bottom-area']"
-      class="bottom-area mmt-6"
-    >
-      <slot name="bottom-area" />
-    </div>
+  <div
+    class="resource-detail-page"
+  >
+    <Loading v-if="props.loading" />
+    <template v-else>
+      <div
+        v-if="$slots['top-area']"
+        class="top-area"
+      >
+        <slot name="top-area" />
+      </div>
+      <div
+        v-if="$slots['middle-area']"
+        class="middle-area mmt-6"
+      >
+        <slot name="middle-area" />
+      </div>
+      <div
+        v-if="$slots['bottom-area']"
+        class="bottom-area mmt-6"
+      >
+        <slot name="bottom-area" />
+      </div>
+    </template>
   </div>
 </template>
 <style lang="scss" scoped>
 .resource-detail-page {
-  padding: 24px;
-
   :deep() .tabs.horizontal {
     border: none;
   }

package/components/Resource/Detail/SpacedRow.vue

@@ -7,7 +7,7 @@
 <style lang="scss" scoped>
 .spaced-row {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr));;
   grid-auto-flow: dense;
   grid-gap: 24px;
 }

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

@@ -11,20 +11,19 @@ const mockStore = {
   }
 };
 const mockRoute = { params: { cluster: 'CLUSTER' } };
-const mockDrawer = { openResourceDetailDrawer: jest.fn() };
 
 jest.mock('vuex', () => ({ useStore: () => mockStore }));
 jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
-jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => ({ useResourceDetailDrawer: () => mockDrawer }));
 
 describe('composables: TitleBar', () => {
   const resource = {
-    nameDisplay:     'RESOURCE_NAME',
-    namespace:       'RESOURCE_NAMESPACE',
-    type:            'RESOURCE_TYPE',
-    stateBackground: 'RESOURCE_STATE_BACKGROUND',
-    stateDisplay:    'RESOURCE_STATE_DISPLAY',
-    description:     'RESOURCE_DESCRIPTION',
+    nameDisplay:       'RESOURCE_NAME',
+    namespace:         'RESOURCE_NAMESPACE',
+    type:              'RESOURCE_TYPE',
+    stateBackground:   'RESOURCE_STATE_BACKGROUND',
+    stateDisplay:      'RESOURCE_STATE_DISPLAY',
+    description:       'RESOURCE_DESCRIPTION',
+    showConfiguration: jest.fn(),
   };
   const labelFor = 'LABEL_FOR';
   const schema = { type: 'SCHEMA' };
@@ -58,6 +57,6 @@ describe('composables: TitleBar', () => {
     expect(props.value.showViewOptions).toStrictEqual(hasGraph);
 
     props.value.onShowConfiguration?.('callback');
-    expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+    expect(resource.showConfiguration).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,4 +1,3 @@
-import { useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { computed, Ref, toValue } from 'vue';
 import { useRoute } from 'vue-router';
@@ -7,7 +6,6 @@ import { useStore } from 'vuex';
 export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<string | undefined>): Ref<TitleBarProps> => {
   const route = useRoute();
   const store = useStore();
-  const { openResourceDetailDrawer } = useResourceDetailDrawer();
   const resourceValue = toValue(resource);
 
   return computed(() => {
@@ -26,8 +24,10 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
       }
     };
     const hasGraph = !!store.getters['type-map/hasGraph'](resourceValue.type);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
 
     return {
+      resource:           resourceValue,
       resourceTypeLabel,
       resourceTo,
       resourceName,
@@ -36,9 +36,9 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         color: resourceValue.stateBackground,
         label: resourceValue.stateDisplay
       },
-      description:         resourceValue.description,
-      showViewOptions:     hasGraph,
-      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resourceValue, returnFocusSelector)
+      description:     resourceValue.description,
+      showViewOptions: hasGraph,
+      onShowConfiguration
     };
   });
 };

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

@@ -11,6 +11,8 @@ import TabTitle from '@shell/components/TabTitle';
 import { computed, ref, watch } from 'vue';
 import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
 import ButtonGroup from '@shell/components/ButtonGroup';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -18,6 +20,7 @@ export interface Badge {
 }
 
 export interface TitleBarProps {
+  resource: any;
   resourceTypeLabel: string;
   resourceName: string;
 
@@ -40,7 +43,7 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
@@ -114,6 +117,7 @@ watch(
           v-model:value="currentView"
           :options="viewOptions"
         />
+        <slot name="additional-actions" />
         <RcButton
           v-if="onShowConfiguration"
           :data-testid="showConfigurationDataTestId"
@@ -140,10 +144,15 @@ watch(
     </Top>
     <div
       v-if="description"
-      class="bottom description"
+      class="bottom description text-deemphasized"
     >
       {{ description }}
     </div>
+    <ExtensionPanel
+      :resource="resource"
+      :type="ExtensionPoint.PANEL"
+      :location="PanelLocation.DETAILS_MASTHEAD"
+    />
   </div>
 </template>
 
@@ -153,7 +162,7 @@ watch(
 
   .badge-state {
     font-size: 16px;
-    margin-left: 4px;
+    margin-left: 12px;
     position: relative;
   }
 

package/components/ResourceDetail/Masthead/legacy.vue

@@ -645,10 +645,10 @@ export default {
 
     h1 {
       margin: 0 0 0 -5px;
-      overflow-x: hidden;
       display: flex;
       flex-direction: row;
       align-items: center;
+      overflow: hidden;
 
       .masthead-resource-title {
         text-overflow: ellipsis;