chore: upgrade Nx to v18.1.3 (#4706)

Split from https://github.com/twentyhq/twenty/pull/4518

- Upgrades dependencies and applies automatic config migrations with the
command: `npx nx migrate nx` (see
https://nx.dev/nx-api/nx/documents/migrate)
- Fixes lint errors after upgrading `@typescript-eslint`

Note: it was not possible (for now) to migrate Nx to the latest stable
version (v18.2.1) because it upgrades Typescript to v5.4.3, which seems
to cause a bug on install when Yarn tries to apply its native patches.
Might be a bug on the Yarn side.

packages/twenty-front/src/index.tsx

@@ -31,7 +31,9 @@ import { App } from './App';
 import './index.css';
 import 'react-loading-skeleton/dist/skeleton.css';
 
-const root = ReactDOM.createRoot(document.getElementById('root')!);
+const root = ReactDOM.createRoot(
+  document.getElementById('root') ?? document.body,
+);
 
 root.render(
   <RecoilRoot>

packages/twenty-front/src/modules/apollo/utils/index.ts

@@ -30,7 +30,9 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
     const operationType = (operation.query.definitions[0] as any).operation;
     const headers = operation.getContext().headers;
 
-    const [queryName, query] = parseQuery(operation.query.loc!.source.body);
+    const [queryName, query] = parseQuery(
+      operation.query.loc?.source.body ?? '',
+    );
 
     if (operationType === 'subscription') {
       const date = new Date().toLocaleTimeString();

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -108,7 +108,8 @@ export const useAuth = () => {
           .filter(
             ({ workspace }) => workspace !== null && workspace !== undefined,
           )
-          .map((validWorkspace) => validWorkspace.workspace!);
+          .map((validWorkspace) => validWorkspace.workspace)
+          .filter(isDefined);
 
         setWorkspaces(validWorkspaces);
       }

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader.tsx

@@ -53,7 +53,7 @@ export const RecordDetailSectionHeader = ({
         <StyledTitleLabel>{title}</StyledTitleLabel>
         {link && <StyledLink to={link.to}>{link.label}</StyledLink>}
       </StyledTitle>
-      {hideRightAdornmentOnMouseLeave && !isHovered! ? null : rightAdornment}
+      {hideRightAdornmentOnMouseLeave && !isHovered ? null : rightAdornment}
     </StyledHeader>
   );
 };

packages/twenty-front/src/modules/settings/developers/utils/format-expiration.ts

@@ -6,8 +6,8 @@ import { beautifyDateDiff } from '~/utils/date-utils';
 
 export const formatExpiration = (
   expiresAt: string | null,
-  withExpiresMention: boolean = false,
-  short: boolean = true,
+  withExpiresMention = false,
+  short = true,
 ) => {
   if (isNonEmptyString(expiresAt)) {
     const dateDiff = beautifyDateDiff(expiresAt, undefined, short);

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -103,7 +103,7 @@ export const MultiWorkspaceDropdownButton = ({
           {workspaces.map((workspace) => (
             <MenuItemSelectAvatar
               key={workspace.id}
-              text={workspace.displayName!}
+              text={workspace.displayName ?? ''}
               avatar={
                 <StyledLogo
                   logo={

packages/twenty-front/src/modules/users/components/UserProvider.tsx

@@ -5,9 +5,10 @@ import { useSetRecoilState } from 'recoil';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { Workspaces, workspacesState } from '@/auth/states/workspaces';
+import { workspacesState } from '@/auth/states/workspaces';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+import { User } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 
 export const UserProvider = ({ children }: React.PropsWithChildren) => {
@@ -21,32 +22,34 @@ export const UserProvider = ({ children }: React.PropsWithChildren) => {
     currentWorkspaceMemberState,
   );
 
-  const { loading: queryLoading, data: queryData } = useQuery(GET_CURRENT_USER);
+  const { loading: queryLoading, data: queryData } = useQuery<{
+    currentUser: User;
+  }>(GET_CURRENT_USER);
 
   useEffect(() => {
     if (!queryLoading) {
       setIsLoading(false);
     }
-    if (isDefined(queryData?.currentUser)) {
-      setCurrentUser(queryData.currentUser);
-      setCurrentWorkspace(queryData.currentUser.defaultWorkspace);
-    }
-    if (isDefined(queryData?.currentUser?.workspaceMember)) {
-      const workspaceMember = queryData.currentUser.workspaceMember;
+
+    if (!isDefined(queryData?.currentUser)) return;
+
+    setCurrentUser(queryData.currentUser);
+    setCurrentWorkspace(queryData.currentUser.defaultWorkspace);
+
+    const { workspaceMember, workspaces: userWorkspaces } =
+      queryData.currentUser;
+
+    if (isDefined(workspaceMember)) {
       setCurrentWorkspaceMember({
         ...workspaceMember,
         colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
       });
     }
-    if (isDefined(queryData?.currentUser?.workspaces)) {
-      const validWorkspaces = queryData.currentUser.workspaces.filter(
-        (obj: any) => obj.workspace !== null && obj.workspace !== undefined,
-      );
-      const workspaces: Workspaces[] = [];
-      validWorkspaces.forEach((validWorkspace: any) => {
-        const workspace = validWorkspace.workspace! as Workspaces;
-        workspaces.push(workspace);
-      });
+
+    if (isDefined(userWorkspaces)) {
+      const workspaces = userWorkspaces
+        .map(({ workspace }) => workspace)
+        .filter(isDefined);
 
       setWorkspaces(workspaces);
     }

packages/twenty-front/src/utils/date-utils.ts

@@ -116,7 +116,7 @@ export const hasDatePassed = (date: Date | string | number) => {
 export const beautifyDateDiff = (
   date: string,
   dateToCompareWith?: string,
-  short: boolean = false,
+  short = false,
 ) => {
   const dateDiff = DateTime.fromISO(date).diff(
     dateToCompareWith ? DateTime.fromISO(dateToCompareWith) : DateTime.now(),

packages/twenty-server/package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@nestjs/cli": "10.3.0",
-    "@nx/js": "17.2.8",
+    "@nx/js": "18.1.3",
     "@types/lodash.differencewith": "^4.5.9",
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.5.8",