@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.2

package/assets/images/providers/entraid-black.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-224e3580-d59f-48a8-9bb3-c822840f911d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="m17.558,9.638L10.436,1.632c-.358-.402-.881-.632-1.435-.632h0c-.554,0-1.078.231-1.435.632L.442,9.638c-.346.389-.5.9-.423,1.403.077.503.379.952.827,1.231l7.123,4.436c.313.195.672.293,1.031.293s.718-.098,1.031-.293l7.123-4.436c.448-.279.75-.728.827-1.231.077-.503-.077-1.014-.423-1.403Zm-8.557,2.564l-3.47-2.161,3.47-3.9,3.47,3.9-3.47,2.161Zm-4.821-1.975l3.995,2.489-1.137.708-.016.01c-.394.25-.854.382-1.33.382-.528,0-1.059-.214-1.38-.413l-2.969-1.849c-.235-.147-.387-.373-.428-.637-.04-.264.037-.521.219-.725L8.257,2.186c.185-.208.456-.327.743-.328.287,0,.558.119.743.328l1.576,1.771c-.009,0-.018,0-.028,0-.856,0-1.668.313-2.278.866l-4.833,5.404Zm12.905.69c-.041.264-.192.49-.428.637l-7.123,4.436c-.325.202-.744.202-1.068,0l-2.192-1.365c.451-.076.88-.238,1.264-.484l6.259-3.898-4.197-4.759c.448-.425,1.053-.667,1.692-.667.335,0,.661.07.97.201l4.605,5.175c.181.204.259.461.219.725Z"/>
+</svg>

package/assets/images/providers/entraid.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
+  <path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
+  <polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
+  <path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
+  <path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
+  <polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
+</svg>

package/assets/images/vendor/entraid.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
+  <path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
+  <polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
+  <path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
+  <path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
+  <polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
+</svg>

package/assets/styles/app.scss

@@ -10,7 +10,6 @@
 @import "./base/spacing";
 
 @import "./fonts/fontstack";
-@import "./fonts/dots";
 @import "./fonts/zerowidthspace";
 @import "./fonts/icons";
 

package/assets/translations/en-us.yaml

@@ -132,6 +132,7 @@ generic:
   deprecated: Deprecated
   upgradeable: Upgradeable
   installed: Installed
+  installedMultiple: Installed (multiple)
   featured: Featured
   shortFeatured: Feat
   category: Category
@@ -184,6 +185,7 @@ locale:
   none: (None)
 
 nav:
+  skipToContent: Skip to main content
   ariaLabel:
     clusterIconKeyCombo: Cluster keyboard shortcut combination icon
     localClusterIcon: Local Cluster icon
@@ -712,7 +714,7 @@ authConfig:
   azuread:
     tenantId:
       label: Tenant ID
-      tooltip: From the Azure AD portal
+      tooltip: From the Microsoft Entra admin center
       placeholder: A long UUID string
     applicationId:
       label: Application ID
@@ -739,17 +741,17 @@ authConfig:
       externalHelp: See the OData filter expression documentation for more information.
       externalHelpLink: https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris#filter-expressions
     reply:
-      info: 'Azure AD requires a whitelisted URL for your Rancher server before beginning this setup. Please ensure that the following URL is set in the Reply URL section of your Azure Portal. Please note that it may take up to 5 minutes for the whitelisted URL to propagate.'
+      info: 'Microsoft Entra ID requires a whitelisted URL for your Rancher server before beginning this setup. Please ensure that the following URL is set in the Reply URL section of your Microsoft Entra admin center. Please note that it may take up to 5 minutes for the whitelisted URL to propagate.'
       label: Reply URL
       ariaLabel: Copy Reply URL to clipboard
     updateEndpoint:
       button: Update Endpoint
       banner:
-        message: 'Azure AD Authentication must be updated: it is using the Azure Graph API, which will be deprecated at the end of 2022.'
+        message: 'Microsoft Entra ID Authentication must be updated: it is using the Azure AD Graph API, which was deprecated at the end of 2022.'
         linkText: 'Update it here.'
       modal:
         title: Are you sure? This update is irreversible.
