@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/components/BannerGraphic.vue

@@ -1,6 +1,7 @@
 <script>
 import Closeable from '@shell/mixins/closeable';
 import BrandImage from '@shell/components/BrandImage';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   components: { BrandImage },
@@ -15,22 +16,29 @@ export default {
       type:    String,
       default: null,
     },
-
-    small: {
-      type:    Boolean,
-      default: false
-    }
   },
+
+  data() {
+    const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
+    const banner = brandMeta?.banner || {};
+    const align = banner.textAlign || 'center';
+    const bannerClass = banner.bannerClass || '';
+
+    return { alignClass: `banner-text-${ align }`, bannerClass };
+  }
 };
 </script>
 
 <template>
   <div
     v-if="shown"
-    class="banner-graphic"
-    :class="{'small': small}"
+    class="banner-graphic-area"
+    :class="{[alignClass]: true}"
   >
-    <div class="graphic">
+    <div
+      :class="bannerClass"
+      class="graphic banner-graphic-height"
+    >
       <BrandImage
         class="banner"
         data-testid="banner-brand__img"
@@ -55,17 +63,15 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
-  $banner-height: 240px;
-  $banner-height-small: 200px;
+<style lang="scss" scoped>
+  $banner-height: 200px;
 
-  .banner-graphic {
+  .banner-graphic-area {
     position: relative;
 
     .graphic {
       display: flex;
       flex-direction: column;
-      height: $banner-height;
       overflow: hidden;
       > img.banner {
         flex: 1;
@@ -74,22 +80,31 @@ export default {
     }
     .title {
       display: flex;
-      justify-content: center;
       align-items: center;
       position: absolute;
       text-align: center;
       top: 0;
       height: 100%;
       width: 100%;
-      margin-top: -20px;
     }
-    &.small {
-      .graphic {
-        height: $banner-height-small;
-        img.banner {
-          margin-top: math.div(($banner-height-small - $banner-height), 2);
-        }
+
+    &.banner-text-center {
+      .title {
+        justify-content: center;
+        margin-top: -20px;
+      }
+    }
+
+    &.banner-text-left {
+      .title {
+        justify-content: left;
+        padding-left: 20px;
       }
     }
   }
+
+  // Use top-level style so that a theme style can easily override via its own style without having to worry about specificity of CSS styles
+  .banner-graphic-height {
+    height: var(--banner-graphic-height, $banner-height);
+  }
 </style>

package/components/BrandImage.vue

@@ -36,9 +36,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ theme: 'prefs/theme' }),
+    ...mapGetters({ theme: 'prefs/theme', brand: 'management/brand' }),
 
-    brand() {
+    brandBase() {
       const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BRAND)[0] || {};
 
       return setting.value;
@@ -78,19 +78,30 @@ export default {
       }
     },
 
+    isDark() {
+      return this.theme === 'dark';
+    },
+
     pathToBrandedImage() {
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
-        if (this.theme === 'dark' && this.uiLogoDark) {
+        if (this.isDark && this.uiLogoDark) {
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
           return this.uiLogoLight;
         }
+
+        // csp, rgs, and federal map to SUSE, but have their own custom logos
+        if (this.brandBase !== this.brand) {
+          try {
+            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+          } catch { }
+        }
       }
 
       if (this.fileName === 'banner.svg') {
-        if (this.theme === 'dark' && this.uiBannerDark) {
+        if (this.isDark && this.uiBannerDark) {
           return this.uiBannerDark;
         }
 
@@ -100,7 +111,7 @@ export default {
       }
 
       if (this.fileName === 'login-landscape.svg') {
-        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+        if (this.isDark && this.uiLoginBackgroundDark) {
           return this.uiLoginBackgroundDark;
         }
 
@@ -112,7 +123,7 @@ export default {
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {
-        if (this.theme === 'dark' || this.dark) {
+        if (this.isDark || this.dark) {
           try {
             return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}

package/components/ClusterIconMenu.vue

@@ -119,7 +119,7 @@ export default {
 
 <style lang="scss" scoped>
   .rancher-icon-fill {
-    fill: var(--link, var(--primary));
+    fill: var(--on-tertiary, var(--primary));
   }
 
   .cluster-icon-menu {

package/components/ClusterProviderIcon.vue

@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
   .rancher-icon-fill {
-    fill: var(--link, var(--primary));
+    fill: var(--on-tertiary, var(--primary));
   }
   .cluster-icon {
     align-items: center;

package/components/Cron/CronExpressionEditor.vue

@@ -268,7 +268,7 @@ const handleBlur = (field: CronField) => {
 </template>
 
 <style scoped lang="scss">
-$input-max-width: 110px;
+$input-max-width: 120px;
 
 .cron-row {
   display: flex;

package/components/Cron/CronExpressionEditorModal.vue

@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
 
   .custom-cron-editor {
     margin: 64px auto;
-    max-width: 600px;
+    max-width: 660px;
   }
 
   .cron-info {

package/components/Drawer/Chrome.vue

@@ -1,13 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
-export interface Props {
-  ariaTarget: string;
-}
-</script>
+import { Props } from './types';
 
-<script setup lang="ts">
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
 

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -1,17 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
+import { ConfigProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  component: any;
-  resourceType: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<ConfigProps>();
 const store = useStore();
 const i18n = useI18n(store);
 </script>
@@ -31,6 +25,7 @@ const i18n = useI18n(store);
         :real-mode="_VIEW"
         :initial-value="props.resource"
         :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        :default-tab="props.defaultTab"
         as="config"
       />
     </div>

package/components/Drawer/ResourceDetailDrawer/YamlTab.vue

@@ -1,18 +1,13 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import { useTemplateRef } from 'vue';
 import ResourceYaml from '@shell/components/ResourceYaml.vue';
+import { YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  yaml: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<YamlProps>();
 const store = useStore();
 const i18n = useI18n(store);
 const yamlComponent: any = useTemplateRef('yaml');

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,9 +1,8 @@
-import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
+export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
 
   return {
@@ -12,7 +11,7 @@ export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProp
   };
 }
 
-export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
+export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined {
   const store = useStore();
 
   // You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import Drawer from '@shell/components/Drawer/Chrome.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
@@ -9,17 +9,11 @@ import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.v
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import StateDot from '@shell/components/StateDot/index.vue';
+import { ResourceDetailDrawerProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-
-  onClose?: () => void;
-}
-</script>
-<script setup lang="ts">
 const editBttnDataTestId = 'save-configuration-bttn';
 const componentTestid = 'configuration-drawer-tabbed';
-const props = defineProps<Props>();
+const props = defineProps<ResourceDetailDrawerProps>();
 const emit = defineEmits(['close']);
 const store = useStore();
 const i18n = useI18n(store);
@@ -85,6 +79,7 @@ const canEdit = computed(() => {
         <ConfigTab
           v-if="configTabProps"
           v-bind="configTabProps"
+          :default-tab="props.defaultTab"
         />
         <YamlTab
           v-if="yamlTabProps"

package/components/Drawer/ResourceDetailDrawer/types.ts

@@ -0,0 +1,17 @@
+export interface YamlProps {
+    resource: any;
+    yaml: string;
+}
+
+export interface ConfigProps {
+    resource: any;
+    component: any;
+    resourceType: string;
+    defaultTab?: string;
+}
+
+export interface ResourceDetailDrawerProps {
+    resource: any;
+    defaultTab?: string;
+    onClose?: () => void;
+}

package/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+    ariaTarget: string;
+}

package/components/DynamicContent/DynamicContentBanner.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * Component top render an announcement as a banner
+ */
+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, 'banner');
+
+</script>
+<template>
+  <div
+    v-if="dynamicContent"
+    class="home-page-dynamic-content"
+  >
+    <template v-if="dynamicContent.data">
+      <DynamicContentIcon
+        v-if="dynamicContent.data.icon"
+        :icon="dynamicContent.data.icon"
+        :class="{'mr-10': dynamicContent.data.icon }"
+      />
+    </template>
+    <div class="dc-content">
+      <div class="dc-title">
+        {{ dynamicContent.title }}
+      </div>
+      <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"
+        class="btn btn-sm role-secondary"
+        :aria-label="t('dynamicContent.action.openSecondary')"
+        @click.stop.prevent="invokeAction(dynamicContent.secondaryAction)"
+      >
+        {{ dynamicContent.secondaryAction.label }}
+      </button>
+      <DynamicContentCloseButton
+        :id="dynamicContent.id"
+        class="dc-close-button"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .home-page-dynamic-content {
+    background-color: var(--box-bg);
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+
+    .dc-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .dc-title {
+      font-weight: bold;
+      font-size: 1.1em;
+      margin-bottom: 4px;
+    }
+
+    .dc-message {
+      font-size: 1em;
+    }
+
+    .dc-actions {
+      display: flex;
+      align-items: center;
+      margin: 0 8px;
+      gap: 10px;
+    }
+  }
+</style>

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>