Adding data tree extension

app.config.yaml

@@ -14,6 +14,14 @@ extensions:
                 LOG_LEVEL: debug
               annotations:
                 final: true
+            fetchFDMTree:
+              function: src/universal-editor-ui-1/actions/fetchFDMTree/index.js
+              web: 'yes'
+              runtime: nodejs:16
+              inputs:
+                LOG_LEVEL: debug
+              annotations:
+                final: true
             saveSegments:
               function: src/universal-editor-ui-1/actions/saveSegments/index.js
               web: 'yes'

src/universal-editor-ui-1/actions/fetchFDMTree/index.js

@@ -0,0 +1,35 @@
+const fetch = require("node-fetch")
+const FormData = require('form-data');
+async function main(params) {
+
+  const aemRequestOptions = {
+    method: "GET",
+    headers: {"Authorization": params.token}
+    };
+  const formJsonResponse = await fetch(params.endpoint+ params.formPath +".model.json", aemRequestOptions);
+  const formModel = await formJsonResponse.json();
+  var schemaRef = [];
+  var fdmTree = {};
+
+  if(formModel.properties) {
+    const properties =formModel.properties;
+    if(properties.schemaRef) {
+      schemaRef =properties.schemaRef;
+    }
+  }
+
+
+  const aemGetRequestOptions = {
+    method: "GET",
+    headers: {"Authorization": params.token, "X-Adobe-Accept-Unsupported-Api": 1, "x-gw-ims-org-id": params["x-gw-ims-org-id"]}
+  };
+  const postResponse = await fetch(params.endpoint+ "/adobe/forms/fm/v1/schema/fields?path=" + schemaRef , aemGetRequestOptions);
+  fdmTree = await postResponse.json();
+
+  return {
+    status: 200,
+    body: JSON.stringify(fdmTree)
+  };
+}
+
+exports.main = main;

src/universal-editor-ui-1/web-src/src/components/DataTree.js

@@ -0,0 +1,128 @@
+import { attach } from "@adobe/uix-guest";
+import { Provider, View, lightTheme, Text, Checkbox} from "@adobe/react-spectrum";
+import { extensionId } from "./Constants";
+import {useState, useEffect, useRef } from 'react';
+import actionWebInvoke from '../utils';
+import allActions from '../config.json'
+
+function DataTree () {
+
+    const [loading, setLoading] = useState(true);
+    const [guestConnection, setGuestConnection] = useState();
+    const [fdmTree, setFDMTree] = useState({})
+
+    useEffect(() => {
+        (async () => {
+            const guestConnection = await attach({ id: extensionId });
+            setGuestConnection(guestConnection);
+        })();
+    }, []);
+
+
+    const isObject = (val) => typeof val === 'object' && val !== null;
+
+    function getTree(jsonNode, level) {
+
+        return Object.keys(jsonNode).map((key) => {
+            const value = jsonNode[key];
+
+            return (
+                key === "title" ? (
+                <View marginTop="size-100"
+                marginStart={level+10}>
+                <Checkbox
+                    selectionMode="single"
+                    aria-label="Static ListView items example"
+                    maxWidth="size-6000"
+                    defaultSelected
+                >
+                    {value}
+                </Checkbox> 
+                </View>) : <></>
+                && 
+                isObject(value) ? (
+                  getTree(value, level+10)
+                ) : (<></>)
+
+
+
+            );
+          });
+    }
+
+
+    useEffect(() => {
+        if(!guestConnection) {
+            return;
+        }
+        const fetchData = async () => {
+            const editorState = await guestConnection.host.editorState.get();
+            var { connections, selected, editables, location, customTokens } = editorState;
+            try {
+
+                // Set the HTTP headers to access the Adobe I/O runtime action
+                const headers = {
+                    'Authorization': 'Bearer ' + guestConnection.sharedContext.get('token'),
+                    'x-gw-ims-org-id': guestConnection.sharedContext.get('orgId'),
+                    'Access-Control-Allow-Origin': 'http://localhost:9080'
+                };
+
+                console.error(editables);
+                const form = editables.filter(item => item.model === "form");
+                console.error(form);
+
+                const tempEndpointName = Object.keys(connections).filter((key) => 
+                    connections[key].startsWith("xwalk:")
+                )[0];
+
+
+                if (customTokens && customTokens[tempEndpointName]) {
+                    token = customTokens[tempEndpointName];
+                } else {
+                    token = "Bearer " + guestConnection.sharedContext.get('token');
+                }
+
+                const params = {
+                    "endpoint": connections[tempEndpointName].replace("xwalk:", ""),
+                    "token": token,
+                    "formPath": form[0].resource.replace("urn:aemconnection:", ""),
+                    "x-gw-ims-org-id": guestConnection.sharedContext.get('orgId')
+                };
+
+                console.error(params);
+                const actionResponse = await actionWebInvoke(allActions['fetchFDMTree'], headers, params);
+                console.error(actionResponse);
+                if(actionResponse.error) {
+                    setLoading(false);
+                }
+                setFDMTree(actionResponse);
+
+            } finally {
+                setLoading(false);
+            }
+        };
+        if (loading) {
+            fetchData().catch((e) => console.log("Extension error:", e));
+        }
+    } , [guestConnection]);
+
+    if (loading) {
+        return (
+            <Provider theme={lightTheme} colorScheme="light">
+                <View padding="size-250">
+                    <Text>Trying to load data tree...</Text>
+                </View>
+            </Provider>
+        )
+    }
+
+    return (
+        <Provider theme={lightTheme} colorScheme="light">
+            <View>
+                {getTree(fdmTree, 10)}
+            </View>
+        </Provider>
+    );
+};
+
+export default DataTree;

