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

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/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/nav/Header.vue

@@ -495,7 +495,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/templates/plain.vue

@@ -15,6 +15,8 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
+import WindowManager from '@shell/components/nav/WindowManager';
+import { Layout } from '@shell/types/window-manager';
 
 export default {
 
@@ -30,7 +32,8 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
-    Inactivity
+    Inactivity,
+    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -40,6 +43,7 @@ export default {
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
       noLocaleShortcut: process.env.dev || false,
+      layout:           Layout.plain,
     };
   },
 
@@ -97,6 +101,7 @@ export default {
           @shortkey="toggleNoneLocale()"
         />
       </main>
+      <WindowManager :layout="layout" />
     </div>
 
     <FixedBanner :footer="true" />
@@ -117,10 +122,10 @@ export default {
     flex-grow: 1;
 
     grid-template-areas:
-      "header"
-      "main";
+      "header header header"
+      "wm-vl  main   wm-vr";
 
-    grid-template-columns: auto;
+    grid-template-columns: var(--wm-vl-width, 0px) auto var(--wm-vr-width, 0px);
     grid-template-rows:    var(--header-height) auto;
 
     > HEADER {
@@ -128,6 +133,27 @@ export default {
     }
   }
 
+  .wm {
+    grid-area: wm;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
+  .wm-vr {
+    grid-area: wm-vr;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
+  .wm-vl {
+    grid-area: wm-vl;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
   MAIN {
     grid-area: main;
     overflow: auto;

package/core/plugin-helpers.ts

@@ -195,6 +195,8 @@ export function getApplicableExtensionEnhancements<T>(
                 if (i < keyboardCombo.length - 1) {
                   if (key === 'meta') {
                     key = '\u2318';
+                  } else if (isMac && key === 'alt') {
+                    key = '⌥';
                   } else {
                     key = ucFirst(key);
                   }

package/edit/auth/__tests__/oidc.test.ts

@@ -221,5 +221,31 @@ describe('oidc.vue', () => {
       expect(issuer).toBe('');
       expect(endpoint).toBe('');
     });
+
+    it('custom claims fields should not appear in UI if Amazon cognito', async() => {
+      wrapper.vm.model.id = 'cognito';
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(false);
+      expect(groupsClaim.exists()).toBe(false);
+      expect(emailClaim.exists()).toBe(false);
+    });
+
+    it('custom claims fields should appear in UI if genericoidc', async() => {
+      wrapper.vm.model.id = 'genericoidc';
+      wrapper.vm.addCustomClaims = true;
+      await nextTick();
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(true);
+      expect(groupsClaim.exists()).toBe(true);
+      expect(emailClaim.exists()).toBe(true);
+    });
   });
 });

package/edit/auth/oidc.vue

@@ -442,12 +442,14 @@ export default {
           </div>
         </template>
 
-        <template v-if="addCustomClaims">
+        <!-- Custom Claims -->
+        <template v-if="addCustomClaims && isGenericOidc">
           <h4>{{ t('authConfig.oidc.customClaims.label') }}</h4>
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.nameClaim"
+                data-testid="input-name-claim"
                 :label="t(`authConfig.oidc.customClaims.nameClaim.label`)"
                 :mode="mode"
               />
@@ -455,6 +457,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.groupsClaim"
+                data-testid="input-groups-claim"
                 :label="t(`authConfig.oidc.customClaims.groupsClaim.label`)"
                 :mode="mode"
               />
@@ -464,6 +467,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.emailClaim"
+                data-testid="input-email-claim"
                 :label="t(`authConfig.oidc.customClaims.emailClaim.label`)"
                 :mode="mode"
               />

package/edit/provisioning.cattle.io.cluster/__tests__/Networking.test.ts

@@ -47,7 +47,7 @@ describe('component: RKE2Networking', () => {
     expect(dropdown.props('options')).toHaveLength(3);
   });
 
-  it('should show an error when an ipv6 pool is present and the user selects the ipv4-only stack preference', async() => {
+  it('should show an error when an ipv6 pool is present and the user selects the ipv4-only stack preference when creating a new cluster', async() => {
     const spec = { ...defaultSpec, rkeConfig: { ...defaultSpec.rkeConfig, networking: { stackPreference: 'ipv4' } } };
     const wrapper = mount(Networking, {
       propsData: {
@@ -129,4 +129,27 @@ describe('component: RKE2Networking', () => {
 
     expect(banner.exists()).toBe(false);
   });
+
+  it('should not automatically update stack preference or validate it when editing an existing cluster even if its set to ipv4 and the user appears to have ipv6 pools', async() => {
+    const spec = { ...defaultSpec, rkeConfig: { ...defaultSpec.rkeConfig, networking: { stackPreference: 'ipv4' } } };
+    const wrapper = mount(Networking, {
+      propsData: {
+        mode:             'edit',
+        value:            { spec },
+        selectedVersion:  { serverArgs: mockServerArgs },
+        hasSomeIpv6Pools: true,
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          $store: { getters: defaultGetters },
+        },
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('validationChanged')?.[0]?.[0]).toBe(true);
+    expect(wrapper.emitted('stack-preference-changed')).toBeUndefined();
+  });
 });

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -163,9 +163,8 @@ export default {
     };
 
     this.extensions = this.$extension.getProviders(context);
-  },
 
-  data() {
+    // At this point, we know we definitely have the mgmt cluster, so we can access `isImported` and `isLocal`
     let subType = null;
 
     subType = this.$route.query[SUB_TYPE] || null;
@@ -176,6 +175,11 @@ export default {
     } else if (this.value.isLocal) {
       subType = LOCAL;
     }
+
+    this.subType = subType;
+  },
+
+  data() {
     const rkeType = this.$route.query[RKE_TYPE] || null;
     const chart = this.$route.query[CHART] || null;
     const isImport = this.realMode === _IMPORT;
@@ -184,7 +188,7 @@ export default {
       nodeDrivers:      [],
       kontainerDrivers: [],
       extensions:       [],
-      subType,
+      subType:          null,
       rkeType,
       chart,
       isImport,

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -990,15 +990,16 @@ export default {
     },
 
     hasSomeIpv6Pools(neu) {
-      const stackPreference = this.localValue.spec.rkeConfig.networking.stackPreference;
+      if (this.isCreate && this.localValue.spec.rkeConfig.networking.stackPreference !== STACK_PREFS.IPV6) { // if stack pref is ipv6, the user has manually configured that and we shouldn't change it
+        if (neu) {
+          this.localValue.spec.rkeConfig.networking.stackPreference = STACK_PREFS.DUAL;
+
+          return;
+        }
 
-      if (neu && (stackPreference === STACK_PREFS.IPV4 || !stackPreference)) { // localValue.spec.rkeConfig.networking is initialized in the beforeCreate hook
-        this.localValue.spec.rkeConfig.networking.stackPreference = STACK_PREFS.DUAL;
-      } else if (stackPreference === STACK_PREFS.DUAL) {
         this.localValue.spec.rkeConfig.networking.stackPreference = STACK_PREFS.IPV4;
       }
     },
-
   },
 
   created() {
@@ -2256,6 +2257,7 @@ export default {
     handleTabChange(data) {
       this.activeTab = data;
     },
+
   }
 };
 </script>

package/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue

@@ -2,7 +2,7 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { _EDIT, _VIEW, _CREATE } from '@shell/config/query-params';
 import ArrayList from '@shell/components/form/ArrayList';
 import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -128,11 +128,12 @@ export default {
   methods: {
     // if ipv6 pools are detected, we enforce dual-stack or ipv6 stack prefs.
     // If ipv6 pools are not detected we don't know for sure they aren't there so we don't validate the input
+    // also not validating the input when editing existing clusters to ensure we don't prevent editing clusters using dual-stack VPCs provisioned before the ipv6 feature was added
     stackPreferenceValidator(val) {
       const value = val?.value || val;
       let isValid;
 
-      if (this.hasSomeIpv6Pools) {
+      if (this.hasSomeIpv6Pools && this.mode === _CREATE) {
         isValid = value !== STACK_PREFS.IPV4;
 
         return isValid ? null : this.t('cluster.rke2.stackPreference.errorNeedsIpv6');