Handle copy LG activity in visual editor

Composer/cypress/integration/Breadcrumb.spec.js

@@ -4,12 +4,15 @@ context('breadcrumb', () => {
   before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.openBot('ToDoBot');
+    cy.wait(100);
   });
 
   beforeEach(() => {
     // Return to Main.dialog
     cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.wait(1000);
       cy.getByText('ToDoBot.Main').click();
+      cy.wait(1000);
     });
   });
 
@@ -30,6 +33,7 @@ context('breadcrumb', () => {
     // Return to Main.dialog
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('ToDoBot.Main').click();
+      cy.wait(100);
     });
 
     cy.getByTestId('Breadcrumb')

Composer/cypress/integration/VisualDesigner.spec.js

@@ -4,9 +4,23 @@ context('Visual Designer', () => {
   before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.openBot('ToDoBot');
+    cy.wait(100);
+  });
+
+  beforeEach(() => {
+    // Return to Main.dialog
+    cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.getByText('ToDoBot.Main').click();
+      cy.wait(100);
+    });
   });
 
   it('can find Visual Designer default trigger in container', () => {
+    cy.get('[data-testid="ProjectTree"]').within(() => {
+      cy.getByText('Handle ConversationUpdate').click();
+      cy.wait(500);
+    });
+
     cy.withinEditor('VisualEditor', () => {
       cy.getByText('Trigger').should('exist');
     });

Composer/packages/extensions/visual-designer/demo/src/stories/VisualEditorDemo.js

@@ -103,6 +103,12 @@ export class VisualEditorDemo extends Component {
                     obiJson: json,
                   });
                 },
+                getLgTemplates: () => {
+                  return Promise.resolve([{ Name: 'lg', Body: 'LgTemplate Placeholder.' }]);
+                },
+                removeLgTemplate: () => {
+                  return Promise.resolve(true);
+                },
               }}
             />
           </div>

Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx

