@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.9

package/components/Cron/CronTooltip.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import type { TooltipSection } from './types';
+
+const props = defineProps<{
+  /**
+   * Tooltip content sections.
+   * Each section has a type (e.g., "rules" or "explanation")
+   * and a list of items with optional `value` and i18n `descKey`.
+   */
+  sections: TooltipSection[]
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const processedSections = computed(() => {
+  return props.sections.map((section) => ({
+    ...section,
+    items: section.items.map((item) => ({
+      ...item,
+      text: item.descKey ? t?.(item.descKey) ?? item.descKey : ''
+    }))
+  }));
+});
+</script>
+
+<template>
+  <div class="cron-tooltip-content-wrapper">
+    <ul
+      v-for="section in processedSections"
+      :key="section.type"
+      :class="['cron-tooltip-section', `cron-tooltip-${section.type}`]"
+    >
+      <li
+        v-for="item in section.items"
+        :key="item.value || item.descKey || item.text"
+      >
+        <span class="symbol">{{ item.value || '' }}</span>
+        <span class="desc">{{ item.text }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cron-tooltip-content-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .cron-tooltip-section {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+     &.cron-tooltip-rules {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: 12px;
+
+      li {
+        display: contents;
+        align-items: center;
+      }
+    }
+    &.cron-tooltip-explanation {
+      margin-top: 20px;
+      display: grid;
+      gap: 8px;
+    }
+
+    li {
+      white-space: nowrap;
+
+      .symbol {
+        color: var(--body-text);
+      }
+
+      .desc {
+        color: var(--input-label);
+      }
+    }
+  }
+}
+</style>

package/components/Cron/types.ts

@@ -0,0 +1,13 @@
+export interface TooltipItem {
+  value?: string;
+  descKey?: string;
+}
+
+export interface TooltipSection {
+  type: 'rules' | 'explanation';
+  items: TooltipItem[];
+}
+
+export type CronField = 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek';
+
+export const cronFields: CronField[] = ['minute', 'hour', 'dayOfMonth', 'month', 'dayOfWeek'];

package/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -1,7 +1,6 @@
-import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import * as helpers from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import * as vuex from 'vuex';
-import * as drawer from '@shell/composables/drawer';
 
 jest.mock('@shell/components/Drawer/ResourceDetailDrawer/helpers');
 jest.mock('vuex');
@@ -79,28 +78,4 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(props?.resource).toStrictEqual(resource);
     });
   });
-
-  describe('useResourceDetailDrawer', () => {
-    it('should create a wrapper that passes that appropriate properties to the drawer methods', () => {
-      const openSpy = jest.fn();
-      const closeSpy = jest.fn();
-      const selector = '.selector';
-      const useDrawerSpy = jest.spyOn(drawer, 'useDrawer').mockImplementation(() => ({ open: openSpy, close: closeSpy }));
-      const resourceDetailDrawer = useResourceDetailDrawer();
-
-      resourceDetailDrawer.openResourceDetailDrawer(resource, selector);
-
-      expect(useDrawerSpy).toHaveBeenCalledTimes(1);
-      expect(openSpy).toHaveBeenCalledWith({ name: 'ResourceDetailDrawer' }, selector, {
-        resource,
-        onClose:            closeSpy,
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query']
-      });
-    });
-  });
 });

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,31 +1,8 @@
-import ResourceDetailDrawer from '@shell/components/Drawer/ResourceDetailDrawer/index.vue';
 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 { useDrawer } from '@shell/composables/drawer';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 
-export function useResourceDetailDrawer() {
-  const { open, close } = useDrawer();
-
-  const openResourceDetailDrawer = (resource: any, returnFocusSelector: string) => {
-    open(ResourceDetailDrawer,
-      returnFocusSelector,
-      {
-        resource,
-        onClose:            close,
-        width:              '73%',
-        // We want this to be full viewport height top to bottom
-        height:             '100vh',
-        top:                '0',
-        'z-index':          101, // We want this to be above the main side menu
-        closeOnRouteChange: ['name', 'params', 'query'] // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
-      });
-  };
-
-  return { openResourceDetailDrawer };
-}
-
 export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
   const yaml = await getYaml(resource);
 

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -17,6 +17,8 @@ export interface Props {
 }
 </script>
 <script setup lang="ts">
+const editBttnDataTestId = 'save-configuration-bttn';
+const componentTestid = 'configuration-drawer-tabbed';
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
 const store = useStore();
@@ -38,11 +40,14 @@ const title = computed(() => {
 
 const activeTab = ref<string>(configTabProps ? 'config-tab' : 'yaml-tab');
 
+const isConfig = computed(() => {
+  return activeTab.value === 'config-tab';
+});
+
 const action = computed(() => {
-  const isConfig = activeTab.value === 'config-tab';
-  const ariaLabel = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
-  const label = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
-  const action = isConfig ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
+  const ariaLabel = isConfig.value ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const label = isConfig.value ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const action = isConfig.value ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
 
   return {
     ariaLabel,
@@ -50,6 +55,11 @@ const action = computed(() => {
     action
   };
 });
+
+const canEdit = computed(() => {
+  return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
+});
+
 </script>
 <template>
   <Drawer
@@ -69,6 +79,7 @@ const action = computed(() => {
         class="tabbed"
         :useHash="false"
         :showExtensionTabs="false"
+        :componentTestid="componentTestid"
         @changed="({selectedName}) => {activeTab = selectedName;}"
       >
         <ConfigTab
@@ -83,8 +94,10 @@ const action = computed(() => {
     </template>
     <template #additional-actions>
       <RcButton
+        v-if="canEdit"
         :primary="true"
         :aria-label="action.ariaLabel"
+        :data-testid="editBttnDataTestId"
         @click="action.action"
       >
         {{ action.label }}

package/components/ForceDirectedTreeChart/composable.ts

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+import { graphConfig } from '@shell/pages/c/_cluster/fleet/graph/config';
+
+export const useDefaultForceDirectTreeChartProps = (resource: any) => {
+  return computed(() => {
+    return {
+      data:      resource,
+      fdcConfig: graphConfig
+    };
+  });
+};