-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(Data Mapper): Able to save data map (#4950)
* save with new service works * cleanup * getting schema options for dropdown with new service * cleanump
- Loading branch information
1 parent
8d5133e
commit 9bfc3f0
Showing
22 changed files
with
1,009 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,207 @@ | ||
| import { changeFetchedFunctions, changeSourceSchema, changeTargetSchema } from '../../state/DataMapSlice'; | ||
| import type { AppDispatch, RootState } from '../../state/store'; | ||
| import { VSCodeContext } from '../../webviewCommunication'; | ||
| import { DataMapperFileService} from './services/dataMapperFileService'; | ||
| import { | ||
| getFileNameAndPath, | ||
| DataMapDataProvider, | ||
| DataMapperDesigner, | ||
| DataMapperDesignerProvider, | ||
| InitDataMapperApiService, | ||
| defaultDataMapperApiServiceOptions, | ||
| getFunctions, | ||
| getSelectedSchema, | ||
| } from '@microsoft/logic-apps-data-mapper-v2'; | ||
| import { getTheme, useThemeObserver } from '@microsoft/logic-apps-designer'; | ||
| import type { Theme } from '@microsoft/logic-apps-shared'; | ||
| import type { MessageToVsix } from '@microsoft/vscode-extension-logic-apps'; | ||
| import { ExtensionCommand } from '@microsoft/vscode-extension-logic-apps'; | ||
| import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
|
|
||
| // interface SchemaFile { | ||
| // path: string; | ||
| // type: SchemaType; | ||
| // } | ||
|
|
||
| export const DataMapperAppV2 = () => { | ||
| return <></>; | ||
| const dispatch = useDispatch<AppDispatch>(); | ||
| const vscode = useContext(VSCodeContext); | ||
| const [theme, setTheme] = useState<Theme>(getTheme(document.body)); | ||
| 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.dataMapMetadata); | ||
| const sourceSchemaFilename = useSelector((state: RootState) => state.dataMapDataLoader.sourceSchemaFilename); | ||
| const sourceSchema = useSelector((state: RootState) => state.dataMapDataLoader.sourceSchema); | ||
| const targetSchemaFilename = useSelector((state: RootState) => state.dataMapDataLoader.targetSchemaFilename); | ||
| const targetSchema = useSelector((state: RootState) => state.dataMapDataLoader.targetSchema); | ||
| // const schemaFileList = useSelector((state: RootState) => state.dataMapDataLoader.schemaFileList); | ||
| const customXsltPathsList = useSelector((state: RootState) => state.dataMapDataLoader.customXsltPathsList); | ||
| const fetchedFunctions = useSelector((state: RootState) => state.dataMapDataLoader.fetchedFunctions); | ||
|
|
||
| const runtimePort = useSelector((state: RootState) => state.dataMapDataLoader.runtimePort); | ||
|
|
||
| if (runtimePort) { | ||
| InitDataMapperApiService({ | ||
| ...defaultDataMapperApiServiceOptions, | ||
| port: runtimePort ?? defaultDataMapperApiServiceOptions.port, | ||
| }); | ||
| } | ||
|
|
||
| const sendMsgToVsix = useCallback( | ||
| (msg: MessageToVsix) => { | ||
| vscode.postMessage(msg); | ||
| }, | ||
| [vscode] | ||
| ); | ||
|
|
||
| const dataMapperFileService = useMemo(() => { | ||
| return new DataMapperFileService(sendMsgToVsix); | ||
| } , [sendMsgToVsix]); | ||
|
|
||
| // const addSchemaFromFile = (selectedSchemaFile: SchemaFile) => { | ||
| // sendMsgToVsix({ | ||
| // command: ExtensionCommand.addSchemaFromFile, | ||
| // data: { path: selectedSchemaFile.path, type: selectedSchemaFile.type as SchemaType }, | ||
| // }); | ||
| // }; | ||
|
|
||
| const readLocalxsltFileOptions = useCallback(() => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.readLocalCustomXsltFileOptions, | ||
| }); | ||
| }, [sendMsgToVsix]); | ||
|
|
||
| const saveXsltCall = (dataMapXslt: string) => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.saveDataMapXslt, | ||
| data: dataMapXslt, | ||
| }); | ||
| }; | ||
|
|
||
| const saveDraftDataMapDefinition = (dataMapDefinition: string) => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.saveDraftDataMapDefinition, | ||
| data: dataMapDefinition, | ||
| }); | ||
| }; | ||
|
|
||
| const setIsMapStateDirty = (isMapStateDirty: boolean) => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.setIsMapStateDirty, | ||
| data: isMapStateDirty, | ||
| }); | ||
| }; | ||
|
|
||
| const handleRscLoadError = useCallback( | ||
| (error: unknown) => { | ||
| let errorMsg: string; | ||
|
|
||
| if (error instanceof Error) { | ||
| errorMsg = error.message; | ||
| } else if (typeof error === 'string') { | ||
| errorMsg = error; | ||
| } else { | ||
| errorMsg = 'Unknown error'; | ||
| } | ||
|
|
||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.webviewRscLoadError, | ||
| data: errorMsg, | ||
| }); | ||
| }, | ||
| [sendMsgToVsix] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.getFunctionDisplayExpanded, | ||
| }); | ||
| }, [sendMsgToVsix]); | ||
|
|
||
| // Notify VS Code that webview is loaded | ||
| useEffect(() => { | ||
| sendMsgToVsix({ | ||
| command: ExtensionCommand.webviewLoaded, | ||
| }); | ||
| }, [sendMsgToVsix]); | ||
|
|
||
| // Monitor document.body for VS Code theme changes | ||
| useThemeObserver(document.body, theme, setTheme, { | ||
| attributes: true, | ||
| }); | ||
|
|
||
| // Init runtime API service and make calls | ||
| useEffect(() => { | ||
| const fetchFunctionList = async () => { | ||
| try { | ||
| const fnManifest = await getFunctions(); | ||
|
|
||
| if (typeof fnManifest !== 'string') { | ||
| dispatch(changeFetchedFunctions(fnManifest)); | ||
| } else { | ||
| const errorMessage = `Failed to fetch Function manifest: ${fnManifest}}`; | ||
|
|
||
| throw new Error(errorMessage); | ||
| } | ||
| } catch (error) { | ||
| handleRscLoadError(error); | ||
| } | ||
| }; | ||
|
|
||
| const getSelectedSchemaTrees = async () => { | ||
| try { | ||
| if (sourceSchemaFilename) { | ||
| const [fileName, filePath] = getFileNameAndPath(sourceSchemaFilename); | ||
| dispatch(changeSourceSchema(await getSelectedSchema(fileName, filePath))); | ||
| } | ||
|
|
||
| if (targetSchemaFilename) { | ||
| const [fileName, filePath] = getFileNameAndPath(targetSchemaFilename); | ||
| dispatch(changeTargetSchema(await getSelectedSchema(fileName, filePath))); | ||
| } | ||
| } catch (error) { | ||
| handleRscLoadError(error); | ||
| } | ||
| }; | ||
|
|
||
| if (runtimePort) { | ||
| InitDataMapperApiService({ | ||
| ...defaultDataMapperApiServiceOptions, | ||
| port: runtimePort ?? defaultDataMapperApiServiceOptions.port, | ||
| }); | ||
|
|
||
| fetchFunctionList(); | ||
| getSelectedSchemaTrees(); | ||
| } | ||
| }, [dispatch, runtimePort, sourceSchemaFilename, targetSchemaFilename, handleRscLoadError]); | ||
|
|
||
| return ( | ||
| <DataMapperDesignerProvider locale="en-US" theme={theme} options={{}}> | ||
| <DataMapDataProvider | ||
| dataMapMetadata={mapMetadata} | ||
| xsltFilename={xsltFilename} | ||
| xsltContent={xsltContent} | ||
| mapDefinition={mapDefinition} | ||
| sourceSchema={sourceSchema} | ||
| targetSchema={targetSchema} | ||
| availableSchemas={undefined} | ||
| customXsltPaths={customXsltPathsList} | ||
| fetchedFunctions={fetchedFunctions} | ||
| // Passed in here too so it can be managed in the Redux store so components can track the current theme | ||
| theme={theme} | ||
| > | ||
| <div style={{ height: '100vh', overflow: 'hidden' }}> | ||
| <DataMapperDesigner | ||
| fileService={dataMapperFileService} | ||
| saveXsltCall={saveXsltCall} | ||
| saveDraftStateCall={saveDraftDataMapDefinition} | ||
| readCurrentCustomXsltPathOptions={readLocalxsltFileOptions} | ||
| setIsMapStateDirty={setIsMapStateDirty} | ||
| /> | ||
| </div> | ||
| </DataMapDataProvider> | ||
| </DataMapperDesignerProvider> | ||
| ); | ||
| }; |
34 changes: 34 additions & 0 deletions
34
apps/vs-code-react/src/app/dataMapper/services/dataMapperFileService.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import type { IDataMapperFileService } from "@microsoft/logic-apps-data-mapper-v2"; | ||
| import type { | ||
| MessageToVsix} from "@microsoft/vscode-extension-logic-apps"; | ||
| import { | ||
| ExtensionCommand | ||
| } from "@microsoft/vscode-extension-logic-apps"; | ||
|
|
||
| export class DataMapperFileService implements IDataMapperFileService { | ||
| private sendMsgToVsix: (msg: MessageToVsix) => void; | ||
|
|
||
| constructor(sendMsgToVsix: (msg: MessageToVsix) => void) { | ||
| this.sendMsgToVsix = sendMsgToVsix; | ||
| } | ||
|
|
||
| public saveMapDefinitionCall = ( | ||
| dataMapDefinition: string, | ||
| mapMetadata: string | ||
| ) => { | ||
| this.sendMsgToVsix({ | ||
| command: ExtensionCommand.saveDataMapDefinition, | ||
| data: dataMapDefinition, | ||
| }); | ||
| this.sendMsgToVsix({ | ||
| command: ExtensionCommand.saveDataMapMetadata, | ||
| data: mapMetadata, | ||
| }); | ||
| }; | ||
|
|
||
| public readCurrentSchemaOptions = () => { | ||
| this.sendMsgToVsix({ | ||
| command: ExtensionCommand.readLocalSchemaFileOptions, | ||
| }); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.