Added a new feature to toggle between technical names and display nam…

…es in the XDM Object (#446)

* Toggle between technical names and display names in the XDM Object.

* Rename display name toggle helper and update test.

src/view/components/objectEditor/editor.jsx

@@ -57,6 +57,7 @@ const Editor = ({
   initialExpandedDepth = 0,
   componentName,
   verticalLayout = false,
+  showDisplayNames = false,
 }) => {
   const { values: formState } = useFormikContext();
   const [expandedNodeIdsInTree, setExpandedNodeIdsInTree] = useState(() => {
@@ -126,6 +127,7 @@ const Editor = ({
             setSelectedNodeId(nodeId);
             expandNodeAndAncestorsInTree(nodeId);
           }}
+          showDisplayNames={showDisplayNames}
         />
       </View>
       {
@@ -174,6 +176,7 @@ Editor.propTypes = {
   initialExpandedDepth: PropTypes.number,
   componentName: PropTypes.string.isRequired,
   verticalLayout: PropTypes.bool,
+  showDisplayNames: PropTypes.bool,
 };
 
 export default Editor;

src/view/components/objectEditor/helpers/generateTreeStructure.js

@@ -60,17 +60,19 @@ const getTreeNode = ({
   errors,
   touched,
   isAncestorCleared = false,
+  showDisplayNames = false,
 }) => {
   const { id, schema, isAlwaysDisabled } = formStateNode;
 
+  const nodeDisplayName =
+    showDisplayNames && schema.title ? schema.title : displayName || schema.key;
+
   const treeNode = {
     key: id,
     id,
-    displayName,
+    displayName: nodeDisplayName,
     type: schema.type,
     disabled: isAlwaysDisabled || isAncestorUsingWholePopulationStrategy,
-    // The Tree component, when rendering a tree node, will pass the treeNode
-    // object into the component that renders the tree node, which is provided here.
     title: treeNodeComponent,
     clear: formStateNode.transform.clear && !isAncestorCleared,
   };
@@ -111,6 +113,7 @@ const getTreeNode = ({
       return getTreeNode({
         ...args,
         isAncestorCleared: formStateNode.transform.clear || isAncestorCleared,
+        showDisplayNames,
       });
     },
   });
@@ -134,7 +137,13 @@ const getTreeNode = ({
 
 // Avoid exposing all of getTreeNode's parameters since
 // they're only used internally for recursion.
-export default ({ treeNodeComponent, formState, errors, touched }) => {
+export default ({
+  treeNodeComponent,
+  formState,
+  errors,
+  touched,
+  showDisplayNames = false,
+}) => {
   return getTreeNode({
     formStateNode: formState,
     treeNodeComponent,
@@ -143,5 +152,6 @@ export default ({ treeNodeComponent, formState, errors, touched }) => {
     displayName: "",
     errors,
     touched,
+    showDisplayNames,
   });
 };

src/view/components/objectEditor/xdmTree.jsx

@@ -56,6 +56,7 @@ const XdmTree = ({
   expandedNodeIds,
   setExpandedNodeIds,
   onSelect = () => {},
+  showDisplayNames = false,
 }) => {
   const { values: formState, errors, touched } = useFormikContext();
 
@@ -64,6 +65,7 @@ const XdmTree = ({
     formState,
     errors,
     touched,
+    showDisplayNames,
   });
 
   // Expand invalid items when the user attempts to submit the form by hitting
@@ -107,6 +109,7 @@ XdmTree.propTypes = {
   expandedNodeIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   setExpandedNodeIds: PropTypes.func.isRequired,
   onSelect: PropTypes.func,
+  showDisplayNames: PropTypes.bool,
 };
 
 export default XdmTree;

src/view/dataElements/xdmObject.jsx

@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { ProgressCircle, Flex } from "@adobe/react-spectrum";
+import { ProgressCircle, Flex, Switch } from "@adobe/react-spectrum";
 import { useField } from "formik";
 import { object, string } from "yup";
 import FormElementContainer from "../components/formElementContainer";
@@ -251,18 +251,12 @@ const XdmObject = ({ initInfo, context, formikProps }) => {
   const { resetForm, values } = formikProps;
   const reportAsyncError = useReportAsyncError();
 
-  const {
-    sandboxes,
-    // sandboxWarning,
-    schema,
-    // schemaWarning,
-    schemasFirstPage,
-    schemasFirstPageCursor,
-    // showEditorNotReadyValidationError
-  } = context;
+  const { sandboxes, schema, schemasFirstPage, schemasFirstPageCursor } =
+    context;
 
   const [selectedNodeId, setSelectedNodeId] = useState(null);
   const [hasSchema, setHasSchema] = useState(schema != null);
+  const [showDisplayNames, setShowDisplayNames] = useState(false);
 
   const abortPreviousRequestsAndCreateSignal =
     useAbortPreviousRequestsAndCreateSignal();
@@ -355,13 +349,23 @@ const XdmObject = ({ initInfo, context, formikProps }) => {
         schema={schema}
         previouslySavedSchemaInfo={settings && settings.schema}
         componentName="XDM object data element"
+        showDisplayNames={showDisplayNames}
       />
     );
   }
 
   return (
     <div>
       <FormElementContainer>
+        <Flex alignItems="center" gap="size-100" marginBottom="size-200">
+          <Switch
+            isSelected={showDisplayNames}
+            onChange={setShowDisplayNames}
+            data-test-id="displayNamesSwitch"
+          >
+            Show display names for fields
+          </Switch>
+        </Flex>
         <FormikPicker
           label="Sandbox"
           name="sandboxName"

test/functional/helpers/objectEditor/xdmTree.mjs

@@ -17,6 +17,7 @@ import {
 } from "../dataTestIdSelectors.mjs";
 
 const xdmTree = createTestIdSelector("xdmTree");
+const displayNamesSwitch = createTestIdSelector("displayNamesSwitch");
 
 const getIsElementInViewport = (selector) => {
   return ClientFunction(
@@ -111,11 +112,15 @@ const create = (node) => {
 
 export default {
   node: (title) => {
-    const node = xdmTree
+    const titleSelector = xdmTree
       .find(createTestIdSelectorString("xdmTreeNodeTitleDisplayName"))
-      .withText(title)
+      .withText(new RegExp(`^${title}$|^${title.toLowerCase()}$`, 'i'))
       .parent(createTestIdSelectorString("xdmTreeNodeTitle"))
       .nth(0);
-    return create(node);
+
+    return create(titleSelector);
+  },
+  toggleDisplayNames: async () => {
+    await t.click(displayNamesSwitch);
   },
 };

test/functional/specs/view/dataElements/xdmObjectDisplayNames.spec.mjs

@@ -0,0 +1,64 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { t, Selector } from "testcafe";
+import xdmTree from "../../../helpers/objectEditor/xdmTree.mjs";
+import initializeExtensionView from "../../../helpers/objectEditor/initializeExtensionView.mjs";
+import createExtensionViewFixture from "../../../helpers/createExtensionViewFixture.mjs";
+createExtensionViewFixture({
+  title: "XDM Object Display Names",
+  viewPath: "dataElements/xdmObject.html",
+  requiresAdobeIOIntegration: true,
+});
+
+test("toggles between display names and field IDs", async () => {
+  await initializeExtensionView({
+    settings: {
+      schema: {
+        id: "https://ns.adobe.com/unifiedjsqeonly/schemas/8f9fc4c28403e4428bbe7b97436322c44a71680349dfd489",
+        version: "1.5",
+      },
+      data: {
+        _unifiedjsqeonly: {
+          vendor: {
+            name: "Adobe"
+          }
+        }
+      }
+    }
+  });
+
+  // Wait for schema to load and API responses
+  await t.wait(2000);
+
+  // Expand the path to the name field
+  await xdmTree.node("_unifiedjsqeonly").toggleExpansion();
+  await t.wait(200);
+  await xdmTree.node("vendor").toggleExpansion();
+  await t.wait(200);
+
+  // Check if the node exists using direct selector
+  const nameNode = Selector('[data-test-id="xdmTreeNodeTitleDisplayName"]').withText('name');
+  await t.expect(await nameNode.exists).ok("Field ID 'name' should be visible");
+
+  // Toggle to show display names
+  await xdmTree.toggleDisplayNames();
+  await t.wait(200);
+
+  const displayNameNode = Selector('[data-test-id="xdmTreeNodeTitleDisplayName"]').withText('Name');
+  await t.expect(await displayNameNode.exists).ok("Display name 'Name' should be visible");
+
+  // Toggle back to show field IDs
+  await xdmTree.toggleDisplayNames();
+  await t.wait(200);
+  await t.expect(await nameNode.exists).ok("Field ID 'name' should be visible again");
+});