♻️ refactor(data-hooks): centralize is field mutabale logic

dashpresshq · Dec 26, 2023 · 19aa42d · 19aa42d
1 parent b4bc92d
commit 19aa42d
Show file tree

Hide file tree

Showing 19 changed files with 90 additions and 67 deletions.
diff --git a/src/frontend/components/SchemaForm/_RenderFormInput.tsx b/src/frontend/components/SchemaForm/_RenderFormInput.tsx
@@ -1,7 +1,4 @@
 import { sluggify } from "shared/lib/strings";
-import { ISchemaFormConfig } from "shared/form-schemas/types";
-import { IColorableSelection } from "shared/types/ui";
-import { FIELD_TYPES_CONFIG_MAP } from "shared/validations";
 import { FormInput } from "frontend/design-system/components/Form/FormInput";
 import { FormNumberInput } from "frontend/design-system/components/Form/FormNumberInput";
 import { FormSelect } from "frontend/design-system/components/Form/FormSelect";
@@ -13,37 +10,23 @@ import { FormTextArea } from "frontend/design-system/components/Form/FormTextAre
 import { FormFileInput } from "frontend/design-system/components/Form/FormFileInput";
 import { FormSelectButton } from "frontend/design-system/components/Form/FormSelectButton";
 import { FormRichTextArea } from "frontend/design-system/components/Form/FormRichTextArea";
-import { FieldInputProps, FieldMetaState } from "react-final-form";
-import { ISharedFormInput } from "frontend/design-system/components/Form/_types";
+import { useExtendRenderFormInputProps } from "frontend/views/data/portal";
+import { IRenderFormInputProps } from "./types";
 
