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 <david@framit.no>
Altinn · Oct 13, 2023 · b3e9e6d · b3e9e6d
1 parent b3ef05b
commit b3e9e6d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 28 deletions.
diff --git 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<string>(title || '');
-  const [nodeName, setNodeName] = useState(getNameFromPointer({ pointer }));
-
-  useEffect(() => {
-    setNodeName(getNameFromPointer({ pointer }));
-  }, [pointer]);
-
-  const [itemDescription, setItemItemDescription] = useState<string>(description || '');
+  const [itemTitle, setItemItemTitle] = useState<string>(title);
+  const [itemDescription, setItemItemDescription] = useState<string>(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
@@ -14,6 +14,6 @@ export const ItemPropertiesTab = ({ selectedItem }: ItemPropertiesTabProps) => {
   } else if (selectedItem.pointer === ROOT_POINTER) {
     return <>root</>;
   } else {
-    return <ItemDataComponent schemaNode={selectedItem} />;
+    return <ItemDataComponent key={selectedItem.pointer} schemaNode={selectedItem} />;
   }
 };
diff --git 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 (
     <div
@@ -170,7 +176,7 @@ export const SchemaItemLabel = ({
         open={Boolean(contextAnchor)}
         onClose={handleCloseContextMenu}
       >
-        {capabilties.includes(Capabilites.CanHaveReferenceAdded) && (
+        {capabilities.includes(Capabilites.CanHaveReferenceAdded) && (
           <AltinnMenuItem
             testId={SchemaItemLabelTestIds.contextMenuAddReference}
             id='add-reference-to-node-button'
@@ -180,7 +186,7 @@ export const SchemaItemLabel = ({
             icon={LinkIcon}
           />
         )}
-        {capabilties.includes(Capabilites.CanHaveFieldAdded) && (
+        {capabilities.includes(Capabilites.CanHaveFieldAdded) && (
           <AltinnMenuItem
             testId={SchemaItemLabelTestIds.contextMenuAddField}
             id='add-field-to-node-button'
@@ -190,7 +196,7 @@ export const SchemaItemLabel = ({
             icon={BulletListIcon}
           />
         )}
-        {capabilties.includes(Capabilites.CanHaveCombinationAdded) && (
+        {capabilities.includes(Capabilites.CanHaveCombinationAdded) && (
           <AltinnMenuItem
             testId={SchemaItemLabelTestIds.contextMenuAddCombination}
             id='add-combination-to-node-button'
@@ -200,7 +206,7 @@ export const SchemaItemLabel = ({
             icon={TabsIcon}
           />
         )}
-        {capabilties.includes(Capabilites.CanBeConvertedToReference) && (
+        {capabilities.includes(Capabilites.CanBeConvertedToReference) && (
           <AltinnMenuItem
             testId={SchemaItemLabelTestIds.contextMenuConvertToReference}
             id='convert-node-to-reference-button'
@@ -210,7 +216,7 @@ export const SchemaItemLabel = ({
             icon={ArrowUpIcon}
           />
         )}
-        {capabilties.includes(Capabilites.CanBeConvertedToField) && (
+        {capabilities.includes(Capabilites.CanBeConvertedToField) && (
           <AltinnMenuItem
             testId={SchemaItemLabelTestIds.contextMenuConvertToField}
             id='convert-node-to-field-buttonn'
@@ -221,7 +227,7 @@ export const SchemaItemLabel = ({
             disabled={true}
           />
         )}
-        {capabilties.includes(Capabilites.CanBeDeleted) && (
+        {capabilities.includes(Capabilites.CanBeDeleted) && (
           <AltinnConfirmDialog
             open={isConfirmDeleteDialogOpen}
             confirmText={t('schema_editor.datamodel_field_deletion_confirm')}
@@ -243,7 +249,9 @@ export const SchemaItemLabel = ({
                   event.stopPropagation();
                   setIsConfirmDeleteDialogOpen((prevState) => !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
@@ -211,8 +211,7 @@ export type SetCustomPropertiesArgs = {
 export const setCustomProperties: UiSchemaReducer<SetCustomPropertiesArgs> =
   (uiSchema, { path, properties }) => {
     const newSchema = deepCopy(uiSchema);
-    const uiSchemaNode = getNodeByPointer(newSchema, path);
-    uiSchemaNode.custom = properties;
+    getNodeByPointer(newSchema, path).custom = properties;
     return newSchema;
   };