dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-logTest.1

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

@@ -1,7 +1,7 @@
 import { matchesSomeRegex } from '@shell/utils/string';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { CATALOG } from '@shell/config/types';
-import { UI_PLUGIN_BASE_URL, isSupportedChartVersion } from '@shell/config/uiplugins';
+import { UI_PLUGIN_BASE_URL, isSupportedChartVersion, UI_PLUGIN_LABELS } from '@shell/config/uiplugins';
 
 const MAX_RETRIES = 10;
 const RETRY_WAIT = 2500;
@@ -44,9 +44,11 @@ export async function getLatestExtensionVersion(
  *
  * @param store Vue store
  * @param name Name of the extension
+ * @param maxRetries Number of times to check for availability
+ * @param retryWait Gap (in ms) between availability checks
  * @returns the extension object when available, null if timed out waiting for it to be available
  */
-export async function waitForUIExtension(store: any, name: string): Promise<any> {
+export async function waitForUIExtension(store: any, name: string, maxRetries = MAX_RETRIES, retryWait = RETRY_WAIT): Promise<any> {
   let tries = 0;
 
   while (true) {
@@ -69,11 +71,11 @@ export async function waitForUIExtension(store: any, name: string): Promise<any>
 
     tries++;
 
-    if (tries > MAX_RETRIES) {
+    if (tries > maxRetries) {
       return null;
     }
 
-    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+    await new Promise((resolve) => setTimeout(resolve, retryWait));
   }
 }
 
@@ -82,9 +84,11 @@ export async function waitForUIExtension(store: any, name: string): Promise<any>
  *
  * @param store Vue store
  * @param extension Extension object
+ * @param maxRetries Number of times to check for availability
+ * @param retryWait Gap (in MS) between availability checks
  * @returns true when available, false if timed out waiting for it to be available
  */
-export async function waitForUIPackage(store: any, extension: any): Promise<boolean> {
+export async function waitForUIPackage(store: any, extension: any, maxRetries = MAX_RETRIES, retryWait = RETRY_WAIT): Promise<boolean> {
   let tries = 0;
 
   const { name, version } = extension;
@@ -104,11 +108,11 @@ export async function waitForUIPackage(store: any, extension: any): Promise<bool
 
     tries++;
 
-    if (tries > MAX_RETRIES) {
+    if (tries > maxRetries) {
       return false;
     }
 
-    await new Promise((resolve) => setTimeout(resolve, RETRY_WAIT));
+    await new Promise((resolve) => setTimeout(resolve, retryWait));
   }
 }
 
@@ -176,10 +180,17 @@ export async function getHelmRepositoryExact(store: any, url: string): Promise<H
  *
  * @param store Vue store
  * @param urlRegexes Regex to match a community repository
+ * @param catalogImages Catalog images to match against the repository's labels
  * @returns HelmRepository
  */
-export async function getHelmRepositoryMatch(store: any, urlRegexes: string[]): Promise<HelmRepository> {
+export async function getHelmRepositoryMatch(store: any, urlRegexes: string[], catalogImages: string[]): Promise<HelmRepository> {
   return await getHelmRepository(store, (repository: any) => {
+    // if installed from rancher/ui-plugin-catalog or rancher/ui-extension-harvester-ui-extension
+    const catalog = repository?.metadata?.labels?.[UI_PLUGIN_LABELS.CATALOG_IMAGE] || '';
+
+    if (catalogImages.includes(catalog)) {
+      return true;
+    }
     const target = repository.spec?.gitBranch ? repository.spec?.gitRepo : repository.spec?.url;
 
     return matchesSomeRegex(target, urlRegexes);
@@ -317,3 +328,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/v-sphere.ts

@@ -40,7 +40,11 @@ class VSphereUtils {
       generateName, upstreamClusterName, upstreamNamespace, downstreamName, downstreamNamespace
     }: SecretDetails): Promise<SecretJson | undefined> {
     // Fetch secrets in a specific namespace and partially matching the name to the generate name
-    const secrets = await $store.dispatch('management/request', { url: `/v1/${ SECRET }/${ upstreamNamespace }?filter=metadata.name=${ generateName }` });
+    const url = $store.getters['management/urlOptions'](
+      `/v1/${ SECRET }/${ upstreamNamespace }`,
+      { filter: { 'metadata.name': generateName } }
+    );
+    const secrets = await $store.dispatch('management/request', { url });
 
     // Filter by specific annotations
     const applicableSecret = secrets.data?.filter((s: any) => {

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

@@ -1,6 +1,7 @@
+import { Translation } from '@shell/types/t';
 import formRulesGenerator from '@shell/utils/validators/formRules';
 
-const mockT = (key: string, args: any) => {
+const mockT: Translation = (key: string, args: any) => {
   return JSON.stringify({
     message: key,
     ...args
@@ -8,6 +9,14 @@ const mockT = (key: string, args: any) => {
 };
 
 describe('formRules', () => {
+  it('should use "Value" as default label', () => {
+    const validators = formRulesGenerator(mockT, {});
+
+    const message = validators.required(null);
+
+    expect(message).toStrictEqual('{\"message\":\"validation.required\",\"key\":\"Value\"}');
+  });
+
   const formRules = formRulesGenerator(mockT, { key: 'testDisplayKey' });
 
   it('"required" : returns undefined when value supplied', () => {
@@ -87,39 +96,100 @@ describe('formRules', () => {
     );
   });
 
-  describe('gitRepository', () => {
-    const message = JSON.stringify({ message: 'validation.git.repository' });
+  describe('urlRepository', () => {
+    const message = JSON.stringify({ message: 'validation.repository.url' });
     const testCases = [
       // Valid HTTP(s)
       ['https://github.com/rancher/dashboard.git', undefined],
       ['http://github.com/rancher/dashboard.git', undefined],
       ['https://github.com/rancher/dashboard', undefined],
       ['https://github.com/rancher/dashboard/', undefined],
+      ['https://github.com/rancher/%20dashboard/', undefined],
+      ['https://github.com/rancher/dashboard/%20', undefined],
+      ['https://localhost:8005', undefined],
 
       // Valid SSH
       ['git@github.com:rancher/dashboard.git', undefined],
       ['git@github.com:rancher/dashboard', undefined],
       ['git@github.com:rancher/dashboard/', undefined],
+      ['git@github.com:rancher/%20dashboard/', undefined],
+      ['git@github.com:rancher/dashboard/%20', undefined],
 
       // Not valid HTTP(s)
       ['https://github.com/rancher/  dashboard.git', message],
       ['http://github.com/rancher/  dashboard.git', message],
+      ['http://github.com/ rancher/dashboard.git', message],
+      ['http://github.com /rancher/dashboard.git', message],
       ['https://github.com/rancher/dashboard ', message],
+      ['https%20://github.com/rancher/dashboard ', message],
+      ['ht%20tps://github.com/rancher/dashboard ', message],
+      ['https://git%20hub.com/rancher/dashboard/%20', message],
+      ['https://https://', message],
+      ['http:/ww.abc.com', message],
+      ['http:ww.abc.com', message],
       ['foo://github.com/rancher/dashboard/', message],
       ['github.com/rancher/dashboard/', message],
 
       // Not valid SSH
       ['git@github.com:rancher/  dashboard.git', message],
       ['git@github.com:rancher/dashboard  ', message],
+      ['git@github.com:rancher/  dashboard', message],
+      ['git @github.com:rancher/dashboard', message],
+      ['git@github.com:  rancher/dashboard', message],
       ['git@github.comrancher/dashboard', message],
-
-      [undefined, undefined]
+      ['git@githubcomrancher/dashboard', message],
+      ['%20git@github.comrancher/dashboard', message],
+      ['git@git%20hub.comrancher/dashboard', message],
+      ['git@.git', message],
+      ['git@', message],
+
+      [undefined, message],
+      ['', message]
     ];
 
     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://registry.example.com', undefined],
+      ['oci://myregistry.dev:5000', undefined],
+      ['oci://192.168.1.100', undefined],
+      ['oci://my.domain.com/my/image:tag', undefined],
+      ['oci://localhost:5000', undefined],
+      ['oci://region.objectstorage.example.com/n', undefined],
+
+      // Invalid
+      ['http://example.com/oci', message],
+      ['https://oci.cloud.com', message],
+      ['ftp://oci.server.net', message],
+      ['path/to/oci', message],
+      ['oci://a', message],
+      ['oci:/missing/slash', message],
+      ['oci:', message],
+      ['oci://', message],
+      ['oci://oci://duplicate/protocol', message],
+      ['oci  ://registry.example.com/foo/bar', message],
+      ['oci://registry.example.  com/foo/bar', message],
+      ['oci://registry.example.com/  foo/bar', 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

@@ -1,3 +1,4 @@
+import { parse } from '@shell/utils/url';
 import { RBAC } from '@shell/config/types';
 import { HCI } from '@shell/config/labels-annotations';
 import isEmpty from 'lodash/isEmpty';
@@ -62,8 +63,21 @@ export interface ValidationOptions {
   key?: string,
 }
 
-// "t" is the function name we use for getting a translated string
-export default function(t: Translation, { key = 'Value' }: ValidationOptions): { [key:string]: Validator<any> | ValidatorFactory } {
+/**
+ * @param t the function name we use for getting a translated string
+ * @param key the argument passed to the translation to reference the label
+ * @returns { Validator<any> | ValidatorFactory } A dictionary of actual validation functions or factories (require parameter)
+ * @description
+ * This function returns a set of validators that can be used in the form validation process.
+ * @example
+ * const validators = formRulesGenerator(t, { key: 'MyLabel' });
+ * validators.required(); // '"MyLabel" is required'
+ * validators.minLength(5)('123'); // '"MyLabel" must contain more than 5 characters'
+ */
+export default function(
+  t: Translation,
+  { key = 'Value' }: ValidationOptions
+): { [key: string]: Validator<any> | ValidatorFactory } {
   // utility validators these validators only get used by other validators
   const startDot: ValidatorFactory = (label: string): Validator => (val: string) => val?.slice(0, 1) === '.' ? t(`validation.dns.${ label }.startDot`, { key }) : undefined;
 
@@ -157,7 +171,86 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
 
   const url: Validator = (val: string) => val && !isUrl(val) ? t('validation.setting.serverUrl.url') : undefined;
 
-  const gitRepository: Validator = (val: string) => val && !/^((http|git|ssh|http(s)|file|\/?)|(git@[\w\.]+))(:(\/\/)?)([\w\.@\:\/\-]+)([\d\/\w.-]+?)(.git){0,1}(\/)?$/gm.test(val) ? t('validation.git.repository') : undefined;
+  const genericUrl: Validator = (val: string) => val && !isUrl(val) ? t('validation.genericUrl') : undefined;
+
+  const urlRepository: Validator = (url: string) => {
+    const message = t('validation.repository.url');
+
+    if (!url) {
+      return message;
+    }
+
+    if (url.includes(' ')) {
+      return message;
+    }
+
+    const {
+      protocol,
+      authority,
+      host,
+      path
+    } = parse(url);
+
+    // Test duplicate protocol
+    if (!host || protocol === host) {
+      return message;
+    }
+
+    // Test http(s) protocol
+    if (protocol && (!/^(http|http(s))/gm.test(protocol) || (!url.startsWith('https://') && !url.startsWith('http://')))) {
+      return message;
+    }
+
+    // Test ssh, authority must be valid (SSH user + host)
+    if (!protocol && !authority.endsWith(':')) {
+      return message;
+    }
+
+    // Encoded space characters (%20) are allowed only in the path
+    const hostAndPath = `${ host }${ path.replaceAll('%20', '') }`;
+
+    // Test host/path
+    if (!/^([\w\.@\:\/\-]+)([\d\/\w.-]+?)(.git){0,1}(\/)?$/gm.test(hostAndPath)) {
+      return message;
+    }
+
+    return undefined;
+  };
+
+  const ociRegistry: Validator = (url: string) => {
+    const message = t('validation.oci.url');
+
+    if (!url) {
+      return message;
+    }
+
+    if (url.includes(' ')) {
+      return message;
+    }
+
+    const {
+      protocol,
+      host,
+      path
+    } = parse(url);
+
+    // Test duplicate protocol
+    if (!host || protocol === host) {
+      return message;
+    }
+
+    // Test oci protocol
+    if (!url.startsWith('oci://')) {
+      return message;
+    }
+
+    // Test host/path
+    if (!/^([\w\.@\:\/\-]+)([\d\/\w.-]+?)(\/)?$/gm.test(`${ host }${ path }`)) {
+      return message;
+    }
+
+    return undefined;
+  };
 
   const alphanumeric: Validator = (val: string) => val && !/^[a-zA-Z0-9]+$/.test(val) ? t('validation.alphanumeric', { key }) : undefined;
 
@@ -503,7 +596,7 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     dnsLabelRestricted,
     externalName,
     fileRequired,
-    gitRepository,
+    urlRepository,
     groupsAreValid,
     hostname,
     imageUrl,
@@ -512,12 +605,14 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     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/vue.config.js

@@ -157,7 +157,7 @@ const getLoaders = (SHELL_ABS) => [
     test:    /\.m?[tj]sx?$/,
     // This excludes no modules except for node_modules/@rancher/... so that plugins can properly compile
     // when referencing @rancher/shell
-    exclude: /node_modules\/(?!(@rancher)\/).*/,
+    exclude: /node_modules\/(?!(dashboard-shell-shell)\/).*/,
     use:     [
       {
         loader:  'cache-loader',