feat(common): platform ui definition for team edit and invite (#5037)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/app/Header.vue

@@ -260,13 +260,31 @@
       @dismiss="dismissBanner"
     />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
-    <TeamsInvite
-      v-if="workspace.type === 'team' && workspace.teamID"
-      :show="showModalInvite"
-      :editing-team-i-d="editingTeamID"
-      @hide-modal="displayModalInvite(false)"
-    />
-    <TeamsEdit
+
+    <template v-if="workspace.type === 'team' && workspace.teamID">
+      <component
+        :is="platform.ui.additionalTeamInviteComponent"
+        v-if="
+          platform.ui?.additionalTeamInviteComponent &&
+          workspace.type === 'team' &&
+          workspace.teamID
+        "
+        :show="showModalInvite"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalInvite(false)"
+      />
+
+      <TeamsInvite
+        v-else
+        :show="showModalInvite"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalInvite(false)"
+      />
+    </template>
+
+    <component
+      :is="platform.ui.additionalTeamEditComponent"
+      v-if="platform.ui?.additionalTeamEditComponent"
       :show="showModalEdit"
       :editing-team="editingTeamName"
       :editing-team-i-d="editingTeamID"
@@ -274,6 +292,17 @@
       @invite-team="inviteTeam(editingTeamName, editingTeamID)"
       @refetch-teams="refetchTeams"
     />
+
+    <TeamsEdit
+      v-else
+      :show="showModalEdit"
+      :editing-team="editingTeamName"
+      :editing-team-i-d="editingTeamID"
+      @hide-modal="displayModalEdit(false)"
+      @invite-team="inviteTeam(editingTeamName, editingTeamID)"
+      @refetch-teams="refetchTeams"
+    />
+
     <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="t('confirm.remove_team')"

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -101,7 +101,10 @@
                         :active="member.role === 'OWNER'"
                         @click="
                           () => {
-                            updateMemberRole(member.userID, 'OWNER')
+                            updateMemberRole(
+                              member.userID,
+                              TeamMemberRole.Owner
+                            )
                             hide()
                           }
                         "
@@ -114,7 +117,10 @@
                         :active="member.role === 'EDITOR'"
                         @click="
                           () => {
-                            updateMemberRole(member.userID, 'EDITOR')
+                            updateMemberRole(
+                              member.userID,
+                              TeamMemberRole.Editor
+                            )
                             hide()
                           }
                         "
@@ -127,7 +133,10 @@
                         :active="member.role === 'VIEWER'"
                         @click="
                           () => {
-                            updateMemberRole(member.userID, 'VIEWER')
+                            updateMemberRole(
+                              member.userID,
+                              TeamMemberRole.Viewer
+                            )
                             hide()
                           }
                         "
@@ -252,6 +261,7 @@ const teamDetails = useGQLQuery<GetTeamQuery, GetTeamQueryVariables, "">({
     teamID: props.editingTeamID,
   },
   pollDuration: 10000,
+  pollLoadingEnabled: false,
   defer: true,
   updateSubs: computed(() => {
     if (props.editingTeamID) {

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -499,6 +499,7 @@ const pendingInvites = useGQLQuery<
     teamID: props.editingTeamID,
   }),
   pollDuration: 10000,
+  pollLoadingEnabled: false,
   updateSubs: computed(() =>
     !props.editingTeamID
       ? []

packages/hoppscotch-common/src/components/teams/index.vue

@@ -43,24 +43,49 @@
     </div>
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <!-- ¯\_(ツ)_/¯ -->
-    <TeamsEdit
-      v-if="!loading && myTeams.length > 0"
-      :team="myTeams[0]"
-      :show="showModalEdit"
-      :editing-team="editingTeam"
-      :editing-team-i-d="editingTeamID"
-      @hide-modal="displayModalEdit(false)"
-      @invite-team="inviteTeam(editingTeam, editingTeamID)"
-      @refetch-teams="refetchTeams"
-    />
-    <TeamsInvite
-      v-if="!loading && myTeams.length > 0"
-      :team="myTeams[0]"
-      :show="showModalInvite"
-      :editing-team="editingTeam"
-      :editing-team-i-d="editingTeamID"
-      @hide-modal="displayModalInvite(false)"
-    />
+
+    <template v-if="!loading && myTeams.length > 0">
+      <component
+        :is="platform.ui.additionalTeamEditComponent"
+        v-if="platform.ui?.additionalTeamEditComponent"
+        :team="editingTeam"
+        :show="showModalEdit"
+        :editing-team="editingTeam"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalEdit(false)"
+        @invite-team="inviteTeam(editingTeam, editingTeamID)"
+        @refetch-teams="refetchTeams"
+      />
+
+      <TeamsEdit
+        v-else
+        :team="myTeams[0]"
+        :show="showModalEdit"
+        :editing-team="editingTeam"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalEdit(false)"
+        @invite-team="inviteTeam(editingTeam, editingTeamID)"
+        @refetch-teams="refetchTeams"
+      />
+
+      <component
+        :is="platform.ui.additionalTeamInviteComponent"
+        v-if="platform.ui?.additionalTeamInviteComponent"
+        :team="editingTeam"
+        :show="showModalInvite"
+        :editing-team="editingTeam"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalInvite(false)"
+      />
+      <TeamsInvite
+        v-else
+        :team="myTeams[0]"
+        :show="showModalInvite"
+        :editing-team="editingTeam"
+        :editing-team-i-d="editingTeamID"
+        @hide-modal="displayModalInvite(false)"
+      />
+    </template>
   </div>
 </template>
 
@@ -72,6 +97,7 @@ import { useColorMode } from "@composables/theming"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import IconPlus from "~icons/lucide/plus"
+import { platform } from "~/platform"
 
 const t = useI18n()
 

packages/hoppscotch-common/src/composables/graphql.ts

@@ -35,6 +35,13 @@ type UseQueryOptions<T = any, V = object> = {
   updateSubs?: MaybeRef<GraphQLRequest<any, object>[]>
   defer?: boolean
   pollDuration?: number | undefined
+
+  /**
+   * Determines the behavior of the loading state during polling.
+   * If true, the loading state toggles each time the poller runs;
+   * if false, it is set to true only once when the poller starts.
+   */
+  pollLoadingEnabled?: boolean
 }
 
 export const useGQLQuery = <
@@ -58,6 +65,8 @@ export const useGQLQuery = <
 
   const pollDuration: Ref<number | null> = ref(args.pollDuration ?? null)
 
+  const pollLoadingEnabled: Ref<boolean> = ref(args.pollLoadingEnabled ?? true)
+
   const request: Ref<GraphQLRequest<DocType, DocVarType>> = ref(
     createRequest<DocType, DocVarType>(
       args.query,
@@ -101,6 +110,10 @@ export const useGQLQuery = <
   )
 
   const rerunQuery = () => {
+    if (pollLoadingEnabled.value) {
+      loading.value = true
+    }
+
     source.value = !isPaused.value
       ? client.value?.executeQuery<DocType, DocVarType>(request.value, {
           requestPolicy: "network-only",
@@ -122,7 +135,9 @@ export const useGQLQuery = <
 
   watchSyncEffect((onInvalidate) => {
     if (source.value) {
-      loading.value = true
+      if (pollLoadingEnabled.value) {
+        loading.value = true
+      }
       isStale.value = false
 
       const invalidateStops = args.updateSubs!.map((sub) => {

packages/hoppscotch-common/src/platform/ui.ts

@@ -59,6 +59,16 @@ export type UIPlatformDef = {
    */
   additionalSidebarHeaderItem?: Component
 
+  /**
+   * Custom invite component to be shown in the team invite page
+   */
+  additionalTeamInviteComponent?: Component
+
+  /**
+   * Custom edit component to be shown in the team edit page
+   */
+  additionalTeamEditComponent?: Component
+
   /**
    * More info shown in the danger zone section while attempting user deletion
    * Sample use case includes displaying the instance information on cloud instances