Feat(Data Mapper): creating new data mapper library (#4575)

* initial move over * standalone runs * v2 store works * starting on changing v8 panel to fluent v9 drawer * new dm2 standalone works with vite * build passes * build fix and separated standalones * fixed tests * build passes --------- Co-authored-by: Danielle Cogburn <dacogburn@microsoft.com>
Azure · Apr 10, 2024 · 1bec11b · 1bec11b
1 parent 4296a2a
commit 1bec11b
Show file tree

Hide file tree

Showing 99 changed files with 24,446 additions and 2,183 deletions.
diff --git a/apps/Standalone/index.html b/apps/Standalone/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Logic Apps Standalone</title>
   </head>
   <body style="margin: 0px">
     <div id="root"></div>

diff --git a/apps/Standalone/package.json b/apps/Standalone/package.json
@@ -26,6 +26,7 @@
     "@microsoft/designer-ui": "workspace:*",
     "@microsoft/logic-apps-chatbot": "workspace:*",
     "@microsoft/logic-apps-data-mapper": "workspace:*",
+    "@microsoft/logic-apps-data-mapper-v2": "workspace:*",
     "@microsoft/logic-apps-designer": "workspace:*",
     "@microsoft/logic-apps-shared": "workspace:*",
     "@monaco-editor/react": "4.6.0",

diff --git a/apps/Standalone/src/App.tsx b/apps/Standalone/src/App.tsx
@@ -3,13 +3,16 @@ import { Provider } from 'react-redux';
 import { DesignerWrapper } from './desginer/app/DesignerShell/designer';
 import { store as designerStore } from './desginer/state/store';
 import { store as dataMapperStore } from './dataMapperV1/state/Store';
-import { DataMapperStandaloneDesigner } from './dataMapperV1/app/DataMapperStandaloneDesigner';
+import { DataMapperStandaloneDesignerV1 } from './dataMapperV1/app/DataMapperStandaloneDesignerV1';
+import { DataMapperStandaloneDesignerV2 } from './dataMapperV1/app/DataMapperStandaloneDesignerV2';
+
 export const App = () => {
   return (
     <Routes>
       <Route index element={<DesignerStandalone />} />
       <Route path="/" element={<DesignerStandalone />} />
-      <Route path="datamapper" element={<DataMapper />} />
+      <Route path="datamapperv1" element={<DataMapperV1 />} />
+      <Route path="datamapperv2" element={<DataMapperV2 />} />
       {/* Using path="*"" means "match anything", so this route
                 acts like a catch-all for URLs that we don't have explicit
                 routes for. */}
@@ -26,10 +29,18 @@ const DesignerStandalone = () => {
   );
 };
 
-const DataMapper = () => {
+const DataMapperV1 = () => {
+  return (
+    <Provider store={dataMapperStore}>
+      <DataMapperStandaloneDesignerV1 />
+    </Provider>
+  );
+};
+
+const DataMapperV2 = () => {
   return (
     <Provider store={dataMapperStore}>
-      <DataMapperStandaloneDesigner />
+      <DataMapperStandaloneDesignerV2 />
     </Provider>
   );
 };
diff --git a/...erV1/app/DataMapperStandaloneDesigner.tsx → ...V1/app/DataMapperStandaloneDesignerV1.tsx b/...erV1/app/DataMapperStandaloneDesigner.tsx → ...V1/app/DataMapperStandaloneDesignerV1.tsx
@@ -31,7 +31,7 @@ const workflowSchemaFilenames = [
 
 const customXsltPath = ['folder/file.xslt', 'file2.xslt'];
 
-export const DataMapperStandaloneDesigner = () => {
+export const DataMapperStandaloneDesignerV1 = () => {
   const dispatch = useDispatch<AppDispatch>();
   const theme = useSelector((state: RootState) => state.dataMapDataLoader.theme);
   const armToken = useSelector((state: RootState) => state.dataMapDataLoader.armToken);

diff --git a/apps/Standalone/src/dataMapperV1/app/DataMapperStandaloneDesignerV2.tsx b/apps/Standalone/src/dataMapperV1/app/DataMapperStandaloneDesignerV2.tsx
@@ -0,0 +1,112 @@
+import { DevToolbox } from '../components/DevToolbox';
+import { dataMapDataLoaderSlice } from '../state/DataMapDataLoader';
+import {
+  DataMapperDesigner as DataMapperDesignerV2,
+  DataMapDataProvider as DataMapDataProviderV2,
+  DataMapperDesignerProvider as DataMapperDesignerProviderV2,
+} from '@microsoft/logic-apps-data-mapper-v2';
+import type { AppDispatch, RootState } from '../state/Store';
+import { AzureThemeDark } from '@fluentui/azure-themes/lib/azure/AzureThemeDark';
+import { AzureThemeLight } from '@fluentui/azure-themes/lib/azure/AzureThemeLight';
+import { ThemeProvider } from '@fluentui/react';
+import { FluentProvider, webDarkTheme, webLightTheme } from '@fluentui/react-components';
+import { PortalCompatProvider } from '@fluentui/react-portal-compat';
+import { InitDataMapperApiService, defaultDataMapperApiServiceOptions, getFunctions } from '@microsoft/logic-apps-data-mapper';
+import { Theme as ThemeType } from '@microsoft/logic-apps-shared';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+const workflowSchemaFilenames = [
+  'Source.xsd',
+  'Target.xsd',
+  'SourceJson.json',
+  'folder/TargetJson.json',
+  'folder 2/file.json',
+  'a/a.json',
+  'a/b.json',
+  'a/b/c.json',
+];
+
+const customXsltPath = ['folder/file.xslt', 'file2.xslt'];
+
+export const DataMapperStandaloneDesignerV2 = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const theme = useSelector((state: RootState) => state.dataMapDataLoader.theme);
+  const armToken = useSelector((state: RootState) => state.dataMapDataLoader.armToken);
+
+  const xsltFilename = useSelector((state: RootState) => state.dataMapDataLoader.xsltFilename);
+  const xsltContent = useSelector((state: RootState) => state.dataMapDataLoader.xsltContent);
+  const mapDefinition = useSelector((state: RootState) => state.dataMapDataLoader.mapDefinition);
+  const mapMetadata = useSelector((state: RootState) => state.dataMapDataLoader.mapMetadata);
+  const fetchedFunctions = useSelector((state: RootState) => state.dataMapDataLoader.fetchedFunctions);
+  const sourceSchema = useSelector((state: RootState) => state.schemaDataLoader.sourceSchema);
+  const targetSchema = useSelector((state: RootState) => state.schemaDataLoader.targetSchema);
+
+  // Standalone uses default/dev runtime settings - can just run 'func host start' in the workflow root
+  InitDataMapperApiService({
+    ...defaultDataMapperApiServiceOptions,
+    accessToken: armToken,
+  });
+
+  const saveMapDefinitionCall = (dataMapDefinition: string, mapMetadata: string) => {
+    console.log('Map Definition\n===============');
+    console.log(dataMapDefinition);
+
+    console.log('Map Metadata\n===============');
+    console.log(mapMetadata);
+  };
+
+  const saveXsltCall = (dataMapXslt: string) => {
+    console.log('\nXSLT\n===============');
+    console.log(dataMapXslt);
+  };
+
+  useEffect(() => {
+    const fetchFunctionList = async () => {
+      const fnManifest = await getFunctions();
+
+      if (typeof fnManifest !== 'string') {
+        dispatch(dataMapDataLoaderSlice.actions.changeFetchedFunctions(fnManifest));
+      }
+    };
+
+    fetchFunctionList();
+  }, [dispatch, armToken]);
+
+  const isLightMode = theme === ThemeType.Light;
+
+  return (
+    <div style={{ flex: '1 1 1px', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: '0 1 1px' }}>
+        <ThemeProvider theme={isLightMode ? AzureThemeLight : AzureThemeDark}>
+          <FluentProvider theme={isLightMode ? webLightTheme : webDarkTheme}>
+            {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+            {/* @ts-ignore */}
+            <PortalCompatProvider>
+              <DevToolbox />
+            </PortalCompatProvider>
+          </FluentProvider>
+        </ThemeProvider>
+      </div>
+
+      <div style={{ flex: '1 1 1px', display: 'flex', flexDirection: 'column' }}>
+        <DataMapperDesignerProviderV2 locale="en-US" theme={theme} options={{}}>
+          <DataMapDataProviderV2
+            xsltFilename={xsltFilename}
+            xsltContent={xsltContent}
+            mapDefinition={mapDefinition}
+            dataMapMetadata={mapMetadata}
+            sourceSchema={sourceSchema}
+            targetSchema={targetSchema}
+            availableSchemas={workflowSchemaFilenames}
+            customXsltPaths={customXsltPath}
+            fetchedFunctions={fetchedFunctions}
+            theme={theme}
+          >
+            <DataMapperDesignerV2 saveMapDefinitionCall={saveMapDefinitionCall} saveXsltCall={saveXsltCall} />
+          </DataMapDataProviderV2>
+        </DataMapperDesignerProviderV2>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/Standalone/src/dataMapperV1/components/DevToolbox.tsx b/apps/Standalone/src/dataMapperV1/components/DevToolbox.tsx
@@ -1,8 +1,4 @@
-import {
-  comprehensiveMapDefinition,
-  fullTranscriptMapDefinitionString,
-  transcriptJsonMapDefinitionString,
-} from '../mapDefinitions';
+import { comprehensiveMapDefinition, fullTranscriptMapDefinitionString, transcriptJsonMapDefinitionString } from '../mapDefinitions';
 import { testMetadata } from '../mapMetadata';
 import { LoadingMethod, dataMapDataLoaderSlice, loadDataMap } from '../state/DataMapDataLoader';
 import { loadSourceSchema, loadTargetSchema, schemaDataLoaderSlice } from '../state/SchemaDataLoader';
@@ -90,13 +86,10 @@ export const DevToolbox = () => {
     [dispatch]
   );
 
-  const resetToUseARM = useCallback(
-    () => {
-      dispatch(dataMapDataLoaderSlice.actions.changeRawDefinition({} as MapDefDropdownOption));
-      dispatch(loadDataMap());
-    },
-    [dispatch]
-  );
+  const resetToUseARM = useCallback(() => {
+    dispatch(dataMapDataLoaderSlice.actions.changeRawDefinition({} as MapDefDropdownOption));
+    dispatch(loadDataMap());
+  }, [dispatch]);
 
   const changeMapXsltFilenameCB = useCallback(
     (newFilename?: string) => {

diff --git a/apps/Standalone/src/dataMapperV1/state/DataMapDataLoader.ts b/apps/Standalone/src/dataMapperV1/state/DataMapDataLoader.ts
@@ -13,6 +13,8 @@ export const LoadingMethod = {
 } as const;
 export type LoadingMethod = (typeof LoadingMethod)[keyof typeof LoadingMethod];
 
+export type DmVersions = 'v1' | 'v2';
+
 export interface DataMapLoadingState {
   theme: ThemeType;
   armToken?: string;

diff --git a/apps/Standalone/src/desginer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx b/apps/Standalone/src/desginer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx
@@ -449,7 +449,7 @@ const getDesignerServices = (
     workflowName,
     httpClient,
   });
-	
+
   const hostService = {};
 
   return {

diff --git a/apps/vs-code-designer/src/app/commands/dataMapper/DataMapperExt.ts b/apps/vs-code-designer/src/app/commands/dataMapper/DataMapperExt.ts
@@ -30,7 +30,7 @@ export default class DataMapperExt {
       return;
     }
 
-    const panel = window.createWebviewPanel(
+    const panel =                                                                                                                              window.createWebviewPanel(
       webviewType, // Key used to reference the panel
       dataMapName, // Title displayed in the tab
       ViewColumn.Active, // Editor column to show the new webview panel in

diff --git a/libs/data-mapper-v2/package.json b/libs/data-mapper-v2/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "@microsoft/logic-apps-data-mapper-v2",
+  "version": "4.1.1",
+  "license": "MIT",
+  "type": "module",
+  "module": "src/index.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "build/lib/**/*",
+    "src"
+  ],
+  "publishConfig": {
+    "main": "build/lib/index.cjs",
+    "module": "build/lib/index.js",
+    "types": "build/lib/index.d.ts",
+    "exports": {
+      ".": {
+        "types:": "./build/lib/index.d.ts",
+        "import": "./build/lib/index.js",
+        "default": "./build/lib/index.cjs"
+      },
+      "./package.json": "./package.json",
+      "./build/lib/index.css": "./build/lib/index.css"
+    }
+  },
+  "scripts": {
+    "build:lib": "tsup && tsc --emitDeclarationOnly",
+    "test:lib": "vitest --retry=3",
+    "unpublish:local": "pnpm unpublish --force",
+    "publish:local": "pnpm unpublish --force && pnpm publish --no-git-checks --registry http://localhost:4873"
+  },
+  "dependencies": {
+    "@fluentui/azure-themes": "8.5.70",
+    "@fluentui/react": "8.110.2",
+    "@fluentui/react-components": "9.42.0",
+    "@fluentui/react-hooks": "8.6.20",
+    "@fluentui/react-icons": "2.0.224",
+    "@fluentui/react-migration-v8-v9": "9.2.16",
+    "@fluentui/react-portal-compat": "9.0.60",
+    "@microsoft/applicationinsights-react-js": "3.4.0",
+    "@microsoft/applicationinsights-web": "2.8.9",
+    "@microsoft/designer-ui": "workspace:*",
+    "@microsoft/logic-apps-designer": "workspace:*",
+    "@microsoft/logic-apps-shared": "workspace:*",
+    "@react-hookz/web": "22.0.0",
+    "@reduxjs/toolkit": "1.8.5",
+    "fuse.js": "6.6.2",
+    "immer": "9.0.15",
+    "js-yaml": "4.1.0",
+    "pathfinding": "0.4.18",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-icons": "4.8.0",
+    "react-intl": "6.3.0",
+    "react-query": "3.39.3",
+    "react-redux": "8.0.2",
+    "reactflow": "11.8.2",
+    "redux-thunk": "2.4.2",
+    "redux-undo": "1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.4.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.4.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/pathfinding": "^0.0.9"
+  }
+}