chore: Add the option to edit custom attribute display name (#3382)

app/javascript/dashboard/i18n/locale/en/attributesMgmt.json

@@ -32,7 +32,8 @@
         "KEY": {
           "LABEL": "Key",
           "PLACEHOLDER": "Enter custom attribute key",
-          "ERROR": "Key is required"
+          "ERROR": "Key is required",
+          "IN_VALID": "Invalid key"
         }
       },
       "API": {

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -59,11 +59,7 @@
             :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
             type="text"
             :class="{ error: $v.attributeKey.$error }"
-            :error="
+            :error="$v.attributeKey.$error ? keyErrorMessage : ''"
-              $v.attributeKey.$error
-                ? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
-                : ''
-            "
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
             @blur="$v.attributeKey.$touch"
           />
@@ -122,6 +118,12 @@ export default {
         this.uiFlags.isCreating
       );
     },
+    keyErrorMessage() {
+      if (!this.$v.attributeKey.isKey) {
+        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
+      }
+      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
+    },
   },
 
   validations: {
@@ -140,6 +142,9 @@ export default {
     },
     attributeKey: {
       required,
+      isKey(value) {
+        return !(value.indexOf(' ') >= 0);
+      },
     },
   },
 
@@ -148,6 +153,10 @@ export default {
       this.attributeKey = convertToSlug(this.displayName);
     },
     async addAttributes() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
       try {
         await this.$store.dispatch('attributes/create', {
           attribute_display_name: this.displayName,
@@ -159,7 +168,7 @@ export default {
         this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
         this.onClose();
       } catch (error) {
-        const errorMessage = error?.response?.data?.message;
+        const errorMessage = error?.message;
         this.alertMessage =
           errorMessage || this.$t('ATTRIBUTES_MGMT.ADD.API.ERROR_MESSAGE');
       } finally {

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -14,7 +14,6 @@
               : ''
           "
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-          readonly
           @blur="$v.displayName.$touch"
         />
         <label :class="{ error: $v.description.$error }">
@@ -46,11 +45,7 @@
           :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
           type="text"
           :class="{ error: $v.attributeKey.$error }"
-          :error="
+          :error="$v.attributeKey.$error ? keyErrorMessage : ''"
-            $v.attributeKey.$error
-              ? $t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR')
-              : ''
-          "
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
           readonly
           @blur="$v.attributeKey.$touch"
@@ -112,6 +107,9 @@ export default {
     },
     attributeKey: {
       required,
+      isKey(value) {
+        return !(value.indexOf(' ') >= 0);
+      },
     },
   },
   computed: {
@@ -130,6 +128,12 @@ export default {
           this.selectedAttribute.attribute_display_type
       ).id;
     },
+    keyErrorMessage() {
+      if (!this.$v.attributeKey.isKey) {
+        return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
+      }
+      return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
+    },
   },
   mounted() {
     this.setFormValues();
@@ -153,14 +157,17 @@ export default {
         await this.$store.dispatch('attributes/update', {
           id: this.selectedAttribute.id,
           attribute_description: this.description,
+          attribute_display_name: this.displayName,
         });
-        this.showAlert(this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+
+        this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
         this.onClose();
       } catch (error) {
-        const errorMessage =
+        const errorMessage = error?.message;
-          error?.response?.message ||
+        this.alertMessage =
-          this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
+          errorMessage || this.$t('ATTRIBUTES_MGMT.EDIT.API.ERROR_MESSAGE');
-        this.showAlert(errorMessage);
+      } finally {
+        this.showAlert(this.alertMessage);
       }
     },
   },

app/javascript/dashboard/store/modules/attributes.js

@@ -41,7 +41,8 @@ export const actions = {
       const response = await AttributeAPI.create(attributeObj);
       commit(types.ADD_CUSTOM_ATTRIBUTE, response.data);
     } catch (error) {
-      throw new Error(error);
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
     } finally {
       commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isCreating: false });
     }
@@ -52,7 +53,8 @@ export const actions = {
       const response = await AttributeAPI.update(id, updateObj);
       commit(types.EDIT_CUSTOM_ATTRIBUTE, response.data);
     } catch (error) {
-      throw new Error(error);
+      const errorMessage = error?.response?.data?.message;
+      throw new Error(errorMessage);
     } finally {
       commit(types.SET_CUSTOM_ATTRIBUTE_UI_FLAG, { isUpdating: false });
     }