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,13 +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(100);
+      cy.wait(500);
     });
+
     cy.withinEditor('VisualEditor', () => {
       cy.getByText('Trigger').should('exist');
     });

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

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

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

@@ -39,12 +39,15 @@ export const ObiEditor: FC<ObiEditorProps> = ({
 }): JSX.Element | null => {
   let divRef;
 
-  const { focusedId, focusedEvent, removeLgTemplate } = useContext(NodeRendererContext);
+  const { focusedId, focusedEvent, updateLgTemplate, getLgTemplates, removeLgTemplate } = useContext(
+    NodeRendererContext
+  );
   const [clipboardContext, setClipboardContext] = useState({
     clipboardActions: [],
     setClipboardActions: actions => setClipboardContext({ ...clipboardContext, clipboardActions: actions }),
   });
 
+  const lgApi = { getLgTemplates, removeLgTemplate, updateLgTemplate };
   const dispatchEvent = (eventName: NodeEventTypes, eventData: any): any => {
     let handler;
     switch (eventName) {
@@ -80,8 +83,9 @@ export const ObiEditor: FC<ObiEditorProps> = ({
       case NodeEventTypes.Insert:
         if (eventData.$type === 'PASTE') {
           handler = e => {
-            const dialog = pasteNodes(data, e.id, e.position, clipboardContext.clipboardActions);
-            onChange(dialog);
+            pasteNodes(data, e.id, e.position, clipboardContext.clipboardActions, lgApi).then(dialog => {
+              onChange(dialog);
+            });
           };
         } else {
           handler = e => {

Composer/packages/extensions/visual-designer/src/index.tsx

@@ -43,6 +43,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
     onFocusSteps,
     onSelect,
     saveData,
+    updateLgTemplate,
     getLgTemplates,
     removeLgTemplate,
     undo,
@@ -56,6 +57,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
     focusedId,
     focusedEvent,
     focusedTab,
+    updateLgTemplate: updateLgTemplate,
     getLgTemplates: getLgTemplates,
     removeLgTemplate: removeLgTemplate,
   });

Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { string } from 'prop-types';
 
 interface LgTemplate {
   Name: string;
@@ -11,4 +12,5 @@ export const NodeRendererContext = React.createContext({
   focusedTab: '',
   getLgTemplates: (_id: string, _templateName: string) => Promise.resolve([] as LgTemplate[]),
   removeLgTemplate: (_id: string, _templateName: string) => Promise.resolve(),
+  updateLgTemplate: (_id: string, _templateName: string, _template: string) => Promise.resolve('' as string),
 });

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';
 
@@ -196,7 +196,7 @@ export function appendNodesAfter(inputDialog, targetId, newNodes) {
   return dialog;
 }
 
-export function pasteNodes(inputDialog, arrayPath, arrayIndex, newNodes) {
+export async function pasteNodes(inputDialog, arrayPath, arrayIndex, newNodes, lgApi) {
   if (!Array.isArray(newNodes) || newNodes.length === 0) {
     return inputDialog;
   }
@@ -208,6 +208,13 @@ export function pasteNodes(inputDialog, arrayPath, arrayIndex, newNodes) {
     return inputDialog;
   }
 
-  targetArray.currentData.splice(arrayIndex, 0, ...newNodes);
+  // Deep copy nodes with external resources
+  const copiedNodes = await Promise.all(
+    newNodes.map(async x => {
+      const node = await deepCopyAction(x, lgApi);
+      return node;
+    })
+  );
+  targetArray.currentData.splice(arrayIndex, 0, ...copiedNodes);
   return dialog;
 }

Composer/packages/lib/shared/__tests__/copyUtils.test.ts

@@ -0,0 +1,102 @@
+import { copyAdaptiveAction } from '../src/copyUtils';
+
+describe('copyAdaptiveAction', () => {
+  const lgTemplate = [{ Name: 'bfdactivity-1234', Body: '-hello' }];
+  const externalApi = {
+    updateDesigner: data => {
+      data.$designer = { id: '5678' };
+    },
+    lgApi: {
+      getLgTemplates: (fileId, activityId) => {
+        return Promise.resolve(lgTemplate);
+      },
+      updateLgTemplate: (filedId, activityId, activityBody) => {
+        return Promise.resolve(true);
+      },
+    },
+  };
+  const externalApiWithFailure = {
+    ...externalApi,
+    lgApi: {
+      ...externalApi.lgApi,
+      updateLgTemplate: () => Promise.reject(),
+    },
+  };
+
+  it('should return {} when input is invalid', async () => {
+    expect(await copyAdaptiveAction(null, externalApi)).toEqual({});
+    expect(await copyAdaptiveAction({}, externalApi)).toEqual({});
+    expect(await copyAdaptiveAction({ name: 'hi' }, externalApi)).toEqual({});
+  });
+
+  it('can copy BeginDialog', async () => {
+    const beginDialog = {
+      $type: 'Microsoft.BeginDialog',
+      dialog: 'AddToDo',
+    };
+
+    expect(await copyAdaptiveAction(beginDialog, externalApi)).toEqual({
+      $type: 'Microsoft.BeginDialog',
+      $designer: { id: '5678' },
+      dialog: 'AddToDo',
+    });
+  });
+
+  it('can copy SendActivity', async () => {
+    const sendActivity = {
+      $type: 'Microsoft.SendActivity',
+      activity: '[bfdactivity-1234]',
+    };
+
+    expect(await copyAdaptiveAction(sendActivity, externalApi)).toEqual({
+      $type: 'Microsoft.SendActivity',
+      $designer: { id: '5678' },
+      activity: '[bfdactivity-5678]',
+    });
+
+    expect(await copyAdaptiveAction(sendActivity, externalApiWithFailure)).toEqual({
+      $type: 'Microsoft.SendActivity',
+      $designer: { id: '5678' },
+      activity: '-hello',
+    });
+  });
+
+  it('can copy TextInput', async () => {
+    const promptText = {
+      $type: 'Microsoft.TextInput',
+      $designer: {
+        id: '844184',
+        name: 'Prompt for text',
+      },
+      maxTurnCount: 3,
+      alwaysPrompt: false,
+      allowInterruptions: 'true',
+      outputFormat: 'none',
+      prompt: '[bfdactivity-1234]',
+    };
+
+    expect(await copyAdaptiveAction(promptText, externalApi)).toEqual({
+      $type: 'Microsoft.TextInput',
+      $designer: {
+        id: '5678',
+      },
+      maxTurnCount: 3,
+      alwaysPrompt: false,
+      allowInterruptions: 'true',
+      outputFormat: 'none',
+      prompt: '[bfdactivity-5678]',
+    });
+
+    expect(await copyAdaptiveAction(promptText, externalApiWithFailure)).toEqual({
+      $type: 'Microsoft.TextInput',
+      $designer: {
+        id: '5678',
+      },
+      maxTurnCount: 3,
+      alwaysPrompt: false,
+      allowInterruptions: 'true',
+      outputFormat: 'none',
+      prompt: '-hello',
+    });
+  });
+});

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

@@ -0,0 +1,116 @@
+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.
+ */
+async function walkAdaptiveAction(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)) {
+      Promise.all(children.map(async x => await walkAdaptiveAction(x, visitor)));
+    }
+  }
+}
+
+function isLgActivity(activity: string) {
+  return activity && (activity.includes('bfdactivity-') || activity.includes('bfdprompt-'));
+}
+
+async function copyLgActivity(activity: string, designerId: string, lgApi: any): Promise<string> {
+  if (!activity) return '';
+  if (!isLgActivity(activity) || !lgApi) return activity;
+
+  const { getLgTemplates, updateLgTemplate } = 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) {
+    // Create new lg activity.
+    const newLgContent = currentLg.Body;
+    const newLgId = `bfdactivity-${designerId}`;
+    try {
+      await updateLgTemplate('common', newLgId, newLgContent);
+      return `[${newLgId}]`;
+    } catch (e) {
+      return newLgContent;
+    }
+  }
+  return activity;
+}
+
+const overrideLgActivity = async (data, { lgApi }) => {
+  data.activity = await copyLgActivity(data.activity, data.$designer.id, lgApi);
+};
+
+const overrideLgPrompt = async (data, { lgApi }) => {
+  data.prompt = await copyLgActivity(data.prompt, data.$designer.id, lgApi);
+};
+
+// TODO: use $type from SDKTypes (after solving circular import issue).
+const OverriderByType = {
+  'Microsoft.SendActivity': overrideLgActivity,
+  'Microsoft.AttachmentInput': overrideLgPrompt,
+  'Microsoft.ConfirmInput': overrideLgPrompt,
+  'Microsoft.DateTimeInput': overrideLgPrompt,
+  'Microsoft.NumberInput': overrideLgPrompt,
+  'Microsoft.OAuthInput': overrideLgPrompt,
+  'Microsoft.TextInput': overrideLgPrompt,
+  'Microsoft.ChoiceInput': overrideLgPrompt,
+};
+
+const needsOverride = data => !!(data && OverriderByType[data.$type]);
+
+export async function copyAdaptiveAction(data, externalApi) {
+  if (!data || !data.$type) return {};
+
+  // Deep copy the original data.
+  const copy = JSON.parse(JSON.stringify(data));
+
+  const { updateDesigner } = externalApi;
+  // Create copy handler for rewriting fields which need to be handled specially.
+  const copyHandler = async data => {
+    updateDesigner(data);
+    if (needsOverride(data)) {
+      const overrider = OverriderByType[data.$type];
+      await overrider(data, externalApi);
+    }
+  };
+
+  // Walk action and rewrite needs copy fields
+  await walkAdaptiveAction(copy, copyHandler);
+
+  return copy;
+}