♻️ refactor(sorting): improve and centralize sorting logic

src/backend/dashboard-widgets/dashboard-widgets.service.ts

@@ -15,7 +15,6 @@ import {
 import {
   listOrderApiService,
   ListOrderApiService,
-  sortListByOrder,
 } from "backend/list-order/list-order.service";
 import { rolesApiService, RolesApiService } from "backend/roles/roles.service";
 import { userFriendlyCase } from "shared/lib/strings/friendly-case";
@@ -30,6 +29,7 @@ import {
 import { GranularEntityPermissions, IAccountProfile } from "shared/types/user";
 import { relativeDateNotationToActualDate } from "backend/data/data-access/time.constants";
 import { ILabelValue } from "shared/types/options";
+import { sortListByOrder } from "shared/lib/array/sort";
 import {
   mutateGeneratedDashboardWidgets,
   PORTAL_DASHBOARD_PERMISSION,
@@ -183,7 +183,7 @@ return [actual[0], relative[0]];
       await this._dashboardWidgetsPersistenceService.getAllItemsIn(widgetList)
     );
 
-    return sortListByOrder(widgetList, widgets);
+    return sortListByOrder(widgetList, widgets, "id");
   }
 
   async listDashboardWidgets(

src/backend/entities/entities.service.ts

@@ -7,9 +7,9 @@ import { rolesApiService, RolesApiService } from "backend/roles/roles.service";
 import { IApplicationService } from "backend/types";
 import { noop } from "shared/lib/noop";
 import { IDBSchema, IEntityField, IEntityRelation } from "shared/types/db";
-import { sortByList } from "shared/logic/entities/sort.utils";
 import { DataCrudKeys } from "shared/types/data";
 import { CRUD_KEY_CONFIG } from "shared/configurations/permissions";
+import { sortListByOrder } from "shared/lib/array/sort";
 import { SchemasApiService, schemasApiService } from "../schema/schema.service";
 import { PortalFieldsFilterService } from "./portal";
 
@@ -51,9 +51,9 @@ export class EntitiesApiService implements IApplicationService {
       this._configurationApiService.show("entity_fields_orders", entity),
     ]);
 
-    sortByList(
-      entityFields as unknown as Record<string, unknown>[],
+    sortListByOrder(
       entityFieldsOrder,
+      entityFields as unknown as Record<string, unknown>[],
       "name" as keyof IEntityField
     );
 
@@ -166,9 +166,9 @@ export class EntitiesApiService implements IApplicationService {
         "table"
       );
 
-    sortByList(
-      allowedEntityRelation as unknown[] as Record<string, unknown>[],
+    sortListByOrder(
       entityOrders,
+      allowedEntityRelation as unknown[] as Record<string, unknown>[],
       "table"
     );
 

src/backend/list-order/list-order.service.ts

@@ -4,8 +4,6 @@ import {
 } from "backend/lib/config-persistence";
 import { IApplicationService } from "backend/types";
 
-export { sortListByOrder } from "./utils";
-
 export class ListOrderApiService implements IApplicationService {
   constructor(
     private readonly _listOrderPersistenceService: AbstractConfigDataPersistenceService<

src/backend/menu/menu.service.ts

@@ -18,10 +18,10 @@ import {
   ConfigurationApiService,
   configurationApiService,
 } from "backend/configuration/configuration.service";
-import { sortByList } from "shared/logic/entities/sort.utils";
 import { RolesApiService, rolesApiService } from "backend/roles/roles.service";
 import { ILabelValue } from "shared/types/options";
 import { ISingularPlural } from "shared/types/config";
+import { sortListByOrder } from "shared/lib/array/sort";
 import { portalCheckIfIsMenuAllowed, getPortalMenuItems } from "./portal";
 import { IBaseNavigationMenuApiService } from "./types";
 
@@ -148,7 +148,7 @@ export class NavigationMenuApiService
       .filter(({ value }) => !hiddenMenuEntities.includes(value))
       .sort((a, b) => a.value.localeCompare(b.value));
 
-    sortByList(menuEntities, entitiesOrder, "value");
+    sortListByOrder(entitiesOrder, menuEntities, "value");
 
     return menuEntities;
   }

src/frontend/design-system/components/SortList/index.tsx

@@ -7,30 +7,14 @@ import { Stack } from "frontend/design-system/primitives/Stack";
 import { pluralize } from "shared/lib/strings";
 import { Typo } from "frontend/design-system/primitives/Typo";
 import { Spacer } from "frontend/design-system/primitives/Spacer";
+import { arrayMoveImmutable } from "shared/lib/array/move";
 import { ErrorAlert } from "../Alert";
 import { EmptyWrapper } from "../EmptyWrapper";
 import { FormButton } from "../Button/FormButton";
 import { defaultToEmptyArray } from "./utils";
 import { ListSkeleton } from "../Skeleton/List";
 import { SHADOW_CSS } from "../Card";
 
-function arrayMoveMutable<T>(array: T[], fromIndex: number, toIndex: number) {
-  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
-
-  if (startIndex >= 0 && startIndex < array.length) {
-    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
-
-    const [item] = array.splice(fromIndex, 1);
-    array.splice(endIndex, 0, item);
-  }
-}
-
-function arrayMoveImmutable<T>(array: T[], fromIndex: number, toIndex: number) {
-  const newArray = [...array];
-  arrayMoveMutable(newArray, fromIndex, toIndex);
-  return newArray;
-}
-
 export interface IProps<T> {
   data: DataStateKeys<T[]>;
   onSave: (data: string[]) => Promise<void | string[]>;

src/frontend/views/Dashboard/Manage/_BaseManageDashboard.tsx

@@ -2,12 +2,12 @@ import styled from "styled-components";
 import { Check, Plus } from "react-feather";
 import { USER_PERMISSIONS } from "shared/constants/user";
 import { ViewStateMachine } from "frontend/components/ViewStateMachine";
-import arrayMove from "array-move";
 import SortableList, { SortableItem } from "react-easy-sort";
 import { useRouter } from "next/router";
 import { useSetPageDetails } from "frontend/lib/routing/usePageDetails";
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
 import { AppLayout } from "frontend/_layouts/app";
+import { arrayMoveImmutable } from "shared/lib/array/move";
 import {
   useArrangeDashboardWidgetMutation,
   useDashboardWidgets,
@@ -41,7 +41,7 @@ export function BaseManageDashboard({ dashboardId, doneLink, title }: IProps) {
     useArrangeDashboardWidgetMutation(dashboardId);
 
   const onSortEnd = (oldIndex: number, newIndex: number) => {
-    const newOrder = arrayMove(widgets.data, oldIndex, newIndex);
+    const newOrder = arrayMoveImmutable(widgets.data, oldIndex, newIndex);
     arrangeDashboardWidgetMutation.mutate(newOrder.map(({ id }) => id));
   };
 

src/frontend/views/data/_BaseEntityForm.tsx

@@ -22,6 +22,7 @@ import { ButtonIconTypes } from "frontend/design-system/components/Button/consta
 import { buildAppliedSchemaFormConfig } from "./buildAppliedSchemaFormConfig";
 import { useEntityViewStateMachine } from "./useEntityViewStateMachine";
 import { filterOutHiddenScalarColumns } from "./utils";
+import { usePortalExtendEntityFormConfig } from "./portal";
 
 type IProps = {
   entity: string;
@@ -57,6 +58,9 @@ export function BaseEntityForm({
     "entity_columns_types",
     entity
   );
+
+  const extendEntityFormConfig = usePortalExtendEntityFormConfig(crudAction);
+
   const entityFormExtension = useEntityConfiguration(
     "entity_form_extension",
     entity
@@ -78,6 +82,7 @@ export function BaseEntityForm({
     entityFormExtension.isLoading ||
     entity === SLUG_LOADING_VALUE ||
     entityFieldTypesMap.isLoading ||
+    extendEntityFormConfig === "loading" ||
     additionalDataState?.isLoading;
 
   const viewState = useEntityViewStateMachine(isLoading, error, crudAction);
@@ -113,6 +118,11 @@ export function BaseEntityForm({
     fields,
   };
 
+  const formConfig = buildAppliedSchemaFormConfig(
+    formSchemaConfig,
+    allOptional
+  );
+
   return (
     <ViewStateMachine
       loading={viewState.type === DataStates.Loading}
@@ -137,7 +147,11 @@ export function BaseEntityForm({
         action={crudAction}
         icon={icon}
         initialValues={fieldsInitialValues}
-        fields={buildAppliedSchemaFormConfig(formSchemaConfig, allOptional)}
+        fields={
+          typeof extendEntityFormConfig === "string"
+            ? formConfig
+            : extendEntityFormConfig(formConfig)
+        }
         formExtension={entityFormExtension.data}
       />
     </ViewStateMachine>

src/frontend/views/data/portal/index.ts

@@ -0,0 +1 @@
+export { usePortalExtendEntityFormConfig } from "./main";

src/frontend/views/data/portal/main.ts

@@ -0,0 +1,17 @@
+import { IAppliedSchemaFormConfig } from "shared/form-schemas/types";
+import { noop } from "shared/lib/noop";
+
+export const usePortalExtendEntityFormConfig = (
+  crudAction: "update" | "create"
+):
+  | "loading"
+  | ((
+      formConfig: IAppliedSchemaFormConfig<any>
+    ) => IAppliedSchemaFormConfig<any>) => {
+  noop(crudAction);
+  return (
+    formConfig: IAppliedSchemaFormConfig<any>
+  ): IAppliedSchemaFormConfig<any> => {
+    return formConfig;
+  };
+};

src/frontend/views/settings/Menu/index.tsx

@@ -19,8 +19,8 @@ import {
 } from "frontend/hooks/entity/entity.store";
 import { loadedDataState } from "frontend/lib/data/constants/loadedDataState";
 import { NAVIGATION_MENU_ENDPOINT } from "frontend/_layouts/app/LayoutImpl/constants";
-import { sortByList } from "shared/logic/entities/sort.utils";
 import { AppLayout } from "frontend/_layouts/app";
+import { sortListByOrder } from "shared/lib/array/sort";
 import { SETTINGS_VIEW_KEY } from "../constants";
 import { EntitiesSelection } from "../Entities/Selection";
 
@@ -49,7 +49,7 @@ export function MenuSettings() {
     .filter(({ value }) => !menuEntitiesToHide.data.includes(value))
     .sort((a, b) => a.value.localeCompare(b.value));
 
-  sortByList(menuEntities, menuEntitiesOrder.data, "value");
+  sortListByOrder(menuEntitiesOrder.data, menuEntities, "value");
 
   const upsertHideFromMenuMutation = useUpsertConfigurationMutation(
     "disabled_menu_entities",

src/shared/lib/array/move.ts

@@ -0,0 +1,20 @@
+function arrayMoveMutable<T>(array: T[], fromIndex: number, toIndex: number) {
+  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
+
+  if (startIndex >= 0 && startIndex < array.length) {
+    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
+
+    const [item] = array.splice(fromIndex, 1);
+    array.splice(endIndex, 0, item);
+  }
+}
+
+export function arrayMoveImmutable<T>(
+  array: T[],
+  fromIndex: number,
+  toIndex: number
+) {
+  const newArray = [...array];
+  arrayMoveMutable(newArray, fromIndex, toIndex);
+  return newArray;
+}

src/shared/lib/array/sort/index.ts

@@ -0,0 +1,17 @@
+export function sortListByOrder<T, K extends keyof T>(
+  order: string[],
+  itemsToOrder: T[],
+  key: K
+): T[] {
+  const indexOf = (entry: T) => {
+    const index = order.indexOf(entry[key] as unknown as string);
+    if (index === -1) {
+      return Infinity;
+    }
+    return index;
+  };
+
+  return itemsToOrder.sort((a, b) => {
+    return indexOf(a) - indexOf(b);
+  });
+}

src/backend/list-order/utils.spec.ts → src/shared/lib/array/sort/sort.spec.ts

@@ -1,22 +1,25 @@
-import { sortListByOrder } from "./utils";
+import { sortListByOrder } from ".";
 
 describe("sortListByOrder", () => {
   it("should return the same list if the order is empty", () => {
     const list = [{ id: "1" }, { id: "2" }, { id: "3" }];
     const order = [];
-    expect(sortListByOrder(order, list)).toEqual(list);
+    expect(sortListByOrder(order, list, "id")).toEqual(list);
   });
 
   it("should return only items in the list even if present in the order", () => {
     const list = [{ id: "1" }, { id: "3" }];
     const order = ["3", "2", "1"];
-    expect(sortListByOrder(order, list)).toEqual([{ id: "3" }, { id: "1" }]);
+    expect(sortListByOrder(order, list, "id")).toEqual([
+      { id: "3" },
+      { id: "1" },
+    ]);
   });
 
   it("should order the list based on the order", () => {
     const list = [{ id: "1" }, { id: "2" }, { id: "3" }];
     const order = ["3", "2", "1"];
-    expect(sortListByOrder(order, list)).toEqual([
+    expect(sortListByOrder(order, list, "id")).toEqual([
       { id: "3" },
       { id: "2" },
       { id: "1" },
@@ -26,7 +29,7 @@ describe("sortListByOrder", () => {
   it("should append the remaining items at the end of the list", () => {
     const list = [{ id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }];
     const order = ["3", "2", "1"];
-    expect(sortListByOrder(order, list)).toEqual([
+    expect(sortListByOrder(order, list, "id")).toEqual([
       { id: "3" },
       { id: "2" },
       { id: "1" },