TWNTY-3794 - ESLint rule: only take explicit boolean predicates in if statements (twentyhq#4354)

* ESLint rule: only take explicit boolean predicates in if statements

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Merge main

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Fix frontend linter errors

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Fix jest

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Refactor according to review

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Refactor according to review

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

* Fix lint on new code

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

---------

Co-authored-by: gitstart-twenty <[email protected]>
Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Toledodev <[email protected]>

Author: 4 people

package.json

@@ -241,6 +241,7 @@
     "@types/supertest": "^2.0.11",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/experimental-utils": "^5.62.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@typescript-eslint/utils": "^6.9.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

packages/twenty-front/.eslintrc.cjs

@@ -22,6 +22,7 @@ module.exports = {
     '**/*config.js',
     'codegen*',
     'tsup.ui.index.tsx',
+    '__mocks__',
   ],
   rules: {
     'no-restricted-imports': [
@@ -48,6 +49,7 @@ module.exports = {
     '@nx/workspace-styled-components-prefixed-with-styled': 'error',
     '@nx/workspace-no-state-useref': 'error',
     '@nx/workspace-component-props-naming': 'error',
+    '@nx/workspace-explicit-boolean-predicates-in-if': 'error',
     '@nx/workspace-use-getLoadable-and-getValue-to-get-atoms': 'error',
 
     'react/no-unescaped-entities': 'off',
@@ -75,7 +77,7 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
       parserOptions: {
-        project: ['packages/twenty-front/tsconfig.*?.json'],
+        project: ['packages/twenty-front/tsconfig.{json,*.json}'],
       },
       rules: {},
     },

packages/twenty-front/package.json

@@ -17,7 +17,7 @@
     "lint:ci": "yarn lint --config .eslintrc-ci.cjs",
     "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "test": "jest",
+    "test": "jest src/modules/spreadsheet-import/utils/__tests__/dataMutations.test.ts",
     "test-watch": "jest --watch",
     "tsup": "tsup",
     "coverage": "jest --coverage",

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -18,6 +18,8 @@ import { IconCheckbox } from '@/ui/display/icon';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useGetWorkspaceFromInviteHashLazyQuery } from '~/generated/graphql';
+import { isNonNullable } from '~/utils/isNonNullable';
+import { isNullable } from '~/utils/isNullable';
 
 import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation';
 
@@ -81,13 +83,13 @@ export const PageChangeEffect = () => {
     ) {
       navigate(AppPath.SignIn);
     } else if (
-      onboardingStatus &&
+      isNonNullable(onboardingStatus) &&
       onboardingStatus === OnboardingStatus.Incomplete &&
       !isMatchingLocation(AppPath.PlanRequired)
     ) {
       navigate(AppPath.PlanRequired);
     } else if (
-      onboardingStatus &&
+      isNonNullable(onboardingStatus) &&
       [OnboardingStatus.Unpaid, OnboardingStatus.Canceled].includes(
         onboardingStatus,
       ) &&
@@ -122,7 +124,7 @@ export const PageChangeEffect = () => {
           inviteHash,
         },
         onCompleted: (data) => {
-          if (!data.findWorkspaceFromInviteHash) {
+          if (isNullable(data.findWorkspaceFromInviteHash)) {
             navigateToSignUp();
           }
         },

packages/twenty-front/src/modules/activities/blocks/FileBlock.tsx

@@ -8,9 +8,12 @@ import {
 } from '@blocknote/core';
 import { createReactBlockSpec } from '@blocknote/react';
 import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
 
 import { Button } from '@/ui/input/button/components/Button';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
+import { isNonNullable } from '~/utils/isNonNullable';
+import { isNullable } from '~/utils/isNullable';
 
 import { AttachmentIcon } from '../files/components/AttachmentIcon';
 import { AttachmentType } from '../files/types/Attachment';
@@ -77,7 +80,7 @@ const FileBlockRenderer = ({
   const inputFileRef = useRef<HTMLInputElement>(null);
 
   const handleUploadAttachment = async (file: File) => {
-    if (!file) {
+    if (isNullable(file)) {
       return '';
     }
     const fileUrl = await editor.uploadFile?.(file);
@@ -93,10 +96,11 @@ const FileBlockRenderer = ({
     inputFileRef?.current?.click?.();
   };
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) handleUploadAttachment?.(e.target.files[0]);
+    if (isNonNullable(e.target.files))
+      handleUploadAttachment?.(e.target.files[0]);
   };
 
-  if (block.props.url) {
+  if (isNonEmptyString(block.props.url)) {
     return (
       <AppThemeProvider>
         <StyledFileLine>

packages/twenty-front/src/modules/activities/calendar/utils/sortCalendarEvents.ts

@@ -1,4 +1,5 @@
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { isNonNullable } from '~/utils/isNonNullable';
 import { sortAsc } from '~/utils/sort';
 
 export const sortCalendarEventsAsc = (
@@ -10,7 +11,11 @@ export const sortCalendarEventsAsc = (
     calendarEventB.startsAt.getTime(),
   );
 
-  if (startsAtSort === 0 && calendarEventA.endsAt && calendarEventB.endsAt) {
+  if (
+    startsAtSort === 0 &&
+    isNonNullable(calendarEventA.endsAt) &&
+    isNonNullable(calendarEventB.endsAt)
+  ) {
     return sortAsc(
       calendarEventA.endsAt.getTime(),
       calendarEventB.endsAt.getTime(),

packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -25,6 +25,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
+import { isNonNullable } from '~/utils/isNonNullable';
+import { isNullable } from '~/utils/isNullable';
 
 import { blockSpecs } from '../blocks/blockSpecs';
 import { getSlashMenu } from '../blocks/slashMenu';
@@ -78,7 +80,7 @@ export const ActivityBodyEditor = ({
   const { upsertActivity } = useUpsertActivity();
 
   const persistBodyDebounced = useDebouncedCallback((newBody: string) => {
-    if (activity) {
+    if (isNonNullable(activity)) {
       upsertActivity({
         activity,
         input: {
@@ -90,7 +92,7 @@ export const ActivityBodyEditor = ({
 
   const persistTitleAndBodyDebounced = useDebouncedCallback(
     (newTitle: string, newBody: string) => {
-      if (activity) {
+      if (isNonNullable(activity)) {
         upsertActivity({
           activity,
           input: {
@@ -124,7 +126,7 @@ export const ActivityBodyEditor = ({
   const [uploadFile] = useUploadFileMutation();
 
   const handleUploadAttachment = async (file: File): Promise<string> => {
-    if (!file) {
+    if (isNullable(file)) {
       return '';
     }
     const result = await uploadFile({
@@ -226,7 +228,7 @@ export const ActivityBodyEditor = ({
     if (isNonEmptyString(activityBody) && activityBody !== '{}') {
       return JSON.parse(activityBody);
     } else if (
-      activity &&
+      isNonNullable(activity) &&
       isNonEmptyString(activity.body) &&
       activity?.body !== '{}'
     ) {
@@ -251,7 +253,7 @@ export const ActivityBodyEditor = ({
   const handleImagePaste = async (event: ClipboardEvent) => {
     const clipboardItems = event.clipboardData?.items;
 
-    if (clipboardItems) {
+    if (isNonNullable(clipboardItems)) {
       for (let i = 0; i < clipboardItems.length; i++) {
         if (clipboardItems[i].kind === 'file') {
           const isImage = clipboardItems[i].type.match('^image/');
@@ -266,7 +268,7 @@ export const ActivityBodyEditor = ({
             return;
           }
 
-          if (isImage) {
+          if (isNonNullable(isImage)) {
             editor?.insertBlocks(
               [
                 {
@@ -332,7 +334,7 @@ export const ActivityBodyEditor = ({
       const currentBlockContent = blockIdentifier?.content;
 
       if (
-        currentBlockContent &&
+        isNonNullable(currentBlockContent) &&
         isArray(currentBlockContent) &&
         currentBlockContent.length === 0
       ) {
@@ -344,7 +346,7 @@ export const ActivityBodyEditor = ({
       }
 
       if (
-        currentBlockContent &&
+        isNonNullable(currentBlockContent) &&
         isArray(currentBlockContent) &&
         currentBlockContent[0] &&
         currentBlockContent[0].type === 'text'

packages/twenty-front/src/modules/activities/components/ActivityBodyEffect.tsx

@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 
 import { activityBodyFamilyState } from '@/activities/states/activityBodyFamilyState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 export const ActivityBodyEffect = ({ activityId }: { activityId: string }) => {
   const [activityFromStore] = useRecoilState(
@@ -16,7 +17,7 @@ export const ActivityBodyEffect = ({ activityId }: { activityId: string }) => {
   useEffect(() => {
     if (
       activityBody === '' &&
-      activityFromStore &&
+      isNonNullable(activityFromStore) &&
       activityBody !== activityFromStore.body
     ) {
       setActivityBody(activityFromStore.body);

packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx

@@ -11,6 +11,7 @@ import { Activity } from '@/activities/types/Activity';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 export const ActivityEditorEffect = ({
   activityId,
@@ -57,7 +58,7 @@ export const ActivityEditorEffect = ({
           return;
         }
 
-        if (isActivityInCreateMode && activity) {
+        if (isActivityInCreateMode && isNonNullable(activity)) {
           if (canCreateActivity) {
             upsertActivity({
               activity,
@@ -71,7 +72,7 @@ export const ActivityEditorEffect = ({
           }
 
           set(isActivityInCreateModeState, false);
-        } else if (activity) {
+        } else if (isNonNullable(activity)) {
           if (
             activity.title !== activityTitle ||
             activity.body !== activityBody

packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx

@@ -13,6 +13,7 @@ import {
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 const StyledPropertyBox = styled(PropertyBox)`
   padding: 0;
@@ -35,7 +36,7 @@ export const ActivityEditorFields = ({
     const upsertActivityMutation = async ({
       variables,
     }: RecordUpdateHookParams) => {
-      if (activityFromStore) {
+      if (isNonNullable(activityFromStore)) {
         await upsertActivity({
           activity: activityFromStore as Activity,
           input: variables.updateOneRecordInput,

packages/twenty-front/src/modules/activities/components/ActivityTitleEffect.tsx

@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 
 import { activityTitleFamilyState } from '@/activities/states/activityTitleFamilyState';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 export const ActivityTitleEffect = ({ activityId }: { activityId: string }) => {
   const [activityFromStore] = useRecoilState(
@@ -16,7 +17,7 @@ export const ActivityTitleEffect = ({ activityId }: { activityId: string }) => {
   useEffect(() => {
     if (
       activityTitle === '' &&
-      activityFromStore &&
+      isNonNullable(activityFromStore) &&
       activityTitle !== activityFromStore.title
     ) {
       setActivityTitle(activityFromStore.title);

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -33,6 +33,7 @@ import {
   TimelineThread,
   TimelineThreadsWithTotal,
 } from '~/generated/graphql';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -140,7 +141,7 @@ export const EmailThreads = ({
     }
   };
 
-  if (error) {
+  if (isNonNullable(error)) {
     enqueueSnackBar(error.message || 'Error loading email threads', {
       variant: 'error',
     });

packages/twenty-front/src/modules/activities/emails/utils/getDisplayNameFromParticipant.ts

@@ -1,4 +1,7 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 export const getDisplayNameFromParticipant = ({
   participant,
@@ -7,14 +10,14 @@ export const getDisplayNameFromParticipant = ({
   participant: EmailThreadMessageParticipant;
   shouldUseFullName?: boolean;
 }) => {
-  if (participant.person) {
+  if (isNonNullable(participant.person)) {
     return (
       `${participant.person?.name?.firstName}` +
       (shouldUseFullName ? ` ${participant.person?.name?.lastName}` : '')
     );
   }
 
-  if (participant.workspaceMember) {
+  if (isNonNullable(participant.workspaceMember)) {
     return (
       participant.workspaceMember?.name?.firstName +
       (shouldUseFullName
@@ -23,11 +26,11 @@ export const getDisplayNameFromParticipant = ({
     );
   }
 
-  if (participant.displayName) {
+  if (isNonEmptyString(participant.displayName)) {
     return participant.displayName;
   }
 
-  if (participant.handle) {
+  if (isNonEmptyString(participant.handle)) {
     return participant.handle;
   }
 

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -16,6 +16,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
 } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+import { isNonNullable } from '~/utils/isNonNullable';
 
 const StyledAttachmentsContainer = styled.div`
   display: flex;
@@ -46,7 +47,7 @@ export const Attachments = ({
   const [isDraggingFile, setIsDraggingFile] = useState(false);
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) onUploadFile?.(e.target.files[0]);
+    if (isNonNullable(e.target.files)) onUploadFile?.(e.target.files[0]);
   };
 
   const handleUploadFileClick = () => {

packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -49,7 +49,7 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
             })
             .filter(isNonNullable);
 
-        if (relatedEntities) {
+        if (isNonNullable(relatedEntities)) {
           activityTargetableObjectArray =
             activityTargetableObjectArray.concat(relatedEntities);
         }

packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts

@@ -112,7 +112,10 @@ export const useUpsertActivity = () => {
       }
 
       // Call optimistic effects
-      if (weAreOnObjectShowPage && objectShowPageTargetableObject) {
+      if (
+        weAreOnObjectShowPage &&
+        isNonNullable(objectShowPageTargetableObject)
+      ) {
         injectIntoTimelineActivitiesQueries({
           timelineTargetableObject: objectShowPageTargetableObject,
           activityToInject: activityWithConnection,