@rancher/shell 0.4.0 → 0.5.0

package/composables/useCompactInput.test.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { useCompactInput } from './useCompactInput';
+
+describe('useCompactInput', () => {
+  it('should compute isCompact correctly when compact is explicitly set', () => {
+    const props = ref({
+      compact:  true,
+      label:    'Test Label',
+      labelKey: 'testLabel',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    expect(isCompact.value).toBe(true);
+
+    // When compact is explicitly set to false, isCompact should be false
+    props.value.compact = false;
+    expect(isCompact.value).toBe(false);
+  });
+
+  it('should compute isCompact correctly when compact is not explicitly set', () => {
+    const props = ref({
+      label:    '',
+      labelKey: '',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    // When there is no label and labelKey is also not present, isCompact should be true
+    expect(isCompact.value).toBe(true);
+
+    // When label is present, isCompact should be false
+    props.value.label = 'Updated Label';
+    expect(isCompact.value).toBe(false);
+  });
+});

package/composables/useCompactInput.ts

@@ -0,0 +1,20 @@
+import { computed, ComputedRef } from 'vue';
+
+interface CompactInputProps {
+  compact?: boolean | null;
+  label?: string;
+  labelKey?: string;
+}
+
+interface UseCompactInput {
+  isCompact: ComputedRef<boolean>;
+}
+
+export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
+  const isCompact = computed(() => {
+    // Compact if explicitly set - otherwise compact if there is no label
+    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
+  });
+
+  return { isCompact };
+};

package/composables/useLabeledFormElement.test.ts

@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+import { useLabeledFormElement } from './useLabeledFormElement';
+
+describe('useLabeledFormElement', () => {
+  it('should set raised to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, raised } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(raised.value).toBe(true);
+
+    onBlurLabeled();
+    expect(raised.value).toBe(false);
+  });
+
+  it('should set focused to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, focused } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(focused.value).toBe(true);
+
+    onBlurLabeled();
+    expect(focused.value).toBe(false);
+  });
+
+  it('should set blurred to current timestamp when blurred', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onBlurLabeled, blurred } = useLabeledFormElement(props, emit);
+
+    onBlurLabeled();
+    expect(blurred.value).toBeTruthy();
+  });
+
+  it('should compute isDisabled correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { isDisabled } = useLabeledFormElement(props.value, emit);
+
+    expect(isDisabled.value).toBe(false);
+
+    props.value.disabled = true;
+    expect(isDisabled.value).toBe(true);
+
+    props.value.mode = 'view';
+    expect(isDisabled.value).toBe(true);
+  });
+
+  it('should compute validationMessage correctly for required field', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'This field is required' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('This field is required');
+  });
+
+  it('should compute validationMessage correctly for custom rules', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    'test',
+      required: false,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'Value must be at least 5 characters long' : undefined),
+        (value: string[]) => (value.includes('test') ? 'Value cannot contain the word "test"' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('Value must be at least 5 characters long, Value cannot contain the word "test"');
+  });
+
+  it('should compute requiredField correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { requiredField } = useLabeledFormElement(props.value, emit);
+
+    expect(requiredField.value).toBe(true);
+
+    // When the field is not required, requiredField should be false
+    props.value.required = false;
+    expect(requiredField.value).toBe(false);
+  });
+});

package/composables/useLabeledFormElement.ts

@@ -0,0 +1,138 @@
+import { ref, computed, ComputedRef, Ref } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
+interface LabeledFormElementProps {
+  mode: string;
+  value: string | number | Record<string, any>
+  required: boolean;
+  disabled: boolean;
+  rules: Array<any>;
+}
+
+interface UseLabeledFormElement {
+  raised: Ref<boolean>;
+  focused: Ref<boolean>;
+  blurred: Ref<number | null>;
+  requiredField: ComputedRef<any>;
+  isDisabled: ComputedRef<any>;
+  validationMessage: ComputedRef<any>;
+  onFocusLabeled: () => void;
+  onBlurLabeled: () => void;
+}
+
+export const labeledFormElementProps = {
+  tooltipKey: {
+    type:    String,
+    default: null
+  },
+  placeholder: {
+    type:    [String, Number],
+    default: ''
+  },
+  placeholderKey: {
+    type:    String,
+    default: null
+  },
+  label: {
+    type:    String,
+    default: null
+  },
+  labelKey: {
+    type:    String,
+    default: null
+  },
+  value: {
+    type:    [String, Number, Object],
+    default: ''
+  },
+  mode: {
+    type:    String,
+    default: _EDIT,
+  },
+  rules: {
+    default:   (): Array<unknown> => [],
+    type:      Array,
+    // we only want functions in the rules array
+    validator: (rules: Array<unknown>): boolean => rules.every((rule: unknown) => ['function'].includes(typeof rule))
+  },
+  required: {
+    type:    Boolean,
+    default: false,
+  },
+  disabled: {
+    type:    Boolean,
+    default: false,
+  },
+};
+
+export const useLabeledFormElement = (props: LabeledFormElementProps, emit: (event: string, ...args: any[]) => void): UseLabeledFormElement => {
+  const raised = ref(props.mode === _VIEW || !!`${ props.value }`);
+  const focused = ref(false);
+  const blurred = ref<number | null>(null);
+
+  const requiredField = computed(() => {
+    return props.required || props.rules?.some((rule: any) => rule?.name === 'required');
+  });
+
+  const isView = computed(() => {
+    return props.mode === _VIEW;
+  });
+
+  const isDisabled = computed(() => {
+    return props.disabled || isView.value;
+  });
+
+  const validationMessage = computed(() => {
+    const requiredRule = props.rules.find((rule: any) => rule?.name === 'required') as Function;
+    const ruleMessages = [];
+    const value = props.value;
+
+    if (requiredRule && blurred.value && !focused.value) {
+      const message = requiredRule(value);
+
+      if (!!message) {
+        return message;
+      }
+    }
+
+    for (const rule of props.rules) {
+      const message = rule(value);
+
+      if (!!message && rule.name !== 'required') {
+        ruleMessages.push(message);
+      }
+    }
+
+    if (ruleMessages.length > 0 && (blurred.value || focused.value)) {
+      return ruleMessages.join(', ');
+    } else {
+      return undefined;
+    }
+  });
+
+  const onFocusLabeled = () => {
+    raised.value = true;
+    focused.value = true;
+  };
+
+  const onBlurLabeled = () => {
+    focused.value = false;
+
+    if (!props.value) {
+      raised.value = false;
+    }
+
+    blurred.value = Date.now();
+  };
+
+  return {
+    raised,
+    focused,
+    blurred,
+    onFocusLabeled,
+    onBlurLabeled,
+    isDisabled,
+    validationMessage,
+    requiredField
+  };
+};

