chore: clean up

packages/hoppscotch-app/components/teams/Edit.vue

@@ -23,9 +23,13 @@
           </label>
           <div class="flex">
             <ButtonSecondary
-              svg="plus"
+              svg="user-plus"
-              :label="$t('add.new')"
+              :label="$t('team.invite')"
-              @click.native="addTeamMember"
+              @click.native="
+                () => {
+                  $emit('invite-team')
+                }
+              "
             />
           </div>
         </div>
@@ -97,73 +101,7 @@
             </div>
           </div>
           <div
-            v-for="(member, index) in newMembers"
+            v-if="members.length === 0"
-            :key="`new-member-${index}`"
-            class="divide-x divide-dividerLight flex"
-          >
-            <input
-              v-model="member.key"
-              class="bg-transparent flex flex-1 py-2 px-4"
-              :placeholder="$t('team.email')"
-              :name="'member' + index"
-              autofocus
-            />
-            <span>
-              <tippy
-                :ref="`newMemberOptions-${index}`"
-                interactive
-                trigger="click"
-                theme="popover"
-                arrow
-              >
-                <template #trigger>
-                  <span class="select-wrapper">
-                    <input
-                      class="
-                        bg-transparent
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
-                      :placeholder="$t('team.permissions')"
-                      :name="'value' + index"
-                      :value="
-                        typeof member.value === 'string'
-                          ? member.value
-                          : JSON.stringify(member.value)
-                      "
-                      readonly
-                    />
-                  </span>
-                </template>
-                <SmartItem
-                  label="OWNER"
-                  @click.native="updateNewMemberRole(index, 'OWNER')"
-                />
-                <SmartItem
-                  label="EDITOR"
-                  @click.native="updateNewMemberRole(index, 'EDITOR')"
-                />
-                <SmartItem
-                  label="VIEWER"
-                  @click.native="updateNewMemberRole(index, 'VIEWER')"
-                />
-              </tippy>
-            </span>
-            <div class="flex">
-              <ButtonSecondary
-                id="member"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.remove')"
-                svg="trash"
-                color="red"
-                @click.native="removeTeamMember(index)"
-              />
-            </div>
-          </div>
-          <div
-            v-if="members.length === 0 && newMembers.length === 0"
             class="
               flex flex-col
               text-secondaryLight
@@ -177,9 +115,13 @@
               {{ $t("empty.members") }}
             </span>
             <ButtonSecondary
-              :label="$t('add.new')"
+              svg="user-plus"
-              filled
+              :label="$t('team.invite')"
-              @click.native="addTeamMember"
+              @click.native="
+                () => {
+                  emit('invite-team')
+                }
+              "
             />
           </div>
         </div>
