refactor: consolidated admin dashboard improvements (#3790)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-sh-admin/src/composables/useClientHandler.ts

@@ -1,6 +1,6 @@
 import { TypedDocumentNode, useClientHandle } from '@urql/vue';
 import { DocumentNode } from 'graphql';
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
 
 /** A composable function to handle grapqhl requests
  * using urql's useClientHandle
@@ -14,15 +14,16 @@ export function useClientHandler<
   ListItem
 >(
   query: string | TypedDocumentNode<Result, Vars> | DocumentNode,
-  getList: (result: Result) => ListItem[],
-  variables: Vars
+  variables: Vars,
+  getList?: (result: Result) => ListItem[]
 ) {
   const { client } = useClientHandle();
   const fetching = ref(true);
   const error = ref(false);
-  const list = ref<ListItem[]>([]);
+  const data = ref<Result>();
+  const dataAsList: Ref<ListItem[]> = ref([]);
 
-  const fetchList = async () => {
+  const fetchData = async () => {
     fetching.value = true;
     try {
       const result = await client
@@ -31,9 +32,12 @@ export function useClientHandler<
         })
         .toPromise();
 
-      const resultList = getList(result.data!);
-
-      list.value.push(...resultList);
+      if (getList) {
+        const resultList = getList(result.data!);
+        dataAsList.value.push(...resultList);
+      } else {
+        data.value = result.data;
+      }
     } catch (e) {
       error.value = true;
     }
@@ -43,7 +47,8 @@ export function useClientHandler<
   return {
     fetching,
     error,
-    list,
-    fetchList,
+    data,
+    dataAsList,
+    fetchData,
   };
 }

packages/hoppscotch-sh-admin/src/composables/useConfigHandler.ts

@@ -72,31 +72,35 @@ export function useConfigHandler(updatedConfigs?: Config) {
   const {
     fetching: fetchingInfraConfigs,
     error: infraConfigsError,
-    list: infraConfigs,
-    fetchList: fetchInfraConfigs,
-  } = useClientHandler(InfraConfigsDocument, (x) => x.infraConfigs, {
-    configNames: [
-      'GOOGLE_CLIENT_ID',
-      'GOOGLE_CLIENT_SECRET',
-      'MICROSOFT_CLIENT_ID',
-      'MICROSOFT_CLIENT_SECRET',
-      'GITHUB_CLIENT_ID',
-      'GITHUB_CLIENT_SECRET',
-      'MAILER_SMTP_URL',
-      'MAILER_ADDRESS_FROM',
-    ] as InfraConfigEnum[],
-  });
+    dataAsList: infraConfigs,
+    fetchData: fetchInfraConfigs,
+  } = useClientHandler(
+    InfraConfigsDocument,
+    {
+      configNames: [
+        'GOOGLE_CLIENT_ID',
+        'GOOGLE_CLIENT_SECRET',
+        'MICROSOFT_CLIENT_ID',
+        'MICROSOFT_CLIENT_SECRET',
+        'GITHUB_CLIENT_ID',
+        'GITHUB_CLIENT_SECRET',
+        'MAILER_SMTP_URL',
+        'MAILER_ADDRESS_FROM',
+      ] as InfraConfigEnum[],
+    },
+    (x) => x.infraConfigs
+  );
 
   // Fetching allowed auth providers
   const {
     fetching: fetchingAllowedAuthProviders,
     error: allowedAuthProvidersError,
-    list: allowedAuthProviders,
-    fetchList: fetchAllowedAuthProviders,
+    dataAsList: allowedAuthProviders,
+    fetchData: fetchAllowedAuthProviders,
   } = useClientHandler(
     AllowedAuthProvidersDocument,
-    (x) => x.allowedAuthProviders,
-    {}
+    {},
+    (x) => x.allowedAuthProviders
   );
 
   // Current and working configs
@@ -255,7 +259,21 @@ export function useConfigHandler(updatedConfigs?: Config) {
     return config;
   });
 
-  // Trasforming the working configs back into the format required by the mutations
+  // Checking if any of the config fields are empty
+  const isFieldEmpty = (field: string) => field.trim() === '';
+
+  const AreAnyConfigFieldsEmpty = (config: Config): boolean => {
+    const providerFieldsEmpty = Object.values(config.providers).some(
+      (provider) => Object.values(provider.fields).some(isFieldEmpty)
+    );
+    const mailFieldsEmpty = Object.values(config.mailConfigs.fields).some(
+      isFieldEmpty
+    );
+
+    return providerFieldsEmpty || mailFieldsEmpty;
+  };
+
+  // Transforming the working configs back into the format required by the mutations
   const updatedAllowedAuthProviders = computed(() => {
     return [
       {
@@ -341,5 +359,6 @@ export function useConfigHandler(updatedConfigs?: Config) {
     fetchingAllowedAuthProviders,
     infraConfigsError,
     allowedAuthProvidersError,
+    AreAnyConfigFieldsEmpty,
   };
 }