refactor(ui): new settings interface

- New appearance for the Settings inputs.
- New Unitary Tests to insure the correct behavior on the
refactored components

Author: luannmoreira

ui/package-lock.json

@@ -21,7 +21,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@mdi/font": "7.2.96",
+    "@mdi/font": "^7.4.47",
     "@productdevbook/chatwoot": "github:shellhub-io/chatwoot#build",
     "@rollup/plugin-inject": "^5.0.3",
     "@rushstack/eslint-patch": "^1.2.0",

ui/package.json

@@ -50,7 +50,7 @@ const {
   publicKeyRemove,
   // Namespace
   namespaceCreate,
-  NamespaceEdit,
+  namespaceEdit,
   namespaceAddMember,
   namespaceEditMember,
   namespaceRemoveMember,
@@ -106,7 +106,7 @@ export const actions: { [key: string]: any } = {
   },
   namespace: {
     create: namespaceCreate,
-    rename: NamespaceEdit,
+    rename: namespaceEdit,
     addMember: namespaceAddMember,
     editMember: namespaceEditMember,
     removeMember: namespaceRemoveMember,

ui/src/authorizer.ts

@@ -1,25 +1,8 @@
 <template>
-  <v-tooltip location="bottom" class="text-center" :disabled="hasAuthorization">
-    <template v-slot:activator="{ props }">
-      <div v-bind="props">
-        <v-btn
-          :disabled="!hasAuthorization"
-          color="red darken-1"
-          variant="outlined"
-          data-test="delete-btn"
-          @click="dialog = !dialog"
-        >
-          Delete namespace
-        </v-btn>
-      </div>
-    </template>
-    <span> You don't have this kind of authorization. </span>
-  </v-tooltip>
-
   <v-dialog v-model="dialog" max-width="540">
     <v-card data-test="namespaceDelete-dialog" class="bg-v-theme-surface">
       <v-card-title class="text-h5 pa-4 bg-primary">
-        Namespace Deletion Restriction
+        Namespace Deletion
       </v-card-title>
 
       <v-card-text class="mt-4 mb-3 pb-1">
@@ -55,7 +38,7 @@
           variant="text"
           data-test="remove-btn"
           @click="remove()"
-          :disabled="billingActive"
+          :disabled="billingActive || hasAuthorization"
         >
           Remove
         </v-btn>
@@ -88,15 +71,15 @@ const props = defineProps({
 const emit = defineEmits(["billing-in-debt"]);
 const store = useStore();
 const router = useRouter();
-const dialog = ref(false);
+const dialog = defineModel({ default: false });
 const name = ref("");
 const tenant = computed(() => props.tenant);
 const billingActive = computed(() => store.getters["billing/active"]);
 
 const hasAuthorization = computed(() => {
   const role = store.getters["auth/role"];
   if (role !== "") {
-    return hasPermission(
+    return !hasPermission(
       authorizer.role[role],
       actions.namespace.remove,
     );

ui/src/components/Namespace/NamespaceDelete.vue

@@ -1,83 +1,56 @@
 <template>
-  <v-row v-bind="$attrs">
-    <v-col data-test="namespace-title">
-      <h3>Namespace</h3>
-    </v-col>
-
-    <v-spacer />
-
-    <v-col md="auto" class="ml-auto">
-      <v-tooltip
-        location="bottom"
-        class="text-center"
-        :disabled="hasAuthorizationRenameNamespace()"
-      >
-        <template v-slot:activator="{ props }">
-          <div v-bind="props">
-            <v-btn
-              v-if="editBtn"
-              :disabled="!hasAuthorizationRenameNamespace() || (!!nameError || !!connectionAnnouncementError)"
-              color="primary"
-              @click="editBtn = false;"
-              data-test="edit-btn"
-            >
-              Edit Namespace
-            </v-btn>
-            <v-btn
-              v-else
-              :disabled="!!nameError || !!connectionAnnouncementError"
-              color="primary"
-              @click="editNamespace"
-              data-test="save-btn"
-            >
-              Save Namespace
-            </v-btn>
-          </div>
-        </template>
-        <span> You don't have this kind of authorization. </span>
-      </v-tooltip>
-    </v-col>
-  </v-row>
-
-  <div class="mt-4 mb-2">
-    <v-text-field
-      :disabled="validateInput"
-      v-model="name"
-      class="ml-3"
-      label="Name"
-      :error-messages="nameError"
-      variant="underlined"
-      required
-      data-test="name-text"
-    />
-  </div>
-
-  <div class="mb-2">
-    <v-textarea
-      :disabled="validateInput"
-      v-model="connectionAnnouncement"
-      label="Connection Announcement"
-      :error-messages="connectionAnnouncementError"
-      data-test="connectionAnnouncement-text"
-      variant="underlined"
-      hint="A connection announcement is a custom message written
+  <v-dialog v-model="show" max-width="700" @click:outside="close">
+    <v-card data-test="password-change-card" class="bg-v-theme-surface">
+      <v-card-title class="text-h5 pa-4 bg-primary" data-test="title">
+        Change Connection Announcement
+      </v-card-title>
+
+      <v-card-text class="mt-4 mb-3 pb-1">
+        <div class="mt-4 pl-4 pr-4">
+          <v-textarea
+            v-model="connectionAnnouncement"
+            label="Connection Announcement"
+            :error-messages="connectionAnnouncementError"
+            data-test="connectionAnnouncement-text"
+            variant="underlined"
+            hint="A connection announcement is a custom message written
       during a session when a connection is established on a device
       within the namespace."
-      persistent-hint
-      required
-    />
-  </div>
+            persistent-hint
+            required
+            auto-grow
+            max-rows="25"
+          />
+        </div>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+
+        <v-btn variant="text" data-test="close-btn" @click="close">
+          Cancel
+        </v-btn>
 
+        <v-btn
+          color="primary"
+          variant="text"
+          data-test="change-connection-btn"
+          :disabled="connectionAnnouncementError"
+          @click="updateAnnouncement()"
+        >
+          Save Announcement
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, watch } from "vue";
 import { useField } from "vee-validate";
-import axios, { AxiosError } from "axios";
+import axios from "axios";
 import * as yup from "yup";
 import { useStore } from "../../store";
-import hasPermission from "../../utils/permission";
-import { actions, authorizer } from "../../authorizer";
 import {
   INotificationsError,
   INotificationsSuccess,
@@ -87,24 +60,8 @@ import handleError from "@/utils/handleError";
 const store = useStore();
 const namespace = computed(() => store.getters["namespaces/get"]);
 const tenant = computed(() => store.getters["auth/tenant"]);
-const editBtn = ref(true);
-const validateInput = computed(() => editBtn.value === true);
-const {
-  value: name,
-  errorMessage: nameError,
-  setErrors: setNameError,
-} = useField<string>(
-  "name",
-  yup
-    .string()
-    .min(3, "Your namespace should be 3-30 characters long")
-    .max(30, "Your namespace should be 3-30 characters long")
-    .required()
-    .matches(/^[^.]*$/, "The name must not contain dots"),
-  {
-    initialValue: "",
-  },
-);
+const show = defineModel({ default: false });
+const emit = defineEmits(["update"]);
 
 const {
   value: connectionAnnouncement,
@@ -120,8 +77,12 @@ const {
   },
 );
 
+const close = () => {
+  connectionAnnouncement.value = namespace.value.settings.connection_announcement;
+  show.value = false;
+};
+
 watch(namespace, (ns) => {
-  name.value = ns.name;
   connectionAnnouncement.value = ns.settings.connection_announcement;
 });
 
@@ -130,59 +91,53 @@ onMounted(() => {
   store.dispatch("namespaces/get", tenant.value);
 });
 
-const hasAuthorizationRenameNamespace = () => {
-  const role = store.getters["auth/role"];
-  if (role !== "") {
-    return hasPermission(authorizer.role[role], actions.namespace.rename);
-  }
-
-  return false;
-};
-
-const editNamespace = async () => {
-  if (!nameError.value) {
-    try {
-      await store.dispatch("namespaces/put", {
-        id: tenant.value,
-        name: name.value,
-        settings: {
-          connection_announcement: connectionAnnouncement.value,
-        },
-      });
-      await store.dispatch("namespaces/fetch", {
-        page: 1,
-        perPage: 10,
-        filter: "",
-      });
-      await store.dispatch("namespaces/get", tenant.value);
-      store.dispatch(
-        "snackbar/showSnackbarSuccessAction",
-        INotificationsSuccess.namespaceEdit,
-      );
-      editBtn.value = true;
-    } catch (error: unknown) {
-      if (axios.isAxiosError(error)) {
-        const axiosError = error as AxiosError;
-        if (axiosError.response?.status === 400) {
-          setNameError("This name is not valid");
-          setConnectionAnnouncementError("This message is not valid");
-        } else if (axiosError.response?.status === 409) {
-          setNameError("name used already");
-        } else {
-          store.dispatch(
-            "snackbar/showSnackbarErrorAction",
-            INotificationsError.namespaceEdit,
-          );
-          handleError(error);
-        }
-      } else {
+const handleUpdateNameError = (error: unknown): void => {
+  if (axios.isAxiosError(error)) {
+    switch (error.response?.status) {
+      case 400:
+        setConnectionAnnouncementError("This message is not valid");
+        break;
+      default:
         store.dispatch(
           "snackbar/showSnackbarErrorAction",
           INotificationsError.namespaceEdit,
         );
         handleError(error);
-      }
     }
   }
+
+  store.dispatch(
+    "snackbar/showSnackbarErrorAction",
+    INotificationsError.namespaceEdit,
+  );
+  handleError(error);
+};
+
+const updateAnnouncement = async () => {
+  try {
+    await store.dispatch("namespaces/put", {
+      id: tenant.value,
+      settings: {
+        connection_announcement: connectionAnnouncement.value,
+      },
+    });
+
+    await store.dispatch("namespaces/fetch", {
+      page: 1,
+      perPage: 10,
+      filter: "",
+    });
+
+    emit("update");
+    store.dispatch(
+      "snackbar/showSnackbarSuccessAction",
+      INotificationsSuccess.namespaceEdit,
+    );
+    show.value = false;
+  } catch (error) {
+    handleUpdateNameError(error);
+  }
 };
+
+defineExpose({ show });
 </script>