From 4bb01684443e4ff3e1ebcefd79b75d416eb8d485 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nwmac@users.noreply.github.com>
Date: Thu, 9 Feb 2023 20:15:34 +0000
Subject: [PATCH] Improve presentation of Harvester Manager Built-in Extension
 (#8004)

* Improve presentation of VM Built-in Extension

* Update description following PR feedback
---
 pkg/harvester-manager/icon.svg                | 22 +++++++++++++++++++
 pkg/harvester-manager/index.ts                |  3 +++
 pkg/harvester-manager/package.json            |  6 +++--
 .../c/_cluster/uiplugins/PluginInfoPanel.vue  | 11 ++++++++--
 shell/pages/c/_cluster/uiplugins/index.vue    |  7 +++---
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 pkg/harvester-manager/icon.svg

diff --git a/pkg/harvester-manager/icon.svg b/pkg/harvester-manager/icon.svg
new file mode 100644
index 0000000000..b05ebd321d
--- /dev/null
+++ b/pkg/harvester-manager/icon.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="icomoon-ignore">
+</g>
+<path d="M23,12.5c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.1,0-0.2,0-0.2c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1l-2.6-4.5
+	c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1l0,0l0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0
+	c0,0,0,0,0,0c0,0,0,0-0.1,0h-5.2c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0l0,0l0,0c0,0-0.1,0-0.1,0.1
+	c0,0,0,0,0,0c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1l-2.4,4.2H9.7l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7
+	h-1.2c-0.2,0-0.5,0.1-0.6,0.3l-2.4,4.2H6.2l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7H7.7c-0.2,0-0.5,0.1-0.6,0.3
+	l-2.4,4.2H2.8l1.8-3.2h0.9c0.4,0,0.7-0.3,0.7-0.7S5.8,7.1,5.5,7.1H4.3C4,7.1,3.8,7.2,3.7,7.4l-2.6,4.5c0,0,0,0,0,0.1c0,0,0,0,0,0
+	c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1l0,0l0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1
+	l2.6,4.5c0.1,0.2,0.3,0.3,0.6,0.3h1.2c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H4.6l-1.8-3.2h1.9l2.4,4.2c0.1,0.2,0.3,0.3,0.6,0.3
+	h1.2c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H8.1l-1.8-3.2h1.9l2.4,4.2c0.1,0.2,0.3,0.3,0.6,0.3h1.2c0.4,0,0.7-0.3,0.7-0.7
+	c0-0.4-0.3-0.7-0.7-0.7h-0.9l-1.8-3.2h1.9l2.4,4.2c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1l0,0
+	c0,0,0,0,0,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0l0,0l5.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0c0,0,0,0,0.1,0
+	c0,0,0,0,0.1,0c0,0,0,0,0,0l0,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1L23,12.5
+	C22.9,12.5,22.9,12.5,23,12.5C22.9,12.5,22.9,12.5,23,12.5L23,12.5z M19.7,15.4L19,14.1l0.7-1.2h1.5L19.7,15.4L19.7,15.4z
+	 M13.1,12.9h1.5l0.7,1.2l-0.8,1.3L13.1,12.9z M14.6,9l0.8,1.3l-0.7,1.2h-1.5L14.6,9L14.6,9z M16.5,13.4l-0.7-1.2l0.7-1.2h1.4
+	l0.7,1.2l-0.7,1.2H16.5z M17.9,9.7h-1.4l-0.8-1.3h2.9L17.9,9.7L17.9,9.7z M16.5,14.8h1.4l0.8,1.3h-2.9L16.5,14.8L16.5,14.8z
+	 M19.7,11.6L19,10.4L19.7,9l1.5,2.5L19.7,11.6L19.7,11.6z"/>
+</svg>
diff --git a/pkg/harvester-manager/index.ts b/pkg/harvester-manager/index.ts
index f3c566aa4e..842492e078 100644
--- a/pkg/harvester-manager/index.ts
+++ b/pkg/harvester-manager/index.ts
@@ -9,5 +9,8 @@ export default function(plugin: IPlugin) {
   // Provide plugin metadata from package.json
   plugin.metadata = require('./package.json');
 
+  // Built-in icon
+  plugin.metadata.icon = require('./icon.svg');
+
   plugin.addProduct(require('./config/harvester-manager'));
 }
diff --git a/pkg/harvester-manager/package.json b/pkg/harvester-manager/package.json
index e918831790..82496334bb 100644
--- a/pkg/harvester-manager/package.json
+++ b/pkg/harvester-manager/package.json
@@ -1,9 +1,11 @@
 {
   "name": "harvester-manager",
-  "description": "harvester-manager plugin",
+  "description": "Provides the Virtualization Management feature in Rancher Manager",
   "version": "0.1.0",
   "private": false,
-  "rancher": true,
+  "rancher": {
+    "catalog.cattle.io/display-name": "Virtualization Manager"
+  },
   "scripts": {
     "dev": "./node_modules/.bin/nuxt dev",
     "nuxt": "./node_modules/.bin/nuxt"
diff --git a/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue b/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
index 5d280e9155..9fd9f970a1 100644
--- a/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
+++ b/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
@@ -148,7 +148,7 @@ export default {
               class="slideIn__header"
               data-testid="extension-details-title"
             >
-              {{ info.name }}
+              {{ info.label }}
             </h2>
             <p class="plugin-description">
               {{ info.description }}
@@ -230,8 +230,11 @@ export default {
         </div>
         <div v-if="!info.versions.length">
           <h3>
-            {{ t('plugins.version', { version: info.displayVersion }) }}
+            {{ t('plugins.info.versions') }}
           </h3>
+          <div class="version-link version-active version-builtin">
+            {{ info.displayVersion }}
+          </div>
         </div>
       </div>
     </div>
@@ -352,6 +355,10 @@ export default {
           color: var(--link-text);
           background: var(--link);
         }
+
+        &.version-builtin {
+          display: inline-block;
+        }
       }
 
       &__header {
diff --git a/shell/pages/c/_cluster/uiplugins/index.vue b/shell/pages/c/_cluster/uiplugins/index.vue
index 1ef5ad2a3c..660e46a238 100644
--- a/shell/pages/c/_cluster/uiplugins/index.vue
+++ b/shell/pages/c/_cluster/uiplugins/index.vue
@@ -221,10 +221,12 @@ export default {
         const chart = all.find(c => c.name === p.name);
 
         if (!chart) {
-          // A pluign is loaded, but there is no chart, so add an item so that it shows up
+          // A plugin is loaded, but there is no chart, so add an item so that it shows up
+          const rancher = typeof p.metadata?.rancher === 'object' ? p.metadata.rancher : {};
+          const label = rancher[UI_PLUGIN_CHART_ANNOTATIONS.DISPLAY_NAME] || p.name;
           const item = {
             name:           p.name,
-            label:          p.name,
+            label,
             description:    p.metadata?.description,
             icon:           p.metadata?.icon,
             id:             p.id,
@@ -880,7 +882,6 @@ export default {
         width: 40px;
         -o-object-fit: contain;
         object-fit: contain;
-        position: relative;
         top: 2px;
         left: 2px;
       }