@rancher/shell 3.0.8-rc.6 → 3.0.8-rc.8

package/components/DynamicContent/DynamicContentCloseButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Common close button for dynamic component banners and panels
+ */
+
+import { useStore } from 'vuex';
+import { RcButton } from '@components/RcButton';
+
+const props = defineProps<{id: string}>();
+const store = useStore();
+
+/*
+ * Marks the notification as read when the close button is clicked
+ */
+const markRead = () => {
+  store.dispatch('notifications/markRead', props.id);
+};
+</script>
+<template>
+  <RcButton
+    ghost
+    small
+    :aria-label="t('dynamicContent.action.close')"
+    tabindex="0"
+    @click="markRead()"
+  >
+    <i class="dc-close-button icon icon-close" />
+  </RcButton>
+</template>
+<style lang="scss" scoped>
+  .dc-close-button {
+    opacity: 0.5;
+    cursor: pointer;
+    border: 1px solid transparent;
+    padding: 4px;
+    border-radius: 4px;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+</style>

package/components/DynamicContent/DynamicContentIcon.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * Icon component to render an icon from the icon data in an announcement
+ */
+
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+import { AnnouncementNotificationIconData } from '@shell/utils/dynamic-content/types';
+
+type KeyValues = {
+  [key: string]: string;
+};
+
+const ICON_FORMAT = /(@|#|>)/;
+
+const props = defineProps<{icon: AnnouncementNotificationIconData}>();
+const store = useStore();
+const theme = computed(() => store.getters['prefs/theme']);
+
+/**
+ * Get the correct url to use for light/dark mode
+ */
+const url = computed(() => {
+  const darkTheme = theme.value === 'dark';
+
+  return darkTheme ? props.icon?.dark || props.icon?.light : props.icon?.light;
+});
+
+const iconName = computed(() => {
+  const decodedIcon = url.value.split(ICON_FORMAT);
+
+  if (decodedIcon[0].startsWith('!')) {
+    return `icon-${ decodedIcon[0].substring(1) }`;
+  }
+
+  return undefined;
+});
+
+/**
+ * Get the src value for an image tag
+ */
+const src = computed(() => {
+  const decodedIcon = url.value.split(ICON_FORMAT);
+
+  // If the icon name starts with ~, then it references a built-in icon/image
+  if (decodedIcon[0].startsWith('~')) {
+    const img = decodedIcon[0].substring(1);
+    const themePrefix = theme.value === 'dark' ? 'dark/' : '';
+
+    try {
+      return require(`~shell/assets/images/content/${ themePrefix }${ img }`);
+    } catch {
+      return require(`~shell/assets/images/content/${ img }`);
+    }
+  }
+
+  // Regular URL, use it directly
+  return decodedIcon[0];
+});
+
+/**
+ * Icon value can include some custom style information:
+ *
+ * '@wxh' (or @w) To change the width/height
+ * '>x' to set the padding to x px
+ * '<x' to set the margin to x px
+ * '#rrggbb' to set the color
+ *
+ */
+const style = computed(() => {
+  const decodedIcon = props.icon.light.split(ICON_FORMAT).slice(1);
+  const OPTIONS: { [key: string]: (v: string, result: KeyValues) => void } = {
+    '@': (v: string, result: KeyValues) => {
+      const wh = v.split('x');
+
+      result.width = `${ wh[0] }px`;
+      result.height = (wh.length === 2) ? `${ wh[1] }px` : `${ wh[0] }px`;
+      result.fontSize = result.width;
+    },
+    '#': (v: string, result: KeyValues) => {
+      result.color = `#${ v }`;
+    },
+    '>': (v: string, result: KeyValues) => {
+      result.padding = `${ v }px`;
+    },
+    '<': (v: string, result: KeyValues) => {
+      result.margin = `${ v }px`;
+    }
+  };
+
+  const pairs = Math.floor(decodedIcon.length / 2);
+  const result = {};
+
+  for (let i = 0; i < pairs; i++) {
+    const index = 2 * i;
+
+    if (OPTIONS[decodedIcon[index]]) {
+      const handler = OPTIONS[decodedIcon[index]];
+      const value = decodedIcon[index + 1];
+
+      if (handler) {
+        handler(value, result);
+      }
+    }
+  }
+
+  return result;
+});
+
+</script>
+<template>
+  <i
+    v-if="iconName"
+    class="icon"
+    :style="style"
+    :class="iconName"
+  />
+  <img
+    v-else
+    :style="style"
+    :src="src"
+    class="dc-icon"
+  >
+</template>
+
+<style lang="scss" scoped>
+  .dc-icon {
+    width: 48px;
+    height: 48px;
+  }
+</style>

package/components/DynamicContent/DynamicContentPanel.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+/**
+ * Component top render an announcement as a side panel
+ */
+import DynamicContentIcon from './DynamicContentIcon.vue';
+import DynamicContentCloseButton from './DynamicContentCloseButton.vue';
+import Markdown from '@shell/components/Markdown.vue';
+import { useDynamicContent, DynamicInputProps } from './content';
+
+const props = defineProps<DynamicInputProps>();
+const {
+  dynamicContent,
+  invokeAction,
+  primaryButtonStyle,
+} = useDynamicContent(props, 'rhs');
+
+</script>
+<template>
+  <div
+    v-if="dynamicContent"
+    :compact="true"
+    :can-close="true"
+    class="dc-side-panel mt-10"
+  >
+    <div class="dc-title-block">
+      <DynamicContentIcon
+        v-if="dynamicContent.data.icon"
+        :icon="dynamicContent.data.icon"
+        :class="{'mr-10': dynamicContent.data.icon }"
+      />
+      <div class="dc-title">
+        {{ dynamicContent.title }}
+      </div>
+      <DynamicContentCloseButton
+        :id="dynamicContent.id"
+        class="dc-close-button"
+      />
+    </div>
+    <div class="dc-content">
+      <div class="dc-message">
+        <Markdown
+          v-if="dynamicContent.message"
+          v-model:value="dynamicContent.message"
+        />
+      </div>
+    </div>
+    <div class="dc-actions">
+      <button
+        v-if="dynamicContent.primaryAction"
+        role="button"
+        class="btn btn-sm"
+        :aria-label="t('dynamicContent.action.openPrimary')"
+        :class="primaryButtonStyle"
+        @click.stop.prevent="invokeAction(dynamicContent.primaryAction)"
+      >
+        {{ dynamicContent.primaryAction.label }}
+      </button>
+      <button
+        v-if="dynamicContent.secondaryAction"
+        role="button"
+        :aria-label="t('dynamicContent.action.openSecondary')"
+        class="btn btn-sm role-secondary"
+        @click.stop.prevent="invokeAction(dynamicContent.secondaryAction)"
+      >
+        {{ dynamicContent.secondaryAction.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$dc-padding: 8px;
+
+.dc-side-panel {
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+
+  .dc-title-block {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    border-bottom: 1px solid var(--border);
+    padding: 0 $dc-padding;
+
+    .dc-title {
+      flex: 1;
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+
+  .dc-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: $dc-padding;
+
+    .dc-message {
+      font-size: 1em;
+      line-height: 1.3em;
+    }
+  }
+
+  .dc-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: $dc-padding;
+    gap: 10px;
+  }
+}
+</style>

package/components/DynamicContent/content.ts

@@ -0,0 +1,78 @@
+/**
+ * Composable to provide access to an announcement
+ */
+
+import { computed, ComputedRef } from 'vue';
+import { useStore } from 'vuex';
+import { Notification, StoredNotification, NotificationAction } from '@shell/types/notifications';
+import { useRouter } from 'vue-router';
+
+export type Styles = { [key: string]: string };
+
+export interface UseDynamicInput {
+  dynamicContent: ComputedRef<Notification | undefined>;
+  primaryButtonStyle: ComputedRef<string>;
+  styles: ComputedRef<Styles>;
+  invokeAction: (action: NotificationAction) => void;
+}
+
+export interface DynamicInputProps {
+  location?: string;
+}
+
+export const useDynamicContent = (props: DynamicInputProps, defaultLocation: string): UseDynamicInput => {
+  const store = useStore();
+  const router = useRouter();
+
+  // Return the first un-read hidden notification for the given location
+  const dynamicContent = computed(() => {
+    const location = props.location || defaultLocation;
+    const hiddenUnreadNotificationsForLocation: Notification[] = store.getters['notifications/hidden'].filter((n: StoredNotification) => !n.read && n.data?.location === location);
+
+    return hiddenUnreadNotificationsForLocation.length > 0 ? hiddenUnreadNotificationsForLocation[0] : undefined;
+  });
+
+  const styles = computed(() => {
+    const parts = dynamicContent?.value?.data?.style?.trim().split(',') || [];
+    const res: Styles = {};
+
+    parts.forEach((part: string) => {
+      const kv = part.split(':');
+
+      if (kv.length === 2) {
+        res[kv[0].trim()] = kv[1].trim();
+      }
+    });
+
+    return res;
+  });
+
+  const primaryButtonStyle = computed(() => {
+    const buttonStyle = styles.value.btn === 'link' ? 'tertiary' : styles.value.btn || 'primary';
+
+    return `role-${ buttonStyle }`;
+  });
+
+  // Invoke action (typically from either the primary or secondary buttons of a notification)
+  // This can open a URL in a new tab OR navigate to an application route
+  const invokeAction = (action: NotificationAction) => {
+    if (action.target) {
+      window.open(action.target, '_blank');
+    } else if (action.route) {
+      try {
+        router.push(action.route);
+      } catch (e) {
+        console.error('Error navigating to route for the notification action', e); // eslint-disable-line no-console
+      }
+    } else {
+      console.error('Notification action must either specify a "target" or a "route"'); // eslint-disable-line no-console
+    }
+  };
+
+  return {
+    dynamicContent,
+    invokeAction,
+    primaryButtonStyle,
+    styles
+  };
+};

package/components/PaginatedResourceTable.vue

@@ -116,15 +116,11 @@ export default defineComponent({
   },
 
   async fetch() {
-    const promises = [
-      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
-    ];
-
     if (this.fetchSecondaryResources) {
-      promises.push(this.fetchSecondaryResources({ canPaginate: this.canPaginate }));
+      await this.fetchSecondaryResources({ canPaginate: this.canPaginate });
     }
 
-    await Promise.all(promises);
+    await this.$fetchType(this.resource, [], this.overrideInStore || this.inStore);
   },
 
   computed: {

package/components/Resource/Detail/CopyToClipboard.vue

@@ -52,6 +52,9 @@ const onClick = (ev: MouseEvent) => {
     border-radius: 50%;
     justify-content: center;
     align-items: center;
+    padding: 0;
+    line-height: initial;
+    min-height: initial;
 
     border: 1px solid var(--primary);
     color: var(--primary);

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

@@ -81,7 +81,7 @@ const previewId = randomStr();
     position: fixed;
 
     right: -20px;
-    top: -9px;
+    top: -6px;
     z-index: 20px;
   }
 

package/components/Resource/Detail/Metadata/composables.ts

@@ -6,18 +6,19 @@ import { computed, toValue, Ref } from 'vue';
 import {
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 
 export const useBasicMetadata = (resource: any) => {
   const labels = useDefaultLabels(resource);
   const annotations = useDefaultAnnotations(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
-      resource:            toValue(resource),
-      labels:              labels.value,
-      annotations:         annotations.value,
-      onShowConfiguration: () => resourceValue.showConfiguration()
+      resource:    toValue(resource),
+      labels:      labels.value,
+      annotations: annotations.value,
+      onShowConfiguration
     };
   });
 };
@@ -28,7 +29,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
   const basicMetaData = useBasicMetadata(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
@@ -36,7 +37,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration
     };
   });
 };
@@ -47,7 +48,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const workspace = useWorkspace(resource);
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
-  const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
     const defaultInfo = [
@@ -71,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration:    basicMetaData.value.onShowConfiguration
     };
   });
 };

