- rename entries hooks

- tests
- move useeffects to sub components

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -3,12 +3,39 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ActionBar } from '../ActionBar';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { MemoryRouter } from 'react-router-dom';
+import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
+import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
+import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
+import { TableContext } from '@/ui/table/states/TableContext';
+import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
+import { useSetRecoilState } from 'recoil';
+import { actionBarOpenState } from '../../states/ActionBarIsOpenState';
+
+function FilledActionBar(props: { selectedIds: string[] }) {
+  const setActionBar = useActionBarEntries();
+  setActionBar();
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+  setActionBarOpenState(true);
+  return <ActionBar selectedIds={props.selectedIds} />;
+}
 
 const meta: Meta<typeof ActionBar> = {
   title: 'UI/ActionBar/ActionBar',
-  component: ActionBar,
-  decorators: [ComponentDecorator],
-  args: { selectedIds: [] },
+  component: FilledActionBar,
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={TableContext}>
+        <CompanyTableMockMode></CompanyTableMockMode>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  args: { selectedIds: ['TestId'] },
 };
 
 export default meta;

front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx

@@ -43,6 +43,7 @@ export function BoardActionBarButtonDeleteBoardCard() {
       icon={<IconTrash size={16} />}
       type="danger"
       onClick={handleDelete}
+      key="delete"
     />
   );
 }

front/src/modules/ui/board/hooks/useActionBarEntries.tsx

@@ -4,10 +4,10 @@ import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesSt
 
 import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard';
 
-export function useOpenActionBar() {
+export function useActionBarEntries() {
   const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
 
   return () => {
-    setActionBarEntries([<BoardActionBarButtonDeleteBoardCard />]);
+    setActionBarEntries([<BoardActionBarButtonDeleteBoardCard key="delete" />]);
   };
 }

front/src/modules/ui/board/hooks/useCurrentCardSelected.ts

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
+
+import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
 
 import { BoardCardIdContext } from '../states/BoardCardIdContext';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
@@ -10,6 +12,7 @@ export function useCurrentCardSelected() {
   const [isCardSelected] = useRecoilState(
     isCardSelectedFamilyState(currentCardId ?? ''),
   );
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
 
   const setCurrentCardSelected = useRecoilCallback(
     ({ set }) =>
@@ -17,6 +20,7 @@ export function useCurrentCardSelected() {
         if (!currentCardId) return;
 
         set(isCardSelectedFamilyState(currentCardId), selected);
+        setActionBarOpenState(true);
       },
     [],
   );

front/src/modules/ui/board/hooks/useSetCardSelected.ts

@@ -1,9 +1,14 @@
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
+
+import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
 
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
 export function useSetCardSelected() {
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+
   return useRecoilCallback(({ set }) => (cardId: string, selected: boolean) => {
     set(isCardSelectedFamilyState(cardId), selected);
+    setActionBarOpenState(true);
   });
 }

front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { ContextMenu } from '../ContextMenu';
-
-const meta: Meta<typeof ContextMenu> = {
-  title: 'UI/ContextMenu/ContextMenu',
-  component: ContextMenu,
-  decorators: [ComponentDecorator],
-  args: { selectedIds: [] },
-};
-
-export default meta;
-type Story = StoryObj<typeof ContextMenu>;
-
-export const Default: Story = {};

front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ContextMenu } from '../ContextMenu';
+import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
+import { useSetRecoilState } from 'recoil';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { TableContext } from '@/ui/table/states/TableContext';
+import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
+import { MemoryRouter } from 'react-router-dom';
+import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState';
+import { contextMenuPositionState } from '../../states/ContextMenuPositionState';
+
+function FilledContextMenu(props: { selectedIds: string[] }) {
+  const setContextMenu = useContextMenuEntries();
+  setContextMenu();
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  setContextMenuPosition({
+    x: 100,
+    y: 10,
+  });
+  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  setContextMenuOpenState(true);
+  return <ContextMenu selectedIds={props.selectedIds} />;
+}
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'UI/ContextMenu/ContextMenu',
+  component: FilledContextMenu,
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={TableContext}>
+        <CompanyTableMockMode></CompanyTableMockMode>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  args: { selectedIds: ['TestId'] },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Default: Story = {};

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -8,12 +8,16 @@ export function GenericEntityTableData({
   orderBy = defaultOrderBy,
   whereFilters,
   filterDefinitionArray,
+  setActionBar,
+  setContextMenu,
 }: {
   useGetRequest: any;
   getRequestResultKey: string;
   orderBy?: any;
   whereFilters?: any;
   filterDefinitionArray: FilterDefinition[];
+  setActionBar?: () => void;
+  setContextMenu?: () => void;
 }) {
   const setEntityTableData = useSetEntityTableData();
   useGetRequest({
@@ -24,5 +28,11 @@ export function GenericEntityTableData({
     },
   });
 
+  if (setActionBar) {
+    setActionBar();
+  }
+  if (setContextMenu) {
+    setContextMenu();
+  }
   return <></>;
 }