Twenty config admin panel integration (#11755)

closes https://github.com/twentyhq/core-team-issues/issues/761 closes https://github.com/twentyhq/core-team-issues/issues/762 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
2025-04-30 12:42:59 +05:30
parent 842367f7bb
commit e957b1acd6
73 changed files with 2958 additions and 853 deletions
@@ -0,0 +1,115 @@
+import { useLingui } from '@lingui/react/macro';
+
+import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
+import { GET_DATABASE_CONFIG_VARIABLE } from '@/settings/admin-panel/config-variables/graphql/queries/getDatabaseConfigVariable';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { ConfigVariableValue } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  useCreateDatabaseConfigVariableMutation,
+  useDeleteDatabaseConfigVariableMutation,
+  useUpdateDatabaseConfigVariableMutation,
+} from '~/generated/graphql';
+
+export const useConfigVariableActions = (variableName: string) => {
+  const { t } = useLingui();
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [updateDatabaseConfigVariable] =
+    useUpdateDatabaseConfigVariableMutation();
+  const [createDatabaseConfigVariable] =
+    useCreateDatabaseConfigVariableMutation();
+  const [deleteDatabaseConfigVariable] =
+    useDeleteDatabaseConfigVariableMutation();
+
+  const handleUpdateVariable = async (
+    value: ConfigVariableValue,
+    isFromDatabase: boolean,
+  ) => {
+    try {
+      if (
+        value === null ||
+        (typeof value === 'string' && value === '') ||
+        (Array.isArray(value) && value.length === 0)
+      ) {
+        await handleDeleteVariable();
+        return;
+      }
+
+      if (isFromDatabase) {
+        await updateDatabaseConfigVariable({
+          variables: {
+            key: variableName,
+            value,
+          },
+          refetchQueries: [
+            {
+              query: GET_DATABASE_CONFIG_VARIABLE,
+              variables: { key: variableName },
+            },
+            {
+              query: GET_CLIENT_CONFIG,
+            },
+          ],
+        });
+      } else {
+        await createDatabaseConfigVariable({
+          variables: {
+            key: variableName,
+            value,
+          },
+          refetchQueries: [
+            {
+              query: GET_DATABASE_CONFIG_VARIABLE,
+              variables: { key: variableName },
+            },
+            {
+              query: GET_CLIENT_CONFIG,
+            },
+          ],
+        });
+      }
+
+      enqueueSnackBar(t`Variable updated successfully`, {
+        variant: SnackBarVariant.Success,
+      });
+    } catch (error) {
+      enqueueSnackBar(t`Failed to update variable`, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  };
+
+  const handleDeleteVariable = async (e?: React.MouseEvent<HTMLElement>) => {
+    if (isDefined(e)) {
+      e.preventDefault();
+    }
+
+    try {
+      await deleteDatabaseConfigVariable({
+        variables: {
+          key: variableName,
+        },
+        refetchQueries: [
+          {
+            query: GET_DATABASE_CONFIG_VARIABLE,
+            variables: { key: variableName },
+          },
+          {
+            query: GET_CLIENT_CONFIG,
+          },
+        ],
+      });
+    } catch (error) {
+      enqueueSnackBar(t`Failed to remove  override`, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  };
+
+  return {
+    handleUpdateVariable,
+    handleDeleteVariable,
+  };
+};
@@ -0,0 +1,54 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { ConfigVariableValue } from 'twenty-shared/types';
+import { z } from 'zod';
+
+import { ConfigVariable } from '~/generated/graphql';
+
+type FormValues = {
+  value: ConfigVariableValue;
+};
+
+export const useConfigVariableForm = (variable?: ConfigVariable) => {
+  const validationSchema = z.object({
+    value: z.union([
+      z.string(),
+      z.number(),
+      z.boolean(),
+      z.array(z.string()),
+      z.null(),
+    ]),
+  });
+
+  const {
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting },
+    watch,
+  } = useForm<FormValues>({
+    resolver: zodResolver(validationSchema),
+    values: { value: variable?.value ?? null },
+  });
+
+  const currentValue = watch('value');
+  const hasValueChanged = currentValue !== variable?.value;
+  const isValueValid = !!(
+    variable &&
+    !variable.isEnvOnly &&
+    hasValueChanged &&
+    ((typeof currentValue === 'string' && currentValue.trim() !== '') ||
+      typeof currentValue === 'boolean' ||
+      typeof currentValue === 'number' ||
+      (Array.isArray(currentValue) && currentValue.length > 0))
+  );
+
+  return {
+    handleSubmit,
+    setValue,
+    isSubmitting,
+    watch,
+    currentValue,
+    hasValueChanged,
+    isValueValid,
+  };
+};