@rancher/shell 0.5.3 → 2.0.0

package/components/templates/error.vue

@@ -2,23 +2,19 @@
 import Brand from '@shell/mixins/brand';
 
 export default {
-  name:       'NuxtError',
-  mixins:     [Brand],
-  middleware: ['unauthenticated'],
+  name:   'NuxtError',
+  mixins: [Brand],
 
   data() {
     return { ready: false };
   },
 
   computed: {
-    error() {
-      return window.$nuxt.nuxt.err || {};
-    },
     statusCode() {
-      return (this.error && this.error.statusCode) || 599;
+      return 599;
     },
     message() {
-      return this.error.message || '';
+      return '';
     }
   },
   watch: {
@@ -76,13 +72,13 @@ export default {
           class="error-link"
           href="/"
         >Back to Home</a>
-        <n-link
+        <router-link
           v-else
           class="error-link"
           to="/"
         >
           Back to Home
-        </n-link>
+        </router-link>
       </p>
     </div>
   </div>

package/components/templates/standalone.vue

@@ -1,7 +1,3 @@
-<script>
-export default { middleware: ['unauthenticated'] };
-</script>
-
 <template>
   <router-view :key="$route.path" />
 </template>

package/components/templates/unauthenticated.vue

@@ -4,8 +4,7 @@ import FixedBanner from '@shell/components/FixedBanner';
 
 export default {
   mixins:     [Brand],
-  components: { FixedBanner },
-  middleware: ['unauthenticated'],
+  components: { FixedBanner }
 };
 </script>
 

package/components/user.retention/user-retention-header.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import TabTitle from '@shell/components/TabTitle';
+</script>
+
+<template>
+  <div>
+    <header>
+      <div class="title">
+        <h1
+          data-testid="charts-header-title"
+          class="m-0"
+        >
+          <TabTitle :show-child="false">
+            {{ t('user.retention.edit.title.header') }}
+          </TabTitle>
+          <router-link
+            :to="{
+              name: 'c-cluster-product-resource',
+              params: {
+                cluster: '_',
+                product: 'auth',
+                resource: 'management.cattle.io.user',
+              }
+            }"
+          >
+            {{ t('user.retention.edit.title.pre') }}
+          </router-link>
+          {{ t('user.retention.edit.title.post') }}
+        </h1>
+      </div>
+    </header>
+    <h2>{{ t('user.retention.edit.title.subTitle') }}</h2>
+  </div>
+</template>

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

@@ -1,7 +1,7 @@
 import { computed, ComputedRef } from 'vue';
 
 interface CompactInputProps {
-  compact?: boolean;
+  compact?: boolean | null;
   label?: string;
   labelKey?: string;
 }
@@ -13,7 +13,7 @@ interface UseCompactInput {
 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 : !(props.label || props.labelKey);
+    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
   });
 
   return { isCompact };

package/composables/useI18n.ts

@@ -0,0 +1,26 @@
+import { Store } from 'vuex';
+
+import { stringFor } from '@shell/plugins/i18n';
+
+let store: Store<any> | null = null;
+
+export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
+  store = vuexStore;
+
+  if (!store) {
+    throw new Error('usI18n() must be called from setup()');
+  }
+
+  return { t };
+};
+
+/**
+ * Allows for consuming i18n strings with the Vue composition API.
+ * @param key - The key for the i18n string to translate.
+ * @param args - An object or array containing arguments for the translation function.
+ * @param raw - A boolean determining if the string returned is a raw representation.
+ * @returns A translated string or the raw value if the raw parameter is set to true.
+ */
+const t = (key: string, args?: unknown, raw?: boolean): unknown => {
+  return stringFor(store, key, args, raw);
+};

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/useStore.ts

@@ -0,0 +1,16 @@
+import { getCurrentInstance } from 'vue';
+import { Store } from 'vuex';
+
+/**
+ * useStore allows for accessing Vuex stores from within a setup function. This is a temporary measure for working with
+ * Vuex in Vue2.
+ *
+ * TODO: #9541 Remove for Vue 3 migration
+ */
+export const useStore = ():Store<any> => {
+  const vm = getCurrentInstance();
+
+  if (!vm) throw new Error('useStore() must be called from setup()');
+
+  return vm.proxy.$store;
+};