package/config/harvester-manager-types.js

@@ -1 +1,3 @@
 export const NAME = 'harvesterManager';
+
+export const KIND = { MACHINE_TEMPLATE: 'HarvesterMachineTemplate' };

package/config/private-label.js

@@ -23,6 +23,7 @@ export function setMode(m) {
 
 export function setVendor(v) {
   vendor = v;
+  setTitle();
 }
 
 export function setProduct(p) {
@@ -71,3 +72,24 @@ export function getVendor() {
 export function getProduct() {
   return product;
 }
+
+export function setTitle() {
+  const v = getVendor();
+
+  if (v === 'Harvester') {
+    const ico = require(`~shell/assets/images/pl/harvester.png`);
+
+    document.title = 'Harvester';
+    const link = document.createElement('link');
+
+    link.hid = 'icon';
+    link.rel = 'icon';
+    link.type = 'image/x-icon';
+    link.hrefv = ico;
+    const head = document.getElementsByTagName('head')[0];
+
+    head.appendChild(link);
+  } else {
+    document.title = v;
+  }
+}

package/config/product/explorer.js

@@ -7,6 +7,7 @@ import {
   MANAGEMENT,
   NAMESPACE,
   NORMAN,
+  SNAPSHOT,
   VIRTUAL_TYPES,
 } from '@shell/config/types';
 
@@ -162,6 +163,8 @@ export function init(store) {
   configureType(MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING, { isEditable: false, depaginate: true });
   configureType(MANAGEMENT.PROJECT, { displayName: store.getters['i18n/t']('namespace.project.label') });
   configureType(NORMAN.PROJECT_ROLE_TEMPLATE_BINDING, { depaginate: true });
+  configureType(SNAPSHOT, { depaginate: true });
+  configureType(NORMAN.ETCD_BACKUP, { depaginate: true });
 
   configureType(EVENT, { limit: 500 });
   weightType(EVENT, -1, true);

package/config/product/fleet.js

@@ -3,6 +3,7 @@ import { FLEET } from '@shell/config/types';
 import { STATE, NAME as NAME_COL, AGE } from '@shell/config/table-headers';
 import { FLEET as FLEET_FEATURE } from '@shell/store/features';
 import { gitRepoGraphConfig } from '@shell/pages/c/_cluster/fleet/GitRepoGraphConfig';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
 export const NAME = 'fleet';
 export const CHART_NAME = 'fleet';
@@ -26,6 +27,10 @@ export function init(store) {
     removable:             false,
     showClusterSwitcher:   false,
     showWorkspaceSwitcher: true,
+    to:                    {
+      name:   'c-cluster-fleet',
+      params: { resource: FLEET.DASHBOARD, cluster: BLANK_CLUSTER }
+    },
   });
 
   virtualType({
@@ -37,7 +42,7 @@ export function init(store) {
     weight:     110,
     route:      {
       name:   'c-cluster-fleet',
-      params: { resource: FLEET.DASHBOARD }
+      params: { resource: FLEET.DASHBOARD, cluster: BLANK_CLUSTER }
     },
     exact: true,
   });

package/config/product/manager.js

@@ -4,9 +4,10 @@ import {
   CATALOG,
   NORMAN,
   HCI,
-  MANAGEMENT
+  MANAGEMENT,
+  SNAPSHOT
 } from '@shell/config/types';
-import { MULTI_CLUSTER } from '@shell/store/features';
+import { MULTI_CLUSTER, RKE1_UI } from '@shell/store/features';
 import { DSL } from '@shell/store/type-map';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
@@ -60,6 +61,9 @@ export function init(store) {
     'drivers',
   ]);
 
+  configureType(SNAPSHOT, { depaginate: true });
+  configureType(NORMAN.ETCD_BACKUP, { depaginate: true });
+
   configureType(CAPI.RANCHER_CLUSTER, {
     showListMasthead: false, namespaced: false, alias: [HCI.CLUSTER]
   });
@@ -84,6 +88,7 @@ export function init(store) {
   });
 
   virtualType({
+    ifFeature:  RKE1_UI,
     labelKey:   'manager.rkeTemplates.label',
     name:       'rke-templates',
     group:      'Root',
@@ -94,6 +99,7 @@ export function init(store) {
   });
 
   virtualType({
+    ifFeature:  RKE1_UI,
     labelKey:   'manager.nodeTemplates.label',
     name:       'rke-node-templates',
     group:      'Root',

package/config/query-params.js

@@ -50,6 +50,7 @@ export const _SPLIT = 'split';
 
 // CruResource
 export const SUB_TYPE = 'type';
+export const RKE_TYPE = 'rkeType';
 
 // App launch
 export const REPO_TYPE = 'repo-type';