feat(sh-admin): introducing data analytics and newsletter configurations (#3845)

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

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

@@ -25,22 +25,26 @@ export function useClientHandler<
 
   const fetchData = async () => {
     fetching.value = true;
-    try {
-      const result = await client
-        .query(query, {
-          ...variables,
-        })
-        .toPromise();
 
-      if (getList) {
-        const resultList = getList(result.data!);
-        dataAsList.value.push(...resultList);
-      } else {
-        data.value = result.data;
-      }
-    } catch (e) {
+    const result = await client
+      .query(query, {
+        ...variables,
+      })
+      .toPromise();
+
+    if (result.error) {
       error.value = true;
+      fetching.value = false;
+      return;
     }
+
+    if (getList) {
+      const resultList = getList(result.data!);
+      dataAsList.value.push(...resultList);
+    } else {
+      data.value = result.data;
+    }
+
     fetching.value = false;
   };
 

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

@@ -1,19 +1,20 @@
-import { computed, onMounted, ref } from 'vue';
+import { AnyVariables, UseMutationResponse } from '@urql/vue';
 import { cloneDeep } from 'lodash-es';
-import { UseMutationResponse } from '@urql/vue';
-import { useClientHandler } from './useClientHandler';
-import { useToast } from './toast';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from '~/composables/i18n';
 import {
+  AllowedAuthProvidersDocument,
+  EnableAndDisableSsoArgs,
+  EnableAndDisableSsoMutation,
+  InfraConfigArgs,
   InfraConfigEnum,
   InfraConfigsDocument,
-  AllowedAuthProvidersDocument,
-  EnableAndDisableSsoMutation,
-  UpdateInfraConfigsMutation,
   ResetInfraConfigsMutation,
-  EnableAndDisableSsoArgs,
-  InfraConfigArgs,
+  ToggleAnalyticsCollectionMutation,
+  UpdateInfraConfigsMutation,
 } from '~/helpers/backend/graphql';
+import { useToast } from './toast';
+import { useClientHandler } from './useClientHandler';
 
 // Types
 export type SsoAuthProviders = 'google' | 'microsoft' | 'github';
@@ -54,6 +55,11 @@ export type Config = {
       mailer_from_address: string;
     };
   };
+
+  dataSharingConfigs: {
+    name: string;
+    enabled: boolean;
+  };
 };
 
 type UpdatedConfigs = {
@@ -86,6 +92,7 @@ export function useConfigHandler(updatedConfigs?: Config) {
         'GITHUB_CLIENT_SECRET',
         'MAILER_SMTP_URL',
         'MAILER_ADDRESS_FROM',
+        'ALLOW_ANALYTICS_COLLECTION',
       ] as InfraConfigEnum[],
     },
     (x) => x.infraConfigs
@@ -164,6 +171,12 @@ export function useConfigHandler(updatedConfigs?: Config) {
               ?.value ?? '',
         },
       },
+      dataSharingConfigs: {
+        name: 'data_sharing',
+        enabled: !!infraConfigs.value.find(
+          (x) => x.name === 'ALLOW_ANALYTICS_COLLECTION' && x.value === 'true'
+        ),
+      },
     };
 
     // Cloning the current configs to working configs
@@ -262,15 +275,23 @@ export function useConfigHandler(updatedConfigs?: Config) {
   // 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
-    );
+  type ConfigSection = {
+    enabled: boolean;
+    fields: Record<string, string>;
+  };
 
-    return providerFieldsEmpty || mailFieldsEmpty;
+  const AreAnyConfigFieldsEmpty = (config: Config): boolean => {
+    const sections: Array<ConfigSection> = [
+      config.providers.github,
+      config.providers.google,
+      config.providers.microsoft,
+      config.mailConfigs,
+    ];
+
+    return sections.some(
+      (section) =>
+        section.enabled && Object.values(section.fields).some(isFieldEmpty)
+    );
   };
 
   // Transforming the working configs back into the format required by the mutations
@@ -297,55 +318,70 @@ export function useConfigHandler(updatedConfigs?: Config) {
     ];
   });
 
