@rancher/shell 3.0.11 → 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/styles/base/_mixins.scss

@@ -161,3 +161,34 @@
   // we need to use !important because it needs to superseed other classes that might impact outlines
   outline: 2px solid var(--primary-keyboard-focus);
 }
+
+// -------------------------------------------------------------------------------------------------
+// Extension dialog styles
+
+@mixin extension-dialog {
+  padding: 8px 16px 16px 16px;
+
+  h4 {
+    font-weight: bold;
+  }
+
+  .dialog-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 96px;
+
+    .dialog-info {
+      flex: 1;
+    }
+  }
+
+  .dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+
+    > *:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}

package/assets/styles/base/_variables.scss

@@ -42,6 +42,8 @@ $z-indexes: (
 
   cruFooter: 19,
 
+  copyToClipboard: 20,
+
   loadingMain: 51,
 
   slide-in: 52,

package/assets/styles/themes/_modern.scss

@@ -74,6 +74,7 @@ $contrasted-light: $lightest !default;
 $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
+$body-bg  : $lightest;
 
 BODY, .theme-light {
 
@@ -418,7 +419,7 @@ BODY, .theme-light {
   }
 
 
-  --body-bg                    : #{$lightest};
+  --body-bg                    : #{$body-bg};
   --body-text                  : #{$darkest};
   --body-text-hover            : var(--body-text);
   --scrollbar-thumb            : #{$dark};
@@ -724,8 +725,8 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$lightest};
-  --rc-section-background-secondary: #{$lighter};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$grey-5};
   --rc-section-action-color: #{$gray009};
 
   --rc-image-bg: #{$lightest};
@@ -1072,8 +1073,8 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
-  --rc-section-background-primary: #{$gray007};
-  --rc-section-background-secondary: #{$gray008};
+  --rc-section-background-primary: #{$body-bg};
+  --rc-section-background-secondary: #{$darkest};
   --rc-section-action-color: #{$gray010};
 
   --rc-image-bg: #{$lightest};

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:
@@ -2989,7 +2994,7 @@ fleet:
       add: Add Selector
     tolerations:
       label: Tolerations
-      description: "List of node taints to tolerate (requires Kubernetes >= 1.6)"
+      description: "List of node taints to tolerate."
       add: Add Toleration
     priorityClassName:
       label: Priority Class Name
@@ -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 })."
@@ -5578,6 +5584,9 @@ plugins:
     prompt: "Are you sure that you want to install this extension?"
     version: Version
     warnNotCertified: Please ensure that you are aware of the risks of installing Extensions from untrusted authors
+    alreadyInstalledTitle: This extension is already installed from another source
+    alreadyInstalledPrompt: To install it from this source, you need to uninstall the existing version first and reload the page (required). Would you like to continue?
+    uninstallExisting: Uninstall existing version
   upgrade:
     label: Upgrade
     title: Upgrade extension {name}
@@ -6988,6 +6997,7 @@ tableHeaders:
   progress: Progress
   podImages: Image
   podRestarts: Restarts
+  podLastRestart: Last Restart
   pods: Pods
   pod-Selector: Pod-Selector
   providers: Providers
@@ -7971,7 +7981,7 @@ model:
       local: Local
       multiple: Multiple
       activedirectory: ActiveDirectory
-      azuread: AzureAD
+      azuread: Microsoft Entra ID
       github: GitHub
       githubapp: GitHub App
       keycloak: Keycloak
@@ -8045,10 +8055,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: A Prometheus server is a Prometheus deployment whose scrape configuration and rules are determined by selected ServiceMonitors, PodMonitors, and PrometheusRules and whose alerts will be sent to all selected Alertmanagers with the custom resource's configuration.
   monitoring.coreos.com.alertmanager: An alert manager is deployment whose configuration will be specified by a secret in the same namespace, which determines which alerts should go to which receiver.
   node: The base Kubernetes Node resource represents a virtual or physical machine which hosts deployments. To manage the machine lifecycle, if available, go to Cluster Management.
-  catalog.cattle.io.clusterrepo: 'A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster.'
-  catalog.cattle.io.clusterrepo.local: ' A chart repository is a Helm repository or {vendor} git based application catalog. It provides the list of available charts in the cluster. Cluster Templates are deployed via Helm charts.'
   catalog.cattle.io.operation: An operation is the list of recent Helm operations that have been applied to the cluster.
-  catalog.cattle.io.app: An installed application is a Helm 3 chart that was installed either via our charts or through the Helm CLI.
   logging.banzaicloud.io.clusterflow: Logs from the cluster will be collected and logged to the selected Cluster Output.
   logging.banzaicloud.io.clusteroutput: A cluster output defines which logging providers that logs can be sent to and is only effective when deployed in the namespace that the logging operator is in.
   logging.banzaicloud.io.flow: A flow defines which logs to collect and filter as well as which output to send the logs. The flow is a namespaced resource, which means logs will only be collected from the namespace that the flow is deployed in.
@@ -9173,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
@@ -6339,10 +6339,7 @@ typeDescription:
   monitoring.coreos.com.prometheus: Prometheus server 是一个 Prometheus deployment，其抓取的配置和规则由选定的 ServiceMonitor、PodMonitor 和 PrometheusRule 决定。它将其告警信息发送给所有选择的具有定制资源配置的 AlertManager。
   monitoring.coreos.com.alertmanager: Alertmanager 是一个 deployment。其配置由同一命名空间中的密文指定，该密文决定了告警的接收器。
   node: Kubernetes 节点资源展示了承载 Deployment 的虚拟机或物理机。请进入"集群管理"页面管理可用节点的生命周期。
