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

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/components/AssignTo.vue

@@ -1,199 +0,0 @@
-<script>
-import { mapState, mapGetters } from 'vuex';
-import { FLEET, NORMAN } from '@shell/config/types';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import KeyValue from '@shell/components/form/KeyValue';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
-import { Card } from '@components/Card';
-import { Banner } from '@components/Banner';
-import { exceptionToErrorsArray } from '@shell/utils/error';
-import { set } from '@shell/utils/object';
-
-export default {
-  components: {
-    Card,
-    LabeledSelect,
-    KeyValue,
-    AsyncButton,
-    Banner,
-    AppModal
-  },
-
-  data() {
-    return {
-      errors:        [],
-      labels:        {},
-      moveTo:        this.workspace,
-      loaded:        false,
-      allWorkspaces: [],
-      showModal:     false,
-    };
-  },
-
-  computed: {
-    ...mapState('action-menu', ['showAssignTo', 'toAssign']),
-    ...mapGetters({ t: 'i18n/t' }),
-    ...mapGetters(['workspace']),
-
-    workspaceOptions() {
-      const out = this.allWorkspaces.map((x) => x.metadata?.name).filter((x) => !!x && x !== 'fleet-local');
-
-      return out;
-    },
-
-    resourceCount() {
-      return this.toAssign?.length || 0;
-    }
-  },
-
-  watch: {
-    async showAssignTo(show) {
-      if (show) {
-        await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
-        this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
-        this.moveTo = this.workspace;
-        this.loaded = true;
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    }
-  },
-
-  methods: {
-    close() {
-      this.errors = [];
-      this.labels = {};
-      this.moveTo = this.workspace;
-      this.$store.commit('action-menu/toggleAssignTo');
-    },
-
-    async apply(buttonDone) {
-      const promises = [];
-
-      this.errors = [];
-
-      for ( const fleetCluster of this.toAssign ) {
-        const c = await this.$store.dispatch(`rancher/clone`, { resource: fleetCluster.norman });
-
-        if ( !c ) {
-          continue;
-        }
-
-        c.fleetWorkspaceName = this.moveTo;
-
-        for ( const k of Object.keys(this.labels) ) {
-          if ( !c._labels ) {
-            set(c, '_labels', {});
-          }
-
-          set(c._labels, k, this.labels[k]);
-        }
-
-        promises.push(c.save());
-      }
-
-      try {
-        await Promise.all(promises);
-        buttonDone(true);
-        this.close();
-      } catch (e) {
-        this.errors = exceptionToErrorsArray(e);
-        buttonDone(false);
-      }
-    }
-  }
-};
-</script>
-
-<template>
-  <app-modal
-    v-if="showModal"
-    class="assign-modal"
-    name="assignTo"
-    styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    @close="close"
-  >
-    <Card
-      v-if="loaded"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4
-          v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
-          class="text-default-text"
-        />
-      </template>
-      <template #body>
-        <div class="pl-10 pr-10">
-          <form>
-            <LabeledSelect
-              v-model:value="moveTo"
-              data-testid="workspace_options"
-              :label="t('assignTo.workspace')"
-              :options="workspaceOptions"
-              placement="bottom"
-            />
-
-            <KeyValue
-              key="labels"
-              v-model:value="labels"
-              class="mt-20"
-              :add-label="t('labels.addSetLabel')"
-              :read-allowed="false"
-            />
-
-            <Banner
-              v-for="(err, i) in errors"
-              :key="i"
-              color="error"
-              :label="err"
-            />
-          </form>
-        </div>
-      </template>
-
-      <template #actions>
-        <div class="actions-container">
-          <button
-            class="btn role-secondary"
-            @click="close"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-
-          <AsyncButton
-            class="apply-btn"
-            mode="apply"
-            @click="apply"
-          />
-        </div>
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang='scss'>
-  .assign-modal {
-    border-radius: var(--border-radius);
-    overflow: scroll;
-    max-height: 100vh;
-    & ::-webkit-scrollbar-corner {
-      background: rgba(0,0,0,0);
-    }
-
-    .actions-container {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-
-      .apply-btn {
-        margin-left: 20px;
-      }
-    }
-  }
-</style>

package/components/DisableAuthProviderModal.vue

@@ -1,115 +0,0 @@
-<script>
-import { Card } from '@components/Card';
-import AppModal from '@shell/components/AppModal.vue';
-
-export default {
-  name: 'PromptRemove',
-
-  emits: ['disable'],
-
-  components: { Card, AppModal },
-  props:      {
-    /**
-     * Inherited global identifier prefix for tests
-     * Define a term based on the parent component to avoid conflicts on multiple components
-     */
-    componentTestid: {
-      type:    String,
-      default: 'disable-auth-provider'
-    }
-  },
-  data() {
-    return { showModal: false };
-  },
-  methods: {
-    show() {
-      this.showModal = true;
-    },
-    close() {
-      this.showModal = false;
-    },
-    disable() {
-      this.showModal = false;
-      this.$emit('disable');
-    },
-  }
-};
-</script>
-
-<template>
-  <app-modal
-    v-if="showModal"
-    custom-class="remove-modal"
-    name="disableAuthProviderModal"
-    :width="400"
-    height="auto"
-    styles="max-height: 100vh;"
-    :trigger-focus-trap="true"
-    @close="close"
-  >
-    <Card
-      class="disable-auth-provider"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4 class="text-default-text">
-          {{ t('promptRemove.title') }}
-        </h4>
-      </template>
-      <template #body>
-        <div class="mb-10">
-          <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
-        </div>
-      </template>
-      <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <div class="spacer" />
-        <button
-          class="btn role-primary bg-error ml-10"
-          :data-testid="componentTestid + '-confirm-button'"
-          @click="disable"
-        >
-          {{ t('generic.disable') }}
-        </button>
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang='scss'>
-  .disable-auth-provider {
-    &.card-container {
-      box-shadow: none;
-    }
-    #confirm {
-      width: 90%;
-      margin-left: 3px;
-    }
-
-    .remove-modal {
-        border-radius: var(--border-radius);
-        overflow: scroll;
-        max-height: 100vh;
-        & ::-webkit-scrollbar-corner {
-          background: rgba(0,0,0,0);
-        }
-    }
-
-    .actions {
-      text-align: right;
-    }
-
-    .card-actions {
-      display: flex;
-
-      .spacer {
-        flex: 1;
-      }
-    }
-  }
-</style>