7499 refactor right drawer to have contextual actions (#7954)

Closes #7499
- Modifies context store states to be component states
- Introduces the concept of `mainContextStore` which will dictate the
available actions inside the command K
- Adds contextual actions inside the right drawer
- Creates a new type of modal variant

packages/twenty-front/src/modules/context-store/components/SetMainContextStoreComponentInstanceIdEffect.tsx

@@ -0,0 +1,22 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
+import { useContext, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+export const SetMainContextStoreComponentInstanceIdEffect = () => {
+  const setMainContextStoreComponentInstanceId = useSetRecoilState(
+    mainContextStoreComponentInstanceIdState,
+  );
+
+  const context = useContext(ContextStoreComponentInstanceContext);
+
+  useEffect(() => {
+    setMainContextStoreComponentInstanceId(context?.instanceId ?? null);
+
+    return () => {
+      setMainContextStoreComponentInstanceId(null);
+    };
+  }, [context, setMainContextStoreComponentInstanceId]);
+
+  return null;
+};

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentObjectMetadataIdComponentState.ts

@@ -0,0 +1,9 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const contextStoreCurrentObjectMetadataIdComponentState =
+  createComponentStateV2<string | null>({
+    key: 'contextStoreCurrentObjectMetadataIdComponentState',
+    defaultValue: null,
+    componentInstanceContext: ContextStoreComponentInstanceContext,
+  });

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentObjectMetadataIdState.ts

@@ -1,8 +0,0 @@
-import { createState } from 'twenty-ui';
-
-export const contextStoreCurrentObjectMetadataIdState = createState<
-  string | null
->({
-  key: 'contextStoreCurrentObjectMetadataIdState',
-  defaultValue: null,
-});

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentViewIdComponentState.ts

@@ -0,0 +1,10 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const contextStoreCurrentViewIdComponentState = createComponentStateV2<
+  string | null
+>({
+  key: 'contextStoreCurrentViewIdComponentState',
+  defaultValue: null,
+  componentInstanceContext: ContextStoreComponentInstanceContext,
+});

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentViewIdState.ts

@@ -1,6 +0,0 @@
-import { createState } from 'twenty-ui';
-
-export const contextStoreCurrentViewIdState = createState<string | null>({
-  key: 'contextStoreCurrentViewIdState',
-  defaultValue: null,
-});

packages/twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsComponentState.ts

@@ -0,0 +1,9 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const contextStoreNumberOfSelectedRecordsComponentState =
+  createComponentStateV2<number>({
+    key: 'contextStoreNumberOfSelectedRecordsComponentState',
+    defaultValue: 0,
+    componentInstanceContext: ContextStoreComponentInstanceContext,
+  });

packages/twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsState.ts

@@ -1,6 +0,0 @@
-import { createState } from 'twenty-ui';
-
-export const contextStoreNumberOfSelectedRecordsState = createState<number>({
-  key: 'contextStoreNumberOfSelectedRecordsState',
-  defaultValue: 0,
-});

packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsRuleComponentState.ts

@@ -1,5 +1,6 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { createState } from 'twenty-ui';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 type ContextStoreTargetedRecordsRuleSelectionMode = {
   mode: 'selection';
@@ -16,11 +17,12 @@ export type ContextStoreTargetedRecordsRule =
   | ContextStoreTargetedRecordsRuleSelectionMode
   | ContextStoreTargetedRecordsRuleExclusionMode;
 
-export const contextStoreTargetedRecordsRuleState =
-  createState<ContextStoreTargetedRecordsRule>({
-    key: 'contextStoreTargetedRecordsRuleState',
+export const contextStoreTargetedRecordsRuleComponentState =
+  createComponentStateV2<ContextStoreTargetedRecordsRule>({
+    key: 'contextStoreTargetedRecordsRuleComponentState',
     defaultValue: {
       mode: 'selection',
       selectedRecordIds: [],
     },
+    componentInstanceContext: ContextStoreComponentInstanceContext,
   });

packages/twenty-front/src/modules/context-store/states/contexts/ContextStoreComponentInstanceContext.tsx

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const ContextStoreComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts

@@ -0,0 +1,8 @@
+import { createState } from 'twenty-ui';
+
+export const mainContextStoreComponentInstanceIdState = createState<
+  string | null
+>({
+  key: 'mainContextStoreComponentInstanceIdState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/context-store/utils/__tests__/computeContextStoreFilters.test.ts

@@ -1,4 +1,4 @@
-import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
+import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';

packages/twenty-front/src/modules/context-store/utils/computeContextStoreFilters.ts

@@ -1,4 +1,4 @@
-import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
+import { ContextStoreTargetedRecordsRule } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { RecordGqlOperationFilter } from '@/object-record/graphql/types/RecordGqlOperationFilter';
 import { turnFiltersIntoQueryFilter } from '@/object-record/record-filter/utils/turnFiltersIntoQueryFilter';