src/universal-editor-ui-1/web-src/src/components/ExtensionRegistration.js

@@ -17,12 +17,19 @@ function ExtensionRegistration() {
                     rightPanel: {
                         addRails() {
                             return [
+                                {
+                                    id: "forms.datatree.panel",
+                                    header: "Data Tree",
+                                    url: '/#/rail/1',
+                                    icon: 'FileData',
+                                },
                                 {
                                     id: "forms.personalization.panel",
                                     header: "Personalization",
-                                    url: '/#/rail/1',
+                                    url: '/#/rail/2',
                                     icon: 'Offer',
                                 }
+
                             ];
                         },
                     },

src/universal-editor-ui-1/web-src/src/components/RailContent.js

@@ -1,17 +1,31 @@
 import { attach } from "@adobe/uix-guest";
 import { extensionId } from "./Constants";
 import { Provider, ActionButton, TextField, View, ProgressCircle, Text, ComboBox, Item, RadioGroup, Radio, ListView} from "@adobe/react-spectrum";
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
 import  Add from '@spectrum-icons/workflow/Add';
 import  Remove from '@spectrum-icons/workflow/Remove';
 import  SaveFloppy from '@spectrum-icons/workflow/SaveFloppy';
 import  Refresh from '@spectrum-icons/workflow/Refresh';
 import { lightTheme } from "@adobe/react-spectrum";
 import {useState, useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import DataTree from "./DataTree";
+
 import allActions from '../config.json'
 import actionWebInvoke from '../utils'
 
 function RailContent () {
+    const { railId } = useParams();
+    if (!railId) {
+        console.error('Rail id parameter is missed');
+        return;
+    }
+    console.error(railId);
+    if(railId == 1) {
+        return (
+            <DataTree/>
+        );
+    } else {
+
     const [loading, setLoading] = useState(true);
     const [waiting, setWaiting] = useState(false);
     const [toConnect, setToConnect] = useState(false);
@@ -646,7 +660,7 @@ function RailContent () {
 
         </Provider>
     );
-
+        }
 };
 
 export default RailContent;