Adds the ability to open a drawer and navigate to a tab

cypress/e2e/po/pages/explorer/workloads/workloads-deployments.po.ts

@@ -7,6 +7,14 @@ export class WorkloadsDeploymentsDetailsPagePo extends WorkloadDetailsPageBasePo
   constructor(workloadId: string, protected clusterId: string = 'local', workloadType = 'apps.deployment', namespaceId = 'default', queryParams?: Record<string, string>) {
     super(workloadId, clusterId, workloadType, queryParams, namespaceId);
   }
+
+  openEmptyShowConfigurationAnnotationsLink() {
+    return this.self().find('[data-testid="empty-show-configuration_annotations"]').click();
+  }
+
+  labelsAndAnnotationsTab() {
+    return this.self().find('[data-testid="btn-labels"]');
+  }
 }
 
 export class WorkloadsDeploymentsListPagePo extends WorkloadsListPageBasePo {

cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts

@@ -96,6 +96,16 @@ describe('Deployments', { testIsolation: 'off', tags: ['@explorer2'] }, () => {
       });
     });
 
+    it('Should show configuration drawer with the labels/annotations tab open', () => {
+      const workloadDetailsPage = new WorkloadsDeploymentsDetailsPagePo(scaleTestDeploymentName, localCluster, 'apps.deployment', scaleTestNamespace);
+
+      workloadDetailsPage.goTo();
+      workloadDetailsPage.waitForDetailsPage(scaleTestDeploymentName);
+
+      workloadDetailsPage.openEmptyShowConfigurationAnnotationsLink();
+      workloadDetailsPage.labelsAndAnnotationsTab().should('be.visible');
+    });
+
     it('Should be able to scale the number of pods', () => {
       const workloadDetailsPage = new WorkloadsDeploymentsDetailsPagePo(scaleTestDeploymentName, localCluster, 'apps.deployment', scaleTestNamespace);
 

shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -25,6 +25,7 @@ const i18n = useI18n(store);
         :real-mode="_VIEW"
         :initial-value="props.resource"
         :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        :default-tab="props.defaultTab"
         as="config"
       />
     </div>

shell/components/Drawer/ResourceDetailDrawer/index.vue

@@ -79,6 +79,7 @@ const canEdit = computed(() => {
         <ConfigTab
           v-if="configTabProps"
           v-bind="configTabProps"
+          :default-tab="props.defaultTab"
         />
         <YamlTab
           v-if="yamlTabProps"

shell/components/Drawer/ResourceDetailDrawer/types.ts

@@ -7,10 +7,11 @@ export interface ConfigProps {
     resource: any;
     component: any;
     resourceType: string;
+    defaultTab?: string;
 }
 
 export interface ResourceDetailDrawerProps {
     resource: any;
-
+    defaultTab?: string;
     onClose?: () => void;
 }

shell/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -8,7 +8,7 @@ export type Annotation = Row;
 export interface AnnotationsProps {
   annotations: Annotation[];
 
-  onShowConfiguration?: (returnFocusSelector: string) => void;
+  onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -26,6 +26,6 @@ const i18n = useI18n(store);
     :rows="annotations"
     type="active"
 
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

shell/components/Resource/Detail/Metadata/Labels/index.vue

@@ -8,7 +8,7 @@ export type Label = Row;
 export interface LabelsProps {
     labels: Label[];
 
-    onShowConfiguration?: (returnFocusSelector: string) => void;
+    onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -27,6 +27,6 @@ const i18n = useI18n(store);
     :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
     :rows="labels"
     type="active"
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

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

@@ -48,7 +48,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
         type="active"
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
@@ -58,7 +58,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Labels
         :labels="labels"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <div
@@ -67,7 +67,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Annotations
         :annotations="annotations"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
   </SpacedRow>

shell/components/Resource/Detail/composables.ts

@@ -46,12 +46,12 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
 };
 
 export const useOnShowConfiguration = (resource: any) => {
-  return (returnFocusSelector?: string) => {
+  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);
+    showConfiguration(returnFocusSelector, defaultTab);
   };
 };

shell/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -209,6 +209,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="target"

shell/edit/configmap.vue

@@ -111,6 +111,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"

shell/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -278,6 +278,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="onTabChanged"
       >
         <Tab

shell/edit/helm.cattle.io.projecthelmchart.vue

@@ -143,6 +143,7 @@ export default {
           ref="tabs"
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Questions
             v-model:value="value.spec.values"

shell/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -74,6 +74,7 @@ export default {
       class="mt-15"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="basics"

shell/edit/logging-flow/index.vue

@@ -405,6 +405,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @changed="tabChanged($event)"
     >
       <Tab

shell/edit/logging.banzaicloud.io.output/index.vue

@@ -212,6 +212,7 @@ export default {
         ref="tabbed"
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="tabChanged($event)"
       >
         <Tab

shell/edit/management.cattle.io.fleetworkspace.vue

@@ -199,7 +199,7 @@ export default {
 
     <Tabbed
       :side-tabs="true"
-      default-tab="members"
+      :default-tab="defaultTab || 'members'"
       :use-hash="useTabbedHash"
     >
       <!-- <Tab name="members" label-key="generic.members" :weight="2">

shell/edit/management.cattle.io.project.vue

@@ -198,6 +198,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         v-if="canViewMembers"

shell/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -204,7 +204,10 @@ export default {
       @input="$emit('input', $event)"
     />
 
-    <Tabbed :use-hash="useTabbedHash">
+    <Tabbed
+      :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
+    >
       <Tab
         :label="t('monitoring.route.label')"
         :weight="1"

shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -313,8 +313,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

shell/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -155,6 +155,7 @@ export default {
         :side-tabs="true"
         :show-tabs-add-remove="mode !== 'view'"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @addTab="addRuleGroup"
         @removeTab="removeGroupRule"
       >

shell/edit/monitoring.coreos.com.receiver/index.vue

@@ -218,8 +218,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

shell/edit/monitoring.coreos.com.route.vue

@@ -102,7 +102,7 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
     >
       <Tab

shell/edit/namespace.vue

@@ -203,6 +203,7 @@ export default {
       :mode="mode"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab

shell/edit/networking.istio.io.destinationrule/index.vue

@@ -69,6 +69,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="subsets"

shell/edit/networking.k8s.io.ingress/index.vue

@@ -229,6 +229,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         :label="firstTabLabel"

shell/edit/networking.k8s.io.networkpolicy/PolicyRules.vue

@@ -59,6 +59,7 @@ export default {
           :side-tabs="true"
           :show-tabs-add-remove="mode !== 'view'"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
           @addTab="addPolicyRule"
           @removeTab="removePolicyRule"
         >

shell/edit/networking.k8s.io.networkpolicy/index.vue

@@ -178,6 +178,7 @@ export default {
         <Tabbed
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Tab
             name="ingress"

shell/edit/node.vue

@@ -51,6 +51,7 @@ export default {
       :value="value"
       :mode="mode"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab

shell/edit/persistentvolume/index.vue

@@ -280,6 +280,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="plugin-configuration"

shell/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -2440,6 +2440,7 @@ export default {
           :side-tabs="true"
           class="min-height"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
           @changed="handleTabChange"
         >
           <Tab

shell/edit/secret/index.vue

@@ -485,7 +485,7 @@ export default {
         v-else
         :side-tabs="true"
         :use-hash="useTabbedHash"
-        default-tab="data"
+        :default-tab="defaultTab || 'data'"
       >
         <Tab
           name="data"

shell/edit/service.vue

@@ -351,6 +351,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         v-if="checkTypeIs('ExternalName')"

shell/edit/serviceaccount.vue

@@ -145,6 +145,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"

shell/edit/storage.k8s.io.storageclass/index.vue

@@ -240,6 +240,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="parameters"

shell/edit/workload/index.vue

@@ -152,9 +152,10 @@ export default {
         ref="containersTabbed"
         class="deployment-tabs"
         :show-tabs-add-remove="true"
-        :default-tab="defaultTab"
+        :default-tab="defaultTab || defaultWorkloadTab"
         :flat="true"
         :use-hash="useTabbedHash"
+
         data-testid="workload-horizontal-tabs"
         @changed="changed"
       >

shell/edit/workload/mixins/workload.js

@@ -292,7 +292,7 @@ export default {
       return { general: this.fvGetPathErrors(['image'])?.length > 0 };
     },
 
-    defaultTab() {
+    defaultWorkloadTab() {
       if (!!this.$route.query.sidecar || this.$route.query.init || this.mode === _CREATE) {
         const container = this.allContainers.find((c) => c.__active);
 

shell/mixins/create-edit-view/index.js

@@ -48,6 +48,11 @@ export default defineComponent({
     useTabbedHash: {
       type:    Boolean,
       default: undefined
+    },
+
+    defaultTab: {
+      type:    String,
+      default: undefined
     }
   },
 });