Add ui-context in Header's status banners

shell/components/ResourceDetail/Masthead/latest.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable */
 import { Banner } from '@components/Banner';
 import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
@@ -7,6 +8,7 @@ import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resourc
 import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
 import { computed } from 'vue';
 
+// We are disabling eslint for this script to allow the use of the Props interface
 export interface Props {
   value?: Object;
   resourceSubtype?: string;
@@ -15,18 +17,45 @@ export interface Props {
 </script>
 
 <script lang="ts" setup>
+import { useStore } from 'vuex';
+
 const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
 
+const uiCtxResource = computed(() => {
+  const {
+    name, metadata, kind, state
+  } = (props.value || {}) as any;
+
+  return {
+    name,
+    namespace: metadata?.namespace,
+    kind,
+    state,
+  };
+});
 const resourceSubtype = computed(() => props.resourceSubtype);
 const titleBarProps = useDefaultTitleBarProps(props.value, resourceSubtype);
 const metadataProps = useDefaultMetadataForLegacyPagesProps(props.value);
 const bannerProps = useResourceDetailBannerProps(props.value);
+
+const store = useStore();
 </script>
 
 <template>
   <TitleBar v-bind="titleBarProps" />
   <Banner
     v-if="bannerProps"
+    v-ui-context="{
+      store: store,
+      icon: 'icon-info',
+      hookable: true,
+      value: {
+        bannerProps,
+        resource: uiCtxResource
+      },
+      tag: '__details-state-banner',
+      description: 'Status Message'
+    }"
     class="new state-banner"
     v-bind="bannerProps"
   />

shell/directives/ui-context.ts

@@ -53,7 +53,10 @@ export default {
     }
 
     if (!isValid(context)) {
-      throw new Error(`Invalid ui-context value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
+      // eslint-disable-next-line no-console
+      console.warn(`[ui-context] invalid value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
+
+      return;
     }
 
     if (context.path === undefined && context.value === undefined) {
@@ -64,7 +67,10 @@ export default {
       const value = get(binding.instance, context.path);
 
       if (value === undefined) {
-        throw new Error(`[ui-context] path "${ context.path }" is undefined on the component instance`);
+        // eslint-disable-next-line no-console
+        console.warn(`[ui-context] path "${ context.path }" is undefined on the component instance`);
+
+        return;
       }
 
       context.value = value;

shell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.8-rc.2",
+  "version": "3.0.8-rc.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",