-interface IProps {
-  type: keyof typeof FIELD_TYPES_CONFIG_MAP;
-  renderProps: {
-    input: FieldInputProps<any, HTMLElement>;
-    meta: FieldMetaState<any>;
-  };
-  apiSelections?: ISchemaFormConfig["apiSelections"];
-  entityFieldSelections?: IColorableSelection[];
-  required: boolean;
-  disabled: boolean;
-  label: string;
-  placeholder?: string;
-  description?: string;
-  rightActions?: ISharedFormInput["rightActions"];
-}
+export function RenderFormInput(props: IRenderFormInputProps) {
+  const {
+    renderProps,
+    label,
+    type,
+    entityFieldSelections = [],
+    apiSelections,
+    required,
+    disabled,
+    description,
+    placeholder,
+    rightActions,
+  } = useExtendRenderFormInputProps(props);
 
-export function RenderFormInput({
-  renderProps,
-  label,
-  type,
-  entityFieldSelections = [],
-  apiSelections,
-  required,
-  disabled,
-  description,
-  placeholder,
-  rightActions,
-}: IProps) {
   const formProps = {
     label,
     required,

diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -115,7 +115,8 @@ export function SchemaForm<T extends Record<string, unknown>>({
                             (validation) =>
                               validation.validationType === "required"
                           )}
-                          rightActions={bag?.rightActions?.(form)}
+                          form={form}
+                          rightActions={bag?.rightActions}
                           placeholder={bag.placeholder}
                           description={bag.description}
                           apiSelections={bag.apiSelections}

diff --git a/src/frontend/components/SchemaForm/types.ts b/src/frontend/components/SchemaForm/types.ts
@@ -1,4 +1,28 @@
+import { FormApi } from "final-form";
+import { ISharedFormInput } from "frontend/design-system/components/Form/_types";
+import { FieldInputProps, FieldMetaState } from "react-final-form";
+import { ISchemaFormConfig } from "shared/form-schemas/types";
+import { IColorableSelection } from "shared/types/ui";
+import { FIELD_TYPES_CONFIG_MAP } from "shared/validations";
+
 export interface IFormExtension {
   fieldsState: string;
   beforeSubmit: string;
 }
+
+export interface IRenderFormInputProps {
+  type: keyof typeof FIELD_TYPES_CONFIG_MAP;
+  renderProps: {
+    input: FieldInputProps<any, HTMLElement>;
+    meta: FieldMetaState<any>;
+  };
+  apiSelections?: ISchemaFormConfig["apiSelections"];
+  entityFieldSelections?: IColorableSelection[];
+  required: boolean;
+  disabled: boolean;
+  form: FormApi;
+  label: string;
+  placeholder?: string;
+  description?: string;
+  rightActions?: ISharedFormInput["rightActions"];
+}
diff --git a/src/frontend/views/Dashboard/Widget/useWidgetNavigationLink.ts b/src/frontend/views/Dashboard/Widget/useWidgetNavigationLink.ts
@@ -1,7 +1,7 @@
 import { SLUG_LOADING_VALUE } from "frontend/lib/routing/constants";
 import { useEntityConfiguration } from "frontend/hooks/configuration/configuration.store";
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
-import { useCanUserPerformCrudAction } from "frontend/views/data/useCanUserPerformCrudAction";
+import { useCanUserPerformCrudAction } from "frontend/views/data/hooks/useCanUserPerformCrudAction";
 
 export const useWidgetNavigationLink = (entity?: string, queryId?: string) => {
   const canUserPerformCrudAction = useCanUserPerformCrudAction(entity);

diff --git a/src/frontend/views/data/Details/DetailsView.tsx b/src/frontend/views/data/Details/DetailsView.tsx
@@ -22,7 +22,7 @@ import {
 import { DataStates } from "frontend/lib/data/types";
 import styled from "styled-components";
 import { filterOutHiddenScalarColumns } from "../utils";
-import { useEntityViewStateMachine } from "../useEntityViewStateMachine";
+import { useEntityViewStateMachine } from "../hooks/useEntityViewStateMachine";
 import { viewSpecialDataTypes } from "../viewSpecialDataTypes";
 import { evalutePresentationScript } from "../evaluatePresentationScript";
 import { PreDataDetails } from "./portal";

diff --git a/src/frontend/views/data/Details/RelationsDetails.tsx b/src/frontend/views/data/Details/RelationsDetails.tsx
@@ -26,7 +26,7 @@ import { ENTITY_DETAILS_VIEW_KEY } from "./constants";
 import { EntityDetailsView } from "./DetailsView";
 import { DetailsLayout } from "./_Layout";
 import { DetailsCanvas } from "../Table/_WholeEntityTable/DetailsCanvas";
-import { useEntityActionButtons } from "../useEntityActionButtons";
+import { useEntityActionButtons } from "../hooks/useEntityActionButtons";
 import { usePortalActionButtons } from "./portal";
 
 export function EntityRelationDetails() {

diff --git a/src/frontend/views/data/Details/_Layout.tsx b/src/frontend/views/data/Details/_Layout.tsx
@@ -16,7 +16,7 @@ import { ListSkeleton } from "frontend/design-system/components/Skeleton/List";
 import { SectionListItem } from "frontend/design-system/components/Section/SectionList";
 import { IDropDownMenuItem } from "frontend/design-system/components/DropdownMenu";
 import { DataStates } from "frontend/lib/data/types";
-import { useEntityViewStateMachine } from "../useEntityViewStateMachine";
+import { useEntityViewStateMachine } from "../hooks/useEntityViewStateMachine";
 import { getEntitiesRelationsCount } from "./utils";
 import {
   EntityActionTypes,

diff --git a/src/frontend/views/data/Details/index.tsx b/src/frontend/views/data/Details/index.tsx
@@ -13,7 +13,7 @@ import { EntityDetailsView } from "./DetailsView";
 import { DetailsLayout, DETAILS_LAYOUT_KEY } from "./_Layout";
 import { DetailsCanvas } from "../Table/_WholeEntityTable/DetailsCanvas";
 import { useDetailsViewMenuItems, usePortalActionButtons } from "./portal";
-import { useEntityActionButtons } from "../useEntityActionButtons";
+import { useEntityActionButtons } from "../hooks/useEntityActionButtons";
 
 export function EntityDetails() {
   const entityId = useEntityId();

diff --git a/src/frontend/views/data/Table/useTableColumns.tsx b/src/frontend/views/data/Table/useTableColumns.tsx
@@ -26,7 +26,7 @@ import { filterOutHiddenScalarColumns } from "../utils";
 import { viewSpecialDataTypes } from "../viewSpecialDataTypes";
 import { usePortalTableColumns } from "./portal";
 import { evalutePresentationScript } from "../evaluatePresentationScript";
-import { useEntityActionButtons } from "../useEntityActionButtons";
+import { useEntityActionButtons } from "../hooks/useEntityActionButtons";
 import { usePortalActionButtons } from "../Details/portal";
 
 export const ACTIONS_ACCESSOR = "__actions__";

diff --git a/src/frontend/views/data/Table/useTableMenuItems.ts b/src/frontend/views/data/Table/useTableMenuItems.ts
@@ -5,7 +5,7 @@ import { Plus } from "react-feather";
 import { SLUG_LOADING_VALUE } from "frontend/lib/routing/constants";
 import { IDropDownMenuItem } from "frontend/design-system/components/DropdownMenu";
 import { usePluginTableMenuItems } from "./portal";
-import { useCanUserPerformCrudAction } from "../useCanUserPerformCrudAction";
+import { useCanUserPerformCrudAction } from "../hooks/useCanUserPerformCrudAction";
 
 export const useTableMenuItems = (
   entity: string,

diff --git a/src/frontend/views/data/_BaseEntityForm.tsx b/src/frontend/views/data/_BaseEntityForm.tsx
@@ -3,10 +3,7 @@ import {
   FormSkeletonSchema,
 } from "frontend/design-system/components/Skeleton/Form";
 import { SchemaForm } from "frontend/components/SchemaForm";
-import {
-  useAppConfiguration,
-  useEntityConfiguration,
-} from "frontend/hooks/configuration/configuration.store";
+import { useEntityConfiguration } from "frontend/hooks/configuration/configuration.store";
 import {
   useEntityFields,
   useEntityToOneReferenceFields,
@@ -24,9 +21,10 @@ import { DataStateKeys, DataStates } from "frontend/lib/data/types";
 import { SLUG_LOADING_VALUE } from "frontend/lib/routing/constants";
 import { ButtonIconTypes } from "frontend/design-system/components/Button/constants";
 import { buildAppliedSchemaFormConfig } from "./buildAppliedSchemaFormConfig";
-import { useEntityViewStateMachine } from "./useEntityViewStateMachine";
+import { useEntityViewStateMachine } from "./hooks/useEntityViewStateMachine";
 import { filterOutHiddenScalarColumns } from "./utils";
 import { usePortalExtendEntityFormConfig } from "./portal";
+import { useIsEntityFieldMutatable } from "./hooks/useIsEntityFieldMutatable";
 
 type IProps = {
   entity: string;
@@ -65,14 +63,14 @@ export function BaseEntityForm({
     crudAction
   );
 
+  const isEntityFieldMutatable = useIsEntityFieldMutatable(crudAction);
+
   const entityFormExtension = useEntityConfiguration(
     "entity_form_extension",
     entity
   );
   const entityToOneReferenceFields = useEntityToOneReferenceFields(entity);
 
-  const metaDataColumns = useAppConfiguration("metadata_columns");
-
   const error =
     entityFieldTypesMap.error ||
     hiddenColumns.error ||
@@ -99,15 +97,7 @@ export function BaseEntityForm({
   });
 
   const fields = filterOutHiddenScalarColumns(
-    entityFields.data
-      .filter(({ isId }) => !isId)
-      .filter(
-        ({ name }) =>
-          ![
-            metaDataColumns.data.createdAt,
-            metaDataColumns.data.updatedAt,
-          ].includes(name)
-      ),
+    entityFields.data.filter(isEntityFieldMutatable),
     hiddenColumns.data
   ).map(({ name }) => name);
 

diff --git a/...views/data/useCanUserPerformCrudAction.ts → ...data/hooks/useCanUserPerformCrudAction.ts b/...views/data/useCanUserPerformCrudAction.ts → ...data/hooks/useCanUserPerformCrudAction.ts
diff --git a/...tend/views/data/useEntityActionButtons.ts → ...iews/data/hooks/useEntityActionButtons.ts b/...tend/views/data/useEntityActionButtons.ts → ...iews/data/hooks/useEntityActionButtons.ts
diff --git a/...d/views/data/useEntityViewStateMachine.ts → ...s/data/hooks/useEntityViewStateMachine.ts b/...d/views/data/useEntityViewStateMachine.ts → ...s/data/hooks/useEntityViewStateMachine.ts
diff --git a/src/frontend/views/data/hooks/useIsEntityFieldMutatable.ts b/src/frontend/views/data/hooks/useIsEntityFieldMutatable.ts
@@ -0,0 +1,26 @@
+import { useAppConfiguration } from "frontend/hooks/configuration/configuration.store";
+import { IEntityCrudSettings } from "shared/configurations";
+import { IEntityField } from "shared/types/db";
+
+export const useIsEntityFieldMutatable = (
+  crudKey: keyof IEntityCrudSettings | "table"
+) => {
+  const metaDataColumns = useAppConfiguration("metadata_columns");
+
+  return (entityField: IEntityField) => {
+    if (entityField.isId) {
+      return false;
+    }
+
+    if (
+      (crudKey === "create" || crudKey === "update") &&
+      [metaDataColumns.data.createdAt, metaDataColumns.data.updatedAt].includes(
+        entityField.name
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+};
diff --git a/src/frontend/views/data/portal/index.ts b/src/frontend/views/data/portal/index.ts
@@ -1,4 +1,5 @@
 export {
   usePortalExtendEntityFormConfig,
   PortalEntityFormComponent,
+  useExtendRenderFormInputProps,
 } from "./main";
diff --git a/src/frontend/views/data/portal/main.ts b/src/frontend/views/data/portal/main.ts
@@ -1,3 +1,4 @@
+import { IRenderFormInputProps } from "frontend/components/SchemaForm/types";
 import { IAppliedSchemaFormConfig } from "shared/form-schemas/types";
 import { noop } from "shared/lib/noop";
 
@@ -20,3 +21,7 @@ export const usePortalExtendEntityFormConfig = (
 export function PortalEntityFormComponent() {
   return null;
 }
+
+export const useExtendRenderFormInputProps = (props: IRenderFormInputProps) => {
+  return props;
+};
diff --git a/src/frontend/views/entity/Crud/EntityFieldsSelectionSettings.tsx b/src/frontend/views/entity/Crud/EntityFieldsSelectionSettings.tsx
@@ -13,7 +13,7 @@ import {
   useEntitySlug,
 } from "frontend/hooks/entity/entity.config";
 import { IEntityCrudSettings } from "shared/configurations";
-import { useAppConfiguration } from "frontend/hooks/configuration/configuration.store";
+import { useIsEntityFieldMutatable } from "frontend/views/data/hooks/useIsEntityFieldMutatable";
 import { ENTITY_CRUD_LABELS } from "../constants";
 import { makeEntityFieldsSelectionKey } from "./constants";
 
@@ -44,7 +44,7 @@ export function EntityFieldsSelectionSettings({
 
   const getEntityFieldLabels = useEntityFieldLabels(entity);
 
-  const metaDataColumns = useAppConfiguration("metadata_columns");
+  const isEntityFieldMutatable = useIsEntityFieldMutatable(crudKey);
 
   const { toggleSelection, allSelections, selectMutiple, isSelected } =
     useStringSelections(makeEntityFieldsSelectionKey(entity, crudKey));
@@ -86,13 +86,7 @@ export function EntityFieldsSelectionSettings({
               const isHidden = isSelected(menuItem.name);
 
               const disabled =
-                menuItem.isId ||
-                !toggling.enabled ||
-                ((crudKey === "create" || crudKey === "update") &&
-                  [
-                    metaDataColumns.data.createdAt,
-                    metaDataColumns.data.updatedAt,
-                  ].includes(menuItem.name));
+                !isEntityFieldMutatable(menuItem) || !toggling.enabled;
 
               return (
                 <SectionListItem

diff --git a/src/shared/form-schemas/types.ts b/src/shared/form-schemas/types.ts
@@ -1,4 +1,3 @@
-import { FormApi } from "final-form";
 import { ISharedFormInput } from "frontend/design-system/components/Form/_types";
 import { GridSpanSizes, IColorableSelection } from "shared/types/ui";
 import { FIELD_TYPES_CONFIG_MAP } from "shared/validations";
@@ -16,7 +15,7 @@ export interface ISchemaFormConfig {
   placeholder?: string;
   description?: string;
   span?: GridSpanSizes;
-  rightActions?: (form: FormApi) => ISharedFormInput["rightActions"];
+  rightActions?: ISharedFormInput["rightActions"];
   validations: IFieldValidationItem[];
 }