-        body: '<p><b>You may need to make some additional changes</b>. Please ensure the Azure AD app has the Directory.Read.All <b>Application</b> permission added to Microsoft Graph.<br> If any endpoints were customized while configuring Azure AD authentication in Rancher, they will not be automatically updated. </p>'
+        body: '<p><b>You may need to make some additional changes</b>. Please ensure the Microsoft Entra ID app has the Directory.Read.All <b>Application</b> permission added to Microsoft Graph.<br> If any endpoints were customized while configuring Microsoft Entra ID authentication in Rancher, they will not be automatically updated. </p>'
   oidc:
     endSessionEndpoint: 
       title: End Session Endpoint
@@ -806,6 +808,9 @@ authConfig:
     groupSearch:
       label: Enable group search
       tooltip: Allows users with appropriate permissions to search and view all groups within the OIDC provider's realm. This can be useful for administrators who need to assign global roles to groups that they are not currently a member of.
+    clientAuthenticatedSearch:
+      label: Enable client authenticated search
+      tooltip: Use the OIDC Client Credentials to authenticate to Keycloak when searching for users or groups. This will bypass user-based RBAC within the realm
   stateBanner:
     disabled: 'The {provider} authentication provider is currently disabled.'
     enabled: 'The {provider} authentication provider is currently enabled.'
@@ -1138,7 +1143,6 @@ catalog:
         label: Chart Versions
         showMore: Show More
         showLess: Show Less
-        missingVersionDate: No date available for this chart version
       home: Homepage
       repository: Repository Page
       maintainers: Maintainers
@@ -1152,12 +1156,15 @@ catalog:
     deprecatedWarning: '{chartName} has been marked as deprecated. Use caution when installing this helm chart as it might be removed in the future.'
     experimentalWarning: '{chartName} has been marked as experimental. Use caution when installing this helm chart as it might not function as expected.'
     deprecatedAndExperimentalWarning: '{chartName} has been marked as deprecated and experimental. Use caution when installing this helm chart as it might be removed in the future and might not function as expected.'
+    installedAppsSelector:
+      ariaLabel: Select installed app instance
     chartButton:
       action:
         install: Install this version
         edit: Edit the current version
         upgrade: Upgrade to this version
         downgrade: Downgrade to this version
+        installNew: Install as a new instance
   charts:
     browseAriaLabel: Show only charts grid
     iconAlt: Icon for {app} card/grid item
@@ -1183,15 +1190,11 @@ catalog:
       all: All Operating Systems
       linux: Linux
       windows: Windows
-    search: Search the catalogue...
-    deprecatedChartsFilter:
-      label: Show deprecated apps
+    search: Search the catalog...
     addNewRepo:
       label: Add new
       ariaLabel: Add a new repository
     appChartCard:
-      subHeaderItem:
-        missingVersionDate: Last updated date is not available for this chart
       footerItem:
         ariaLabel: 'Apply {filter} filter'
     statusFilterCautions:
@@ -1435,6 +1438,8 @@ catalog:
     refreshInterval:
       label: Refresh Interval
       placeholder: 'default: {hours}'
+    error:
+      refresh: Error refreshing repository
   tools:
     iconAlt: Icon for {app} Cluster Tool
     header: Cluster Tools
@@ -2836,8 +2841,8 @@ providers:
 drivers:
   kontainer:
     title: Cluster Drivers
-    emberDeprecationMessage: 'Support for UI Plugins (based on Ember) for cluster and node drivers was deprecated in Rancher 2.11.0 and will be removed in a future release. These need to be migrated to the new <a href="https://extensions.rancher.io" target="_blank" rel="noopener noreferrer nofollow">UI Extensions framework</a>.'
-    refreshError: 'Error refreshing cluster drivers: {error}'
+    emberRemovalMessage: 'Support for UI Plugins (based on Ember) for cluster and node drivers was deprecated in Rancher 2.11.0 and has been removed in 2.15.0. If you still need one of these plugins, it will need to be migrated to the new <a href="https://extensions.rancher.io/extensions/next/provisioning/hosted-provider/overview" target="_blank" rel="noopener noreferrer nofollow">UI Extensions framework</a>.'
+    emberRemovalTooltip: 'Support for UI Plugins (based on Ember) for cluster and node drivers was deprecated in Rancher 2.11.0 and has been removed in 2.15.0. If you still need this plugin, it will need to be migrated to the new UI Extensions framework.'
   node:
     title: Node Drivers
   add:
