Refator/sorts dropdown (#1568)

* WIP

* Fixed lint

* Ok for sorts

* Fixed on dropdown toggle

* Fix lint

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

@@ -85,25 +85,20 @@ const StyledTableContainer = styled.div`
   overflow: auto;
 `;
 
-type OwnProps<SortField> = {
+type OwnProps = {
   updateEntityMutation: any;
 } & Pick<
-  TableHeaderProps<SortField>,
-  | 'availableSorts'
-  | 'defaultViewName'
-  | 'onImport'
-  | 'onViewsChange'
-  | 'onViewSubmit'
+  TableHeaderProps,
+  'defaultViewName' | 'onImport' | 'onViewsChange' | 'onViewSubmit'
 >;
 
-export function EntityTable<SortField>({
-  availableSorts,
+export function EntityTable({
   defaultViewName,
   onImport,
   onViewsChange,
   onViewSubmit,
   updateEntityMutation,
-}: OwnProps<SortField>) {
+}: OwnProps) {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   const setRowSelectedState = useSetRowSelectedState();
@@ -141,7 +136,6 @@ export function EntityTable<SortField>({
       <StyledTableWithHeader>
         <StyledTableContainer ref={tableBodyRef}>
           <TableHeader
-            availableSorts={availableSorts ?? []}
             defaultViewName={defaultViewName}
             onImport={onImport}
             onViewsChange={onViewsChange}

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

@@ -4,9 +4,10 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis
 import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
 import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
+import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 import { SortOrder } from '~/generated/graphql';
 
-export function GenericEntityTableData({
+export function EntityTableEffect({
   useGetRequest,
   getRequestResultKey,
   getRequestOptimisticEffectDefinition,
@@ -19,13 +20,18 @@ export function GenericEntityTableData({
   filterDefinitionArray,
   setActionBarEntries,
   setContextMenuEntries,
+  sortDefinitionArray,
 }: {
+  // TODO: type this
   useGetRequest: any;
   getRequestResultKey: string;
   getRequestOptimisticEffectDefinition: OptimisticEffectDefinition<any>;
+  // TODO: type this and replace with defaultSorts reduce should be applied to defaultSorts in this component not before
   orderBy?: any;
+  // TODO: type this and replace with defaultFilters reduce should be applied to defaultFilters in this component not before
   whereFilters?: any;
   filterDefinitionArray: FilterDefinition[];
+  sortDefinitionArray: SortDefinition[];
   setActionBarEntries?: () => void;
   setContextMenuEntries?: () => void;
 }) {
@@ -36,7 +42,9 @@ export function GenericEntityTableData({
     variables: { orderBy, where: whereFilters },
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
-      setEntityTableData(entities, filterDefinitionArray);
+
+      setEntityTableData(entities, filterDefinitionArray, sortDefinitionArray);
+
       registerOptimisticEffect({
         variables: { orderBy, where: whereFilters },
         definition: getRequestOptimisticEffectDefinition,

front/src/modules/ui/table/constants/TableOptionsDropdownId.ts

@@ -0,0 +1,2 @@
+// We should either apply the constant all caps case or maybe define a more general enum to store those ids ?
+export const TableOptionsDropdownId = 'table-options';

front/src/modules/ui/table/hooks/useSetEntityTableData.ts

@@ -6,7 +6,9 @@ import { tableEntitiesFamilyState } from '@/ui/table/states/tableEntitiesFamilyS
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
+import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
 import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
+import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 
 import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState';
 import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
@@ -20,7 +22,8 @@ export function useSetEntityTableData() {
     ({ set, snapshot }) =>
       <T extends { id: string }>(
         newEntityArray: T[],
-        filters: FilterDefinition[],
+        filterDefinitionArray: FilterDefinition[],
+        sortDefinitionArray: SortDefinition[],
       ) => {
         for (const entity of newEntityArray) {
           const currentEntity = snapshot
@@ -46,7 +49,14 @@ export function useSetEntityTableData() {
 
         set(numberOfTableRowsState, entityIds.length);
 
-        set(availableFiltersScopedState(tableContextScopeId), filters);
+        set(
+          availableFiltersScopedState(tableContextScopeId),
+          filterDefinitionArray,
+        );
+        set(
+          availableSortsScopedState(tableContextScopeId),
+          sortDefinitionArray,
+        );
 
         set(isFetchingEntityTableDataState, false);
       },

front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx

@@ -2,7 +2,7 @@ import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import type { View } from '@/ui/view-bar/types/View';
 
-import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
+import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 
 import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
 import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
@@ -22,7 +22,7 @@ export function TableOptionsDropdown({
     <DropdownButton
       buttonComponents={<TableOptionsDropdownButton />}
       dropdownHotkeyScope={customHotkeyScope}
-      dropdownKey={TableOptionsDropdownKey}
+      dropdownId={TableOptionsDropdownId}
       dropdownComponents={
         <TableOptionsDropdownContent
           onImport={onImport}

front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx

@@ -1,11 +1,11 @@
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 
-import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
+import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 
 export function TableOptionsDropdownButton() {
   const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
-    key: TableOptionsDropdownKey,
+    dropdownId: TableOptionsDropdownId,
   });
 
   return (

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -18,11 +18,11 @@ import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByI
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 import type { View } from '@/ui/view-bar/types/View';
 
+import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
-import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
 type TableOptionsDropdownButtonProps = {
@@ -37,7 +37,7 @@ export function TableOptionsDropdownContent({
   onImport,
 }: TableOptionsDropdownButtonProps) {
   const { closeDropdownButton } = useDropdownButton({
-    key: TableOptionsDropdownKey,
+    dropdownId: TableOptionsDropdownId,
   });
 
   const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -8,27 +8,24 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { ViewBar, ViewBarProps } from '@/ui/view-bar/components/ViewBar';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 
+import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
 import { TableOptionsDropdown } from '../../options/components/TableOptionsDropdown';
 import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsFamilyState } from '../../states/savedTableColumnsFamilyState';
 import { canPersistTableColumnsScopedFamilySelector } from '../../states/selectors/canPersistTableColumnsScopedFamilySelector';
 import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
-import { TableOptionsDropdownKey } from '../../types/TableOptionsDropdownKey';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
-export type TableHeaderProps<SortField> = {
+export type TableHeaderProps = {
   onImport?: () => void;
-} & Pick<
-  ViewBarProps<SortField>,
-  'availableSorts' | 'defaultViewName' | 'onViewsChange' | 'onViewSubmit'
->;
+} & Pick<ViewBarProps, 'defaultViewName' | 'onViewsChange' | 'onViewSubmit'>;
 
-export function TableHeader<SortField>({
+export function TableHeader({
   onImport,
   onViewsChange,
   onViewSubmit,
   ...props
-}: TableHeaderProps<SortField>) {
+}: TableHeaderProps) {
   const tableScopeId = useContextScopeId(TableRecoilScopeContext);
 
   const currentViewId = useRecoilScopedValue(
@@ -84,7 +81,7 @@ export function TableHeader<SortField>({
             customHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
           />
         }
-        optionsDropdownKey={TableOptionsDropdownKey}
+        optionsDropdownKey={TableOptionsDropdownId}
         scopeContext={TableRecoilScopeContext}
       />
     </RecoilScope>

front/src/modules/ui/table/types/TableOptionsDropdownKey.ts

@@ -1 +0,0 @@
-export const TableOptionsDropdownKey = 'table-options';