refactor(sh-admin): improved handling of server configurations in admin dashboard (#3971)

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

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

@@ -1,83 +1,39 @@
 import { AnyVariables, UseMutationResponse } from '@urql/vue';
 import { cloneDeep } from 'lodash-es';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
 import { useI18n } from '~/composables/i18n';
 import {
   AllowedAuthProvidersDocument,
+  AuthProvider,
   EnableAndDisableSsoArgs,
   EnableAndDisableSsoMutation,
   InfraConfigArgs,
   InfraConfigEnum,
   InfraConfigsDocument,
   ResetInfraConfigsMutation,
+  ServiceStatus,
   ToggleAnalyticsCollectionMutation,
   UpdateInfraConfigsMutation,
 } from '~/helpers/backend/graphql';
+import {
+  ALL_CONFIGS,
+  ConfigSection,
+  ConfigTransform,
+  GITHUB_CONFIGS,
+  GOOGLE_CONFIGS,
+  MAIL_CONFIGS,
+  MICROSOFT_CONFIGS,
+  ServerConfigs,
+  UpdatedConfigs,
+} from '~/helpers/configs';
 import { useToast } from './toast';
 import { useClientHandler } from './useClientHandler';
 
-// Types
-export type SsoAuthProviders = 'google' | 'microsoft' | 'github';
-
-export type Config = {
-  providers: {
-    google: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-      };
-    };
-    github: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-      };
-    };
-    microsoft: {
-      name: SsoAuthProviders;
-      enabled: boolean;
-      fields: {
-        client_id: string;
-        client_secret: string;
-        callback_url: string;
-        scope: string;
-        tenant: string;
-      };
-    };
-  };
-
-  mailConfigs: {
-    name: string;
-    enabled: boolean;
-    fields: {
-      mailer_smtp_url: string;
-      mailer_from_address: string;
-    };
-  };
-
-  dataSharingConfigs: {
-    name: string;
-    enabled: boolean;
-  };
-};
-
-type UpdatedConfigs = {
-  name: string;
-  value: string;
-};
-
 /** Composable that handles all operations related to server configurations
  * @param updatedConfigs A Config Object contatining the updated configs
  */