@@ -5446,6 +5451,7 @@ inactivity:
 # Rancher Extensions
 plugins:
   altIcon: Icon for {extension} extension card
+  deprecatedExtension: This extension is deprecated and may soon be removed from the catalog.
   incompatiblePrimeOnly: "The latest version of this extension ({ version }) needs Rancher Prime in order to be installed."
   incompatibleRancherVersion: "The latest version of this extension ({ version }) is not compatible with the current Rancher version ({ required })."
   incompatibleKubeVersion: "The latest version of this extension ({ version }) is not compatible with the current Kube version ({ required })."
@@ -7975,7 +7981,7 @@ model:
       local: Local
       multiple: Multiple
       activedirectory: ActiveDirectory
-      azuread: AzureAD
+      azuread: Microsoft Entra ID
       github: GitHub
       githubapp: GitHub App
       keycloak: Keycloak
@@ -9174,10 +9180,6 @@ support:
       title: Innovate with Freedom
       text: Take advantage of our certified compatibility with a wide range of Kubernetes providers, operating systems, and open source software.
 
-embedding:
-  retry: Retry
-  unavailable: Cluster Manager UI is not available
-
 serverUpgrade:
   title: "{vendor} Server Changed"
   message: "The page reloaded because the version of {vendor} running on your server changed."

package/assets/translations/zh-hans.yaml

@@ -531,16 +531,16 @@ authConfig:
     tokenEndpoint: Token 端点
     authEndpoint: Auth 端点
     reply:
-      info: '在开始设置之前，Azure AD 需要 Rancher Server 的白名单 URL。请确保在 Azure 门户的回复 URL 中设置了以下 URL。请注意，白名单 URL 可能需要 5 分钟才能生效。'
+      info: '在开始设置之前，Microsoft Entra ID 需要 Rancher Server 的白名单 URL。请确保在 Microsoft Entra 管理中心的回复 URL 中设置了以下 URL。请注意，白名单 URL 可能需要 5 分钟才能生效。'
       label: 回复 URL
     updateEndpoint:
       button: 更新端点
       banner:
-        message: '必须更新 Azure AD 身份认证：它使用了 Azure Graph API，该 API 将于 2022 年底弃用。'
+        message: '必须更新 Microsoft Entra ID 身份认证：它使用了 Azure AD Graph API，该 API 已于 2022 年底弃用。'
         linkText: '在此处进行更新。'
       modal:
         title: 是否确认？此更新是不可逆的。
-        body: '<p><b>你可能需要进行额外的更改</b>。请确保 Azure AD 应用已将 Directory.Read.All <b>Application</b> 权限添加到 Microsoft Graph。<br> 如果在 Rancher 中配置 Azure AD 身份认证时自定义了端点，这些端点将不会自动更新。</p>'
+        body: '<p><b>你可能需要进行额外的更改</b>。请确保 Microsoft Entra ID 应用已将 Directory.Read.All <b>Application</b> 权限添加到 Microsoft Graph。<br> 如果在 Rancher 中配置 Microsoft Entra ID 身份认证时自定义了端点，这些端点将不会自动更新。</p>'
   oidc:
     oidc: 配置 OIDC 账号
     keycloakoidc: 配置 Keycloak OIDC 账号
@@ -6269,7 +6269,7 @@ model:
       local: 本地
       multiple: Multiple
       activedirectory: Active Directory
-      azuread: AzureAD
+      azuread: Microsoft Entra ID
       github: GitHub
       keycloak: Keycloak
       ldap: LDAP
@@ -7307,10 +7307,6 @@ support:
       title: 自由创新
       text: 基于我们与众多 Kubernetes 供应商、操作系统和开源软件认证的兼容性，实现自主创新。
 
-embedding:
-  retry: 重试
-  unavailable: Cluster Manager UI 不可用
-
 legacy:
   alerts: 告警
   apps: 应用

package/chart/__tests__/S3.test.ts

