feat(designer): Custom Code (#4376)

* temp

* first look

* custom code bugfixes

* filtering out files to be deleted that have no data

* update to segment property

* feat(designer): Resizable side panel (#4134)

* Initial implementation

* Specify for resizable custom sidepanels

* Implement Math.max

* adding resize support

* reseting custom code state on save

* fix comment

* update based on comments

---------

Co-authored-by: Carlos Emiliano Castro Trejo <102700317+ccastrotrejo@users.noreply.github.com>
Co-authored-by: Travis Harris <travisharris@microsoft.com>

Author: 3 people

CHANGELOG.md

@@ -569,6 +569,7 @@
   "Mb+Eaq": "Bool",
   "Mb/Vp8": "Next failed",
   "Mc6ITJ": "Search",
+  "Mcvr0B": "To use modules or dependecies, please add at Custom Code Dependenncies in Portal TOC",
   "MfAdfx": "Edit in advanced mode",
   "MirIsS": "Show code",
   "MmBfD1": "Unexpected error",
@@ -731,6 +732,7 @@
   "TgcgXE": "Tags",
   "Tiqnir": "Custom",
   "TjMkDP": "(UTC-06:00) Easter Island",
+  "TjkOzp": "Close",
   "TlX98E": "(UTC+02:00) Kaliningrad",
   "Tla33B": "Required. The value for which to find the index.",
   "Tmr/9e": "Invalid parameters",
@@ -1474,6 +1476,7 @@
   "_Mb+Eaq.comment": "This is an option in a dropdown where users can select type Boolean for their parameter.",
   "_Mb/Vp8.comment": "Button indicating to go to the next page with failed options",
   "_Mc6ITJ.comment": "Placeholder text to search token picker",
+  "_Mcvr0B.comment": "This is a message to inform the user to add dependencies to use this action",
   "_MfAdfx.comment": "Button Label when clicked to swith to advanced editor",
   "_MirIsS.comment": "Button to display the code view",
   "_MmBfD1.comment": "This is the default message shown in case of an error. It can be shown in multiple contexts but generally would be a notification",
@@ -1636,6 +1639,7 @@
   "_TgcgXE.comment": "Label For Tags in About Panel",
   "_Tiqnir.comment": "Option text for table column type in table editor",
   "_TjMkDP.comment": "Time zone value ",
+  "_TjkOzp.comment": "This is the aria label for the close button in the message bar",
   "_TlX98E.comment": "Time zone value ",
   "_Tla33B.comment": "Required. The text parameter for which to find the index with the 'indexOf' function.",
   "_Tmr/9e.comment": "Text to explain that there are invalid parameters for this node",

Localize/lang/strings.json

@@ -13,8 +13,9 @@ import {
   tokens,
 } from '@fluentui/react-components';
 import type { MonacoProps } from '@microsoft/designer-ui';
-import { EditorLanguage, MonacoEditor } from '@microsoft/designer-ui';
+import { MonacoEditor } from '@microsoft/designer-ui';
 import { generateDataMapXslt, getFunctions, getSelectedSchema, testDataMap } from '@microsoft/logic-apps-data-mapper';
+import { EditorLanguage } from '@microsoft/logic-apps-shared';
 import { useState } from 'react';
 
 const RequestTab = {
@@ -138,7 +139,14 @@ export const DevApiTester = () => {
                         onChange={(_e, newValue) => setXsltFilename(newValue ?? '')}
                       />
 
-                      <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>
+                      <Text
+                        style={{
+                          fontWeight: 'bold',
+                          fontSize: '22px',
+                          display: 'block',
+                          marginBottom: '12px',
+                        }}
+                      >
                         Input schema value
                       </Text>
                       <MonacoEditor
@@ -156,7 +164,16 @@ export const DevApiTester = () => {
 
                   {selectedTab === RequestTab.GenerateXslt && (
                     <Stack tokens={{ childrenGap: '8px' }}>
-                      <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Map definition</Text>
+                      <Text
+                        style={{
+                          fontWeight: 'bold',
+                          fontSize: '22px',
+                          display: 'block',
+                          marginBottom: '12px',
+                        }}
+                      >
+                        Map definition
+                      </Text>
                       <MonacoEditor
                         {...commonCodeEditorProps}
                         language={EditorLanguage.yaml}
@@ -173,7 +190,16 @@ export const DevApiTester = () => {
               </StackItem>
 
               <StackItem>
-                <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Response</Text>
+                <Text
+                  style={{
+                    fontWeight: 'bold',
+                    fontSize: '22px',
+                    display: 'block',
+                    marginBottom: '12px',
+                  }}
+                >
+                  Response
+                </Text>
                 <MonacoEditor
                   {...commonCodeEditorProps}
                   language={EditorLanguage.json}

apps/data-mapper-standalone/src/components/DevApiTester.tsx

@@ -14,14 +14,15 @@ import {
   tokens,
 } from '@fluentui/react-components';
 import type { MonacoProps } from '@microsoft/designer-ui';
-import { EditorLanguage, MonacoEditor } from '@microsoft/designer-ui';
+import { MonacoEditor } from '@microsoft/designer-ui';
 import {
   convertSchemaToSchemaExtended,
   convertToMapDefinition,
   flattenSchemaIntoSortArray,
   loadMapDefinition,
   MapDefinitionDeserializer,
 } from '@microsoft/logic-apps-data-mapper';
+import { EditorLanguage } from '@microsoft/logic-apps-shared';
 import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
@@ -145,7 +146,16 @@ export const DevSerializationTester = () => {
               {selectedTab === SerializationTab.Deserialization && (
                 <>
                   <Stack tokens={{ childrenGap: '8px' }}>
-                    <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Map definition</Text>
+                    <Text
+                      style={{
+                        fontWeight: 'bold',
+                        fontSize: '22px',
+                        display: 'block',
+                        marginBottom: '12px',
+                      }}
+                    >
+                      Map definition
+                    </Text>
                     <MonacoEditor
                       {...commonCodeEditorProps}
                       language={EditorLanguage.yaml}
@@ -159,7 +169,16 @@ export const DevSerializationTester = () => {
                   </Stack>
 
                   <Stack tokens={{ childrenGap: '8px' }}>
-                    <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Connections</Text>
+                    <Text
+                      style={{
+                        fontWeight: 'bold',
+                        fontSize: '22px',
+                        display: 'block',
+                        marginBottom: '12px',
+                      }}
+                    >
+                      Connections
+                    </Text>
                     <MonacoEditor
                       {...commonCodeEditorProps}
                       language={EditorLanguage.json}
@@ -175,7 +194,16 @@ export const DevSerializationTester = () => {
               {selectedTab === SerializationTab.Serialization && (
                 <>
                   <Stack tokens={{ childrenGap: '8px' }}>
-                    <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Connections</Text>
+                    <Text
+                      style={{
+                        fontWeight: 'bold',
+                        fontSize: '22px',
+                        display: 'block',
+                        marginBottom: '12px',
+                      }}
+                    >
+                      Connections
+                    </Text>
                     <MonacoEditor
                       {...commonCodeEditorProps}
                       language={EditorLanguage.json}
@@ -189,7 +217,16 @@ export const DevSerializationTester = () => {
                   </Stack>
 
                   <Stack tokens={{ childrenGap: '8px' }}>
-                    <Text style={{ fontWeight: 'bold', fontSize: '22px', display: 'block', marginBottom: '12px' }}>Map definition</Text>
+                    <Text
+                      style={{
+                        fontWeight: 'bold',
+                        fontSize: '22px',
+                        display: 'block',
+                        marginBottom: '12px',
+                      }}
+                    >
+                      Map definition
+                    </Text>
                     <MonacoEditor
                       {...commonCodeEditorProps}
                       language={EditorLanguage.json}

apps/data-mapper-standalone/src/components/DevSerializationTester.tsx

@@ -5,7 +5,7 @@ import { CommandBar } from '@fluentui/react/lib/CommandBar';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import type { ILoggerService } from '@microsoft/logic-apps-shared';
 import { LogEntryLevel, LoggerService, isNullOrEmpty, RUN_AFTER_COLORS } from '@microsoft/logic-apps-shared';
-import type { RootState, Workflow } from '@microsoft/logic-apps-designer';
+import type { CustomCodeFileNameMapping, RootState, Workflow } from '@microsoft/logic-apps-designer';
 import {
   store as DesignerStore,
   serializeBJSWorkflow,
@@ -19,6 +19,8 @@ import {
   updateParameterValidation,
   openPanel,
   useNodesInitialized,
+  getCustomCodeFilesWithData,
+  resetCustomCode,
 } from '@microsoft/logic-apps-designer';
 import { useMemo } from 'react';
 import { useMutation } from 'react-query';
@@ -48,7 +50,7 @@ export const DesignerCommandBar = ({
   location: string;
   isReadOnly: boolean;
   discard: () => unknown;
-  saveWorkflow: (workflow: Workflow) => Promise<void>;
+  saveWorkflow: (workflow: Workflow, customCodeData: CustomCodeFileNameMapping | undefined) => Promise<void>;
   isDarkMode: boolean;
   isConsumption?: boolean;
   showConnectionsPanel?: boolean;
@@ -70,7 +72,14 @@ export const DesignerCommandBar = ({
         return parameterGroup.parameters.some((parameter) => {
           const validationErrors = validateParameter(parameter, parameter.value);
           if (validationErrors.length > 0) {
-            dispatch(updateParameterValidation({ nodeId: id, groupId: parameterGroup.id, parameterId: parameter.id, validationErrors }));
+            dispatch(
+              updateParameterValidation({
+                nodeId: id,
+                groupId: parameterGroup.id,
+                parameterId: parameter.id,
+                validationErrors,
+              })
+            );
           }
           return validationErrors.length;
         });
@@ -80,9 +89,12 @@ export const DesignerCommandBar = ({
 
     const hasParametersErrors = !isNullOrEmpty(validationErrorsList);
 
+    const customCodeFilesWithData = getCustomCodeFilesWithData(designerState.customCode);
+
     if (!hasParametersErrors) {
-      await saveWorkflow(serializedWorkflow);
+      await saveWorkflow(serializedWorkflow, customCodeFilesWithData);
       updateCallbackUrl(designerState, DesignerStore.dispatch);
+      DesignerStore.dispatch(resetCustomCode());
     }
   });
 
@@ -167,7 +179,11 @@ export const DesignerCommandBar = ({
         disabled: !haveErrors,
         iconProps: {
           iconName: haveErrors ? 'StatusErrorFull' : 'ErrorBadge',
-          style: haveErrors ? { color: RUN_AFTER_COLORS[isDarkMode ? 'dark' : 'light']['FAILED'] } : undefined,
+          style: haveErrors
+            ? {
+                color: RUN_AFTER_COLORS[isDarkMode ? 'dark' : 'light']['FAILED'],
+              }
+            : undefined,
         },
         onClick: () => !!dispatch(openPanel({ panelMode: 'Error' })),
       },
@@ -227,7 +243,13 @@ export const DesignerCommandBar = ({
   );
 };
 
-const CustomCommandBarButton = ({ text, showError }: { text: string; showError?: boolean }) => (
+const CustomCommandBarButton = ({
+  text,
+  showError,
+}: {
+  text: string;
+  showError?: boolean;
+}) => (
   <div style={{ margin: '2px', display: 'flex', gap: '8px', alignItems: 'center' }}>
     {text}
     {showError && <Badge size="extra-small" color="danger" />}