package/config/home-links.js

@@ -2,7 +2,9 @@ import { DOCS_BASE } from '@shell/config/private-label';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { allHash } from '@shell/utils/promise';
+import { isRancherPrime } from '@shell/config/version';
 
+// i18n-uses customLinks.defaults.*
 const DEFAULT_LINKS = [
   {
     key:     'docs',
@@ -31,6 +33,12 @@ const DEFAULT_LINKS = [
   },
 ];
 
+const COLLECTIVE_LINK = {
+  key:     'suseCollective',
+  value:   'https://susecollective.suse.com/join/prime',
+  enabled: true,
+};
+
 const SUPPORT_LINK = {
   key:      'commercialSupport',
   value:    '/support',
@@ -47,6 +55,9 @@ const CN_FORUMS_LINK = {
 // We add a version attribute to the setting so we know what has been migrated and which version of the setting we have
 export const CUSTOM_LINKS_VERSION = 'v1';
 
+// Version with collective added (Prime)
+export const CUSTOM_LINKS_COLLECTIVE_VERSION = 'v1.1';
+
 // Fetch the settings required for the links, taking into account legacy settings if we have not migrated
 export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   let uiLinks = {};
@@ -63,11 +74,26 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   }
 
   // If uiLinks is set and has the correct version, then we are okay, otherwise we need to migrate from the old settings
-  if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
+  if (uiLinks?.version?.startsWith(CUSTOM_LINKS_VERSION)) {
+    // v1 > v1.1 migration
+    if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
+      uiLinks.version = CUSTOM_LINKS_COLLECTIVE_VERSION;
+
+      // Add collective link so that it is enabled by default
+      if (!uiLinks.defaults.includes(COLLECTIVE_LINK.key)) {
+        uiLinks.defaults.push(COLLECTIVE_LINK.key);
+      }
+    }
+
     // Map out the default settings, as we only store keys of the ones to show
     if (uiLinks.defaults) {
       const defaults = [...DEFAULT_LINKS];
 
+      // Add prime link if necessary
+      if (isRancherPrime()) {
+        defaults.push(COLLECTIVE_LINK);
+      }
+
       // Map the link name stored to the default link, if it exists
       defaults.forEach((link) => {
         const enabled = uiLinks.defaults.find((linkName) => linkName === link.key);
@@ -89,6 +115,11 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
     custom:   []
   };
 
+  // Add prime link if necessary
+  if (isRancherPrime()) {
+    links.defaults.push(COLLECTIVE_LINK);
+  }
+
   // There are two legacy settings:
   // SETTING.ISSUES - can specify a custom link to use for 'File an issue'
   // SETTING.COMMUNITY_LINKS - can specify whether to hide all of the default links (other than 'File an issue')

package/config/labels-annotations.js

@@ -14,6 +14,7 @@ export const CREATOR_ID = 'field.cattle.io/creatorId';
 export const RESOURCE_QUOTA = 'field.cattle.io/resourceQuota';
 export const AZURE_MIGRATED = 'auth.cattle.io/azuread-endpoint-migrated';
 export const WORKSPACE_ANNOTATION = 'objectset.rio.cattle.io/id';
+export const NODE_ARCHITECTURE = 'kubernetes.io/arch';
 
 export const KUBERNETES = {
   SERVICE_ACCOUNT_UID:  'kubernetes.io/service-account.uid',
@@ -152,7 +153,7 @@ export const CLUSTER_BADGE = {
   TEXT:      'ui.rancher/badge-text',
   // Badge color - as a hex color - e.g. #ff00ff
   COLOR:     'ui.rancher/badge-color',
-  // Custom icon text - max 2 characters
+  // Custom icon text - max 3 characters
   ICON_TEXT: 'ui.rancher/badge-icon-text',
 };
 

package/config/middleware.js

@@ -3,10 +3,4 @@ const middleware = {};
 middleware['authenticated'] = require('../middleware/authenticated.js');
 middleware['authenticated'] = middleware['authenticated'].default || middleware['authenticated'];
 
-middleware['i18n'] = require('../middleware/i18n.js');
-middleware['i18n'] = middleware['i18n'].default || middleware['i18n'];
-
-middleware['unauthenticated'] = require('../middleware/unauthenticated.js');
-middleware['unauthenticated'] = middleware['unauthenticated'].default || middleware['unauthenticated'];
-
 export default middleware;

package/config/pagination-table-headers.js

@@ -0,0 +1,57 @@
+import { STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
+
+// This file contains table headers
+// These table headers are used for server side pagination
+// They MUST contain sort and search values that are paths to raw properties (not computed properties in models)
+// They SHOULD avoid formatters that change the value from the same used by sort and search (user will see an order that doesn't match what they see)
+
+export const STEVE_NAME_COL = {
+  ...NAME_COL,
+  defaultSort: true,
+  value:       'metadata.name',
+  sort:        ['metadata.name'],
+  search:      'metadata.name',
+};
+
+export const STEVE_ID_COL = {
+  name:     'steve-id',
+  labelKey: 'tableHeaders.id',
+  value:    'id',
+  sort:     ['id'],
+  search:   'id',
+};
+
+export const STEVE_STATE_COL = {
+  ...STATE,
+  // value:  'metadata.state.name', Use the state as defined by the resource rather than converted via the model.
+  // This means we'll show something different to what we sort and filter on.
+  sort:   [], // ['metadata.state.name'], // Pending API support
+  search: false, // 'metadata.state.name', // Pending API support
+};
+
+export const STEVE_AGE_COL = {
+  ...AGE,
+  value:  'metadata.creationTimestamp',
+  sort:   'metadata.creationTimestamp',
+  search: false,
+};
+
+export const STEVE_NAMESPACE_COL = {
+  ...NAMESPACE_COL,
+  value:  'metadata.namespace',
+  sort:   'metadata.namespace',
+  search: 'metadata.namespace',
+};
+
+export const STEVE_LIST_GROUPS = [{
+  tooltipKey: 'resourceTable.groupBy.none',
+  icon:       'icon-list-flat',
+  value:      'none',
+}, {
+  icon:          'icon-folder',
+  value:         'metadata.namespace',
+  field:         'metadata.namespace', // Default groupByLabel field in models is NS based
+  hideColumn:    NAMESPACE_COL.name,
+  tooltipKey:    'resourceTable.groupBy.namespace',
+  groupLabelKey: 'groupByLabel',
+}];

package/config/pod-security-admission.ts

@@ -1,4 +1,4 @@
-import { PSADimension, PSALevel, PSAMode } from '@shell/types/pod-security-admission';
+import { PSADimension, PSALevel, PSAMode } from '@shell/types/resources/pod-security-admission';
 
 /**
  * All the PSA labels are created with this prefix, so we can use this to identify them

package/config/private-label.js

@@ -3,7 +3,7 @@ import { SETTING } from './settings';
 export const ANY = 0;
 export const STANDARD = 1;
 export const CUSTOM = 2;
-export const DOCS_BASE = 'https://ranchermanager.docs.rancher.com/v2.8';
+export const DOCS_BASE = 'https://ranchermanager.docs.rancher.com/v2.9';
 
 const STANDARD_VENDOR = 'Rancher';
 const STANDARD_PRODUCT = 'Explorer';
@@ -89,7 +89,5 @@ export function setTitle() {
     const head = document.getElementsByTagName('head')[0];
 
     head.appendChild(link);
-  } else {
-    document.title = v;
   }
 }

package/config/product/auth.js

@@ -174,6 +174,7 @@ export function init(store) {
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/googleoauth`, 'auth/googleoauth');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/azuread`, 'auth/azuread');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/keycloakoidc`, 'auth/oidc');
+  componentForType(`${ MANAGEMENT.AUTH_CONFIG }/oidc`, 'auth/oidc');
 
   basicType([
     'config',