@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 
 import S3 from '@shell/chart/rancher-backup/S3';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 
 describe('rancher-backup: S3', () => {
   const mockStore = {
@@ -16,8 +16,15 @@ describe('rancher-backup: S3', () => {
     }
   };
   const wrapper = mount(S3, {
-    plugins: [Vuex],
-    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } }
+    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } },
+    provide: {
+      store: createStore({
+        getters: {
+          'cluster/paginationEnabled': () => () => false,
+          currentStore:                () => 'cluster'
+        }
+      })
+    },
   });
 
   it('should emit invalid when form is not filled', () => {

package/components/CountBox.vue

@@ -3,6 +3,8 @@
 export default {
   name: 'CountBox',
 
+  emits: ['click'],
+
   props: {
     name: {
       type:     String,
@@ -19,6 +21,10 @@ export default {
     compact: {
       type:    Boolean,
       default: false
+    },
+    clickable: {
+      type:    Boolean,
+      default: false
     }
   },
   computed: {
@@ -34,6 +40,12 @@ export default {
   methods: {
     customizePrimaryColorOpacity(opacity) {
       return `rgba(var(${ this.primaryColorVar }), ${ opacity })`;
+    },
+
+    handleClick() {
+      if (this.clickable) {
+        this.$emit('click');
+      }
     }
   }
 };
@@ -42,7 +54,9 @@ export default {
 <template>
   <div
     class="count-container"
+    :class="{ 'clickable': clickable }"
     :style="sideStyle"
+    @click="handleClick"
   >
     <div
       class="count"
@@ -61,6 +75,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+    .count-container {
+      &.clickable {
+        cursor: pointer;
+      }
+    }
+
     .count {
       $padding: 10px;
 

package/components/CreateDriver.vue

@@ -22,7 +22,6 @@ export default {
     rules: {
       default: () => ({
         url:              [],
-        uiUrl:            [],
         checksum:         [],
         whitelistDomains: []
       }),
@@ -56,17 +55,6 @@ export default {
         :data-testid="'driver-create-checksum-field'"
       />
     </div>
-    <div class="row mb-20">
-      <LabeledInput
-        v-model:value.trim="value.uiUrl"
-        :label="t('drivers.add.customUiUrl.label')"
-        :tooltip="t('drivers.add.customUiUrl.tooltip', null, true)"
-        :placeholder="t('drivers.add.customUiUrl.placeholder', null, true)"
-        :mode="mode"
-        :rules="rules.uiUrl"
-        :data-testid="'driver-create-uiurl-field'"
-      />
-    </div>
     <div class="col span-6">
       <ArrayList
         v-model:value="value.whitelistDomains"

package/components/DetailText.vue

@@ -187,10 +187,9 @@ export default {
     >{{ body }}</span>
 
     <CodeMirror
-      v-else-if="jsonStr"
+      v-else-if="jsonStr && !concealed"
       :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
       :value="jsonStr"
-      :class="{'conceal': concealed}"
       aria-live="polite"
     />
 
@@ -199,9 +198,16 @@ export default {
       :class="{'conceal-wrapper': concealed}"
     >
       <span
+        v-if="concealed"
+        data-testid="detail-top_html"
+        class="conceal"
+        aria-live="polite"
+      />
+      <span
+        v-else
         v-clean-html="bodyHtml"
         data-testid="detail-top_html"
-        :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+        :class="{'monospace': monospace && !isBinary}"
         aria-live="polite"
       />
     </div>
@@ -270,6 +276,9 @@ export default {
   .conceal {
     white-space: nowrap;
     display: block;
+    &::before {
+      content: '••••••••••••••••••••••••';
+    }
   }
 
   .action-group {

package/components/SelectIconGrid.vue

@@ -38,6 +38,10 @@ export default {
       type:    String,
       default: 'disabled',
     },
+    tooltipField: {
+      type:    String,
+      default: 'tooltip',
+    },
 
     asLink: {
       type:    Boolean,
@@ -104,6 +108,7 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      v-clean-tooltip="get(r, tooltipField) || null"
       :role="asLink ? 'link' : null"
       :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
       :aria-label="get(r, nameField)"

package/components/__tests__/CountBox.test.ts

@@ -0,0 +1,72 @@
+import { shallowMount } from '@vue/test-utils';
+import CountBox from '@shell/components/CountBox.vue';
+
+describe('component: CountBox', () => {
+  const defaultProps = {
+    name:            'Test',
+    count:           5,
+    primaryColorVar: '--sizzle-1',
+  };
+
+  describe('when clickable is false', () => {
+    it('should render as a div', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.element.tagName).toBe('DIV');
+    });
+
+    it('should not have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.classes()).not.toContain('clickable');
+    });
+
+    it('should not emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toBeUndefined();
+    });
+  });
+
+  describe('when clickable is true', () => {
+    it('should have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      expect(wrapper.classes()).toContain('clickable');
+    });
+
+    it('should emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toHaveLength(1);
+    });
+  });
+
+  describe('display', () => {
+    it('should display the count', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('h1').text()).toBe('5');
+    });
+
+    it('should display the name', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('label').text()).toBe('Test');
+    });
+  });
+});

package/components/__tests__/DetailText.test.ts

@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils';
+
+import DetailText from '@shell/components/DetailText.vue';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
+describe('component: DetailText', () => {
+  const defaultMocks = {
+    $store: {
+      getters: {
+        'i18n/t':    jest.fn((key: string) => `%${ key }%`),
+        'prefs/get': jest.fn(() => true),
+      }
+    }
+  };
+
+  describe('concealment', () => {
+    it('should not render the actual secret value in the content area when concealed', () => {
+      const secretValue = 'super-secret-password-xyz';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   secretValue,
+          conceal: true,
+          label:   'Password',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain(secretValue);
+    });
+
+    it('should render the actual value when not concealed', () => {
+      const visibleValue = 'visible-value-123';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   visibleValue,
+          conceal: false,
+          label:   'Data',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html': (el: HTMLElement, binding: { value: string }) => {
+              el.innerHTML = binding.value;
+            },
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const contentSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(contentSpan.exists()).toBe(true);
+      expect(contentSpan.classes()).not.toContain('conceal');
+    });
+
+    it('should not render JSON secret values in CodeMirror when concealed', () => {
+      const jsonSecret = '{"api_key": "secret-key-123"}';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   jsonSecret,
+          conceal: true,
+          label:   'Config',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const codeMirror = wrapper.findComponent({ name: 'CodeMirror' });
+
+      expect(codeMirror.exists()).toBe(false);
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain('secret-key-123');
+    });
+  });
+});

package/components/fleet/FleetClusterTargets/index.vue

@@ -124,6 +124,15 @@ export default {
         this.update();
       }
     },
+
+    allClusters(clusters: any[]) {
+      if (clusters.length) {
+        // Resolve metadata.name values to nameDisplay for UI display
+        this.selectedClusters = this.selectedClusters.map(
+          (name) => this.resolveClusterDisplayName(name)
+        );
+      }
+    },
   },
 
   computed: {
@@ -159,7 +168,7 @@ export default {
     clustersOptions() {
       return this.allClusters
         .filter((x) => x.metadata.namespace === this.namespace && !isHarvesterCluster(x))
-        .map((x) => ({ label: x.nameDisplay, value: x.metadata.name }));
+        .map((x) => ({ label: x.nameDisplay, value: x.nameDisplay }));
     },
 
     clusterGroupsOptions() {
@@ -352,6 +361,14 @@ export default {
       return undefined;
     },
 
+    resolveClusterDisplayName(name: string): string {
+      const cluster = this.allClusters.find(
+        (c: any) => c.metadata.namespace === this.namespace && c.metadata.name === name
+      );
+
+      return cluster ? cluster.nameDisplay : name;
+    },
+
     reset() {
       this.targetMode = 'all';
       this.selectedClusters = [];

package/components/form/InputWithSelect.vue

@@ -1,18 +1,22 @@
 <script>
-import labeledFormElement from '@shell/mixins/labeled-form-element';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
+import { computed } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
 export default {
-  name:       'InputWithSelect',
+  name: 'InputWithSelect',
+
+  inheritAttrs: false,
+
   emits:      ['update:value'],
   components: {
     LabeledInput,
     LabeledSelect,
     Select,
   },
-  mixins: [labeledFormElement],
-  props:  {
+  props: {
     disabled: {
       type:    Boolean,
       default: false,
@@ -84,10 +88,20 @@ export default {
     selectRules: {
       default: () => [],
       type:    Array,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
     }
 
   },
 
+  setup(props) {
+    const isView = computed(() => props.mode === _VIEW);
+
+    return { isView };
+  },
+
   data() {
     return {
       selected: this.selectValue || this.options[0].value,
@@ -95,12 +109,6 @@ export default {
     };
   },
 
-  computed: {
-    canPaginate() {
-      return false;
-    }
-  },
-
   methods: {
     focus() {
       const comp = this.$refs.text;