Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import debounce from 'lodash.debounce';
+import { useRecoilValue } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
+import { logError } from '~/utils/logError';
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+type NameFieldProps = {
+  autoSave?: boolean;
+  onNameUpdate?: (name: string) => void;
+};
+
+export const NameField = ({
+  autoSave = true,
+  onNameUpdate,
+}: NameFieldProps) => {
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  const [displayName, setDisplayName] = useState(
+    currentWorkspace?.displayName ?? '',
+  );
+
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+
+  // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedUpdate = useCallback(
+    debounce(async (name: string) => {
+      if (onNameUpdate) {
+        onNameUpdate(displayName);
+      }
+      if (!autoSave || !name) {
+        return;
+      }
+      try {
+        const { data, errors } = await updateWorkspace({
+          variables: {
+            input: {
+              displayName: name,
+            },
+          },
+        });
+
+        if (errors || !data?.updateWorkspace) {
+          throw errors;
+        }
+      } catch (error) {
+        logError(error);
+      }
+    }, 500),
+    [updateWorkspace],
+  );
+
+  useEffect(() => {
+    debouncedUpdate(displayName);
+    return debouncedUpdate.cancel;
+  }, [debouncedUpdate, displayName]);
+
+  return (
+    <StyledComboInputContainer>
+      <TextInput
+        label="Name"
+        value={displayName}
+        onChange={setDisplayName}
+        placeholder="Apple"
+        fullWidth
+      />
+    </StyledComboInputContainer>
+  );
+};

packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx

@@ -0,0 +1,46 @@
+import { useRecoilState } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Toggle } from '@/ui/input/components/Toggle';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
+
+export const ToggleImpersonate = () => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+
+  const handleChange = async (value: boolean) => {
+    try {
+      if (!currentWorkspace?.id) {
+        throw new Error('User is not logged in');
+      }
+      await updateWorkspace({
+        variables: {
+          input: {
+            allowImpersonation: value,
+          },
+        },
+      });
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        allowImpersonation: value,
+      });
+    } catch (err: any) {
+      enqueueSnackBar(err?.message, {
+        variant: 'error',
+      });
+    }
+  };
+
+  return (
+    <Toggle
+      value={currentWorkspace?.allowImpersonation}
+      onChange={handleChange}
+    />
+  );
+};

packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx

@@ -0,0 +1,64 @@
+import { useRecoilState } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { ImageInput } from '@/ui/input/components/ImageInput';
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+import {
+  useUpdateWorkspaceMutation,
+  useUploadWorkspaceLogoMutation,
+} from '~/generated/graphql';
+
+export const WorkspaceLogoUploader = () => {
+  const [uploadLogo] = useUploadWorkspaceLogoMutation();
+  const [updateWorkspce] = useUpdateWorkspaceMutation();
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+
+  const onUpload = async (file: File) => {
+    if (!file) {
+      return;
+    }
+    if (!currentWorkspace?.id) {
+      throw new Error('Workspace id not found');
+    }
+    await uploadLogo({
+      variables: {
+        file,
+      },
+      onCompleted: (data) => {
+        setCurrentWorkspace({
+          ...currentWorkspace,
+          logo: data.uploadWorkspaceLogo,
+        });
+      },
+    });
+  };
+
+  const onRemove = async () => {
+    if (!currentWorkspace?.id) {
+      throw new Error('Workspace id not found');
+    }
+    await updateWorkspce({
+      variables: {
+        input: {
+          logo: null,
+        },
+      },
+      onCompleted: () => {
+        setCurrentWorkspace({
+          ...currentWorkspace,
+          logo: null,
+        });
+      },
+    });
+  };
+
+  return (
+    <ImageInput
+      picture={getImageAbsoluteURIOrBase64(currentWorkspace?.logo)}
+      onUpload={onUpload}
+      onRemove={onRemove}
+    />
+  );
+};