-  // Updating the auth provider configurations
-  const updateAuthProvider = async (
-    updateProviderStatus: UseMutationResponse<EnableAndDisableSsoMutation>
-  ) => {
-    const variables = {
-      providerInfo:
-        updatedAllowedAuthProviders.value as EnableAndDisableSsoArgs[],
-    };
-
-    const result = await updateProviderStatus.executeMutation(variables);
+  // Generic function to handle mutation execution and error handling
+  const executeMutation = async <T, V>(
+    mutation: UseMutationResponse<T>,
+    variables: AnyVariables = undefined,
+    errorMessage: string
+  ): Promise<boolean> => {
+    const result = await mutation.executeMutation(variables);
 
     if (result.error) {
-      toast.error(t('configs.auth_providers.update_failure'));
+      toast.error(t(errorMessage));
       return false;
     }
 
     return true;
   };
 
+  // Updating the auth provider configurations
+  const updateAuthProvider = (
+    updateProviderStatus: UseMutationResponse<EnableAndDisableSsoMutation>
+  ) =>
+    executeMutation(
+      updateProviderStatus,
+      {
+        providerInfo:
+          updatedAllowedAuthProviders.value as EnableAndDisableSsoArgs[],
+      },
+      'configs.auth_providers.update_failure'
+    );
+
   // Updating the infra configurations
-  const updateInfraConfigs = async (
+  const updateInfraConfigs = (
     updateInfraConfigsMutation: UseMutationResponse<UpdateInfraConfigsMutation>
-  ) => {
-    const variables = {
-      infraConfigs: updatedInfraConfigs.value as InfraConfigArgs[],
-    };
-
-    const result = await updateInfraConfigsMutation.executeMutation(variables);
-
-    if (result.error) {
-      toast.error(t('configs.mail_configs.update_failure'));
-      return false;
-    }
-
-    return true;
-  };
+  ) =>
+    executeMutation(
+      updateInfraConfigsMutation,
+      {
+        infraConfigs: updatedInfraConfigs.value as InfraConfigArgs[],
+      },
+      'configs.mail_configs.update_failure'
+    );
 
   // Resetting the infra configurations
-  const resetInfraConfigs = async (
+  const resetInfraConfigs = (
     resetInfraConfigsMutation: UseMutationResponse<ResetInfraConfigsMutation>
-  ) => {
-    const result = await resetInfraConfigsMutation.executeMutation();
+  ) =>
+    executeMutation(
+      resetInfraConfigsMutation,
+      undefined,
+      'configs.reset.failure'
+    );
 
-    if (result.error) {
-      toast.error(t('configs.reset.failure'));
-      return false;
-    }
-    return true;
-  };
+  // Updating the data sharing configurations
+  const updateDataSharingConfigs = (
+    toggleDataSharingMutation: UseMutationResponse<ToggleAnalyticsCollectionMutation>
+  ) =>
+    executeMutation(
+      toggleDataSharingMutation,
+      {
+        status: updatedConfigs?.dataSharingConfigs.enabled
+          ? 'ENABLE'
+          : 'DISABLE',
+      },
+      'configs.data_sharing.update_failure'
+    );
 
   return {
     currentConfigs,
@@ -353,6 +389,7 @@ export function useConfigHandler(updatedConfigs?: Config) {
     updatedInfraConfigs,
     updatedAllowedAuthProviders,
     updateAuthProvider,
+    updateDataSharingConfigs,
     updateInfraConfigs,
     resetInfraConfigs,
     fetchingInfraConfigs,

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

@@ -1,4 +1,4 @@
-import { onMounted, ref } from 'vue';
+import { Ref, onMounted, ref } from 'vue';
 import { DocumentNode } from 'graphql';
 import { TypedDocumentNode, useClientHandle } from '@urql/vue';
 
@@ -16,38 +16,41 @@ export function usePagedQuery<
   const { client } = useClientHandle();
   const fetching = ref(true);
   const error = ref(false);
-  const list = ref<ListItem[]>([]);
+  const list: Ref<ListItem[]> = ref([]);
   const currentPage = ref(0);
   const hasNextPage = ref(true);
 
   const fetchNextPage = async () => {
     fetching.value = true;
 
-    try {
-      const cursor =
-        list.value.length > 0 ? getCursor(list.value.at(-1)) : undefined;
-      const variablesForPagination = {
-        ...variables,
-        take: itemsPerPage,
-        cursor,
-      };
+    const cursor =
+      list.value.length > 0 ? getCursor(list.value.at(-1)!) : undefined;
+    const variablesForPagination = {
+      ...variables,
+      take: itemsPerPage,
+      cursor,
+    };
 
-      const result = await client
-        .query(query, variablesForPagination)
-        .toPromise();
-      const resultList = getList(result.data!);
+    const result = await client
+      .query(query, variablesForPagination)
+      .toPromise();
 
-      if (resultList.length < itemsPerPage) {
-        hasNextPage.value = false;
-      }
-
-      list.value.push(...resultList);
-      currentPage.value++;
-    } catch (e) {
+    if (result.error) {
       error.value = true;
-    } finally {
       fetching.value = false;
+      return;
     }
+
+    const resultList = getList(result.data!);
+
+    if (resultList.length < itemsPerPage) {
+      hasNextPage.value = false;
+    }
+
+    list.value.push(...resultList);
+    currentPage.value++;
+
+    fetching.value = false;
   };
 
   onMounted(async () => {