@rancher/shell 3.0.4 → 3.0.5-rc.2

package/utils/validators/formRules/index.ts

@@ -62,8 +62,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 +170,18 @@ 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 gitRepository: 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 undefined;
+  };
 
   const alphanumeric: Validator = (val: string) => val && !/^[a-zA-Z0-9]+$/.test(val) ? t('validation.alphanumeric', { key }) : undefined;
 

package/utils/validators/machine-pool.ts

@@ -0,0 +1,20 @@
+const FIELDS = {
+  NAME:     'pool.name',
+  QUANTITY: 'pool.quantity'
+};
+
+const RULESETS = [
+  {
+    path:  FIELDS.QUANTITY,
+    rules: ['requiredInt', 'isPositive'],
+  },
+  {
+    path:  FIELDS.NAME,
+    rules: ['required'],
+  }
+];
+
+export const MACHINE_POOL_VALIDATION = {
+  FIELDS,
+  RULESETS
+};

package/components/DisableAuthProviderModal.vue

@@ -1,114 +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;"
-    @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>

package/components/MoveModal.vue

@@ -1,166 +0,0 @@
-<script>
-import { mapState, mapGetters } from 'vuex';
-import { Card } from '@components/Card';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { MANAGEMENT } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
-import { PROJECT } from '@shell/config/labels-annotations';
-
-export default {
-  emits: ['moving'],
-
-  components: {
-    AsyncButton, Card, LabeledSelect, Loading, AppModal
-  },
-
-  async fetch() {
-    this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
-  },
-
-  data() {
-    return {
-      modalName: 'move-modal', projects: [], targetProject: null, showModal: false
-    };
-  },
-
-  computed: {
-    ...mapState('action-menu', ['showPromptMove', 'toMove']),
-    ...mapGetters(['currentCluster']),
-
-    excludedProjects() {
-      return this.toMove.filter((namespace) => !!namespace.project).map((namespace) => namespace.project.shortId);
-    },
-
-    projectOptions() {
-      return this.projects.reduce((inCluster, project) => {
-        if (!this.excludedProjects.includes(project.shortId) && project.spec?.clusterName === this.currentCluster.id) {
-          inCluster.push({
-            value: project.shortId,
-            label: project.nameDisplay
-          });
-        }
-
-        return inCluster;
-      }, []);
-    }
-  },
-
-  watch: {
-    showPromptMove(show) {
-      if (show) {
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    }
-  },
-
-  methods: {
-    close() {
-      this.$store.commit('action-menu/togglePromptMove');
-    },
-
-    async move(finish) {
-      const cluster = this.$store.getters['currentCluster'];
-      const clusterWithProjectId = `${ cluster.id }:${ this.targetProject }`;
-
-      const promises = this.toMove.map((namespace) => {
-        namespace.setLabel(PROJECT, this.targetProject);
-        namespace.setAnnotation(PROJECT, clusterWithProjectId);
-
-        return namespace.save();
-      });
-
-      try {
-        this.$emit('moving');
-        await Promise.all(promises);
-        finish(true);
-        this.targetProject = null;
-        this.close();
-      } catch (ex) {
-        finish(false);
-      }
-    }
-  }
-};
-</script>
-<template>
-  <app-modal
-    v-if="showModal"
-    class="move-modal"
-    :name="modalName"
-    :width="440"
-    height="auto"
-    @close="close"
-  >
-    <Loading v-if="$fetchState.pending" />
-    <Card
-      v-else
-      class="move-modal-card"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4 class="text-default-text">
-          {{ t('moveModal.title') }}
-        </h4>
-      </template>
-      <template #body>
-        <div>
-          {{ t('moveModal.description') }}
-          <ul class="namespaces">
-            <li
-              v-for="(namespace, i) in toMove"
-              :key="i"
-            >
-              {{ namespace.nameDisplay }}
-            </li>
-          </ul>
-        </div>
-        <LabeledSelect
-          v-model:value="targetProject"
-          :options="projectOptions"
-          :label="t('moveModal.targetProject')"
-        />
-      </template>
-      <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          :action-label="t('moveModal.moveButtonLabel')"
-          class="btn bg-primary ml-10"
-          :disabled="!targetProject"
-          @click="move"
-        />
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang='scss'>
-  .move-modal {
-    .namespaces {
-      max-height: 200px;
-      overflow-y: scroll;
-    }
-
-    .move-modal-card {
-        box-shadow: none;
-
-        border-radius: var(--border-radius);
-    }
-
-    .actions {
-      text-align: right;
-    }
-    .card-actions {
-      display: flex;
-      justify-content: center;
-    }
-  }
-</style>

package/components/PromptChangePassword.vue

@@ -1,123 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ChangePassword from '@shell/components/form/ChangePassword';
-import { Card } from '@components/Card';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
-
-export default {
-  components: {
-    Card, AsyncButton, ChangePassword, AppModal
-  },
-  data() {
-    return {
-      valid: false, password: '', showModal: false
-    };
-  },
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
-  methods:  {
-    show(show) {
-      if (show) {
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    },
-    async submit(buttonCb) {
-      try {
-        await this.$refs.changePassword.save();
-        this.show(false);
-        buttonCb(true);
-      } catch (err) {
-        buttonCb(false);
-      }
-    }
-  },
-};
-</script>
-
-<template>
-  <app-modal
-    v-if="showModal"
-    custom-class="change-password-modal"
-    data-testid="change-password__modal"
-    name="password-modal"
-    :width="500"
-    :height="465"
-    :trigger-focus-trap="true"
-    @close="show(false)"
-  >
-    <Card
-      class="prompt-password"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4 class="text-default-text">
-          {{ t("changePassword.title") }}
-        </h4>
-      </template>
-
-      <template #body>
-        <form @submit.prevent>
-          <ChangePassword
-            ref="changePassword"
-            @valid="valid = $event"
-          />
-        </form>
-      </template>
-
-      <template #actions>
-        <!-- type reset is required by lastpass -->
-        <button
-          class="btn role-secondary"
-          role="button"
-          :aria-label="t('changePassword.cancel')"
-          type="reset"
-          @click="show(false)"
-        >
-          {{ t("changePassword.cancel") }}
-        </button>
-        <AsyncButton
-          type="submit"
-          mode="apply"
-          class="btn bg-error ml-10"
-          :disabled="!valid"
-          value="LOGIN"
-          @click="submit"
-        />
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang="scss" scoped>
-  .prompt-password {
-    :deep() .card-wrap {
-      display: flex;
-      flex-direction: column;
-
-      .card-body {
-        flex: 1;
-        justify-content: start;
-        & > div {
-          flex: 1;
-          display: flex;
-        }
-      }
-
-      .card-actions {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-      }
-    }
-  }
-
-  .prompt-password {
-    flex: 1;
-    display: flex;
-    form {
-      flex: 1;
-    }
-  }
-</style>

package/components/fleet/FleetBundleResources.vue

@@ -1,86 +0,0 @@
-<script>
-import { colorForState, stateDisplay, stateSort } from '@shell/plugins/dashboard-store/resource-class';
-import SortableTable from '@shell/components/SortableTable';
-import { randomStr } from '@shell/utils/string';
-
-export default {
-  name: 'FleetBundleResources',
-
-  components: { SortableTable },
-
-  props: {
-    value: {
-      type:    Array,
-      default: () => [],
-    }
-  },
-
-  computed: {
-    computedResources() {
-      return this.value.map((item) => {
-        const { state } = item;
-        const color = colorForState(state).replace('text-', 'bg-');
-        const display = stateDisplay(state);
-
-        return {
-          ...item,
-          tableKey:        randomStr(),
-          stateBackground: color,
-          stateDisplay:    display,
-          stateSort:       stateSort(color, display),
-        };
-      });
-    },
-
-    resourceHeaders() {
-      return [
-        {
-          name:      'state',
-          value:     'state',
-          label:     'State',
-          sort:      'stateSort',
-          formatter: 'BadgeStateFormatter',
-          width:     100,
-        },
-        {
-          name:  'apiVersion',
-          value: 'apiVersion',
-          sort:  'apiVersion',
-          label: 'API Version',
-        },
-        {
-          name:  'kind',
-          value: 'kind',
-          sort:  'kind',
-          label: 'Kind',
-        },
-        {
-          name:      'name',
-          value:     'name',
-          sort:      'name',
-          label:     'Name',
-          formatter: 'LinkDetail',
-        },
-        {
-          name:  'namespace',
-          value: 'namespace',
-          sort:  'namespace',
-          label: 'Namespace',
-        },
-      ];
-    },
-  }
-};
-</script>
-
-<template>
-  <SortableTable
-    :rows="computedResources"
-    :headers="resourceHeaders"
-    :table-actions="false"
-    :row-actions="false"
-    key-field="tableKey"
-    default-sort-by="state"
-    :paged="true"
-  />
-</template>

package/components/formatter/ExtensionCache.vue

@@ -1,74 +0,0 @@
-<script>
-import { BadgeState } from '@components/BadgeState';
-import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
-
-export default {
-  props: {
-    value: {
-      type:    String,
-      default: ''
-    }
-  },
-
-  components: { BadgeState },
-
-  data() {
-    const STATES = {
-      cached: {
-        color: 'info', icon: 'dot-open', label: 'Cached', compoundIcon: 'checkmark'
-      },
-      pending: {
-        color: 'warning', icon: 'tag', label: 'In Progress', compoundIcon: 'info'
-      },
-      disabled: {
-        color: 'error', icon: 'dot-half', label: 'Cache Disabled', compoundIcon: 'info'
-      },
-    };
-
-    return {
-      STATES,
-      stateDisplay:    '',
-      stateBackground: ''
-    };
-  },
-
-  watch: {
-    value: {
-      handler() {
-        const out = this.value || 'pending';
-        const color = this.colorForState(out);
-
-        this.stateDisplay = stateDisplay(out);
-        this.stateBackground = color.replace('text-', 'bg-');
-      },
-      immediate: true
-    }
-  },
-
-  methods: {
-    colorForState(state) {
-      const key = (state).toLowerCase();
-      let color;
-
-      if ( this.STATES[key] && this.STATES[key].color ) {
-        color = this.STATES[key].color;
-      }
-
-      if ( !color ) {
-        color = 'info';
-      }
-
-      return `text-${ color }`;
-    }
-  }
-};
-</script>
-
-<template>
-  <div>
-    <BadgeState
-      :color="stateBackground"
-      :label="stateDisplay"
-    />
-  </div>
-</template>

package/components/formatter/Port.vue

@@ -1,24 +0,0 @@
-<script>
-export default {
-  props: {
-    value: {
-      type:    Array,
-      default: () => []
-    }
-  },
-  data() {
-    const { hostPort = '', protocol = '' } = this.value[0] || {};
-
-    return { hostPort, protocol };
-  }
-};
-</script>
-
-<template>
-  <div v-if="hostPort">
-    {{ hostPort+'/'+protocol }}
-  </div>
-  <div v-else>
-    —
-  </div>
-</template>

package/components/formatter/SecretType.vue

@@ -1,41 +0,0 @@
-<script>
-import { SERVICE_ACCOUNT } from '@shell/config/types';
-export default {
-  props: {
-    value: {
-      type:    [String, Object],
-      default: 'Opaque'
-    }
-  },
-  data() {
-    if (this.value.typeDisplay) {
-      this.findServiceAccount();
-
-      return { typeDisplay: this.value.typeDisplay, serviceAccountLink: null };
-    }
-
-    return { typeDisplay: this.value, serviceAccountLink: null };
-  },
-  methods: {
-    async findServiceAccount() {
-      const serviceAccount = await this.$store.dispatch('cluster/find', { type: SERVICE_ACCOUNT, id: this.value.serviceAccountID });
-
-      if (serviceAccount) {
-        this.serviceAccountLink = serviceAccount.detailLocation;
-      }
-    }
-  }
-};
-</script>>
-
-<template>
-  <router-link
-    v-if="serviceAccountLink"
-    :to="serviceAccountLink"
-  >
-    {{ typeDisplay }}
-  </router-link>
-  <div v-else>
-    {{ typeDisplay }}
-  </div>
-</template>