refactor: add ViewBar and move view components to ui/view-bar (#1495)

Closes #1494

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { EntityBoard } from '@/ui/board/components/EntityBoard';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { SortOrder } from '~/generated/graphql';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
@@ -17,13 +16,7 @@ const meta: Meta<typeof EntityBoard> = {
   decorators: [
     (Story) => (
       <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
-        <HooksCompanyBoard
-          orderBy={[
-            {
-              createdAt: SortOrder.Asc,
-            },
-          ]}
-        />
+        <HooksCompanyBoard />
         <MemoryRouter>
           <Story />
         </MemoryRouter>

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -5,7 +5,6 @@ import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
 import { BoardCardIdContext } from '@/ui/board/contexts/BoardCardIdContext';
 import { BoardColumnRecoilScopeContext } from '@/ui/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { SortOrder } from '~/generated/graphql';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
@@ -19,13 +18,7 @@ const meta: Meta<typeof CompanyBoardCard> = {
   decorators: [
     (Story) => (
       <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
-        <HooksCompanyBoard
-          orderBy={[
-            {
-              createdAt: SortOrder.Asc,
-            },
-          ]}
-        />
+        <HooksCompanyBoard />
         <RecoilScope SpecificContext={BoardColumnRecoilScopeContext}>
           <BoardCardIdContext.Provider value={mockedPipelineProgressData[1].id}>
             <MemoryRouter>

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -10,11 +10,11 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
+import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
 import { turnFilterIntoWhereClause } from '@/ui/view-bar/utils/turnFilterIntoWhereClause';
 import {
   Pipeline,
   PipelineProgressableType,
-  PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By,
   useGetCompaniesQuery,
   useGetPipelineProgressQuery,
   useGetPipelinesQuery,
@@ -25,13 +25,7 @@ import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
-export function HooksCompanyBoard({
-  orderBy,
-}: {
-  orderBy: PipelineProgresses_Order_By[];
-  setActionBar?: () => void;
-  setContextMenu?: () => void;
-}) {
+export function HooksCompanyBoard() {
   const setFieldsDefinitionsState = useSetRecoilState(
     viewFieldsDefinitionsState,
   );
@@ -71,6 +65,10 @@ export function HooksCompanyBoard({
     ?.map((pipelineStage) => pipelineStage.id)
     .flat();
 
+  const sortsOrderBy = useRecoilScopedValue(
+    sortsOrderByScopedSelector,
+    CompanyBoardRecoilScopeContext,
+  );
   const whereFilters = useMemo(() => {
     return {
       AND: [
@@ -86,7 +84,7 @@ export function HooksCompanyBoard({
     useGetPipelineProgressQuery({
       variables: {
         where: whereFilters,
-        orderBy,
+        orderBy: sortsOrderBy,
       },
       onCompleted: (data) => {
         const pipelineProgresses = data?.findManyPipelineProgress || [];

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -12,7 +12,6 @@ import { filtersWhereScopedSelector } from '@/ui/view-bar/states/selectors/filte
 import { sortsOrderByScopedSelector } from '@/ui/view-bar/states/selectors/sortsOrderByScopedSelector';
 import { useTableViews } from '@/views/hooks/useTableViews';
 import {
-  SortOrder,
   UpdateOneCompanyMutationVariables,
   useGetCompaniesQuery,
   useUpdateOneCompanyMutation,
@@ -55,16 +54,14 @@ export function CompanyTable() {
         getRequestResultKey="companies"
         useGetRequest={useGetCompaniesQuery}
         getRequestOptimisticEffect={getCompaniesOptimisticEffect}
-        orderBy={
-          sortsOrderBy.length ? sortsOrderBy : [{ createdAt: SortOrder.Desc }]
-        }
+        orderBy={sortsOrderBy}
         whereFilters={filtersWhere}
         filterDefinitionArray={companiesFilters}
         setContextMenuEntries={setContextMenuEntries}
         setActionBarEntries={setActionBarEntries}
       />
       <EntityTable
-        viewName="All Companies"
+        defaultViewName="All Companies"
         availableSorts={availableSorts}
         onViewsChange={handleViewsChange}
         onViewSubmit={handleViewSubmit}

front/src/modules/companies/table/components/CompanyTableMockMode.tsx

@@ -9,7 +9,7 @@ export function CompanyTableMockMode() {
     <>
       <CompanyTableMockData />
       <EntityTable
-        viewName="All Companies"
+        defaultViewName="All Companies"
         availableSorts={availableSorts}
         updateEntityMutation={[useUpdateOneCompanyMutation()]}
       />