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

package/cloud-credential/harvester.vue

@@ -1,7 +1,6 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { Banner } from '@components/Banner';
 
 import { get, set } from '@shell/utils/object';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
@@ -9,7 +8,7 @@ import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 export default {
   emits: ['validationChanged'],
 
-  components: { LabeledSelect, Banner },
+  components: { LabeledSelect },
   mixins:     [CreateEditView],
 
   async fetch() {
@@ -100,13 +99,6 @@ export default {
 
 <template>
   <div>
-    <div class="row mb-10">
-      <Banner
-        color="warning"
-        label-key="cluster.credential.harvester.tokenExpirationWarning"
-        data-testid="harvester-token-expiration-warning-banner"
-      />
-    </div>
     <div class="row mb-10">
       <div
         class="col span-6"

package/components/ActionMenuShell.vue

@@ -28,7 +28,7 @@ const openChanged = (event: boolean) => {
   }
 };
 
-const emit = defineEmits<{(event: string, payload: any): void}>();
+const emit = defineEmits<{(event: string, payload: any): void;(event: 'action-invoked'): void;}>();
 const route = useRoute();
 
 const execute = (action: any, event: MouseEvent, args?: any) => {
@@ -36,6 +36,8 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
     return;
   }
 
+  emit('action-invoked');
+
   // this will come from extensions...
   if (action.invoke) {
     const fn = action.invoke;

package/components/AdvancedSection.vue

@@ -32,9 +32,17 @@ export default {
       v-t="show ? 'generic.hideAdvanced' : 'generic.showAdvanced'"
       class="hand block"
       :class="{'mb-10': show}"
+      tabindex="0"
+      @keydown.enter.space.prevent="toggle"
       @click="toggle"
     />
 
     <slot v-if="show" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.hand.block {
+  max-width: fit-content;
+}
+</style>

package/components/ChartReadme.vue

@@ -8,6 +8,14 @@ export default {
       type:     Object,
       required: true
     },
+    showAppReadme: {
+      type:    Boolean,
+      default: true
+    },
+    hideReadmeFirstTitle: {
+      type:    Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -30,13 +38,13 @@ export default {
   <div class="wrapper">
     <div class="chart-readmes">
       <Markdown
-        v-if="appReadme"
+        v-if="showAppReadme && appReadme"
         v-model:value="appReadme"
-        class="md md-desc mb-20"
+        :class="[hideReadmeFirstTitle ? 'hidden-first-title' : '', 'md', 'md-desc', 'mb-20']"
         @loaded="appReadmeLoaded = true"
       />
       <h1
-        v-if="appReadme && readme && appReadmeLoaded && readmeLoaded"
+        v-if="showAppReadme && appReadme && readme && appReadmeLoaded && readmeLoaded"
         class="pt-10"
       >
         {{ t('catalog.install.appReadmeTitle') }}
@@ -45,6 +53,7 @@ export default {
         v-if="readme"
         v-model:value="readme"
         class="md md-desc"
+        :class="[hideReadmeFirstTitle ? 'hidden-first-title' : '', 'md', 'md-desc']"
         @loaded="readmeLoaded = true"
       />
     </div>
@@ -88,13 +97,14 @@ export default {
       word-break: break-word;
     }
 
-    :deep()  > h1:first-of-type {
-      display: none;
-    }
-
     :deep() p {
       margin-bottom: 0.5em;
     }
   }
+  .hidden-first-title {
+    :deep() > h1:first-of-type {
+      display: none;
+    }
+  }
 
 </style>

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>