From b3e9e6d0b46cdf90c7e69201858e2a64d5ec54cc Mon Sep 17 00:00:00 2001 From: andreastanderen <71079896+standeren@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:17:19 +0200 Subject: [PATCH] Ensure to re-render ItemDataComponent when the Pointer changes (#11323) * Add useEffect for controlling schema node title and description * Add useEffect for controlling schema node title and description * ItemDataComponent should re-render if the pointer changes * PR-feedback --------- Co-authored-by: LAPTOP-S0QU96IH\david --- .../SchemaInspector/ItemDataComponent.tsx | 20 ++++-------- .../SchemaInspector/ItemPropertiesTab.tsx | 2 +- .../components/TreeView/SchemaItemLabel.tsx | 32 ++++++++++++------- .../src/lib/mutations/ui-schema-reducers.ts | 3 +- 4 files changed, 29 insertions(+), 28 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx index e6f484ec77e..2b55d8f5f72 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemDataComponent.tsx @@ -1,5 +1,5 @@ import type { ChangeEvent } from 'react'; -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { navigateToType, @@ -53,8 +53,8 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) { const { fieldType, pointer, - title, - description, + title = '', + description = '', reference, isCombinationItem, objectKind, @@ -63,15 +63,11 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) { } = schemaNode; const dispatch = useDispatch(); const { data, save, setSelectedTypePointer } = useSchemaEditorAppContext(); + const { t } = useTranslation(); - const [itemTitle, setItemItemTitle] = useState(title || ''); - const [nodeName, setNodeName] = useState(getNameFromPointer({ pointer })); - - useEffect(() => { - setNodeName(getNameFromPointer({ pointer })); - }, [pointer]); - - const [itemDescription, setItemItemDescription] = useState(description || ''); + const [itemTitle, setItemItemTitle] = useState(title); + const [itemDescription, setItemItemDescription] = useState(description); + const nodeName = getNameFromPointer({ pointer }); const getChildNodes = () => pointer && pointer.endsWith(nodeName) ? getChildNodesByPointer(data, pointer) : []; @@ -132,8 +128,6 @@ export function ItemDataComponent({ schemaNode }: IItemDataComponentProps) { ); }; - const { t } = useTranslation(); - const hasCustomProps = custom !== undefined && Object.keys(custom).length > 0; const titleId = getDomFriendlyID(pointer, { suffix: 'title' }); diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemPropertiesTab.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemPropertiesTab.tsx index f90a8026c89..0fe6ebd0f9f 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/ItemPropertiesTab.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/ItemPropertiesTab.tsx @@ -14,6 +14,6 @@ export const ItemPropertiesTab = ({ selectedItem }: ItemPropertiesTabProps) => { } else if (selectedItem.pointer === ROOT_POINTER) { return <>root; } else { - return ; + return ; } }; diff --git a/frontend/packages/schema-editor/src/components/TreeView/SchemaItemLabel.tsx b/frontend/packages/schema-editor/src/components/TreeView/SchemaItemLabel.tsx index 258253d0f97..ce7a729f93e 100644 --- a/frontend/packages/schema-editor/src/components/TreeView/SchemaItemLabel.tsx +++ b/frontend/packages/schema-editor/src/components/TreeView/SchemaItemLabel.tsx @@ -29,10 +29,16 @@ import { useTranslation } from 'react-i18next'; import { AltinnConfirmDialog } from 'app-shared/components'; import { deleteNode } from '@altinn/schema-model'; import { removeSelection } from '../../features/editor/schemaEditorSlice'; -import { LinkIcon, BulletListIcon, TabsIcon, ArrowUpIcon, TrashIcon,ArrowDownIcon } from '@navikt/aksel-icons'; +import { + LinkIcon, + BulletListIcon, + TabsIcon, + ArrowUpIcon, + TrashIcon, + ArrowDownIcon, +} from '@navikt/aksel-icons'; import { useSchemaEditorAppContext } from '@altinn/schema-editor/hooks/useSchemaEditorAppContext'; - export interface SchemaItemLabelProps { hasReferredNodes: boolean; icon: string; @@ -101,14 +107,14 @@ export const SchemaItemLabel = ({ pointer, props, callback: (newPointer: string) => dispatch(setSelectedNode(newPointer)), - }) + }), ) : save( addProperty(data, { pointer, props, callback: (newPointer: string) => dispatch(setSelectedAndFocusedNode(newPointer)), - }) + }), ); }); @@ -120,7 +126,7 @@ export const SchemaItemLabel = ({ const isArray = selectedNode.isArray || refNode?.isArray; const isRef = refNode || pointerIsDefinition(selectedNode.pointer); - const capabilties = getCapabilities(selectedNode); + const capabilities = getCapabilities(selectedNode); return (
- {capabilties.includes(Capabilites.CanHaveReferenceAdded) && ( + {capabilities.includes(Capabilites.CanHaveReferenceAdded) && ( )} - {capabilties.includes(Capabilites.CanHaveFieldAdded) && ( + {capabilities.includes(Capabilites.CanHaveFieldAdded) && ( )} - {capabilties.includes(Capabilites.CanHaveCombinationAdded) && ( + {capabilities.includes(Capabilites.CanHaveCombinationAdded) && ( )} - {capabilties.includes(Capabilites.CanBeConvertedToReference) && ( + {capabilities.includes(Capabilites.CanBeConvertedToReference) && ( )} - {capabilties.includes(Capabilites.CanBeConvertedToField) && ( + {capabilities.includes(Capabilites.CanBeConvertedToField) && ( )} - {capabilties.includes(Capabilites.CanBeDeleted) && ( + {capabilities.includes(Capabilites.CanBeDeleted) && ( !prevState); }} - text={hasReferredNodes ? t('schema_editor.in_use_error') : t('schema_editor.delete')} + text={ + hasReferredNodes ? t('schema_editor.in_use_error') : t('schema_editor.delete') + } icon={TrashIcon} disabled={hasReferredNodes} /> diff --git a/frontend/packages/schema-model/src/lib/mutations/ui-schema-reducers.ts b/frontend/packages/schema-model/src/lib/mutations/ui-schema-reducers.ts index 6025a32ff74..f0c4ffbdcfb 100644 --- a/frontend/packages/schema-model/src/lib/mutations/ui-schema-reducers.ts +++ b/frontend/packages/schema-model/src/lib/mutations/ui-schema-reducers.ts @@ -211,8 +211,7 @@ export type SetCustomPropertiesArgs = { export const setCustomProperties: UiSchemaReducer = (uiSchema, { path, properties }) => { const newSchema = deepCopy(uiSchema); - const uiSchemaNode = getNodeByPointer(newSchema, path); - uiSchemaNode.custom = properties; + getNodeByPointer(newSchema, path).custom = properties; return newSchema; };