5421 box shadow on frozen header and first column (#6130)

- Refactored components in table - Added a isTableRecordScrolledLeftState and isTableRecordScrolledTopState to subscribe to table scroll - Added a zIndex logic that subscribes to those new states in new tinier components --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Jul 5, 2024 · 7b3a590 · 7b3a590
1 parent cc6ce14
commit 7b3a590
Show file tree

Hide file tree

Showing 68 changed files with 1,530 additions and 1,129 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,14 +1,7 @@
 module.exports = {
   root: true,
   extends: ['plugin:prettier/recommended'],
-  plugins: [
-    '@nx',
-    'prefer-arrow',
-    'import',
-    'simple-import-sort',
-    'unused-imports',
-    'unicorn',
-  ],
+  plugins: ['@nx', 'prefer-arrow', 'import', 'unused-imports', 'unicorn'],
   rules: {
     'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
@@ -53,26 +46,6 @@ module.exports = {
       },
     ],
 
-    'simple-import-sort/imports': [
-      'error',
-      {
-        groups: [
-          // Packages
-          ['^react', '^@?\\w'],
-          // Internal modules
-          ['^(@|~|src|@ui)(/.*|$)'],
-          // Side effect imports
-          ['^\\u0000'],
-          // Relative imports
-          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
-          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
-          // CSS imports
-          ['^.+\\.?(css)$'],
-        ],
-      },
-    ],
-    'simple-import-sort/exports': 'error',
-
     'unused-imports/no-unused-imports': 'warn',
     'unused-imports/no-unused-vars': [
       'warn',

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,21 +5,24 @@
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[json]": {

diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useIsFieldEmpty.ts
@@ -9,6 +9,7 @@ import { FieldContext } from '../contexts/FieldContext';
 export const useIsFieldEmpty = () => {
   const { entityId, fieldDefinition, overridenIsFieldEmpty } =
     useContext(FieldContext);
+
   const fieldValue = useRecordFieldValue(
     entityId,
     fieldDefinition?.metadata?.fieldName ?? '',

diff --git a/...d-table/components/RemoveSortingModal.tsx → ...ponents/RecordIndexRemoveSortingModal.tsx b/...d-table/components/RemoveSortingModal.tsx → ...ponents/RecordIndexRemoveSortingModal.tsx
@@ -5,7 +5,7 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { useCombinedViewSorts } from '@/views/hooks/useCombinedViewSorts';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 
-export const RemoveSortingModal = ({
+export const RecordIndexRemoveSortingModal = ({
   recordTableId,
 }: {
   recordTableId: string;

diff --git a/...nty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx b/...nty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx
@@ -1,8 +1,8 @@
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { RecordUpdateHookParams } from '@/object-record/record-field/contexts/FieldContext';
+import { RecordIndexRemoveSortingModal } from '@/object-record/record-index/components/RecordIndexRemoveSortingModal';
 import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
 import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
-import { RemoveSortingModal } from '@/object-record/record-table/components/RemoveSortingModal';
 import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
 
 type RecordIndexTableContainerProps = {
@@ -39,7 +39,7 @@ export const RecordIndexTableContainer = ({
         createRecord={createRecord}
       />
       <RecordTableActionBar recordTableId={recordTableId} />
-      <RemoveSortingModal recordTableId={recordTableId} />
+      <RecordIndexRemoveSortingModal recordTableId={recordTableId} />
       <RecordTableContextMenu recordTableId={recordTableId} />
     </>
   );

diff --git a/...nt/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/...nt/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
-import { AnimatedContainer } from '@/object-record/record-table/components/AnimatedContainer';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
+import { AnimatedContainer } from '@/ui/utilities/animation/components/AnimatedContainer';
 
 const StyledInlineCellButtonContainer = styled.div`
   align-items: center;

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/GripCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/GripCell.tsx