AI extension, compatibility features

package.json

@@ -68,7 +68,7 @@
     "@smithy/fetch-http-handler": "5.1.1",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.49",
+    "@rancher/icons": "2.0.51",
     "@vee-validate/zod": "4.15.0",
     "ansi_up": "5.0.0",
     "axios": "1.12.2",

shell/assets/translations/en-us.yaml

@@ -5226,6 +5226,8 @@ plugins:
     third-party: This Extension is provided by a Third-Party
     built-in: This Extension is built-in
     image: This Extension Image has been loaded manually
+  tooltips:
+    installing: Installing...
   error:
     title: Error loading extension
     message: Could not load extension code

shell/components/Resource/Detail/CopyToClipboard.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-    value: string;
+  value: string;
 }
 
 const props = defineProps<Props>();

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

@@ -84,6 +84,7 @@ watch(
         </span>
         <BadgeState
           v-if="badge"
+          v-ui-context="{ store: store, icon: 'icon-folder', hookable: true, value: resource, tag: '__details-state', description: 'Details' }"
           class="badge-state"
           :color="badge.color"
           :label="badge.label"

shell/components/ResourceDetail/index.vue

@@ -430,6 +430,7 @@ export default {
     :is="showComponent"
     v-else-if="isFullPageOverride"
     v-model:value="value"
+    v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
     v-bind="$data"
     :done-params="doneParams"
     :done-route="doneRoute"
@@ -446,6 +447,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
+      v-ui-context="{ icon: 'icon-folder', value: liveModel.name, tag: liveModel.kind?.toLowerCase(), description: liveModel.kind }"
       :resource="resourceType"
       :value="liveModel"
       :mode="mode"
@@ -499,6 +501,7 @@ export default {
       v-else
       ref="comp"
       v-model:value="value"
+      v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
       v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"

shell/components/SortableTable/index.vue

@@ -1474,6 +1474,7 @@ export default {
                     <td
                       v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
                       :key="col.col.name"
+                      v-ui-context="col.col.name === 'state' ? { icon: 'icon-folder', hookable: true, value: row.row, tag: '__sortable-table-row', description: 'Row' } : undefined"
                       :data-title="col.col.label"
                       :data-testid="`sortable-cell-${ i }-${ j }`"
                       :align="col.col.align || 'left'"

shell/detail/pod.vue

@@ -97,6 +97,7 @@ export default {
 
         return {
           ...container,
+          kind:             'Container',
           status:           status || {},
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,

shell/directives/ui-context.ts

@@ -1,11 +1,14 @@
-import { get } from '@shell/utils/object';
+import { get, isEmpty } from '@shell/utils/object';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 interface Context {
   tag: string;
   path?: string;
   value?: any;
+  hookable?: boolean;
   description?: string;
   icon?: string;
+  store?: any;
 }
 
 function isValid(context: Context ): context is Context {
@@ -43,7 +46,11 @@ function isValid(context: Context ): context is Context {
 */
 export default {
   async mounted(el: any, binding: { value: Context, instance: any }) {
-    const context = binding.value;
+    const context: Context = binding.value;
+
+    if (!context || isEmpty(context)) {
+      return;
+    }
 
     if (!isValid(context)) {
       throw new Error(`Invalid ui-context value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
@@ -65,12 +72,26 @@ export default {
 
     delete context.path;
 
-    el._uiContextId = await binding.instance.$store.dispatch('ui-context/add', context);
+    if (context.hookable) {
+      const hookId = generateRandomAlphaString(12);
+
+      el.setAttribute('ux-context-hook-id', hookId);
+      (context as any).hookId = hookId;
+    }
+
+    const store = context.store || binding.instance.$store || binding.instance.store;
+
+    if (store) {
+      delete context.store;
+      el._uiContextId = await store.dispatch('ui-context/add', context);
+    }
   },
 
-  async beforeUnmount(el: any, binding: { instance: any }) {
-    const store = binding.instance.$store;
+  async beforeUnmount(el: any, binding: { value: Context, instance: any }) {
+    const store = binding.value?.store || binding.instance.$store || binding.instance.store;
 
-    await store.dispatch('ui-context/remove', el._uiContextId);
+    if (store && el._uiContextId) {
+      await store.dispatch('ui-context/remove', el._uiContextId);
+    }
   }
 };

shell/package.json

@@ -38,7 +38,7 @@
     "@babel/preset-typescript": "7.16.7",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.49",
+    "@rancher/icons": "2.0.51",
     "@types/is-url": "1.2.30",
     "@types/node": "20.10.8",
     "@types/semver": "^7.5.8",

shell/store/ui-context.ts

@@ -1,6 +1,7 @@
 interface Context {
   tag: string;
   value: any;
+  hookId?: string;
   description?: string;
   icon?: string;
 }

shell/yarn.lock

@@ -2607,10 +2607,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@rancher/[email protected].49":
-  version "2.0.49"
-  resolved "https://registry.npmjs.org/@rancher/icons/-/icons-2.0.49.tgz#4ebd9dc84b8d8579b72fa3be5146cb4feba8eab5"
-  integrity sha512-XhvoH35Q6slxhIenUkmi5YQUF0LXS+oKN5SfdelPLof2v6M+g/6nDZXiWfGTc2WjX41Cdq7fdEfhCpSnlJPxWg==
+"@rancher/[email protected].51":
+  version "2.0.51"
+  resolved "https://registry.yarnpkg.com/@rancher/icons/-/icons-2.0.51.tgz#6047f3696b8c96ead403a032ea8d433069264b8b"
+  integrity sha512-1ox5LnHVTlb8K5bGIvGWyRPisXyxrAGuz8Eud5MXPjNnVgcXnWvhAqFMD5ywvS6aTsUC92siCSdjJmgouBtzbg==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"

yarn.lock

@@ -2826,10 +2826,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@rancher/[email protected].49":
-  version "2.0.49"
-  resolved "https://registry.npmjs.org/@rancher/icons/-/icons-2.0.49.tgz#4ebd9dc84b8d8579b72fa3be5146cb4feba8eab5"
-  integrity sha512-XhvoH35Q6slxhIenUkmi5YQUF0LXS+oKN5SfdelPLof2v6M+g/6nDZXiWfGTc2WjX41Cdq7fdEfhCpSnlJPxWg==
+"@rancher/[email protected].51":
+  version "2.0.51"
+  resolved "https://registry.yarnpkg.com/@rancher/icons/-/icons-2.0.51.tgz#6047f3696b8c96ead403a032ea8d433069264b8b"
+  integrity sha512-1ox5LnHVTlb8K5bGIvGWyRPisXyxrAGuz8Eud5MXPjNnVgcXnWvhAqFMD5ywvS6aTsUC92siCSdjJmgouBtzbg==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"