-  catalog.cattle.io.clusterrepo: 'Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。'
-  catalog.cattle.io.clusterrepo.local: ' Chart 仓库是一个 Helm 仓库或 {vendor} 基于 Git 的应用商店。此处列出了集群中可用的 Chart。集群模板是通过 Helm Chart 部署的。'
   catalog.cattle.io.operation: 最近的操作指的是最近应用于集群的一系列 Helm 操作。
-  catalog.cattle.io.app: 已安装的应用指的是通过我们的 Chart 或 Helm CLI 安装的 Helm 3 Chart。
   logging.banzaicloud.io.clusterflow: 集群日志将被收集并投递到选定的 ClusterOutput 中。
   logging.banzaicloud.io.clusteroutput: ClusterOutput 定义了日志可以发送到哪些日志提供程序。只有部署在 Logging operator 所在的命名空间中时，ClusterOutput 才生效。
   logging.banzaicloud.io.flow: Flow 定义了要收集和过滤的日志，以及日志的输出目标。Flow 是一个命名空间资源。换言之，只有部署了该 Flow 的命名空间日志才能被该 Flow 收集。
@@ -7310,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/EmptyProductPage.vue

@@ -0,0 +1,76 @@
+<script>
+export default {
+  name:   'EmptyProductPage',
+  layout: 'plain',
+  data() {
+    const err = this.$route.meta?.pageError;
+
+    let msg;
+
+    switch (err) {
+    case 'no-nav':
+      msg = [
+        'When a component is not provided for a product, the layout with side navigation is used',
+        'No child items were specified, so this "Default" empty view has been added',
+        'Please add child items to this product'
+      ];
+      break;
+    default:
+      msg = ['No component defined for this extension product... Define a component or child pages so it can be rendered here.'];
+    }
+
+    return {
+      img: require('~shell/assets/images/generic-plugin.svg'),
+      msg,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="empty-product-page">
+    <img
+      :src="img"
+      alt="Extension Product Error"
+    >
+    <div class="err-messages">
+      <p
+        v-for="(m, index) in msg"
+        :key="index"
+      >
+        {{ m }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-product-page {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  opacity: 0.75;
+
+  > img {
+    width: 128px;
+    margin-bottom: 20px;
+  }
+
+  .err-messages {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+
+    > * {
+      margin-bottom: 8px;
+      font-size: 16px;
+
+      &:last-child {
+        font-weight: bold;
+        color: var(--error);
+      }
+    }
+  }
+}
+</style>

package/components/Resource/Detail/CopyToClipboard.vue

@@ -70,8 +70,7 @@ const onClick = (ev: MouseEvent) => {
         border-color: var(--success-border);
         color: var(--success-text);
 
-        transition: all 0.25s;
-        transition-timing-function: ease;
+        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
     }
 
     &:focus-visible {

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

@@ -77,12 +77,15 @@ const previewId = randomStr();
   position: relative;
   padding: 0;
 
+  $topShift: -6px;
+  $topShiftHidden: -100vh; //100% of the viewport
+
   .copy-to-clipboard {
     position: fixed;
 
     right: -20px;
-    top: -6px;
-    z-index: 20px;
+    top: $topShiftHidden;
+    z-index: z-index('copyToClipboard');
   }
 
   &, .btn, .rc-tag {
@@ -126,13 +129,16 @@ const previewId = randomStr();
       }
 
       & + .copy-to-clipboard {
+        // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
         position: absolute;
+        top: $topShift;
       }
     }
 
     .copy-to-clipboard:focus-visible, .copy-to-clipboard:hover {
+      // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
       position: absolute;
-
+      top: $topShift;
     }
 
     .btn:has(+ .copy-to-clipboard:focus-visible), .btn:has(+ .copy-to-clipboard:hover)  {

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: TitleBar/index should match the full component snapshot 1`] = `
+<div class="title-bar">
+  <div class="top">
+    <h1 class="title">
+      <!----><a class="resource-link">RESOURCE_TYPE_LABEL: </a><span class="resource-name masthead-resource-title">RESOURCE_NAME</span><span class="badge-state bg-success badge-state"><!--v-if--><span class="msg">Active</span></span>
+    </h1>
+    <div class="actions"><button role="button" class="rc-button btn variant-primary btn-medium">
+        <!--v-if-->Deploy
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-secondary btn-large">
+        <!--v-if-->Rollback
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-primary btn-large show-configuration" data-testid="show-configuration-cta" aria-label="component.resource.detail.titleBar.ariaLabel.showConfiguration-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+        <!--v-if--><i class="icon icon-document" aria-hidden="true"></i> component.resource.detail.titleBar.showConfiguration
+        <!--v-if-->
+      </button>
+      <div class="v-popper v-popper--theme-dropdown"><button role="button" class="rc-button btn variant-multi-action btn-medium" aria-haspopup="menu" aria-expanded="false" data-testid="masthead-action-menu" aria-label="component.resource.detail.titleBar.ariaLabel.actionMenu-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+          <!--v-if--><i class="icon icon-actions"></i>
+          <!--v-if-->
+        </button></div>
+      <div class="popperContainer">
+        <!--Empty container for mounting popper content-->
+      </div>
+    </div>
+  </div>
+  <div class="bottom description text-deemphasized">A test description</div>
+  <!--v-if-->
+</div>
+`;