@rancher/shell 3.0.7 → 3.0.8-rc.10

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/EmberPage.vue

@@ -8,7 +8,7 @@ import { findEmberPage, clearEmberInactiveTimer, startEmberInactiveTimer, EMBER_
 
 const EMBER_FRAME_HIDE_CLASS = 'ember-iframe-hidden';
 const PAGE_CHECK_TIMEOUT = 30000;
-const WINDOW_MANAGER = 'windowmanager';
+const WINDOW_MANAGER = 'horizontal-window-manager';
 
 // Pages that we should intercept when loaded in the IFRAME and instead
 // navigate to a page in Cluster Dashboard

package/components/IconOrSvg.vue

@@ -32,9 +32,9 @@ const colors = {
     activeFallback: '--header-btn-text-hover',
   },
   primary: {
-    color:          '--link',
+    color:          '--on-tertiary',
     hover:          '--link',
-    colorFallback:  '--link',
+    colorFallback:  '--on-tertiary',
     hoverFallback:  '--primary-hover-text',
     active:         '--on-active',
     activeFallback: '--primary-hover-text',