package/components/Resource/Detail/TitleBar/composables.ts

@@ -1,3 +1,4 @@
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { computed, Ref, toValue } from 'vue';
 import { useRoute } from 'vue-router';
@@ -23,7 +24,7 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         resource:  resourceValue.type
       }
     };
-    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : useOnShowConfiguration(resource);
 
     return {
       resource:           resourceValue,

package/components/Resource/Detail/composables.ts

@@ -2,6 +2,7 @@ import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
 import { Props as BannerProps } from '@components/Banner/Banner.vue';
 import { useI18n } from '@shell/composables/useI18n';
+import ResourceClass from '@shell/plugins/dashboard-store/resource-class';
 
 export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
   const store = useStore();
@@ -43,3 +44,14 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
     return undefined;
   });
 };
+
+export const useOnShowConfiguration = (resource: any) => {
+  return (returnFocusSelector?: string) => {
+    const resourceValue = toValue(resource);
+    // Because extensions can make a copy of the resource-class it's possible that an extension will have a resource-class which predates the inclusion of showConfiguration
+    // to still the rest of shell to consume
+    const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
+
+    showConfiguration(returnFocusSelector);
+  };
+};

package/components/nav/Header.vue

@@ -97,7 +97,6 @@ export default {
       'isSingleProduct',
       'isRancherInHarvester',
       'showTopLevelMenu',
-      'isMultiCluster',
       'showWorkspaceSwitcher'
     ]),
 
