@rancher/shell 3.0.9-rc.5 → 3.0.9

package/components/form/ResourceQuota/Project.vue

@@ -1,20 +1,20 @@
 <script>
-import ArrayList from '@shell/components/form/ArrayList';
-import Row from './ProjectRow';
 import { QUOTA_COMPUTED, TYPES } from './shared';
 import Banner from '@components/Banner/Banner.vue';
+import ResourceQuota from '@shell/components/form/ResourceQuota/ResourceQuotaEntry.vue';
+import { RcButton } from '@components/RcButton';
+import { uniqueId } from 'lodash';
 
 export default {
   emits: [
-    'remove',
     'input',
     'validationChanged',
   ],
 
   components: {
-    ArrayList,
-    Row,
     Banner,
+    RcButton,
+    ResourceQuota,
   },
 
   props: {
@@ -37,7 +37,7 @@ export default {
   },
 
   data() {
-    return { typeValues: null };
+    return { resourceQuotas: [] };
   },
 
   created() {
@@ -45,85 +45,129 @@ export default {
     this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
     this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
-    const limit = this.value.spec.resourceQuota.limit;
-    const extendedKeys = Object.keys(limit.extended || {});
+    this.quotasFromSpec();
 
-    this.typeValues = Object.keys(limit).flatMap((k) => {
-      if (k !== TYPES.EXTENDED) {
-        return k;
-      }
+    /**
+     * Register watcher using the imperative API to reduce churn when initialing
+     * data on first render
+     */
+    this.$watch(
+      'resourceQuotas',
+      () => {
+        const { projectLimit, nsLimit } = this.specFromQuotas();
+
+        this.$emit('input', { projectLimit, nsLimit });
+
+        const hasMissingExtendedIdentifier = this.resourceQuotas.some(
+          (quota) => quota.resourceType === TYPES.EXTENDED && !quota.resourceIdentifier
+        );
 
-      return extendedKeys.map((ek) => `extended.${ ek }`);
-    });
+        this.$emit('validationChanged', !hasMissingExtendedIdentifier);
+      },
+      { deep: true }
+    );
   },
 
   computed: { ...QUOTA_COMPUTED },
 
   methods: {
-    updateType(event) {
-      const { index, type } = event;
-
-      this.typeValues[index] = type;
-
-      this.validateTypes();
+    addResource() {
+      this.resourceQuotas.push({
+        id:                    uniqueId(),
+        resourceType:          TYPES.EXTENDED,
+        resourceIdentifier:    '',
+        projectLimit:          '',
+        namespaceDefaultLimit: '',
+      });
     },
-    updateResourceIdentifier({ type, customType, index }) {
-      if (type.startsWith(TYPES.EXTENDED)) {
-        this.typeValues[index] = `extended.${ customType }`;
-      }
 
-      this.validateTypes();
+    removeResource(id) {
+      this.resourceQuotas = this.resourceQuotas.filter((quota) => quota.id !== id);
     },
-    validateTypes(isValid = true) {
-      if (!isValid) {
-        this.$emit('validationChanged', false);
-
-        return;
-      }
 
-      const hasMissingExtendedValue = this.typeValues.some((typeValue) => {
-        if (!typeValue.startsWith(TYPES.EXTENDED)) {
-          return false;
-        }
+    remainingTypes(currentType) {
+      const usedTypes = this.resourceQuotas
+        .map((quota) => quota.resourceType)
+        .filter((resourceType) => resourceType !== TYPES.EXTENDED);
 
-        const [, resourceIdentifier] = typeValue.split('.');
+      return this.mappedTypes.filter((mappedType) => mappedType.value === TYPES.EXTENDED ||
+        !usedTypes.includes(mappedType.value) ||
+        mappedType.value === currentType
+      );
+    },
 
-        return !resourceIdentifier;
-      });
+    specFromQuotas() {
+      const projectLimit = {};
+      const nsLimit = {};
 
-      this.$emit('validationChanged', !hasMissingExtendedValue);
-    },
-    remainingTypes(currentType) {
-      return this.mappedTypes
-        .filter((mappedType) => {
-          if (mappedType.value === TYPES.EXTENDED) {
-            return true;
+      this.resourceQuotas.forEach((quota) => {
+        if (quota.resourceType === TYPES.EXTENDED) {
+          if (quota.resourceIdentifier) {
+            if (!projectLimit.extended) {
+              projectLimit.extended = {};
+            }
+            if (!nsLimit.extended) {
+              nsLimit.extended = {};
+            }
+            projectLimit.extended[quota.resourceIdentifier] = quota.projectLimit;
+            nsLimit.extended[quota.resourceIdentifier] = quota.namespaceDefaultLimit;
           }
+        } else {
+          projectLimit[quota.resourceType] = quota.projectLimit;
+          nsLimit[quota.resourceType] = quota.namespaceDefaultLimit;
+        }
+      });
 
-          return !this.typeValues.includes(mappedType.value) || mappedType.value === currentType;
-        });
+      return { projectLimit, nsLimit };
     },
-    emitRemove(data) {
-      this.typeValues = this.typeValues.filter((_typeValue, index) => {
-        return index !== data.index;
-      });
 
-      this.$emit('remove', data.row?.value);
+    quotasFromSpec() {
+      const projectLimit = this.value?.spec?.resourceQuota?.limit || {};
+      const nsLimit = this.value?.spec?.namespaceDefaultResourceQuota?.limit || {};
 
-      this.validateTypes();
+      Object.keys(projectLimit).forEach((key) => {
+        if (key !== TYPES.EXTENDED) {
+          this.resourceQuotas.push({
+            id:                    uniqueId(),
+            resourceType:          key,
+            resourceIdentifier:    key,
+            projectLimit:          projectLimit[key],
+            namespaceDefaultLimit: nsLimit[key] || '',
+          });
+        } else {
+          Object.keys(projectLimit.extended || {}).forEach((extKey) => {
+            this.resourceQuotas.push({
+              id:                    uniqueId(),
+              resourceType:          TYPES.EXTENDED,
+              resourceIdentifier:    extKey,
+              projectLimit:          projectLimit.extended[extKey],
+              namespaceDefaultLimit: (nsLimit.extended || {})[extKey] || '',
+            });
+          });
+        }
+      });
     }
   },
 };
 </script>
 <template>
-  <div>
+  <div
+    role="grid"
+    :aria-label="t('resourceQuota.ariaLabel.grid')"
+  >
     <Banner
       color="info"
       label-key="resourceQuota.banner"
       class="mb-20"
     />
-    <div class="headers mb-10">
-      <div class="mr-10">
+    <div
+      role="row"
+      class="headers mb-10"
+    >
+      <div
+        role="columnheader"
+        class="mr-10"
+      >
         <label>
           {{ t('resourceQuota.headers.resourceType') }}
           <span
@@ -132,7 +176,10 @@ export default {
           >*</span>
         </label>
       </div>
-      <div class="mr-20">
+      <div
+        role="columnheader"
+        class="mr-20"
+      >
         <label>
           {{ t('resourceQuota.headers.resourceIdentifier') }}
           <span
@@ -145,37 +192,44 @@ export default {
           />
         </label>
       </div>
-      <div class="mr-20">
+      <div
+        role="columnheader"
+        class="mr-20"
+      >
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div class="mr-10">
+      <div
+        role="columnheader"
+        class="mr-10"
+      >
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>
-    <ArrayList
-      v-model:value="typeValues"
-      label="Resources"
-      :add-label="t('resourceQuota.add.label')"
-      :default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
-      :add-allowed="remainingTypes().length > 0"
-      :mode="mode"
-      @remove="emitRemove"
-      @add="validateTypes(false)"
+    <template
+      v-for="(resourceQuota, resourceQuotaIndex) in resourceQuotas"
+      :key="resourceQuota.id"
     >
-      <template #columns="props">
-        <Row
-          :value="value"
-          :mode="mode"
-          :types="remainingTypes(typeValues[props.i])"
-          :type="typeValues[props.i]"
-          :type-values="typeValues"
-          :index="props.i"
-          @input="$emit('input', $event)"
-          @type-change="updateType($event)"
-          @update:resource-identifier="updateResourceIdentifier"
-        />
-      </template>
-    </ArrayList>
+      <ResourceQuota
+        :id="resourceQuota.id"
+        v-model:resource-type="resourceQuota.resourceType"
+        v-model:resource-identifier="resourceQuota.resourceIdentifier"
+        v-model:project-limit="resourceQuota.projectLimit"
+        v-model:namespace-default-limit="resourceQuota.namespaceDefaultLimit"
+        :index="resourceQuotaIndex + 1"
+        :types="remainingTypes(resourceQuota.resourceType)"
+        :mode="mode"
+        @remove="removeResource"
+      />
+    </template>
+    <div class="project-quotas-footer">
+      <rc-button
+        variant="tertiary"
+        data-testid="btn-add-resource"
+        @click="addResource"
+      >
+        {{ t('resourceQuota.add.label') }}
+      </rc-button>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -196,4 +250,8 @@ export default {
 .required {
   color: var(--error);
 }
+
+.project-quotas-footer {
+  margin-top: 24px;
+}
 </style>

package/components/form/ResourceQuota/ResourceQuotaEntry.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+import Select from '@shell/components/form/Select';
+import UnitInput from '@shell/components/form/UnitInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RcButton } from '@components/RcButton';
+
+import { TYPES } from './shared';
+import { useI18n } from '@shell/composables/useI18n';
+
+const props = defineProps<{
+  id: string,
+  index: number,
+  mode: string,
+  types: any[],
+}>();
+
+const emit = defineEmits(['remove']);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const resourceType = defineModel<string>('resourceType');
+const resourceIdentifier = defineModel<string>('resourceIdentifier');
+const projectLimit = defineModel<string>('projectLimit');
+const namespaceDefaultLimit = defineModel<string>('namespaceDefaultLimit');
+
+const typeOption = computed(() => {
+  return props.types.find((type) => type.value === resourceType.value) || {};
+});
+
+const isCustom = computed(() => {
+  return resourceType.value === TYPES.EXTENDED;
+});
+
+const removeAriaLabel = computed(() => {
+  let identifier;
+
+  if (isCustom.value) {
+    identifier = resourceIdentifier.value || t('generic.ariaLabel.genericRow', { index: String(props.index) });
+  } else {
+    identifier = typeOption.value?.label || t('generic.ariaLabel.genericRow', { index: String(props.index) });
+  }
+
+  return t('resourceQuota.ariaLabel.remove', { identifier });
+});
+
+const customTypeRules = computed(() => {
+  // Return a validation rule that makes the field required when isCustom is true
+  if (isCustom.value) {
+    return [
+      (value: string) => {
+        if (!value) {
+          return t('resourceQuota.errors.customTypeRequired');
+        }
+
+        return undefined;
+      }
+    ];
+  }
+
+  return [];
+});
+
+const remove = (id: string) => {
+  emit('remove', id);
+};
+
+const updateResourceIdentifier = (resourceType: string) => {
+  if (resourceType === TYPES.EXTENDED) {
+    return;
+  }
+
+  resourceIdentifier.value = resourceType;
+};
+</script>
+
+<template>
+  <div
+    role="row"
+    class="row mb-10"
+  >
+    <Select
+      v-model:value="resourceType"
+      class="mr-10"
+      :mode="mode"
+      :options="types"
+      :aria-label="t('resourceQuota.ariaLabel.resourceType', { row: index })"
+      data-testid="projectrow-type-input"
+      @update:value="updateResourceIdentifier"
+    />
+    <LabeledInput
+      v-model:value="resourceIdentifier"
+      :disabled="!isCustom"
+      :required="isCustom"
+      :mode="mode"
+      :placeholder="t('resourceQuota.resourceIdentifier.placeholder')"
+      :rules="customTypeRules"
+      :require-dirty="false"
+      :aria-label="t('resourceQuota.ariaLabel.resourceIdentifier', { row: index })"
+      class="mr-10"
+      data-testid="projectrow-custom-type-input"
+    />
+    <UnitInput
+      v-model:value="projectLimit"
+      class="mr-10"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      :aria-label="t('resourceQuota.ariaLabel.projectLimit', { row: index })"
+      data-testid="projectrow-project-quota-input"
+    />
+    <UnitInput
+      v-model:value="namespaceDefaultLimit"
+      :mode="mode"
+      :placeholder="typeOption.placeholder"
+      :increment="typeOption.increment"
+      :input-exponent="typeOption.inputExponent"
+      :base-unit="typeOption.baseUnit"
+      :output-modifier="true"
+      :aria-label="t('resourceQuota.ariaLabel.namespaceDefaultLimit', { row: index })"
+      data-testid="projectrow-namespace-quota-input"
+    />
+    <RcButton
+      variant="tertiary"
+      :aria-label="removeAriaLabel"
+      @click="remove(id)"
+    >
+      {{ t('generic.remove') }}
+    </RcButton>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+  }
+</style>