@@ -213,7 +155,6 @@ export default defineComponent({
     return {
       rename: null,
       members: [],
-      newMembers: [],
       membersAdapter: new TeamMemberAdapter(null),
     }
   },
@@ -245,14 +186,6 @@ export default defineComponent({
       this.members[id].role = role
       this.$refs[`memberOptions-${id}`][0].tippy().hide()
     },
-    updateNewMemberRole(id, role) {
-      this.newMembers[id].value = role
-      this.$refs[`newMemberOptions-${id}`][0].tippy().hide()
-    },
-    addTeamMember() {
-      const member = { key: "", value: "" }
-      this.newMembers.push(member)
-    },
     removeExistingTeamMember(userID) {
       teamUtils
         .removeTeamMember(this.$apollo, userID, this.editingteamID)
@@ -269,9 +202,6 @@ export default defineComponent({
           console.error(e)
         })
     },
-    removeTeamMember(index) {
-      this.newMembers.splice(index, 1)
-    },
     validateEmail(emailID) {
       if (
         /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
@@ -292,47 +222,6 @@ export default defineComponent({
         })
         return
       }
-      let invalidEmail = false
-      this.$data.newMembers.forEach((element) => {
-        if (!this.validateEmail(element.key)) {
-          this.$toast.error(this.$t("team.invalid_email_format"), {
-            icon: "error_outline",
-          })
-          invalidEmail = true
-        }
-      })
-      if (invalidEmail) return
-      let invalidPermission = false
-      this.$data.newMembers.forEach((element) => {
-        if (!element.value) {
-          this.$toast.error(this.$t("invalid_member_permission"), {
-            icon: "error_outline",
-          })
-          invalidPermission = true
-        }
-      })
-      if (invalidPermission) return
-      this.$data.newMembers.forEach((element) => {
-        // Call to the graphql mutation
-        teamUtils
-          .addTeamMemberByEmail(
-            this.$apollo,
-            element.value,
-            element.key,
-            this.editingteamID
-          )
-          .then(() => {
-            this.$toast.success(this.$t("team.saved"), {
-              icon: "done",
-            })
-          })
-          .catch((e) => {
-            this.$toast.error(e, {
-              icon: "error_outline",
-            })
-            console.error(e)
-          })
-      })
       this.members.forEach((element) => {
         teamUtils
           .updateTeamMemberRole(
@@ -380,7 +269,6 @@ export default defineComponent({
     },
     hideModal() {
       this.rename = null
-      this.newMembers = []
       this.$emit("hide-modal")
     },
   },

packages/hoppscotch-app/components/teams/Invite.vue

@@ -218,25 +218,11 @@ export default defineComponent({
   },
   data() {
     return {
-      rename: null,
       members: [],
       newMembers: [],
       membersAdapter: new TeamMemberAdapter(null),
     }
   },
-  computed: {
-    editingTeamCopy() {
-      return this.editingTeam
-    },
-    name: {
-      get() {
-        return this.editingTeam.name
-      },
-      set(name) {
-        this.rename = name
-      },
-    },
-  },
   watch: {
     editingteamID(teamID) {
       this.membersAdapter.changeTeamID(teamID)
@@ -290,15 +276,6 @@ export default defineComponent({
       return false
     },
     saveTeam() {
-      if (
-        this.$data.rename !== null &&
-        this.$data.rename.replace(/\s/g, "").length < 6
-      ) {
-        this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error_outline",
-        })
-        return
-      }
       let invalidEmail = false
       this.$data.newMembers.forEach((element) => {
         if (!this.validateEmail(element.key)) {
@@ -360,33 +337,9 @@ export default defineComponent({
             console.error(e)
           })
       })
-      if (this.$data.rename !== null) {
-        const newName =
-          this.name === this.$data.rename ? this.name : this.$data.rename
-        if (!/\S/.test(newName))
-          return this.$toast.error(this.$t("empty.team_name"), {
-            icon: "error_outline",
-          })
-        // Call to the graphql mutation
-        if (this.name !== this.rename)
-          teamUtils
-            .renameTeam(this.$apollo, newName, this.editingteamID)
-            .then(() => {
-              this.$toast.success(this.$t("team.saved"), {
-                icon: "done",
-              })
-            })
-            .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error_outline",
-              })
-              console.error(e)
-            })
-      }
       this.hideModal()
     },
     hideModal() {
-      this.rename = null
       this.newMembers = []
       this.$emit("hide-modal")
     },

packages/hoppscotch-app/components/teams/Team.vue

@@ -1,11 +1,8 @@
 <template>
-  <div class="border border-dividerLight rounded flex flex-1 items-end">
+  <div class="border border-dividerLight rounded flex flex-col flex-1">
     <div class="flex flex-1 items-start">
       <div class="p-4">
-        <label
+        <label class="font-semibold text-secondaryDark">
-          class="cursor-pointer transition hover:text-secondaryDark"
-          @click="team.myRole === 'OWNER' ? emit('edit-team') : ''"
-        >
           {{ team.name || $t("state.nothing_found") }}
         </label>
         <div class="flex -space-x-1 mt-2 overflow-hidden">
@@ -21,63 +18,75 @@
         </div>
       </div>
     </div>
-    <ButtonSecondary
+    <div class="flex items-center justify-between">
-      v-if="team.myRole === 'OWNER'"
+      <span>
-      v-tippy="{ theme: 'tooltip' }"
+        <ButtonSecondary
-      svg="user-plus"
-      :title="$t('team.invite')"
-      @click.native="
-        () => {
-          emit('invite-team')
-          $refs.options.tippy().hide()
-        }
-      "
-    />
-    <span>
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-        <template #trigger>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.more')"
-            svg="more-vertical"
-          />
-        </template>
-        <SmartItem
           v-if="team.myRole === 'OWNER'"
           svg="edit"
           :label="$t('action.edit').toString()"
           @click.native="
             () => {
-              emit('edit-team')
+              $emit('edit-team')
-              $refs.options.tippy().hide()
             }
           "
         />
-        <SmartItem
+        <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
-          svg="trash-2"
+          svg="user-plus"
-          color="red"
+          :label="$t('team.invite')"
-          :label="$t('action.delete').toString()"
           @click.native="
             () => {
-              deleteTeam()
+              emit('invite-team')
-              $refs.options.tippy().hide()
             }
           "
         />
-        <SmartItem
+      </span>
-          v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+      <span>
-          svg="trash"
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
-          :label="$t('team.exit').toString()"
+          <template #trigger>
-          @click.native="
+            <ButtonSecondary
-            () => {
+              v-tippy="{ theme: 'tooltip' }"
-              exitTeam()
+              :title="$t('action.more')"
-              $refs.options.tippy().hide()
+              svg="more-vertical"
-            }
+            />
-          "
+          </template>
-        />
+          <SmartItem
-      </tippy>
+            v-if="team.myRole === 'OWNER'"
-    </span>
+            svg="edit"
+            :label="$t('action.edit').toString()"
+            @click.native="
+              () => {
+                $emit('edit-team')
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            v-if="team.myRole === 'OWNER'"
+            svg="trash-2"
+            color="red"
+            :label="$t('action.delete').toString()"
+            @click.native="
+              () => {
+                deleteTeam()
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+            svg="trash"
+            :label="$t('team.exit').toString()"
+            @click.native="
+              () => {
+                exitTeam()
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+        </tippy>
+      </span>
+    </div>
   </div>
 </template>
 

packages/hoppscotch-app/components/teams/index.vue

@@ -67,6 +67,7 @@
       :editing-team="editingTeam"
       :editingteam-i-d="editingTeamID"
       @hide-modal="displayModalEdit(false)"
+      @invite-team="inviteTeam(editingTeam, editingTeamID)"
     />
     <TeamsInvite
       v-if="