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

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',

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

@@ -0,0 +1,192 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import { ref, watch } from 'vue';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
+import RcButton from '@components/RcButton/RcButton.vue';
+
+export interface Props {
+  cardTitle: string;
+  fallbackFocus?: string;
+  showPopoverAriaLabel?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<Props>(), { fallbackFocus: 'body', showPopoverAriaLabel: 'Show more' });
+const card = ref<any>(null);
+const popoverContainer = ref(null);
+const showPopover = ref<boolean>(false);
+const focusOpen = ref<boolean>(false);
+
+// Set focus trap when card opened using keyboard
+watch(
+  () => card.value,
+  (neu) => {
+    if (neu && focusOpen.value) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        fallbackFocus:  props.fallbackFocus,
+        setReturnFocus: () => '.focus-button'
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => showPopover.value, '#popover-card', opts);
+    }
+  }
+);
+</script>
+
+<template>
+  <div
+    class="popover-card-base"
+    :class="{open: showPopover}"
+    @mouseleave="showPopover=false; focusOpen=false"
+    @keydown.escape="showPopover=false; focusOpen=false"
+  >
+    <v-dropdown
+      :triggers="[]"
+      :container="popoverContainer"
+      :shown="showPopover"
+      placement="bottom-start"
+    >
+      <div
+        class="popover-card-target"
+        @mouseenter="showPopover=true"
+      >
+        <slot name="default" />
+        <RcButton
+          ghost
+          class="focus-button"
+          :aria-label="props.showPopoverAriaLabel"
+          aria-haspopup="true"
+          :aria-expanded="showPopover"
+          @click="showPopover=true; focusOpen=true;"
+        >
+          <i class="icon icon-chevron-down icon-sm" />
+        </RcButton>
+        <div
+          ref="popoverContainer"
+          class="popover-card-container"
+        >
+          <!--Empty container for mounting popper content-->
+        </div>
+      </div>
+
+      <template
+        #popper
+      >
+        <slot name="card">
+          <Card
+            id="popover-card"
+            ref="card"
+            class="popover-card"
+            :title="props.cardTitle"
+          >
+            <template #heading-action>
+              <slot
+                name="heading-action"
+                :close="() => {showPopover=false; focusOpen=false;}"
+              />
+            </template>
+            <slot name="card-body" />
+          </Card>
+        </slot>
+      </template>
+    </v-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.popover-card-base {
+  position: relative;
+  width: 100%;
+
+  .popover-card {
+    border: none;
+  }
+
+  .display-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .display {
+    display: inline-flex;
+    max-width: 100%;
+    a {
+      flex: 1;
+    }
+  }
+
+  .popover-card-target {
+    height: 17px;
+    display: inline-block;
+  }
+
+  .focus-button {
+    margin-left: 4px;
+    margin-right: 2px;
+    padding: 0;
+    width: 0px;
+    height: initial;
+    min-height: initial;
+    overflow: hidden;
+    border-width: 0;
+
+    &:focus {
+      width: initial;
+      border-width: 1px;
+    }
+  }
+
+  .popover-card-base {
+    border: none;
+  }
+
+  .popover-card-container {
+    position: absolute;
+    $size: 10px;
+    height: $size;
+    bottom: -$size;
+  }
+
+  &.open .popover-card-container {
+    width: 100%;
+  }
+
+  &:deep() {
+    & > .v-popper > .btn.role-link {
+      padding: 0;
+      min-height: initial;
+      line-height: initial;
+
+      &:hover {
+        background: none;
+      }
+    }
+
+    .popover-card-container > .v-popper__popper {
+      border-radius: 6px;
+      box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.04);
+
+      & > .v-popper__wrapper {
+        .v-popper__arrow-container {
+          display: none;
+        }
+
+        & > .v-popper__inner {
+          overflow: initial;
+          &, & > div > .dropdownTarget {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/Questions/__tests__/index.test.ts

@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import Questions from '@shell/components/Questions/index.vue';
+
+const mockT = jest.fn((key) => key);
+const mockWithFallback = jest.fn((key, args, fallback) => fallback || key);
+
+const defaultMocks = {
+  $fetchState: { pending: false },
+  $store:      {
+    getters: {
+      'i18n/t':            mockT,
+      'i18n/withFallback': mockWithFallback
+    }
+  }
+};
+
+const defaultProps = {
+  source:          { questions: { questions: [] } },
+  value:           {},
+  targetNamespace: 'default',
+  mode:            'edit',
+};
+
+describe('component: Questions', () => {
+  describe('computed: groups', () => {
+    it('should group questions with the same group into a single group', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Group 1');
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should place questions without a group into a default group', () => {
+      const questions = [
+        { variable: 'q1' },
+        { variable: 'q2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Questions'); // Default group name
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should create multiple groups for questions with different groups', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2);
+    });
+
+    it('should correctly group a mix of grouped and ungrouped questions', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2' },
+        { variable: 'q3', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2); // 'Group 1' and 'Questions'
+      const group1 = groups.find((g: any) => g.name === 'Group 1');
+      const defaultGroup = groups.find((g: any) => g.name === 'Questions');
+
+      expect(group1.questions).toHaveLength(2);
+      expect(defaultGroup.questions).toHaveLength(1);
+    });
+  });
+
+  describe('computed: asTabs', () => {
+    it('should be true by default', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  defaultProps,
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be true when tabbed is true', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: true },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be false when tabbed is false', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: false },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    it('should be false when tabbed is "never"', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: 'never' },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    describe('when tabbed is "multiple"', () => {
+      it('should be true if there are groups', () => {
+        const questions = [{ variable: 'q1', group: 'Group 1' }];
+        const wrapper = shallowMount(Questions, {
+          props: {
+            ...defaultProps, source: { questions: { questions } }, tabbed: 'multiple'
+          },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(1);
+        expect(wrapper.vm.asTabs).toBe(true);
+      });
+
+      it('should be false if there are no groups', () => {
+        const wrapper = shallowMount(Questions, {
+          props:  { ...defaultProps, tabbed: 'multiple' },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(0);
+        expect(wrapper.vm.asTabs).toBe(false);
+      });
+    });
+  });
+});

package/components/Resource/Detail/CopyToClipboard.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-    value: string;
+  value: string;
 }
 
 const props = defineProps<Props>();
@@ -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/FetchLoader/composables.ts

@@ -1,7 +1,8 @@
 import { computed, ref, toValue } from 'vue';
 
-export const useFetch = <T>(fetch: () => Promise<T> ) => {
+export const useFetch = <T>(fetch: () => Promise<T>) => {
   const loading = ref<boolean>(true);
+  const refreshing = ref<boolean>(false);
   const data = ref<T>();
   const error = ref<any>();
 
@@ -12,16 +13,29 @@ export const useFetch = <T>(fetch: () => Promise<T> ) => {
       data.value = toValue(await fetch());
     } catch (ex) {
       error.value = ex;
+      console.error('Error fetching data', ex); // eslint-disable-line no-console
     } finally {
       loading.value = false;
     }
   };
 
+  const refresh = async() => {
+    if (loading.value) {
+      return;
+    }
+
+    refreshing.value = true;
+    await load();
+    refreshing.value = false;
+  };
+
   load();
 
   return computed(() => ({
-    loading: loading.value,
-    data:    data.value,
-    error:   error.value
+    loading:    loading.value,
+    data:       data.value,
+    error:      error.value,
+    refresh,
+    refreshing: refreshing.value
   }));
 };

package/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -8,7 +8,7 @@ export type Annotation = Row;
 export interface AnnotationsProps {
   annotations: Annotation[];
 
-  onShowConfiguration?: (returnFocusSelector: string) => void;
+  onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -26,6 +26,6 @@ const i18n = useI18n(store);
     :rows="annotations"
     type="active"
 
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -6,7 +6,7 @@ import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 
 const mockStore = {
   getters: {
-    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn()
+    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn(), currentCluster: 'CLUSTER_ID'
   }
 };
 const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -139,6 +139,10 @@ export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]
   }
 
   const extractValueOverride = (detail: any) => {
+    if (detail.valueOverride) {
+      return detail.valueOverride;
+    }
+
     if (!detail.formatter) {
       return;
     }

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;
   }