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

Closes #1494

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

@@ -1,10 +1,4 @@
-import {
-  type ComponentProps,
-  Context,
-  type ReactNode,
-  useCallback,
-  useState,
-} from 'react';
+import type { ComponentProps, Context, ReactNode } from 'react';
 import styled from '@emotion/styled';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
@@ -14,7 +8,7 @@ import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownBut
 import { SortDropdownButton } from '@/ui/view-bar/components/SortDropdownButton';
 import ViewBarDetails from '@/ui/view-bar/components/ViewBarDetails';
 import { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
-import { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
+import { SortType } from '@/ui/view-bar/types/interface';
 
 import type { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
@@ -25,7 +19,6 @@ type OwnProps<SortField> = ComponentProps<'div'> & {
   viewName: string;
   viewIcon?: ReactNode;
   availableSorts?: Array<SortType<SortField>>;
-  onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
   onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
   context: Context<string | null>;
 };
@@ -44,33 +37,10 @@ export function BoardHeader<SortField>({
   viewName,
   viewIcon,
   availableSorts,
-  onSortsUpdate,
   onStageAdd,
   context,
   ...props
 }: OwnProps<SortField>) {
-  const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
-    [],
-  );
-
-  const sortSelect = useCallback(
-    (newSort: SelectedSortType<SortField>) => {
-      const newSorts = updateSortOrFilterByKey(sorts, newSort);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
-    },
-    [onSortsUpdate, sorts],
-  );
-
-  const sortUnselect = useCallback(
-    (sortKey: string) => {
-      const newSorts = sorts.filter((sort) => sort.key !== sortKey);
-      innerSetSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
-    },
-    [onSortsUpdate, sorts],
-  );
-
   return (
     <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
       <TopBar
@@ -90,9 +60,7 @@ export function BoardHeader<SortField>({
             />
             <SortDropdownButton<SortField>
               context={context}
-              isSortSelected={sorts.length > 0}
               availableSorts={availableSorts || []}
-              onSortSelect={sortSelect}
               HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
             />
             <BoardOptionsDropdown
@@ -101,34 +69,8 @@ export function BoardHeader<SortField>({
             />
           </>
         }
-        bottomComponent={
-          <ViewBarDetails
-            context={context}
-            sorts={sorts}
-            onRemoveSort={sortUnselect}
-            onCancelClick={() => {
-              innerSetSorts([]);
-              onSortsUpdate?.([]);
-            }}
-          />
-        }
+        bottomComponent={<ViewBarDetails context={context} />}
       />
     </RecoilScope>
   );
 }
-
-function updateSortOrFilterByKey<SortOrFilter extends { key: string }>(
-  sorts: Readonly<SortOrFilter[]>,
-  newSort: SortOrFilter,
-): SortOrFilter[] {
-  const newSorts = [...sorts];
-  const existingSortIndex = sorts.findIndex((sort) => sort.key === newSort.key);
-
-  if (existingSortIndex !== -1) {
-    newSorts[existingSortIndex] = newSort;
-  } else {
-    newSorts.push(newSort);
-  }
-
-  return newSorts;
-}

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

@@ -17,10 +17,8 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
-import { SelectedSortType } from '@/ui/view-bar/types/interface';
 import {
   PipelineProgress,
-  PipelineProgressOrderByWithRelationInput,
   PipelineStage,
   useUpdateOnePipelineProgressStageMutation,
 } from '~/generated/graphql';
@@ -51,15 +49,11 @@ export function EntityBoard({
   onColumnAdd,
   onColumnDelete,
   onEditColumnTitle,
-  updateSorts,
 }: {
   boardOptions: BoardOptions;
   onColumnAdd?: (boardColumn: BoardColumnDefinition) => void;
   onColumnDelete?: (boardColumnId: string) => void;
   onEditColumnTitle: (columnId: string, title: string, color: string) => void;
-  updateSorts: (
-    sorts: Array<SelectedSortType<PipelineProgressOrderByWithRelationInput>>,
-  ) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
   const setCardSelected = useSetCardSelected();
@@ -140,7 +134,6 @@ export function EntityBoard({
         viewName="All opportunities"
         viewIcon={<IconList size={theme.icon.size.md} />}
         availableSorts={boardOptions.sorts}
-        onSortsUpdate={updateSorts}
         onStageAdd={onColumnAdd}
         context={CompanyBoardRecoilScopeContext}
       />