@@ -424,7 +423,7 @@ export default {
     data-testid="header"
   >
     <div>
-      <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
+      <TopLevelMenu v-if="showTopLevelMenu" />
     </div>
 
     <div
@@ -495,7 +494,7 @@ export default {
             :alt="t('branding.logos.label')"
           />
           <div
-            v-if="!currentCluster"
+            v-if="!currentCluster && !$route.path.startsWith('/c/')"
             class="simple-title"
           >
             <BrandImage

package/components/nav/NamespaceFilter.vue

@@ -673,9 +673,16 @@ export default {
     },
 
     removeOption(ns, event) {
-      this.selectOption(ns);
       event.preventDefault();
       event.stopPropagation();
+
+      this.selectOption(ns);
+
+      if (event.type !== 'keydown' || this.value.length !== 0) {
+        return;
+      }
+
+      this.$refs.namespaceFilterInput.focus();
     },
 
     defaultOption() {
@@ -782,6 +789,7 @@ export default {
             ghost
             class="ns-chip-button"
             :data-testid="`namespaces-values-close-${j}`"
+            :aria-label="t('namespaceFilter.removeNamespace', { name: ns.label })"
             @click="removeOption(ns, $event)"
             @keydown.enter.space.stop="removeOption(ns, $event)"
             @mousedown="handleValueMouseDown(ns, $event)"
@@ -951,6 +959,10 @@ export default {
     display: inline-block;
     border-radius: var(--border-radius);
 
+    &:focus, &.focused {
+      @include focus-outline;
+    }
+
     .ns-glass {
       top: 0;
       bottom: 0;

package/components/nav/NotificationCenter/index.vue

@@ -13,7 +13,8 @@ import {
 } from '@components/RcDropdown';
 
 const store = useStore();
-const allNotifications = computed(() => store.getters['notifications/all']);
+// We don't want any hidden notifications showing in the notification center (these are shown elsewhere, e.g. home page dynamic content announcements)
+const allNotifications = computed(() => store.getters['notifications/visible']);
 const unreadLevelClass = computed(() => {
   return store.getters['notifications/unreadCount'] === 0 ? '' : 'unread';
 });

package/components/nav/TopLevelMenu.helper.ts

@@ -28,6 +28,7 @@ interface UpdateArgs {
   searchTerm: string,
   pinnedIds: string[],
   unPinnedMax?: number,
+  forceWatch?: boolean
 }
 
 type MgmtCluster = {
@@ -192,9 +193,12 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-unpinned-clusters',
-      onChange: async() => {
+      onChange: async({ forceWatch }) => {
         if (this.args) {
-          await this.update(this.args);
+          await this.update({
+            ...this.args,
+            forceWatch
+          });
         }
       },
       enabledFor: {
@@ -210,9 +214,12 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.provClusterWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-prov-clusters',
-      onChange: async() => {
+      onChange: async({ forceWatch }) => {
         if (this.args) {
-          await this.update(this.args);
+          await this.update({
+            ...this.args,
+            forceWatch
+          });
         }
       },
       enabledFor: {
@@ -244,7 +251,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       pinned: MgmtCluster[],
       notPinned: MgmtCluster[]
     } = await allHash(promises) as any;
-    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned);
+    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args.forceWatch || false);
     const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => {
       if (provCluster.mgmtClusterId) {
         res[provCluster.mgmtClusterId] = provCluster;
@@ -340,6 +347,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     }
 
     return this.clustersPinnedWrapper.request({
+      forceWatch: args.forceWatch,
       pagination: {
         filters: this.constructParams({
           pinnedIds:     args.pinnedIds,
@@ -357,6 +365,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
    */
   private async updateOthers(args: UpdateArgs): Promise<MgmtCluster[]> {
     return this.clustersOthersWrapper.request({
+      forceWatch: args.forceWatch,
       pagination: {
         filters: this.constructParams({
           searchTerm:        args.searchTerm,
@@ -375,8 +384,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   /**
    * Find all provisioning clusters associated with the displayed mgmt clusters
    */
-  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[]): Promise<ProvCluster[]> {
+  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], forceWatch: boolean): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
+      forceWatch,
       pagination: {
         filters: [
           PaginationParamFilter.createMultipleFields(