feat: workspace update name and logo (#553)

* feat: workspace update name and logo

* fix: remove logs

* fix: disable warning until refacto

* Fix text

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>

front/src/App.tsx

@@ -19,6 +19,7 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 
 import { CompanyShow } from './pages/companies/CompanyShow';
 import { PersonShow } from './pages/people/PersonShow';
+import { SettingsWorksapce } from './pages/settings/SettingsWorkspace';
 import { AppInternalHooks } from './AppInternalHooks';
 
 /**
@@ -84,6 +85,10 @@ export function App() {
                           path="workspace-members"
                           element={<SettingsWorkspaceMembers />}
                         />
+                        <Route
+                          path="workspace"
+                          element={<SettingsWorksapce />}
+                        />
                       </Routes>
                     }
                   />

front/src/generated/graphql.tsx

@@ -3376,6 +3376,11 @@ export type RemoveProfilePictureMutationVariables = Exact<{
 
 export type RemoveProfilePictureMutation = { __typename?: 'Mutation', updateUser: { __typename?: 'User', id: string } };
 
+export type GetCurrentWorkspaceQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCurrentWorkspaceQuery = { __typename?: 'Query', currentWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, domainName?: string | null, logo?: string | null } };
+
 export type GetWorkspaceMembersQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -5094,6 +5099,43 @@ export function useRemoveProfilePictureMutation(baseOptions?: Apollo.MutationHoo
 export type RemoveProfilePictureMutationHookResult = ReturnType<typeof useRemoveProfilePictureMutation>;
 export type RemoveProfilePictureMutationResult = Apollo.MutationResult<RemoveProfilePictureMutation>;
 export type RemoveProfilePictureMutationOptions = Apollo.BaseMutationOptions<RemoveProfilePictureMutation, RemoveProfilePictureMutationVariables>;
+export const GetCurrentWorkspaceDocument = gql`
+    query GetCurrentWorkspace {
+  currentWorkspace {
+    id
+    displayName
+    domainName
+    logo
+  }
+}
+    `;
+
+/**
+ * __useGetCurrentWorkspaceQuery__
+ *
+ * To run a query within a React component, call `useGetCurrentWorkspaceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetCurrentWorkspaceQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetCurrentWorkspaceQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetCurrentWorkspaceQuery(baseOptions?: Apollo.QueryHookOptions<GetCurrentWorkspaceQuery, GetCurrentWorkspaceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetCurrentWorkspaceQuery, GetCurrentWorkspaceQueryVariables>(GetCurrentWorkspaceDocument, options);
+      }
+export function useGetCurrentWorkspaceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetCurrentWorkspaceQuery, GetCurrentWorkspaceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetCurrentWorkspaceQuery, GetCurrentWorkspaceQueryVariables>(GetCurrentWorkspaceDocument, options);
+        }
+export type GetCurrentWorkspaceQueryHookResult = ReturnType<typeof useGetCurrentWorkspaceQuery>;
+export type GetCurrentWorkspaceLazyQueryHookResult = ReturnType<typeof useGetCurrentWorkspaceLazyQuery>;
+export type GetCurrentWorkspaceQueryResult = Apollo.QueryResult<GetCurrentWorkspaceQuery, GetCurrentWorkspaceQueryVariables>;
 export const GetWorkspaceMembersDocument = gql`
     query GetWorkspaceMembers {
   workspaceMembers: findManyWorkspaceMember {

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -56,7 +56,6 @@ export function SettingsNavbar() {
           label="Members"
           to="/settings/workspace-members"
           icon={<IconUsers size={theme.icon.size.md} />}
-          soon={false}
           active={
             !!useMatch({
               path: useResolvedPath('/settings/workspace-members').pathname,
@@ -68,7 +67,6 @@ export function SettingsNavbar() {
           label="General"
           to="/settings/workspace"
           icon={<IconSettings size={theme.icon.size.md} />}
-          soon={true}
           active={
             !!useMatch({
               path: useResolvedPath('/settings/workspace').pathname,

front/src/modules/settings/workspace/components/NameField.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+import debounce from 'lodash.debounce';
+import { useRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+import { GET_CURRENT_USER } from '@/users/queries';
+import { useUpdateWorkspaceMutation } from '~/generated/graphql';
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+type OwnProps = {
+  autoSave?: boolean;
+  onNameUpdate?: (name: string) => void;
+};
+
+export function NameField({ autoSave = true, onNameUpdate }: OwnProps) {
+  const [currentUser] = useRecoilState(currentUserState);
+  const workspace = currentUser?.workspaceMember?.workspace;
+
+  const [displayName, setDisplayName] = useState(workspace?.displayName ?? '');
+
+  const [updateWorkspace] = useUpdateWorkspaceMutation();
+
+  // TODO: Enhance this with react-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: {
+            data: {
+              displayName: {
+                set: name,
+              },
+            },
+          },
+          refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+          awaitRefetchQueries: true,
+        });
+
+        if (errors || !data?.updateWorkspace) {
+          throw errors;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }, 500),
+    [updateWorkspace],
+  );
+
+  useEffect(() => {
+    debouncedUpdate(displayName);
+    return debouncedUpdate.cancel;
+  }, [debouncedUpdate, displayName]);
+
+  return (
+    <StyledComboInputContainer>
+      <TextInput
+        label="Name"
+        value={displayName}
+        onChange={setDisplayName}
+        placeholder="Apple"
+        fullWidth
+      />
+    </StyledComboInputContainer>
+  );
+}

front/src/modules/ui/components/inputs/TextInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = Omit<
@@ -52,16 +52,13 @@ export function TextInput({
   fullWidth,
   ...props
 }: OwnProps): JSX.Element {
-  const [internalValue, setInternalValue] = useState(value);
-
   return (
     <StyledContainer>
       {label && <StyledLabel>{label}</StyledLabel>}
       <StyledInput
         fullWidth={fullWidth ?? false}
-        value={internalValue}
+        value={value}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setInternalValue(event.target.value);
           if (onChange) {
             onChange(event.target.value);
           }

front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { expect } from '@storybook/jest';
 import { jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -17,9 +18,22 @@ type Story = StoryObj<typeof TextInput>;
 
 const changeJestFn = jest.fn();
 
+function FakeTextInput({ onChange }: any) {
+  const [value, setValue] = useState<string>('A good value ');
+  return (
+    <TextInput
+      value={value}
+      onChange={(text) => {
+        setValue(text);
+        onChange(text);
+      }}
+    />
+  );
+}
+
 export const Default: Story = {
   render: getRenderWrapperForComponent(
-    <TextInput value="A good value " onChange={changeJestFn} />,
+    <FakeTextInput onChange={changeJestFn} />,
   ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

front/src/pages/settings/SettingsWorkspace.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+import { NameField } from '@/settings/workspace/components/NameField';
+import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
+import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
+import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: 350px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export function SettingsWorksapce() {
+  return (
+    <NoTopBarContainer>
+      <div>
+        <StyledContainer>
+          <MainSectionTitle>General</MainSectionTitle>
+          <StyledSectionContainer>
+            <SubSectionTitle title="Picture" />
+            <WorkspaceLogoUploader />
+          </StyledSectionContainer>
+          <StyledSectionContainer>
+            <SubSectionTitle
+              title="Name"
+              description="Name of your workspace"
+            />
+            <NameField />
+          </StyledSectionContainer>
+        </StyledContainer>
+      </div>
+    </NoTopBarContainer>
+  );
+}