Store compact view status (#3850)

* Store compact view status * Rename to isCompact * Fixes --------- Co-authored-by: Thomas Trompette <thomast@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-11-23 22:12:24 +03:00 · 2024-02-08 16:33:52 +01:00 · 2024-02-08 16:33:52 +01:00 · 719da29795
commit 719da29795
parent 6ee179442a
16 changed files with 110 additions and 7 deletions
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
@ -14,6 +14,7 @@ import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options
 import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
+import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
@ -62,6 +63,9 @@ export const RecordIndexContainer = ({

  const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState);
  const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState);
+  const setRecordIndexIsCompactModeActive = useSetRecoilState(
+    recordIndexIsCompactModeActiveState,
+  );

  const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
    recordTableId: recordIndexId,
@ -118,6 +122,9 @@ export const RecordIndexContainer = ({
          onViewTypeChange={(viewType: ViewType) => {
            setRecordIndexViewType(viewType);
          }}
+          onViewCompactModeChange={(isCompactModeActive: boolean) => {
+            setRecordIndexIsCompactModeActive(isCompactModeActive);
+          }}
        />
        <RecordIndexViewBarEffect
          objectNamePlural={objectNamePlural}
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@ -8,6 +8,7 @@ import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoar
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
 import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
+import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
 import { useViewBar } from '@/views/hooks/useViewBar';
@ -26,8 +27,11 @@ export const useLoadRecordIndexBoard = ({
  const { objectMetadataItem } = useObjectMetadataItem({
    objectNameSingular,
  });
-  const { setRecordIds: setRecordIdsInBoard, setFieldDefinitions } =
-    useRecordBoard(recordBoardId);
+  const {
+    setRecordIds: setRecordIdsInBoard,
+    setFieldDefinitions,
+    getIsCompactModeActiveState,
+  } = useRecordBoard(recordBoardId);
  const { setRecords: setRecordsInStore } = useSetRecordInStore();

  const recordIndexFieldDefinitions = useRecoilValue(
@ -48,6 +52,10 @@ export const useLoadRecordIndexBoard = ({
    objectMetadataItem?.fields ?? [],
  );

+  const recordIndexIsCompactModeActive = useRecoilValue(
+    recordIndexIsCompactModeActiveState,
+  );
+
  const { records, loading, fetchMoreRecords, queryStateIdentifier } =
    useFindManyRecords({
      objectNameSingular,
@ -59,6 +67,10 @@ export const useLoadRecordIndexBoard = ({
    viewBarId,
  });

+  const setIsCompactModeActive = useSetRecoilState(
+    getIsCompactModeActiveState(),
+  );
+
  useEffect(() => {
    setRecordIdsInBoard(records);
  }, [records, setRecordIdsInBoard]);
@ -71,6 +83,10 @@ export const useLoadRecordIndexBoard = ({
    setEntityCountInCurrentView(records.length);
  }, [records.length, setEntityCountInCurrentView]);

+  useEffect(() => {
+    setIsCompactModeActive(recordIndexIsCompactModeActive);
+  }, [recordIndexIsCompactModeActive, setIsCompactModeActive]);
+
  return {
    records,
    loading,
--- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@ -93,7 +93,7 @@ export const RecordIndexOptionsDropdownContent = ({
    handleReorderBoardFields,
    handleBoardFieldVisibilityChange,
    isCompactModeActive,
-    setIsCompactModeActive,
+    setAndPersistIsCompactModeActive,
  } = useRecordIndexOptionsForBoard({
    objectNameSingular,
    recordBoardId: recordIndexId,
@ -184,7 +184,12 @@ export const RecordIndexOptionsDropdownContent = ({
          <DropdownMenuItemsContainer>
            <MenuItemToggle
              LeftIcon={IconBaselineDensitySmall}
-              onToggleChange={setIsCompactModeActive}
+              onToggleChange={() =>
+                setAndPersistIsCompactModeActive(
+                  !isCompactModeActive,
+                  currentView,
+                )
+              }
              toggled={isCompactModeActive}
              text="Compact view"
              toggleSize="small"
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts
@ -11,6 +11,8 @@ import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/s
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
+import { useViews } from '@/views/hooks/internal/useViews';
+import { GraphQLView } from '@/views/types/GraphQLView';

 type useRecordIndexOptionsForBoardParams = {
  objectNameSingular: string;
@ -27,6 +29,7 @@ export const useRecordIndexOptionsForBoard = ({
    useRecoilState(recordIndexFieldDefinitionsState);

  const { persistViewFields } = useViewFields(viewBarId);
+  const { updateView } = useViews(viewBarId);
  const { getIsCompactModeActiveState } = useRecordBoard(recordBoardId);

  const [isCompactModeActive, setIsCompactModeActive] = useRecoilState(
@ -164,12 +167,24 @@ export const useRecordIndexOptionsForBoard = ({
    ],
  );

+  const setAndPersistIsCompactModeActive = useCallback(
+    (isCompactModeActive: boolean, view: GraphQLView | undefined) => {
+      if (!view) return;
+      setIsCompactModeActive(isCompactModeActive);
+      updateView({
+        ...view,
+        isCompact: isCompactModeActive,
+      });
+    },
+    [setIsCompactModeActive, updateView],
+  );
+
  return {
    handleReorderBoardFields,
    handleBoardFieldVisibilityChange,
    visibleBoardFields,
    hiddenBoardFields,
    isCompactModeActive,
-    setIsCompactModeActive,
+    setAndPersistIsCompactModeActive,
  };
 };
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const recordIndexIsCompactModeActiveState = atom<boolean>({
+  key: 'recordIndexIsCompactModeActiveState',
+  default: false,
+});
--- a/packages/twenty-front/src/modules/views/components/ViewBar.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBar.tsx
@ -32,6 +32,9 @@ export type ViewBarProps = {
  onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
  onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };

 export const ViewBar = ({
@ -43,6 +46,7 @@ export const ViewBar = ({
  onViewFiltersChange,
  onViewSortsChange,
  onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewBarProps) => {
  const { openDropdown: openOptionsDropdownButton } = useDropdown(
    optionsDropdownScopeId,
@ -62,6 +66,7 @@ export const ViewBar = ({
      onViewFiltersChange={onViewFiltersChange}
      onViewSortsChange={onViewSortsChange}
      onViewTypeChange={onViewTypeChange}
+      onViewCompactModeChange={onViewCompactModeChange}
    >
      <ViewBarEffect />
      <ViewBarFilterEffect
--- a/packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts
+++ b/packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts
@ -41,6 +41,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
    onViewFiltersChangeState,
    onViewSortsChangeState,
    onViewTypeChangeState,
+    onViewCompactModeChangeState,
    savedViewFieldsByKeySelector,
    savedViewFieldsState,
    savedViewFiltersByKeySelector,
@ -74,6 +75,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
    onViewFiltersChangeState,
    onViewSortsChangeState,
    onViewTypeChangeState,
+    onViewCompactModeChangeState,
    savedViewFieldsByKeySelector,
    savedViewFieldsState,
    savedViewFiltersByKeySelector,
--- a/packages/twenty-front/src/modules/views/hooks/internal/useViews.ts
+++ b/packages/twenty-front/src/modules/views/hooks/internal/useViews.ts
@ -54,6 +54,7 @@ export const useViews = (scopeId: string) => {
        input: {
          id: view.id,
          name: view.name,
+          isCompact: view.isCompact,
        },
      },
      refetchQueries: [findManyQuery],
--- a/packages/twenty-front/src/modules/views/hooks/useViewBar.ts
+++ b/packages/twenty-front/src/modules/views/hooks/useViewBar.ts
@ -236,7 +236,7 @@ export const useViewBar = (props?: UseViewProps) => {
      (viewId: string) => {
        setCurrentViewId?.(viewId);

-        const { currentView, onViewTypeChange } =
+        const { currentView, onViewTypeChange, onViewCompactModeChange } =
          getViewScopedStateValuesFromSnapshot({
            snapshot,
            viewScopeId: scopeId,
@ -248,6 +248,7 @@ export const useViewBar = (props?: UseViewProps) => {
        }

        onViewTypeChange?.(currentView.type);
+        onViewCompactModeChange?.(currentView.isCompact);
        loadViewFields(currentView.viewFields, viewId);
        loadViewFilters(currentView.viewFilters, viewId);
        loadViewSorts(currentView.viewSorts, viewId);
--- a/packages/twenty-front/src/modules/views/scopes/ViewScope.tsx
+++ b/packages/twenty-front/src/modules/views/scopes/ViewScope.tsx
@ -16,6 +16,9 @@ type ViewScopeProps = {
  onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
  onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };

 export const ViewScope = ({
@ -25,6 +28,7 @@ export const ViewScope = ({
  onViewFiltersChange,
  onViewFieldsChange,
  onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewScopeProps) => {
  return (
    <ViewScopeInternalContext.Provider
@ -38,6 +42,7 @@ export const ViewScope = ({
        onViewFiltersChange={onViewFiltersChange}
        onViewFieldsChange={onViewFieldsChange}
        onViewTypeChange={onViewTypeChange}
+        onViewCompactModeChange={onViewCompactModeChange}
      />
      {children}
    </ViewScopeInternalContext.Provider>
--- a/packages/twenty-front/src/modules/views/scopes/init-effect/ViewScopeInitEffect.tsx
+++ b/packages/twenty-front/src/modules/views/scopes/init-effect/ViewScopeInitEffect.tsx
@ -13,6 +13,9 @@ type ViewScopeInitEffectProps = {
  onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
  onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
  onViewTypeChange?: (viewType: ViewType) => void | Promise<void>;
+  onViewCompactModeChange?: (
+    isCompactModeActive: boolean,
+  ) => void | Promise<void>;
 };

 export const ViewScopeInitEffect = ({
@ -20,29 +23,37 @@ export const ViewScopeInitEffect = ({
  onViewFiltersChange,
  onViewFieldsChange,
  onViewTypeChange,
+  onViewCompactModeChange,
 }: ViewScopeInitEffectProps) => {
  const {
    onViewFieldsChangeState,
    onViewFiltersChangeState,
    onViewSortsChangeState,
    onViewTypeChangeState,
+    onViewCompactModeChangeState,
  } = useViewScopedStates();

  const setOnViewSortsChange = useSetRecoilState(onViewSortsChangeState);
  const setOnViewFiltersChange = useSetRecoilState(onViewFiltersChangeState);
  const setOnViewFieldsChange = useSetRecoilState(onViewFieldsChangeState);
  const setOnViewTypeChange = useSetRecoilState(onViewTypeChangeState);
+  const setOnViewCompactModeChange = useSetRecoilState(
+    onViewCompactModeChangeState,
+  );

  useEffect(() => {
    setOnViewSortsChange(() => onViewSortsChange);
    setOnViewFiltersChange(() => onViewFiltersChange);
    setOnViewFieldsChange(() => onViewFieldsChange);
    setOnViewTypeChange(() => onViewTypeChange);
+    setOnViewCompactModeChange(() => onViewCompactModeChange);
  }, [
+    onViewCompactModeChange,
    onViewFieldsChange,
    onViewFiltersChange,
    onViewSortsChange,
    onViewTypeChange,
+    setOnViewCompactModeChange,
    setOnViewFieldsChange,
    setOnViewFiltersChange,
    setOnViewSortsChange,
--- a/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts
+++ b/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts
@ -0,0 +1,8 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const onViewCompactModeChangeScopeState = createStateScopeMap<
+  ((isCompactModeActive: boolean) => void | Promise<void>) | undefined
+>({
+  key: 'onViewCompactModeChangeScopeState',
+  defaultValue: undefined,
+});
--- a/packages/twenty-front/src/modules/views/types/GraphQLView.ts
+++ b/packages/twenty-front/src/modules/views/types/GraphQLView.ts
@ -8,6 +8,7 @@ export type GraphQLView = {
  name: string;
  type: ViewType;
  objectMetadataId: string;
+  isCompact: boolean;
  viewFields: ViewField[];
  viewFilters: ViewFilter[];
  viewSorts: ViewSort[];
--- a/packages/twenty-front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts
+++ b/packages/twenty-front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts
@ -42,6 +42,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
    onViewFiltersChangeState,
    onViewSortsChangeState,
    onViewTypeChangeState,
+    onViewCompactModeChangeState,
    savedViewFieldsByKeySelector,
    savedViewFieldsState,
    savedViewFiltersByKeySelector,
@ -87,6 +88,10 @@ export const getViewScopedStateValuesFromSnapshot = ({
    onViewFiltersChange: getSnapshotValue(snapshot, onViewFiltersChangeState),
    onViewSortsChange: getSnapshotValue(snapshot, onViewSortsChangeState),
    onViewTypeChange: getSnapshotValue(snapshot, onViewTypeChangeState),
+    onViewCompactModeChange: getSnapshotValue(
+      snapshot,
+      onViewCompactModeChangeState,
+    ),
    savedViewFieldsByKey: getSnapshotValue(
      snapshot,
      savedViewFieldsByKeySelector,
--- a/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts
+++ b/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts
@ -3,6 +3,7 @@ import { getScopedSelectorDeprecated } from '@/ui/utilities/recoil-scope/utils/g
 import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
+import { onViewCompactModeChangeScopeState } from '@/views/states/onViewCompactModeChangeScopeState';
 import { onViewTypeChangeScopedState } from '@/views/states/onViewTypeChangeScopedState';
 import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';

@ -170,6 +171,11 @@ export const getViewScopedStates = ({
    viewScopeId,
  );

+  const onViewCompactModeChangeState = getScopedStateDeprecated(
+    onViewCompactModeChangeScopeState,
+    viewScopeId,
+  );
+
  const currentViewIdState = getScopedStateDeprecated(
    currentViewIdScopedState,
    viewScopeId,
@ -214,5 +220,6 @@ export const getViewScopedStates = ({
    onViewFiltersChangeState,
    onViewFieldsChangeState,
    onViewTypeChangeState,
+    onViewCompactModeChangeState,
  };
 };
--- a/packages/twenty-server/src/workspace/workspace-sync-metadata/standard-objects/view.object-metadata.ts
+++ b/packages/twenty-server/src/workspace/workspace-sync-metadata/standard-objects/view.object-metadata.ts
@ -41,6 +41,14 @@ export class ViewObjectMetadata extends BaseObjectMetadata {
  })
  type: string;

+  @FieldMetadata({
+    type: FieldMetadataType.BOOLEAN,
+    label: 'Compact View',
+    description: 'Describes if the view is in compact mode',
+    defaultValue: { value: false },
+  })
+  isCompact: boolean;
+
  @FieldMetadata({
    type: FieldMetadataType.RELATION,
    label: 'View Fields',