Hide "View YAML" when "Show configuration" is present (#17663)

* only display view yaml when show configuration is not enabled

* fix e2e test

---------

Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>

Author: momesgin

cypress/e2e/tests/pages/users-and-auth/roles.spec.ts

@@ -295,7 +295,7 @@ describe('Roles Templates', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
 
       const actionMenu = detailPage.detail().openMastheadActionMenu();
 
-      actionMenu.clickMenuItem(5);
+      actionMenu.clickMenuItem(4);
 
       const promptRemove = new PromptRemove();
 

shell/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -3,6 +3,10 @@ import Resource from '@shell/plugins/dashboard-store/resource-class.js';
 import { resourceClassJunkObject } from '@shell/plugins/dashboard-store/__tests__/utils/store-mocks';
 import { EVENT } from '@shell/config/types';
 
+jest.mock('@shell/config/version', () => ({ getVersionData: () => ({ Version: 'v2.13.0' }) }));
+jest.mock('@shell/config/uiplugins', () => ({ parseRancherVersion: (v: string) => v }));
+jest.mock('@shell/core/plugin-helpers', () => ({ getApplicableExtensionEnhancements: () => [] }));
+
 describe('class: Resource', () => {
   describe('given custom resource keys', () => {
     const customResource = resourceClassJunkObject;
@@ -497,4 +501,88 @@ describe('class: Resource', () => {
       expect(actions[1].variant).toBe('primary');
     });
   });
+
+  describe('getter: _availableActions', () => {
+    function createResource(links: Record<string, string>, overrides: Record<string, any> = {}) {
+      const resource = new Resource({
+        type: 'test-type',
+        links,
+        ...overrides,
+      }, {
+        getters: {
+          schemaFor: () => ({
+            linkFor:           jest.fn(),
+            resourceMethods:   [],
+            collectionMethods: [],
+          }),
+        },
+        dispatch:    jest.fn(),
+        rootState:   { $extension: { getPlugins: () => ({}) } },
+        rootGetters: {
+          'i18n/t':                 (key: string) => key,
+          'type-map/hasCustomEdit': () => false,
+          'type-map/optionsFor':    () => ({
+            isEditable: false, isRemovable: true, isCreatable: false
+          }),
+          'prefs/get':    () => false,
+          currentCluster: undefined,
+          currentProduct: undefined,
+          ...overrides.rootGetters,
+        },
+      });
+
+      jest.spyOn(resource, 'currentRouter').mockReturnValue({ currentRoute: { value: {} } } as any);
+
+      return resource;
+    }
+
+    function findAction(actions: any[], actionName: string) {
+      return actions.find((a: any) => a.action === actionName);
+    }
+
+    it('should hide "View YAML" when "Show Configuration" is enabled and resource cannot edit YAML', () => {
+      const resource = createResource({ view: '/api/v1/test' });
+
+      const actions = resource._availableActions;
+      const viewYaml = findAction(actions, 'goToViewYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(true);
+      expect(viewYaml.enabled).toBe(false);
+    });
+
+    it('should show "Edit YAML" even when "Show Configuration" is enabled', () => {
+      const resource = createResource(
+        { view: '/api/v1/test', update: '/api/v1/test' },
+        {
+          rootGetters: {
+            'type-map/optionsFor': () => ({
+              isEditable: true, isRemovable: true, isCreatable: false
+            })
+          }
+        },
+      );
+
+      const actions = resource._availableActions;
+      const editYaml = findAction(actions, 'goToEditYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(true);
+      expect(editYaml.enabled).toBe(true);
+    });
+
+    it('should show "View YAML" when "Show Configuration" is not enabled', () => {
+      const resource = createResource(
+        { view: '/api/v1/test' },
+        { disableResourceDetailDrawer: true },
+      );
+
+      const actions = resource._availableActions;
+      const viewYaml = findAction(actions, 'goToViewYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(false);
+      expect(viewYaml.enabled).toBe(true);
+    });
+  });
 });

shell/plugins/dashboard-store/resource-class.js

@@ -946,12 +946,15 @@ export default class Resource {
     // where mostly likely extension CRD model is extending from resource-class
     const isResourceDetailDrawerCompatibleWithRancherSystem = semver.satisfies(parsedRancherVersion, '>= 2.13.0');
 
+    // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+    const showConfigEnabled = isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml);
+
     const all = [
       {
         action:  'showConfiguration',
         label:   this.t('action.showConfiguration'),
         icon:    'icon icon-document',
-        enabled: isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+        enabled: showConfigEnabled,
       },
       { divider: true },
       {
@@ -964,7 +967,7 @@ export default class Resource {
         action:  this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
         label:   this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
         icon:    'icon icon-file',
-        enabled: this.canYaml,
+        enabled: this.canYaml && (this.canEditYaml || !showConfigEnabled), // Hide "View YAML" when "Show Configuration" is available since it already includes YAML viewing
       },
       {
         action:  (this.canCustomEdit ? 'goToClone' : 'cloneYaml'),