-export function useConfigHandler(updatedConfigs?: Config) {
+export function useConfigHandler(updatedConfigs?: ServerConfigs) {
   const t = useI18n();
   const toast = useToast();
 
@@ -90,24 +46,9 @@ export function useConfigHandler(updatedConfigs?: Config) {
   } = useClientHandler(
     InfraConfigsDocument,
     {
-      configNames: [
-        'GOOGLE_CLIENT_ID',
-        'GOOGLE_CLIENT_SECRET',
-        'GOOGLE_CALLBACK_URL',
-        'GOOGLE_SCOPE',
-        'MICROSOFT_CLIENT_ID',
-        'MICROSOFT_CLIENT_SECRET',
-        'MICROSOFT_CALLBACK_URL',
-        'MICROSOFT_SCOPE',
-        'MICROSOFT_TENANT',
-        'GITHUB_CLIENT_ID',
-        'GITHUB_CLIENT_SECRET',
-        'GITHUB_CALLBACK_URL',
-        'GITHUB_SCOPE',
-        'MAILER_SMTP_URL',
-        'MAILER_ADDRESS_FROM',
-        'ALLOW_ANALYTICS_COLLECTION',
-      ] as InfraConfigEnum[],
+      configNames: ALL_CONFIGS.flat().map(
+        ({ name }) => name
+      ) as InfraConfigEnum[],
     },
     (x) => x.infraConfigs
   );
@@ -125,14 +66,14 @@ export function useConfigHandler(updatedConfigs?: Config) {
   );
 
   // Current and working configs
-  const currentConfigs = ref<Config>();
-  const workingConfigs = ref<Config>();
+  const currentConfigs = ref<ServerConfigs>();
+  const workingConfigs = ref<ServerConfigs>();
 
   onMounted(async () => {
     await fetchInfraConfigs();
     await fetchAllowedAuthProviders();
 
-    const getFieldValue = (name: string) =>
+    const getFieldValue = (name: InfraConfigEnum) =>
       infraConfigs.value.find((x) => x.name === name)?.value ?? '';
 
     // Transforming the fetched data into a Configs object
@@ -140,42 +81,42 @@ export function useConfigHandler(updatedConfigs?: Config) {
       providers: {
         google: {
           name: 'google',
-          enabled: allowedAuthProviders.value.includes('GOOGLE'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Google),
           fields: {
-            client_id: getFieldValue('GOOGLE_CLIENT_ID'),
-            client_secret: getFieldValue('GOOGLE_CLIENT_SECRET'),
-            callback_url: getFieldValue('GOOGLE_CALLBACK_URL'),
-            scope: getFieldValue('GOOGLE_SCOPE'),
+            client_id: getFieldValue(InfraConfigEnum.GoogleClientId),
+            client_secret: getFieldValue(InfraConfigEnum.GoogleClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.GoogleCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.GoogleScope),
           },
         },
         github: {
           name: 'github',
-          enabled: allowedAuthProviders.value.includes('GITHUB'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Github),
           fields: {
-            client_id: getFieldValue('GITHUB_CLIENT_ID'),
-            client_secret: getFieldValue('GITHUB_CLIENT_SECRET'),
-            callback_url: getFieldValue('GITHUB_CALLBACK_URL'),
-            scope: getFieldValue('GITHUB_SCOPE'),
+            client_id: getFieldValue(InfraConfigEnum.GithubClientId),
+            client_secret: getFieldValue(InfraConfigEnum.GithubClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.GoogleCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.GithubScope),
           },
         },
         microsoft: {
           name: 'microsoft',
-          enabled: allowedAuthProviders.value.includes('MICROSOFT'),
+          enabled: allowedAuthProviders.value.includes(AuthProvider.Microsoft),
           fields: {
-            client_id: getFieldValue('MICROSOFT_CLIENT_ID'),
-            client_secret: getFieldValue('MICROSOFT_CLIENT_SECRET'),
-            callback_url: getFieldValue('MICROSOFT_CALLBACK_URL'),
-            scope: getFieldValue('MICROSOFT_SCOPE'),
-            tenant: getFieldValue('MICROSOFT_TENANT'),
+            client_id: getFieldValue(InfraConfigEnum.MicrosoftClientId),
+            client_secret: getFieldValue(InfraConfigEnum.MicrosoftClientSecret),
+            callback_url: getFieldValue(InfraConfigEnum.MicrosoftCallbackUrl),
+            scope: getFieldValue(InfraConfigEnum.MicrosoftScope),
+            tenant: getFieldValue(InfraConfigEnum.MicrosoftTenant),
           },
         },
       },
       mailConfigs: {
         name: 'email',
-        enabled: allowedAuthProviders.value.includes('EMAIL'),
+        enabled: allowedAuthProviders.value.includes(AuthProvider.Email),
         fields: {
-          mailer_smtp_url: getFieldValue('MAILER_SMTP_URL'),
-          mailer_from_address: getFieldValue('MAILER_ADDRESS_FROM'),
+          mailer_smtp_url: getFieldValue(InfraConfigEnum.MailerSmtpUrl),
+          mailer_from_address: getFieldValue(InfraConfigEnum.MailerAddressFrom),
         },
       },
       dataSharingConfigs: {
@@ -191,138 +132,13 @@ export function useConfigHandler(updatedConfigs?: Config) {
     workingConfigs.value = cloneDeep(currentConfigs.value);
   });
 
-  // Transforming the working configs back into the format required by the mutations
-  const updatedInfraConfigs = computed(() => {
-    let config: UpdatedConfigs[] = [
-      {
-        name: '',
-        value: '',
-      },
-    ];
+  /*
+    Check if any of the config fields are empty
+  */
 
-    if (updatedConfigs?.providers.google.enabled) {
-      config.push(
-        {
-          name: 'GOOGLE_CLIENT_ID',
-          value: updatedConfigs?.providers.google.fields.client_id ?? '',
-        },
-        {
-          name: 'GOOGLE_CLIENT_SECRET',
-          value: updatedConfigs?.providers.google.fields.client_secret ?? '',
-        },
-        {
-          name: 'GOOGLE_CALLBACK_URL',
-          value: updatedConfigs?.providers.google.fields.callback_url ?? '',
-        },
-        {
-          name: 'GOOGLE_SCOPE',
-          value: updatedConfigs?.providers.google.fields.scope ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'GOOGLE_CLIENT_ID' &&
-          item.name !== 'GOOGLE_CLIENT_SECRET' &&
-          item.name !== 'GOOGLE_CALLBACK_URL' &&
-          item.name !== 'GOOGLE_SCOPE'
-      );
-    }
-    if (updatedConfigs?.providers.microsoft.enabled) {
-      config.push(
-        {
-          name: 'MICROSOFT_CLIENT_ID',
-          value: updatedConfigs?.providers.microsoft.fields.client_id ?? '',
-        },
-        {
-          name: 'MICROSOFT_CLIENT_SECRET',
-          value: updatedConfigs?.providers.microsoft.fields.client_secret ?? '',
-        },
-        {
-          name: 'MICROSOFT_CALLBACK_URL',
-          value: updatedConfigs?.providers.microsoft.fields.callback_url ?? '',
-        },
-        {
-          name: 'MICROSOFT_SCOPE',
-          value: updatedConfigs?.providers.microsoft.fields.scope ?? '',
-        },
-        {
-          name: 'MICROSOFT_TENANT',
-          value: updatedConfigs?.providers.microsoft.fields.tenant ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'MICROSOFT_CLIENT_ID' &&
-          item.name !== 'MICROSOFT_CLIENT_SECRET' &&
-          item.name !== 'MICROSOFT_CALLBACK_URL' &&
-          item.name !== 'MICROSOFT_SCOPE' &&
-          item.name !== 'MICROSOFT_TENANT'
-      );
-    }
-
-    if (updatedConfigs?.providers.github.enabled) {
-      config.push(
-        {
-          name: 'GITHUB_CLIENT_ID',
-          value: updatedConfigs?.providers.github.fields.client_id ?? '',
-        },
-        {
-          name: 'GITHUB_CLIENT_SECRET',
-          value: updatedConfigs?.providers.github.fields.client_secret ?? '',
-        },
-        {
-          name: 'GITHUB_CALLBACK_URL',
-          value: updatedConfigs?.providers.github.fields.callback_url ?? '',
-        },
-        {
-          name: 'GITHUB_SCOPE',
-          value: updatedConfigs?.providers.github.fields.scope ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'GITHUB_CLIENT_ID' &&
-          item.name !== 'GITHUB_CLIENT_SECRET' &&
-          item.name !== 'GITHUB_CALLBACK_URL' &&
-          item.name !== 'GITHUB_SCOPE'
-      );
-    }
-
-    if (updatedConfigs?.mailConfigs.enabled) {
-      config.push(
-        {
-          name: 'MAILER_SMTP_URL',
-          value: updatedConfigs?.mailConfigs.fields.mailer_smtp_url ?? '',
-        },
-        {
-          name: 'MAILER_ADDRESS_FROM',
-          value: updatedConfigs?.mailConfigs.fields.mailer_from_address ?? '',
-        }
-      );
-    } else {
-      config = config.filter(
-        (item) =>
-          item.name !== 'MAILER_SMTP_URL' && item.name !== 'MAILER_ADDRESS_FROM'
-      );
-    }
-
-    config = config.filter((item) => item.name !== '');
-
-    return config;
-  });
-
-  // Checking if any of the config fields are empty
   const isFieldEmpty = (field: string) => field.trim() === '';
 
-  type ConfigSection = {
-    enabled: boolean;
-    fields: Record<string, string>;
-  };
-
-  const AreAnyConfigFieldsEmpty = (config: Config): boolean => {
+  const AreAnyConfigFieldsEmpty = (config: ServerConfigs): boolean => {
     const sections: Array<ConfigSection> = [
       config.providers.github,
       config.providers.google,
@@ -337,28 +153,44 @@ export function useConfigHandler(updatedConfigs?: Config) {
   };
 
   // Transforming the working configs back into the format required by the mutations
-  const updatedAllowedAuthProviders = computed(() => {
-    return [
+  const transformInfraConfigs = () => {
+    const updatedWorkingConfigs: ConfigTransform[] = [
       {
-        provider: 'GOOGLE',
-        status: updatedConfigs?.providers.google.enabled ? 'ENABLE' : 'DISABLE',
+        config: GOOGLE_CONFIGS,
+        enabled: updatedConfigs?.providers.google.enabled,
+        fields: updatedConfigs?.providers.google.fields,
       },
       {
-        provider: 'MICROSOFT',
-        status: updatedConfigs?.providers.microsoft.enabled
-          ? 'ENABLE'
-          : 'DISABLE',
+        config: GITHUB_CONFIGS,
+        enabled: updatedConfigs?.providers.github.enabled,
+        fields: updatedConfigs?.providers.github.fields,
       },
       {
-        provider: 'GITHUB',
-        status: updatedConfigs?.providers.github.enabled ? 'ENABLE' : 'DISABLE',
+        config: MICROSOFT_CONFIGS,
+        enabled: updatedConfigs?.providers.microsoft.enabled,
+        fields: updatedConfigs?.providers.microsoft.fields,
       },
       {
-        provider: 'EMAIL',
-        status: updatedConfigs?.mailConfigs.enabled ? 'ENABLE' : 'DISABLE',
+        config: MAIL_CONFIGS,
+        enabled: updatedConfigs?.mailConfigs.enabled,
+        fields: updatedConfigs?.mailConfigs.fields,
       },
     ];
-  });
+
+    const transformedConfigs: UpdatedConfigs[] = [];
+
+    updatedWorkingConfigs.forEach(({ config, enabled, fields }) => {
+      config.forEach(({ name, key }) => {
+        if (enabled && fields) {
+          const value =
+            typeof fields === 'string' ? fields : String(fields[key]);
+          transformedConfigs.push({ name, value });
+        }
+      });
+    });
+
+    return transformedConfigs;
+  };
 
   // Generic function to handle mutation execution and error handling
   const executeMutation = async <T, V>(
@@ -379,27 +211,59 @@ export function useConfigHandler(updatedConfigs?: Config) {
   // Updating the auth provider configurations
   const updateAuthProvider = (
     updateProviderStatus: UseMutationResponse<EnableAndDisableSsoMutation>
-  ) =>
-    executeMutation(
+  ) => {
+    const updatedAllowedAuthProviders: EnableAndDisableSsoArgs[] = [
+      {
+        provider: AuthProvider.Google,
+        status: updatedConfigs?.providers.google.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Microsoft,
+        status: updatedConfigs?.providers.microsoft.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Github,
+        status: updatedConfigs?.providers.github.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+      {
+        provider: AuthProvider.Email,
+        status: updatedConfigs?.mailConfigs.enabled
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
+      },
+    ];
+
+    return executeMutation(
       updateProviderStatus,
       {
-        providerInfo:
-          updatedAllowedAuthProviders.value as EnableAndDisableSsoArgs[],
+        providerInfo: updatedAllowedAuthProviders,
       },
       'configs.auth_providers.update_failure'
     );
+  };
 
   // Updating the infra configurations
   const updateInfraConfigs = (
     updateInfraConfigsMutation: UseMutationResponse<UpdateInfraConfigsMutation>
-  ) =>
-    executeMutation(
+  ) => {
+    const infraConfigs: InfraConfigArgs[] = updatedConfigs
+      ? transformInfraConfigs()
+      : [];
+
+    return executeMutation(
       updateInfraConfigsMutation,
       {
-        infraConfigs: updatedInfraConfigs.value as InfraConfigArgs[],
+        infraConfigs,
       },
-      'configs.mail_configs.update_failure'
+      'configs.update_failure'
     );
+  };
 
   // Resetting the infra configurations
   const resetInfraConfigs = (
@@ -411,7 +275,6 @@ export function useConfigHandler(updatedConfigs?: Config) {
       'configs.reset.failure'
     );
 
-  // Updating the data sharing configurations
   const updateDataSharingConfigs = (
     toggleDataSharingMutation: UseMutationResponse<ToggleAnalyticsCollectionMutation>
   ) =>
@@ -419,8 +282,8 @@ export function useConfigHandler(updatedConfigs?: Config) {
       toggleDataSharingMutation,
       {
         status: updatedConfigs?.dataSharingConfigs.enabled
-          ? 'ENABLE'
-          : 'DISABLE',
+          ? ServiceStatus.Enable
+          : ServiceStatus.Disable,
       },
       'configs.data_sharing.update_failure'
     );
@@ -428,8 +291,6 @@ export function useConfigHandler(updatedConfigs?: Config) {
   return {
     currentConfigs,
     workingConfigs,
-    updatedInfraConfigs,
-    updatedAllowedAuthProviders,
     updateAuthProvider,
     updateDataSharingConfigs,
     updateInfraConfigs,