@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/utils/pagination-wrapper.ts

@@ -1,70 +1,152 @@
 import paginationUtils from '@shell/utils/pagination-utils';
-import { PaginationArgs, PaginationResourceContext, StorePagination } from '@shell/types/store/pagination.types';
+import { PaginationArgs, PaginationResourceContext } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
-import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { ActionFindPageArgs, ActionFindPageTransientResult } from '@shell/types/store/dashboard-store.types';
+import {
+  STEVE_WATCH_EVENT_LISTENER_CALLBACK, STEVE_UNWATCH_EVENT_PARAMS, STEVE_WATCH_EVENT, STEVE_WATCH_EVENT_PARAMS, STEVE_WATCH_EVENT_PARAMS_COMMON, STEVE_WATCH_MODE
+} from '@shell/types/store/subscribe.types';
+import { Reactive, reactive } from 'vue';
 
-interface Result<T> {
-  data: Array<T>
-  pagination: StorePagination
+interface Args {
+  $store: VuexStore,
+  /**
+   * Unique ID for this request. Used for watch purposes
+   */
+  id: string,
+  /**
+   * Args used when determining if this resource type supports SSP
+   */
+  enabledFor: PaginationResourceContext,
+  /**
+   * Callback called when the resource is changed (notified by socket)
+   */
+  onChange?: () => void,
+
+  formatResponse?: {
+    /**
+     * Convert the response into a model class instance
+     */
+    classify?: boolean,
+    reactive?: boolean,
+  }
+}
+
+interface Result<T> extends Omit<ActionFindPageTransientResult<T>, 'data'> {
+  data: Reactive<T[]>
 }
 
 /**
- * This is a helper class that will assist in fetching a resource
- * - Handle if the resource can be fetched by the new pagination api
- * - Make a request to get a page (including classify)
- * - Provide updates when the resource changes
+ * This is a helper class that will assist in fetching a resource via the new Server-Side Pagination API
  *
  * This is designed to work in places where we don't/can't store the resource in the store
  * - There already exists a resource we don't want to overwrite
- * - We're transient and want something nicer than just cluster/request
+ * - We're transient and want something nicer than just `cluster/request` + all the trimmings
+ *
+ * It ...
+ * - Handles if the resource can be fetched by the new pagination api
+ * - Makes a request to get a page (including optional classify & reactive)
+ * - Provide updates when the resource changes
  */
-class PaginationWrapper<T = any> {
-    private $store: VuexStore;
-    private enabledFor: PaginationResourceContext;
-
-    // Blocked on https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
-    private onUpdate: (out: Result<T>) => void;
-
-    public isEnabled: boolean;
-
-    constructor({
-      $store,
-      enabledFor,
-      onUpdate,
-    }: {
-        $store: VuexStore,
-        onUpdate: (res: Result<T>) => void,
-        enabledFor: PaginationResourceContext,
-    }) {
-      this.$store = $store;
-      this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters }, enabledFor);
-      this.enabledFor = enabledFor;
-      this.onUpdate = onUpdate;
+class PaginationWrapper<T extends object> {
+  private $store: VuexStore;
+  private enabledFor: PaginationResourceContext;
+  private onChange?: STEVE_WATCH_EVENT_LISTENER_CALLBACK;
+  private id: string;
+  private classify: boolean;
+  private reactive: boolean;
+
+  public isEnabled: boolean;
+  private steveWatchParams: STEVE_WATCH_EVENT_PARAMS_COMMON | undefined;
+
+  constructor(args: Args) {
+    const {
+      $store, id, enabledFor, onChange, formatResponse
+    } = args;
+
+    this.$store = $store;
+    this.id = id;
+    this.enabledFor = enabledFor;
+    this.onChange = onChange;
+    this.classify = formatResponse?.classify || false;
+    this.reactive = formatResponse?.reactive || false;
+
+    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters }, enabledFor);
+  }
+
+  async request(args: {
+      pagination: PaginationArgs,
+  }): Promise<Result<T>> {
+    if (!this.isEnabled) {
+      throw new Error(`Wrapper for type '${ this.enabledFor.store }/${ this.enabledFor.resource?.id }' in context '${ this.enabledFor.resource?.context }' not supported`);
+    }
+    const { pagination } = args;
+    const opt: ActionFindPageArgs = {
+      watch:     false,
+      pagination,
+      transient: true,
+    };
+
+    // Fetch
+    const out: ActionFindPageTransientResult<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+
+    // Watch
+    if (this.onChange && !this.steveWatchParams) {
+      this.steveWatchParams = {
+        event:  STEVE_WATCH_EVENT.CHANGES,
+        id:     this.id,
+        params: {
+          type: this.enabledFor.resource?.id as string,
+          mode: STEVE_WATCH_MODE.RESOURCE_CHANGES,
+        }
+      };
+
+      this.watch();
     }
 
-    async request(args: {
-        pagination: PaginationArgs,
-        classify?: boolean,
-    }): Promise<Result<T>> {
-      if (!this.isEnabled) {
-        throw new Error(`Wrapper for type '${ this.enabledFor.store }/${ this.enabledFor.resource?.id }' in context '${ this.enabledFor.resource?.context }' not supported`);
-      }
-      const { pagination, classify: doClassify } = args;
-      const opt: ActionFindPageArgs = {
-        transient: true,
-        pagination
+    // Convert Response
+    if (this.classify) {
+      out.data = await this.$store.dispatch(`${ this.enabledFor.store }/createMany`, out.data);
+    }
+
+    if (this.reactive) {
+      return {
+        ...out,
+        data: reactive(out.data)
       };
+    }
 
-      const out: Result<T> = await this.$store.dispatch(`${ this.enabledFor.store }/findPage`, { opt, type: this.enabledFor.resource?.id });
+    return out;
+  }
 
-      if (doClassify) {
-        for (let i = 0; i < out.data.length; i++) {
-          out.data[i] = await this.$store.dispatch(`${ this.enabledFor.store }/create`, out.data[i]);
-        }
-      }
+  private async watch() {
+    if (!this.steveWatchParams) {
+      console.error('Calling watch but no watch params created'); // eslint-disable-line no-console
 
-      return out;
+      return;
     }
+    const watchParams: STEVE_WATCH_EVENT_PARAMS = {
+      ...this.steveWatchParams,
+      callback: this.onChange as STEVE_WATCH_EVENT_LISTENER_CALLBACK, // we must have it by now
+    };
+
+    await this.$store.dispatch(`${ this.enabledFor.store }/watchEvent`, watchParams);
+  }
+
+  private async unWatch() {
+    if (!this.steveWatchParams) {
+      console.error('Calling unWatch but no watch params created'); // eslint-disable-line no-console
+
+      return;
+    }
+
+    const unWatchParams: STEVE_UNWATCH_EVENT_PARAMS = { ...this.steveWatchParams };
+
+    await this.$store.dispatch(`${ this.enabledFor.store }/unwatchEvent`, unWatchParams);
+  }
+
+  async onDestroy() {
+    await this.unWatch();
+  }
 }
 
 export default PaginationWrapper;

package/utils/release-notes.ts

@@ -0,0 +1,48 @@
+import { getVersionData } from '@shell/config/version';
+import { READ_WHATS_NEW } from '@shell/store/prefs';
+import { NotificationLevel } from '@shell/types/notifications';
+
+export async function addReleaseNotesNotification(dispatch: any, getters: any) {
+  const rancherVersion = getVersionData().Version.split('-')[0];
+  const prefix = 'release-notes-';
+  const id = `${ prefix }${ rancherVersion }`;
+  let found = false;
+  const all = getters['notifications/all'];
+  const lastReadVersion = getters['prefs/get'](READ_WHATS_NEW) || '';
+  const t = getters['i18n/t'];
+  const releaseNotesUrl = getters['releaseNotesUrl'];
+
+  // Delete notification(s) for old release notes
+  for (let i = 0; i < all.length; i++) {
+    const notification = all[i];
+
+    if (notification.id.startsWith(prefix)) {
+      if (notification.id === id) {
+        found = true;
+      } else {
+        await dispatch('notifications/delete', notification.id);
+      }
+    }
+  }
+
+  // Also use pref, so if we expired it, we don't add it back
+  if (!found && lastReadVersion !== rancherVersion) {
+    // Register notification
+    const notification = {
+      id,
+      level:      NotificationLevel.Info,
+      title:      t('landing.whatsNew.title', { version: rancherVersion }),
+      message:    t('landing.whatsNew.message'),
+      preference: {
+        key:   READ_WHATS_NEW,
+        value: rancherVersion
+      },
+      primaryAction: {
+        label:  t('landing.whatsNew.link'),
+        target: releaseNotesUrl
+      }
+    };
+
+    await dispatch('notifications/add', notification);
+  }
+}

package/utils/selector-typed.ts

@@ -34,7 +34,7 @@ export async function matching({
   $store,
   inScopeCount = undefined,
   namespace = undefined,
-  transient = false,
+  transient = true,
 }: {
   /**
    * Standard kube label selector object.
@@ -101,7 +101,12 @@ export async function matching({
   const filterByNamespaceButNoNamespace = isNamespaced && !!namespace && (!safeNamespaces || safeNamespaces.length === 0);
   const explicityNullLabelSelector = labelSelector === null || (labelSelector?.matchLabels === null && !labelSelector.matchExpressions === null);
 
-  if (noCandidates || filterByNamespaceButNoNamespace || explicityNullLabelSelector) {
+  // If we have matchLabels or matchExpression entries they must have a key
+  const matchLabelKeys = Object.keys(labelSelector.matchLabels || {});
+  const invalidMatchLabelKeys = matchLabelKeys.length && matchLabelKeys.filter((k) => !k).length;
+  const invalidMatchExpressionKeys = labelSelector?.matchExpressions?.length && labelSelector.matchExpressions.filter((me) => !me.key).length;
+
+  if (noCandidates || filterByNamespaceButNoNamespace || explicityNullLabelSelector || invalidMatchLabelKeys || invalidMatchExpressionKeys) {
     return generateMatchingResponse([], inScopeCount || 0);
   }
 

package/utils/settings.ts

@@ -59,7 +59,10 @@ export const fetchInitialSettings = async(store: Store<any>): Promise<any> => {
     // We're authed, we will always get the full list
     return await store.dispatch('management/findAll', {
       type: MANAGEMENT.SETTING,
-      opt:  { url: `/v1/${ pluralize(MANAGEMENT.SETTING) }` }
+      opt:  {
+        url:   `/v1/${ pluralize(MANAGEMENT.SETTING) }`,
+        watch: false, // Watch requires FF and Settings, see `loadManagement` to see how this is handled
+      }
     } );
   }
 

package/utils/string.js

@@ -358,3 +358,27 @@ export function isBase64(value) {
 export function generateRandomAlphaString(length) {
   return Array.from({ length }, () => String.fromCharCode(97 + Math.random() * 26 | 0)).join('');
 }
+
+/**
+ * Generate a key-value nested object from a list of paths that represents a directory tree.
+ *
+ * Each key is a subpath
+ * Each value contains the children of the subpath
+ */
+export function pathArrayToTree(paths) {
+  const result = [];
+  const level = { result };
+
+  paths.forEach((path) => {
+    path?.split('/').reduce((r, name) => {
+      if (!r[name]) {
+        r[name] = { result: [] };
+        r.result.push({ name, children: r[name].result });
+      }
+
+      return r[name];
+    }, level);
+  });
+
+  return result;
+}

package/utils/style.ts

@@ -0,0 +1,39 @@
+export type StateColor = 'success' | 'warning' | 'error' | 'info' | 'disabled';
+export const ALL_STATE_COLORS: StateColor[] = ['success', 'warning', 'error', 'info', 'disabled'];
+
+export function stateColorCssVar(color: StateColor) {
+  return `var(--${ color })`;
+}
+
+export function toBgColor(color?: StateColor) {
+  const withDefaultColor = color || 'info';
+
+  return `bg-${ withDefaultColor }`;
+}
+
+/**
+ * Checks if 'a' is considered a higher alert than 'b'
+ * @param a target
+ * @param b comparison
+ * @returns true if 'a' is a higher alert than 'b' and false otherwise.
+ */
+export function isHigherAlert(a: StateColor, b: StateColor) {
+  const order: StateColor[] = ['info', 'success', 'warning', 'error'];
+
+  const aIndex = order.indexOf(a);
+  const bIndex = order.indexOf(b);
+
+  return aIndex > bIndex;
+}
+
+export function getHighestAlertColor(colors: StateColor[]) {
+  let highestAlert: StateColor = 'info';
+
+  for (const color of colors) {
+    if (isHigherAlert(color, highestAlert)) {
+      highestAlert = color;
+    }
+  }
+
+  return highestAlert;
+}

package/utils/{time.js → time.ts}

@@ -1,4 +1,7 @@
 import day from 'dayjs';
+import { escapeHtml } from '@shell/utils/string';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { type Store } from 'vuex';
 
 const FACTORS = [60, 60, 24];
 const LABELS = ['sec', 'min', 'hour', 'day'];
@@ -6,7 +9,7 @@ const LABELS = ['sec', 'min', 'hour', 'day'];
 // Diff two dates and return an object with values for presentation
 // If 't' is also passed, 'string' property is set on the return object with the diff formatted as a string
 // e.g. formats a date difference to return '1 day', '20 hours' etc
-export function diffFrom(value, from, t) {
+export function diffFrom(value: any, from: any, t: any) {
   const now = day();
 
   from = from || now;
@@ -15,7 +18,7 @@ export function diffFrom(value, from, t) {
   let absDiff = Math.abs(diff);
 
   let next = 1;
-  let label = '?';
+  let label: any = '?';
 
   let i = 0;
 
@@ -30,7 +33,7 @@ export function diffFrom(value, from, t) {
   } else {
     label = Math.floor(absDiff);
   }
-  const ret = {
+  const ret: any = {
     diff,
     absDiff,
     label,
@@ -47,7 +50,7 @@ export function diffFrom(value, from, t) {
   return ret;
 }
 
-export function safeSetTimeout(timeout, callback, that) {
+export function safeSetTimeout(timeout: any, callback: any, that: any) {
   if (timeout <= 2147483647) {
     // Max value setTimeout can take is max 32 bit int (about 24.9 days)
     return setTimeout(() => {
@@ -56,7 +59,7 @@ export function safeSetTimeout(timeout, callback, that) {
   }
 }
 
-export function getSecondsDiff(startDate, endDate) {
+export function getSecondsDiff(startDate: any, endDate: any) {
   return Math.round(
     Math.abs(Date.parse(endDate) - Date.parse(startDate)) / 1000
   );
@@ -68,7 +71,7 @@ export function getSecondsDiff(startDate, endDate) {
  * diff:  update frequency in seconds
  * label: content of the cell's column
  */
-export function elapsedTime(seconds) {
+export function elapsedTime(seconds: any) {
   if (!seconds) {
     return {};
   }
@@ -119,3 +122,19 @@ export function elapsedTime(seconds) {
     label: `${ hours }h${ minutes - (hours * 60) }m`,
   };
 }
+
+/**
+   * Format date and time using user preferences
+   * @param value Date string to format
+   * @returns Formatted date string
+   */
+export const dateTimeFormat = (value: string | undefined, store: Store<any>): string => {
+  if (!value) return '';
+
+  const dateFormat = escapeHtml( store.getters['prefs/get'](DATE_FORMAT));
+  const timeFormat = escapeHtml( store.getters['prefs/get'](TIME_FORMAT));
+
+  const format = `${ dateFormat } ${ timeFormat }`;
+
+  return day(value).format(format);
+};

package/utils/uiplugins.ts

@@ -321,3 +321,25 @@ export async function getHelmChart(store: any, repository: any, chartName: strin
     await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
   }
 }
+
+export async function onExtensionsReady(store: any) {
+  const alreadyReady = store.getters['uiplugins/ready'];
+
+  if (alreadyReady) {
+    return;
+  }
+
+  const extensions = store.getters['uiplugins/plugins'] || [];
+
+  for (let i = 0; i < extensions.length; i++) {
+    const ext = extensions[i];
+
+    try {
+      await ext.onLogIn(store);
+    } catch (e) {
+      console.error(`Exception caught in onReady for extension ${ ext.name }`, e); // eslint-disable-line no-console
+    }
+  }
+
+  await store.dispatch('uiplugins/setReady', true);
+}

package/utils/validators/formRules/__tests__/index.test.ts

@@ -96,8 +96,8 @@ describe('formRules', () => {
     );
   });
 
-  describe('gitRepository', () => {
-    const message = JSON.stringify({ message: 'validation.git.repository' });
+  describe('urlRepository', () => {
+    const message = JSON.stringify({ message: 'validation.git.url' });
     const testCases = [
       // Valid HTTP(s)
       ['https://github.com/rancher/dashboard.git', undefined],
@@ -128,7 +128,40 @@ describe('formRules', () => {
     it.each(testCases)(
       'should return undefined or correct message based on the provided Git url: %p',
       (url, expected) => {
-        const formRuleResult = formRules.gitRepository(url);
+        const formRuleResult = formRules.urlRepository(url);
+
+        expect(formRuleResult).toStrictEqual(expected);
+      }
+    );
+  });
+
+  describe('ociRegistry', () => {
+    const message = JSON.stringify({ message: 'validation.oci.url' });
+    const testCases = [
+      // Valid
+      ['oci://bucket/object', undefined],
+      ['oci://region.objectstorage.example.com/n', undefined],
+      ['oci://a', undefined],
+      ['oci://UPPERCASE/path', undefined],
+
+      // Invalid
+      ['http://example.com/oci', message],
+      ['https://oci.cloud.com', message],
+      ['ftp://oci.server.net', message],
+      ['/path/to/oci', message],
+      ['oci:/missing/slash', message],
+      ['oci:', message],
+      ['oci://', message],
+      ['oci://space between', message],
+      ['oci://resource multiple spaces', message],
+      ['', message],
+      [undefined, message],
+    ];
+
+    it.each(testCases)(
+      'should return undefined or correct message based on the provided OCI url: %p',
+      (url, expected) => {
+        const formRuleResult = formRules.ociRegistry(url);
 
         expect(formRuleResult).toStrictEqual(expected);
       }

package/utils/validators/formRules/index.ts

@@ -170,19 +170,27 @@ export default function(
 
   const url: Validator = (val: string) => val && !isUrl(val) ? t('validation.setting.serverUrl.url') : undefined;
 
-  const gitRepository: Validator = (url: string) => {
+  const genericUrl: Validator = (val: string) => val && !isUrl(val) ? t('validation.genericUrl') : undefined;
+
+  const urlRepository: Validator = (url: string) => {
     const regexPart1 = /^((http|git|ssh|http(s)|file|\/?)|(git@[\w\.]+))(:(\/\/)?)/gm;
     const regexPart2 = /^([\w\.@\:\/\-]+)([\d\/\w.-]+?)(.git){0,1}(\/)?$/gm;
 
     if (url) {
       const urlPart2 = url.replaceAll(regexPart1, '');
 
-      return !urlPart2 || url === urlPart2 || !regexPart2.test(urlPart2.replaceAll('%20', '')) ? t('validation.git.repository') : undefined;
+      return !urlPart2 || url === urlPart2 || !regexPart2.test(urlPart2.replaceAll('%20', '')) ? t('validation.git.url') : undefined;
     }
 
     return undefined;
   };
 
+  const ociRegistry: Validator = (url: string) => {
+    const regex = /^oci:\/\/\S+$/gm;
+
+    return !regex.test(url) ? t('validation.oci.url') : undefined;
+  };
+
   const alphanumeric: Validator = (val: string) => val && !/^[a-zA-Z0-9]+$/.test(val) ? t('validation.alphanumeric', { key }) : undefined;
 
   const interval: Validator = (val: string) => !/^\d+[hms]$/.test(val) ? t('validation.monitoring.route.interval', { key }) : undefined;
@@ -527,7 +535,7 @@ export default function(
     dnsLabelRestricted,
     externalName,
     fileRequired,
-    gitRepository,
+    urlRepository,
     groupsAreValid,
     hostname,
     imageUrl,
@@ -536,12 +544,14 @@ export default function(
     localhost,
     trailingForwardSlash,
     url,
+    genericUrl,
     matching,
     maxLength,
     maxValue,
     minLength,
     minValue,
     noUpperCase,
+    ociRegistry,
     portNumber,
     registryUrl,
     required,

package/utils/window.js

@@ -28,7 +28,7 @@ export class Popup {
     this.popup = null;
   }
 
-  open(url, name, opt) {
+  open(url, name, opt, doNotPollForClosure) {
     this.onOpen();
     this.popup = open(url, name, opt);
 
@@ -36,11 +36,15 @@ export class Popup {
       throw new Error('Please disable your popup blocker for this site');
     }
 
-    const timer = setInterval(() => {
-      if (this.popup.closed) {
-        clearInterval(timer);
-        this.onClose();
-      }
-    }, 500);
+    // In some cases, for example, if the origin policy does not allow, we will think the window has closed
+    // when it has not - we will see it as closed, because we don't have access
+    if (!doNotPollForClosure) {
+      const timer = setInterval(() => {
+        if (this.popup.closed) {
+          clearInterval(timer);
+          this.onClose();
+        }
+      }, 500);
+    }
   }
 }

package/components/__tests__/ApplicationCard.test.ts

@@ -1,27 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ApplicationCard from '@shell/components/cards/ApplicationCard.vue';
-
-describe('component: ApplicationCard', () => {
-  const wrapper = mount(ApplicationCard, {
-    slots: {
-      cardIcon:   '<i class="icon icon-fw icon-epinio"></i>',
-      'top-left': '<h1>Routes</h1> <ul><li> <a target="_blank" rel="noopener noreferrer nofollow"> route1 </a> </li> <li><a target="_blank" rel="noopener noreferrer nofollow"> route1 </a></li> </ul>',
-    }
-  });
-
-  it.each([
-    'cardIcon',
-    'top-left',
-    'top-right',
-    'resourcesCount',
-  ])('should have a populated %p slot', (slot) => {
-    const content = '<div>text</div>';
-    const ele = mount(ApplicationCard, { slots: { [slot]: content } });
-
-    expect(ele.find(`[data-testid="${ slot }-section"`).find('div').html()).toContain(content);
-  });
-
-  it('should have card-icon slot with an icon', () => {
-    expect(wrapper.find('[data-testid="cardIcon-section"]').find('i').classes()).toContain('icon-epinio');
-  });
-});