@rancher/shell 3.0.5-rc.8 → 3.0.5

package/components/Cron/CronExpressionEditor.vue

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import {
+  reactive, computed, watch, ref, nextTick
+} from 'vue';
+import { useStore } from 'vuex';
+import { isValidCron } from 'cron-validator';
+import cronstrue from 'cronstrue';
+import { createPopper, Instance as PopperInstance } from '@popperjs/core';
+import { useI18n } from '@shell/composables/useI18n';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import CronTooltip from './CronTooltip.vue';
+import type { TooltipSection, CronField } from './types';
+import { cronFields } from './types';
+
+const props = defineProps<{
+  /**
+   * Initial cron expression string.
+   */
+  cronExpression?: string;
+}>();
+
+// eslint-disable-next-line
+const emit = defineEmits<{
+  (e: 'update:isValid', value: boolean): void;
+  (e: 'update:readableCron', value: string): void;
+  (e: 'update:cronExpression', value: string): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+const fields: CronField[] = cronFields;
+
+const fieldLabels: Record<CronField, string> = {
+  minute:     'component.cron.expressionEditor.label.minute',
+  hour:       'component.cron.expressionEditor.label.hour',
+  dayOfMonth: 'component.cron.expressionEditor.label.dayOfMonth',
+  month:      'component.cron.expressionEditor.label.month',
+  dayOfWeek:  'component.cron.expressionEditor.label.dayOfWeek',
+};
+
+function makeFieldRecord<T>(value: T): Record<CronField, T> {
+  return cronFields.reduce((acc, f) => {
+    acc[f] = value;
+
+    return acc;
+  }, {} as Record<CronField, T>);
+}
+
+function parseCronToFields(expr: string): Record<CronField, string> {
+  const parts = expr?.trim().split(' ') || [];
+  const record = makeFieldRecord('');
+
+  fields.forEach((f, idx) => {
+    record[f] = parts[idx] || '';
+  });
+
+  return record;
+}
+
+const cronValues = reactive<Record<CronField, string>>(parseCronToFields(props.cronExpression || '* * * * *'));
+const errors = reactive<Record<CronField, boolean>>(makeFieldRecord(false));
+const focusedField = reactive<Record<CronField, boolean>>(makeFieldRecord(false));
+const rootRef = ref<HTMLElement | null>(null);
+const wrapperRefs: Record<CronField, HTMLElement | null> = makeFieldRecord(null);
+const tooltipRefs: Record<CronField, HTMLElement | null> = makeFieldRecord(null);
+const popperInstances: Record<CronField, PopperInstance | null> = makeFieldRecord(null);
+
+const tooltipData: Record<CronField, TooltipSection[]> = {
+  minute: [
+    {
+      type:  'rules',
+      items: [
+        { value: '*', descKey: 'component.cron.expressionEditor.minute.any' },
+        { value: '1,5', descKey: 'component.cron.expressionEditor.minute.at1and5' },
+        { value: '1-5', descKey: 'component.cron.expressionEditor.minute.range' },
+        { value: '*/5', descKey: 'component.cron.expressionEditor.minute.every5' },
+        { value: '8/5', descKey: 'component.cron.expressionEditor.minute.start8' },
+      ]
+    },
+    {
+      type:  'explanation',
+      items: [
+        { descKey: 'component.cron.expressionEditor.minute.allowed' },
+      ]
+    }
+  ],
+  hour: [
+    {
+      type:  'rules',
+      items: [
+        { value: '*', descKey: 'component.cron.expressionEditor.hour.any' },
+        { value: '1,5', descKey: 'component.cron.expressionEditor.hour.at1and5' },
+        { value: '1-5', descKey: 'component.cron.expressionEditor.hour.range' },
+        { value: '*/5', descKey: 'component.cron.expressionEditor.hour.every5' },
+        { value: '8/5', descKey: 'component.cron.expressionEditor.hour.start8' },
+      ]
+    },
+    {
+      type:  'explanation',
+      items: [
+        { descKey: 'component.cron.expressionEditor.hour.allowed' },
+      ]
+    }
+  ],
+  dayOfMonth: [
+    {
+      type:  'rules',
+      items: [
+        { value: '*', descKey: 'component.cron.expressionEditor.dayOfMonth.any' },
+        { value: '?', descKey: 'component.cron.expressionEditor.dayOfMonth.omit' },
+        { value: '1,5', descKey: 'component.cron.expressionEditor.dayOfMonth.1and5' },
+        { value: '1-5', descKey: 'component.cron.expressionEditor.dayOfMonth.range' },
+        { value: '*/5', descKey: 'component.cron.expressionEditor.dayOfMonth.every5' },
+        { value: '8/5', descKey: 'component.cron.expressionEditor.dayOfMonth.start8' },
+      ]
+    },
+    {
+      type:  'explanation',
+      items: [
+        { descKey: 'component.cron.expressionEditor.dayOfMonth.allowed' },
+      ]
+    }
+  ],
+  month: [
+    {
+      type:  'rules',
+      items: [
+        { value: '*', descKey: 'component.cron.expressionEditor.month.any' },
+        { value: '1,5', descKey: 'component.cron.expressionEditor.month.1and5' },
+        { value: '1-5', descKey: 'component.cron.expressionEditor.month.range' },
+        { value: '*/2', descKey: 'component.cron.expressionEditor.month.every2' },
+        { value: '3/2', descKey: 'component.cron.expressionEditor.month.start3' },
+      ]
+    },
+    {
+      type:  'explanation',
+      items: [
+        { descKey: 'component.cron.expressionEditor.month.allowed' },
+        { descKey: 'component.cron.expressionEditor.month.alias' },
+      ]
+    }
+  ],
+  dayOfWeek: [
+    {
+      type:  'rules',
+      items: [
+        { value: '*', descKey: 'component.cron.expressionEditor.dayOfWeek.any' },
+        { value: '?', descKey: 'component.cron.expressionEditor.dayOfWeek.omit' },
+        { value: '1,5', descKey: 'component.cron.expressionEditor.dayOfWeek.1and5' },
+        { value: '1-5', descKey: 'component.cron.expressionEditor.dayOfWeek.range' },
+      ]
+    },
+    {
+      type:  'explanation',
+      items: [
+        { descKey: 'component.cron.expressionEditor.dayOfWeek.allowed' },
+        { descKey: 'component.cron.expressionEditor.dayOfWeek.alias' },
+      ]
+    }
+  ],
+};
+
+const validateField = (field: CronField, value: string) => {
+  if (!value) {
+    errors[field] = true;
+
+    return;
+  }
+
+  const exprMap: Record<CronField, string> = {
+    minute:     `${ value } * * * *`,
+    hour:       `* ${ value } * * *`,
+    dayOfMonth: `* * ${ value } * *`,
+    month:      `* * * ${ value } *`,
+    dayOfWeek:  `* * * * ${ value }`,
+  };
+
+  errors[field] = !isValidCron(exprMap[field], {
+    alias:              true,
+    allowBlankDay:      true,
+    allowSevenAsSunday: true,
+  });
+};
+
+fields.forEach((f) => validateField(f, cronValues[f]));
+
+const isValid = computed(() => !Object.values(errors).some(Boolean));
+const expression = computed(() => fields.map((f) => cronValues[f]).join(' '));
+const readableCron = computed(() => {
+  if (!isValid.value) return t('component.cron.expressionEditor.invalidCronExpression');
+  try {
+    return cronstrue.toString(expression.value);
+  } catch {
+    return t('component.cron.expressionEditor.invalidCronExpression');
+  }
+});
+
+watch(cronValues, () => {
+  emit('update:cronExpression', expression.value);
+  emit('update:readableCron', readableCron.value);
+  emit('update:isValid', isValid.value);
+}, { deep: true, immediate: true });
+
+const handleInput = (field: CronField, val: string) => {
+  cronValues[field] = val;
+  validateField(field, val);
+};
+
+const handleFocus = async(field: CronField) => {
+  focusedField[field] = true;
+  await nextTick();
+  if (wrapperRefs[field] && tooltipRefs[field]) {
+    popperInstances[field] = createPopper(wrapperRefs[field], tooltipRefs[field], {
+      placement: 'bottom-start',
+      modifiers: [
+        { name: 'flip', options: { fallbackPlacements: ['top-start', 'bottom-end'] } },
+        { name: 'preventOverflow', options: { boundary: rootRef.value || document.body, padding: 4 } },
+        { name: 'offset', options: { offset: [0, 4] } },
+      ],
+    });
+  }
+};
+
+const handleBlur = (field: CronField) => {
+  focusedField[field] = false;
+  popperInstances[field]?.destroy();
+  popperInstances[field] = null;
+};
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="cron-edit"
+    v-bind="$attrs"
+  >
+    <div class="cron-row">
+      <div
+        v-for="field in fields"
+        :key="field"
+        :ref="el => wrapperRefs[field] = el as HTMLElement"
+        class="input-wrapper"
+      >
+        <LabeledInput
+          :label="t(fieldLabels[field])"
+          :value="cronValues[field]"
+          :status="errors[field] ? 'error' : undefined"
+          :tooltip="errors[field] ? t('component.cron.expressionEditor.invalidValue') : ''"
+          :aria-invalid="!!errors[field]"
+          :aria-label="t('component.cron.expressionEditor.a11y.examples', { label: t(fieldLabels[field]) })"
+          :aria-describedby="`tooltip-${field}`"
+          @update:value="val => handleInput(field, val)"
+          @focus="() => handleFocus(field)"
+          @blur="() => handleBlur(field)"
+        />
+        <div
+          v-show="focusedField[field]"
+          :id="`tooltip-${field}`"
+          :ref="el => tooltipRefs[field] = el as HTMLElement"
+          role="tooltip"
+          class="cron-tooltip-wrapper"
+        >
+          <CronTooltip :sections="tooltipData[field]" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$input-max-width: 110px;
+
+.cron-row {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.input-wrapper {
+  max-width: $input-max-width;
+  flex: 1 1 auto;
+
+  .label {
+    color: var(--label-secondary);
+    font-size: 12px;
+  }
+}
+
+.cron-tooltip-wrapper {
+  padding: 16px;
+  background: var(--body-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 2px 8px var(--shadow);
+  display: inline-block;
+  z-index: 2;
+}
+</style>

package/components/Cron/CronExpressionEditorModal.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import {
+  ref, watch, onMounted, onBeforeUnmount, nextTick
+} from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import AppModal from '@shell/components/AppModal.vue';
+import CronExpressionEditor from './CronExpressionEditor.vue';
+
+const props = defineProps<{
+  /**
+   * Initial cron expression string.
+   */
+  cronExpression?: string;
+  /**
+   * Controls whether the cron editor modal is visible.
+   */
+  show: boolean;
+}>();
+
+// eslint-disable-next-line
+const emit = defineEmits<{
+  (e: 'update:cronExpression', value: string): void;
+  (e: 'update:show', value: boolean): void;
+  (e: 'update:readableCron', value: string): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const localCron = ref(props.cronExpression ?? '* * * * *');
+const localShow = ref(props.show);
+const readableCron = ref('');
+const isCronValid = ref(true);
+
+const cronInfoRef = ref<HTMLElement | null>(null);
+const modalBodyRef = ref<HTMLElement | null>(null);
+const modalWidth = ref('600px');
+
+const wildcards = [
+  { symbol: '*', desc: 'component.cron.expressionEditorModal.wildcards.anyValue' },
+  { symbol: 'X,Y', desc: 'component.cron.expressionEditorModal.wildcards.xAndY' },
+  { symbol: 'X-Y', desc: 'component.cron.expressionEditorModal.wildcards.fromXtoY' },
+  { symbol: '*/X', desc: 'component.cron.expressionEditorModal.wildcards.everyX' },
+  { symbol: 'Y/X', desc: 'component.cron.expressionEditorModal.wildcards.everyXStartingY' },
+  { symbol: 'Y-Z/X', desc: 'component.cron.expressionEditorModal.wildcards.everyXFromYtoZ' },
+];
+
+const examples = [
+  { cron: '0 0 * * *', desc: 'component.cron.expressionEditorModal.examples.dailyMidnight' },
+  { cron: '0 */5 * * *', desc: 'component.cron.expressionEditorModal.examples.every5Hours' },
+  { cron: '45 17 1 * *', desc: 'component.cron.expressionEditorModal.examples.day1At1745' },
+  { cron: '30 8/1 * * 1-5', desc: 'component.cron.expressionEditorModal.examples.weekdaysAt0830' },
+  { cron: '0 */1 * 3,4,5 *', desc: 'component.cron.expressionEditorModal.examples.marchToMayHourly' },
+  { cron: '0 9-17/4 * * *', desc: 'component.cron.expressionEditorModal.examples.every4Hours9to17' },
+];
+
+const closeModal = () => emit('update:show', false);
+const confirmCron = () => {
+  if (!isCronValid.value) return;
+  emit('update:cronExpression', localCron.value);
+  emit('update:readableCron', readableCron.value);
+  closeModal();
+};
+
+// dynamically update modal width based on content
+const updateWidth = () => {
+  if (!modalBodyRef.value || !cronInfoRef.value) return;
+
+  const bodyStyle = getComputedStyle(modalBodyRef.value);
+  const padding = parseFloat(bodyStyle.paddingLeft) + parseFloat(bodyStyle.paddingRight);
+  const extraBuffer = 10;
+  const contentWidth = cronInfoRef.value.scrollWidth + padding + extraBuffer;
+
+  // limit width to 90% of viewport
+  modalWidth.value = `${ Math.min(contentWidth, window.innerWidth * 0.9) }px`;
+};
+
+watch(() => props.cronExpression, (val) => {
+  if (val !== undefined) localCron.value = val;
+});
+watch(() => props.show, (val) => {
+  localShow.value = val;
+
+  if (val) {
+    // reset cron to prop when modal opens
+    localCron.value = props.cronExpression ?? '* * * * *';
+    nextTick(updateWidth);
+  }
+});
+
+onMounted(() => {
+  nextTick(updateWidth);
+  window.addEventListener('resize', updateWidth);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateWidth);
+});
+</script>
+
+<template>
+  <AppModal
+    v-if="localShow"
+    :width="modalWidth"
+    name="cron-editor-modal"
+    custom-class="cron-editor-modal"
+    aria-labelledby="cron-editor-title"
+    aria-describedby="cron-editor-desc"
+    trigger-focus-trap
+    @close="closeModal"
+  >
+    <div
+      ref="modalBodyRef"
+      class="modal-body"
+    >
+      <h4 id="cron-editor-title">
+        {{ t('component.cron.expressionEditorModal.title') }}
+      </h4>
+      <p
+        id="cron-editor-desc"
+        class="description"
+      >
+        {{ t('component.cron.expressionEditorModal.description') }}
+      </p>
+
+      <div
+        class="readableCron"
+        aria-live="polite"
+      >
+        {{ readableCron }}
+      </div>
+
+      <CronExpressionEditor
+        v-model:cron-expression="localCron"
+        v-model:readable-cron="readableCron"
+        v-model:is-valid="isCronValid"
+        class="custom-cron-editor"
+      />
+
+      <div
+        ref="cronInfoRef"
+        class="cron-info"
+      >
+        <div class="cron-wildcards">
+          <h5>{{ t('component.cron.expressionEditorModal.wildcards.title') }}</h5>
+          <ul>
+            <li
+              v-for="(item, idx) in wildcards"
+              :key="idx"
+            >
+              <span class="symbol">{{ item.symbol }}</span>
+              <span class="desc">{{ t(item.desc) }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <div class="cron-examples">
+          <h5>{{ t('component.cron.expressionEditorModal.examples.title') }}</h5>
+          <ul>
+            <li
+              v-for="(ex, idx) in examples"
+              :key="idx"
+            >
+              <span class="symbol">{{ ex.cron }}</span>
+              <span class="desc">{{ t(ex.desc) }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button
+        class="btn btn-sm role-secondary"
+        @click="closeModal"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <button
+        class="btn btn-sm role-primary ml-10"
+        :disabled="!isCronValid"
+        @click="confirmCron"
+      >
+        {{ t('generic.confirm') }}
+      </button>
+    </div>
+  </AppModal>
+</template>
+
+<style scoped lang="scss">
+:global(#modals .cron-editor-modal) {
+  border-radius: var(--border-radius-lg);
+}
+
+.modal-body {
+  padding: 20px 20px 8px;
+
+  .description {
+    margin: 16px 0;
+  }
+
+  .readableCron {
+    padding: 16px;
+    background-color: var(--disabled-banner-bg);
+  }
+
+  .custom-cron-editor {
+    margin: 64px auto;
+    max-width: 600px;
+  }
+
+  .cron-info {
+    display: flex;
+    gap: 52px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 16px 0;
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: 8px 10px;
+
+      li {
+        display: contents;
+        white-space: nowrap;
+        color: var(--input-label);
+        font-size: 12px;
+      }
+
+      .symbol {
+        color: var(--body-text);
+      }
+    }
+  }
+}
+
+.modal-footer {
+  border-top: 1px solid var(--border);
+  display: flex;
+  padding: 10px 20px;
+  justify-content: flex-end;
+}
+</style>

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/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
+    };
+  });
+};

package/components/PodSecurityAdmission.vue

@@ -222,6 +222,7 @@ export default defineComponent({
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"
+          :mode="mode"
           :data-testid="componentTestid + '--psaControl-' + i + '-active'"
           :label="level"
           :label-key="`podSecurityAdmission.labels.${ level }`"
@@ -281,6 +282,7 @@ export default defineComponent({
         <span class="col span-2">
           <Checkbox
             v-model:value="psaExemptionsControl.active"
+            :mode="mode"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-active'"
             :label="dimension"
             :label-key="`podSecurityAdmission.labels.${ dimension }`"

package/components/PromptModal.vue

@@ -94,7 +94,7 @@ export default {
       this.errors = [];
 
       // Guard against events that can be implicitly passed by components
-      const modalData = data instanceof Event ? undefined : data;
+      const modalData = (data instanceof Event || !data?.performCallback) ? undefined : data;
 
       this.$store.commit('action-menu/togglePromptModal', modalData);
 

package/components/Resource/Detail/Card/__tests__/StateCard.test.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import StateCard from '@shell/components/Resource/Detail/Card/StateCard/index.vue';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+jest.mock('vuex', () => ({ useStore: () => { } }));
 
 describe('component: StateCard', () => {
   const title = 'TITLE';