feat(vscode): Add Integration account source and export custom API ac…

…tions to export advance options (#4097) * Add options to advace export options * Update styles and add logic for options isolation * Update query to avoid multiple api calls * Update styles for dropdown * Add function to array dependency * Update wording in options
Azure · Feb 5, 2024 · 6559428 · 6559428
1 parent c1cb6d3
commit 6559428
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 9 deletions.
diff --git a/apps/vs-code-react/src/app/export/export.less b/apps/vs-code-react/src/app/export/export.less
@@ -35,7 +35,6 @@
         margin-top: 15px;
 
         &-input {
-          width: 25%;
           margin-right: 10px;
 
           input::placeholder {
@@ -44,11 +43,14 @@
         }
 
         &-dropdown {
-          width: 350px;
-          max-width: 400px;
+          width: 100%;
         }
       }
 
+      &-filters > * {
+        width: 30%;
+      }
+
       &-limit-selection {
         margin-top: 10px;
 
@@ -134,6 +136,10 @@
       &-title {
         margin: 15px 0;
       }
+      &-dropdown {
+        width: 450px;
+        margin: 16px 0;
+      }
     }
   }
 

diff --git a/apps/vs-code-react/src/app/export/workflowsSelection/advancedOptions.tsx b/apps/vs-code-react/src/app/export/workflowsSelection/advancedOptions.tsx
@@ -42,6 +42,14 @@ export const AdvancedOptions: React.FC = () => {
       defaultMessage: 'Generate infrastructure templates',
       description: 'Generate infrastructure templates',
     }),
+    INTEGRATION_ACCOUNT_SOURCE: intl.formatMessage({
+      defaultMessage: 'Default to integration account as source for transformations and schema validation',
+      description: 'Default to integration account as source for transformations and schema validation',
+    }),
+    EXPORT_CUSTOM_API_ACTIONS_TO_API_MANAGEMENT_ACTIONS: intl.formatMessage({
+      defaultMessage: 'Export custom connector actions as API Management actions',
+      description: 'Export custom connector actions as API Management actions',
+    }),
   };
 
   const advancedOptions: IDropdownOption[] = [
@@ -52,6 +60,16 @@ export const AdvancedOptions: React.FC = () => {
       selected: false,
       disabled: isCloneConnectionsAvailable(selectedAdvanceOptions),
     },
+    {
+      key: AdvancedOptionsTypes.integrationAccountSource,
+      text: intlText.INTEGRATION_ACCOUNT_SOURCE,
+      selected: false,
+    },
+    {
+      key: AdvancedOptionsTypes.exportCustomApiActionsToAPIManagementActions,
+      text: intlText.EXPORT_CUSTOM_API_ACTIONS_TO_API_MANAGEMENT_ACTIONS,
+      selected: false,
+    },
   ];
 
   const onChangeOptions = useCallback(
@@ -83,6 +101,7 @@ export const AdvancedOptions: React.FC = () => {
         onChange={onChangeOptions}
         selectedKeys={selectedAdvanceOptions}
         multiSelect
+        className="msla-export-workflows-advanced-options-dropdown"
       />
     </div>
   );

diff --git a/apps/vs-code-react/src/app/export/workflowsSelection/helper.ts b/apps/vs-code-react/src/app/export/workflowsSelection/helper.ts
@@ -96,7 +96,9 @@ export const getAdvanceOptionsSelection = (
   const updatedOptions = [...selectedAdvanceOptions];
 
   if (!!hasInfrastructureTemplates(updatedOptions) && selectedOption.key === AdvancedOptionsTypes.generateInfrastructureTemplates) {
-    return [];
+    return updatedOptions.filter(
+      (option) => option !== AdvancedOptionsTypes.cloneConnections && option !== AdvancedOptionsTypes.generateInfrastructureTemplates
+    );
   }
 
   const index = updatedOptions.indexOf(selectedOption.key as AdvancedOptionsTypes);

diff --git a/apps/vs-code-react/src/app/export/workflowsSelection/workflowsSelection.tsx b/apps/vs-code-react/src/app/export/workflowsSelection/workflowsSelection.tsx
@@ -10,6 +10,7 @@ import { filterWorkflows, getListColumns, getSelectedItems, parseResourceGroups,
 import { SelectedList } from './selectedList';
 import { Separator, ShimmeredDetailsList, Text, SelectionMode, Selection, MessageBar, MessageBarType } from '@fluentui/react';
 import type { IDropdownOption } from '@fluentui/react';
+import { isNullOrUndefined } from '@microsoft/utils-logic-apps';
 import { useMemo, useRef, useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
@@ -82,7 +83,6 @@ export const WorkflowsSelection: React.FC = () => {
 
   const onWorkflowsSuccess = (workflows: WorkflowsList[]) => {
     const resourceGroups: IDropdownOption[] = !workflows ? [] : parseResourceGroups(workflows);
-
     setRenderWorkflows(workflows);
     setResourceGroups(resourceGroups);
     allWorkflows.current = workflows;
@@ -97,10 +97,19 @@ export const WorkflowsSelection: React.FC = () => {
     });
   };
 
-  const { isLoading: isWorkflowsLoading } = useQuery<any>([QueryKeys.workflowsData, { location, iseId: selectedIse }], loadWorkflows, {
-    refetchOnWindowFocus: false,
-    onSuccess: onWorkflowsSuccess,
-  });
+  const { isLoading: isWorkflowsLoading, data: workflowsData } = useQuery<WorkflowsList[]>(
+    [QueryKeys.workflowsData, selectedSubscription, selectedIse, location],
+    loadWorkflows,
+    {
+      refetchOnWindowFocus: false,
+    }
+  );
+
+  useEffect(() => {
+    if (!isNullOrUndefined(workflowsData)) {
+      onWorkflowsSuccess(workflowsData);
+    }
+  }, [workflowsData, onWorkflowsSuccess]);
 
   useEffect(() => {
     const updatedItems = updateSelectedItems(allItemsSelected.current, renderWorkflows, selectedWorkflows);

diff --git a/apps/vs-code-react/src/run-service/types.ts b/apps/vs-code-react/src/run-service/types.ts
@@ -346,5 +346,7 @@ export const AdvancedOptionsTypes = {
   off: 'Off',
   cloneConnections: 'cloneConnections',
   generateInfrastructureTemplates: 'generateInfrastructureTemplates',
+  integrationAccountSource: 'integrationAccountSource',
+  exportCustomApiActionsToAPIManagementActions: 'exportCustomApiActionsToAPIManagementActions',
 };
 export type AdvancedOptionsTypes = (typeof AdvancedOptionsTypes)[keyof typeof AdvancedOptionsTypes];