@@ -37,12 +37,13 @@ export const ObiEditor: FC<ObiEditorProps> = ({
 }): JSX.Element | null => {
   let divRef;
 
-  const { focusedId, focusedEvent, removeLgTemplate } = useContext(NodeRendererContext);
+  const { focusedId, focusedEvent, getLgTemplates, removeLgTemplate } = useContext(NodeRendererContext);
   const [clipboardContext, setClipboardContext] = useState({
     clipboardActions: [],
     setClipboardActions: actions => setClipboardContext({ ...clipboardContext, clipboardActions: actions }),
   });
 
+  const lgApi = { getLgTemplates, removeLgTemplate };
   const dispatchEvent = (eventName: NodeEventTypes, eventData: any): any => {
     let handler;
     switch (eventName) {
@@ -98,16 +99,18 @@ export const ObiEditor: FC<ObiEditorProps> = ({
         break;
       case NodeEventTypes.CopySelection:
         handler = e => {
-          const copiedActions = copyNodes(data, e.actionIds);
-          clipboardContext.setClipboardActions(copiedActions);
+          copyNodes(data, e.actionIds, lgApi).then(copiedActions => {
+            clipboardContext.setClipboardActions(copiedActions);
+          });
         };
         break;
       case NodeEventTypes.CutSelection:
         handler = e => {
-          const { dialog, cutData } = cutNodes(data, e.actionIds);
-          clipboardContext.setClipboardActions(cutData);
-          onChange(dialog);
-          onFocusSteps([]);
+          cutNodes(data, e.actionIds, lgApi).then(({ dialog, cutData }) => {
+            clipboardContext.setClipboardActions(cutData);
+            onChange(dialog);
+            onFocusSteps([]);
+          });
         };
         break;
       case NodeEventTypes.DeleteSelection:

Composer/packages/extensions/visual-designer/src/utils/jsonTracker.ts

@@ -1,5 +1,5 @@
 import { cloneDeep, get, set } from 'lodash';
-import { seedNewDialog } from 'shared';
+import { seedNewDialog, deepCopyAction } from 'shared';
 
 import { getFriendlyName } from '../components/nodes/utils';
 
@@ -168,13 +168,19 @@ export function insert(inputDialog, path, position, $type) {
   return dialog;
 }
 
-export function copyNodes(inputDialog, nodeIds: string[]): any[] {
+export async function copyNodes(inputDialog, nodeIds: string[], lgApi): Promise<any[]> {
   const nodes = nodeIds.map(id => queryNode(inputDialog, id)).filter(x => x !== null);
-  return JSON.parse(JSON.stringify(nodes));
+  const copiedNodes = await Promise.all(
+    nodes.map(async x => {
+      const node = await deepCopyAction(x, lgApi);
+      return node;
+    })
+  );
+  return copiedNodes;
 }
 
-export function cutNodes(inputDialog, nodeIds: string[]) {
-  const nodesData = copyNodes(inputDialog, nodeIds);
+export async function cutNodes(inputDialog, nodeIds: string[], lgApi) {
+  const nodesData = await copyNodes(inputDialog, nodeIds, lgApi);
   const newDialog = deleteNodes(inputDialog, nodeIds);
 
   return { dialog: newDialog, cutData: nodesData };

Composer/packages/lib/shared/src/copyUtils.ts

@@ -0,0 +1,62 @@
+export const NestedFieldNames = {
+  Actions: 'actions',
+  ElseActions: 'elseActions',
+  DefaultCase: 'default',
+  Cases: 'cases',
+};
+
+const DEFAULT_CHILDREN_KEYS = [NestedFieldNames.Actions];
+const childrenMap = {
+  ['Microsoft.IfCondition']: [NestedFieldNames.Actions, NestedFieldNames.ElseActions],
+  ['Microsoft.SwitchCondition']: [NestedFieldNames.Cases, NestedFieldNames.DefaultCase],
+};
+
+/**
+ * Considering that an Adaptive Action could be nested with other actions,
+ * for example, the IfCondition and SwitchCondition and Foreach, we need
+ * this helper to visit all possible action nodes recursively.
+ *
+ * @param {any} input The input Adaptive Action which has $type field.
+ * @param {function} visitor The callback function called on each action node.
+ */
+export async function visitAdaptiveAction(input: any, visitor: (data: any) => Promise<any>) {
+  if (!input || !input.$type) return;
+
+  await visitor(input);
+
+  let childrenKeys = DEFAULT_CHILDREN_KEYS;
+  if (input.$type && childrenMap[input.$type]) {
+    childrenKeys = childrenMap[input.$type];
+  }
+
+  for (const childrenKey of childrenKeys) {
+    const children = input[childrenKey];
+    if (Array.isArray(children)) {
+      children.forEach(x => visitAdaptiveAction(x, visitor));
+    }
+  }
+}
+
+function isLgActivity(activity: string) {
+  return activity && activity.indexOf('bfdactivity-') !== -1;
+}
+
+export async function copyLgActivity(activity: string, lgApi: any): Promise<string> {
+  if (!activity) return '';
+  if (!isLgActivity(activity) || !lgApi) return activity;
+
+  const { getLgTemplates } = lgApi;
+  if (!getLgTemplates) return activity;
+
+  let rawLg: any[] = [];
+  try {
+    rawLg = await getLgTemplates('common', activity);
+  } catch (error) {
+    return activity;
+  }
+
+  const currentLg = rawLg.find(lg => `[${lg.Name}]` === activity);
+
+  if (currentLg) return currentLg.Body;
+  return activity;
+}

Composer/packages/lib/shared/src/dialogFactory.ts

@@ -1,6 +1,7 @@
 import nanoid from 'nanoid/generate';
 
 import { appschema } from './appschema';
+import { visitAdaptiveAction, copyLgActivity } from './copyUtils';
 
 interface DesignerAttributes {
   name: string;
@@ -43,8 +44,8 @@ export function getNewDesigner(name: string, description: string) {
 
 export const getDesignerId = (data?: DesignerData) => {
   const newDesigner: DesignerData = {
-    id: nanoid('1234567890', 6),
     ...data,
+    id: nanoid('1234567890', 6),
   };
 
   return newDesigner;
@@ -77,14 +78,37 @@ export const needsDeepCopy = $type => {
   return DEEP_COPY_TYPES.includes($type);
 };
 
-export const deepCopy: any = (_data, _lgApi) => {
+export const deepCopyAction = async (data, lgApi) => {
   // data.type is a SendActivity
   // data.id is bound to copied SendActivity
   // new id getDesignerId()
   // data.activity references an LG template
   // make new LG template based off of naming schema
   // assign to data.activity
-  return undefined;
+  if (!data || !data.$type) return {};
+
+  // Deep copy the original data.
+  const copy = JSON.parse(JSON.stringify(data));
+
+  // Copy the $designer part (if exists) or create new $designer part.
+  const overrideDesigner = data => {
+    const $designer = data.$designer ? getDesignerId(data.$designer) : getNewDesigner('', '');
+    data.$designer = $designer;
+  };
+
+  // Copy specific parts an Adaptive action cares.
+  const overrideContent = async data => {
+    if (data.$type === 'Microsoft.SendActivity') {
+      data.activity = await copyLgActivity(data.activity, lgApi);
+    }
+  };
+
+  await visitAdaptiveAction(copy, async data => {
+    overrideDesigner(data);
+    await overrideContent(data);
+  });
+
+  return copy;
 };
 
 export const seedNewDialog = (