refactor: centralize lg parsing logic to 'shared' lib

Composer/packages/client/src/utils/lgUtil.ts

@@ -129,25 +129,6 @@ export function getTemplate(content: string, templateName: string): LGTemplate |
   return resource.Templates.find(t => t.Name === templateName);
 }
 
-/**
- *
- * @param text string
- * -[Greeting], I'm a fancy bot, [Bye] ---> ['Greeting', 'Bye']
- *
- */
-export function extractTemplateNames(text: string): string[] {
-  const templateNames: string[] = [];
-  // match a template name match a temlate func  e.g. `showDate()`
-  // eslint-disable-next-line security/detect-unsafe-regex
-  const reg = /\[([A-Za-z_][-\w]+)(\(.*\))?\]/g;
-  let matchResult;
-  while ((matchResult = reg.exec(text)) !== null) {
-    const templateName = matchResult[1];
-    templateNames.push(templateName);
-  }
-  return templateNames;
-}
-
 export function removeTemplate(content: string, templateName: string): string {
   const resource = LGParser.parse(content);
   return resource.deleteTemplate(templateName).toString();

Composer/packages/extensions/obiformeditor/src/Form/fields/TableField.tsx

@@ -96,6 +96,7 @@ function ItemActions<T extends MicrosoftIDialog>(props: ItemActionsProps<T>) {
         const item = formData[index];
         // @ts-ignore
         if (item.$type === 'Microsoft.SendActivity' && item.activity && item.activity.indexOf('bfdactivity-') !== -1) {
+          // TODO: (ze) 'removeLgTemplate' -> 'removeLgTemplateRef', it should accept inputs like '[bfdactivity-1234]'
           // @ts-ignore
           formContext.shellApi.removeLgTemplate('common', item.activity.slice(1, item.activity.length - 1));
         }

Composer/packages/extensions/obiformeditor/src/Form/widgets/LgEditorWidget.tsx

@@ -3,6 +3,7 @@
 
 import React, { useState, useMemo, useLayoutEffect } from 'react';
 import { LgEditor } from '@bfc/code-editor';
+import { LgMetaData } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 import * as monacoEditor from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
 
@@ -35,7 +36,7 @@ export const LgEditorWidget: React.FC<LgEditorWidgetProps> = props => {
   const { formContext, name, value, height = 250 } = props;
   const [errorMsg, setErrorMsg] = useState('');
   const [editor, setEditor] = useState<monacoEditor.editor.IStandaloneCodeEditor>();
-  const lgId = `bfd${name}-${formContext.dialogId}`;
+  const lgId = new LgMetaData(name, formContext.dialogId || '').toLgTemplateName();
   const lgFileId = formContext.currentDialog.lgFile || 'common';
   const lgFile = formContext.lgFiles.find(file => file.id === lgFileId);
 

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

@@ -5,7 +5,7 @@
 import { jsx } from '@emotion/core';
 import { useContext, FC, useEffect, useState, useRef } from 'react';
 import { MarqueeSelection, Selection } from 'office-ui-fabric-react/lib/MarqueeSelection';
-import { deleteAction, deleteActions } from '@bfc/shared';
+import { deleteAction, deleteActions, LgTemplateRef, LgMetaData } from '@bfc/shared';
 
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { KeyboardCommandTypes, KeyboardPrimaryTypes } from '../constants/KeyboardCommandTypes';
@@ -49,12 +49,10 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   );
 
   const deleteLgTemplates = (lgTemplates: string[]) => {
-    const lgPattern = /\[(bfd\w+-\d+)\]/;
     const normalizedLgTemplates = lgTemplates
       .map(x => {
-        const matches = lgPattern.exec(x);
-        if (matches && matches.length === 2) return matches[1];
-        return '';
+        const lgTemplateRef = LgTemplateRef.parse(x);
+        return lgTemplateRef ? lgTemplateRef.name : '';
       })
       .filter(x => !!x);
     return removeLgTemplates('common', normalizedLgTemplates);
@@ -89,16 +87,19 @@ export const ObiEditor: FC<ObiEditorProps> = ({
         if (eventData.$type === 'PASTE') {
           handler = e => {
             // TODO: clean this along with node deletion.
-            const copyLgTemplateToNewNode = async (lgTemplateName: string, newNodeId: string) => {
-              const matches = /\[(bfd\w+-(\d+))\]/.exec(lgTemplateName);
-              if (Array.isArray(matches) && matches.length === 3) {
-                const originLgId = matches[1];
-                const originNodeId = matches[2];
-                const newLgId = originLgId.replace(originNodeId, newNodeId);
-                await copyLgTemplate('common', originLgId, newLgId);
-                return `[${newLgId}]`;
-              }
-              return lgTemplateName;
+            const copyLgTemplateToNewNode = async (input: string, newNodeId: string) => {
+              const lgTemplateRef = LgTemplateRef.parse(input);
+              if (!lgTemplateRef) return input;
+
+              const lgMetadata = LgMetaData.parse(lgTemplateRef.name);
+              if (!lgMetadata) return input;
+
+              lgMetadata.designerId = newNodeId;
+              const newLgName = lgMetadata.toLgTemplateName();
+              const newLgTemplateRefString = lgMetadata.toLgTemplateRefString();
+
+              await copyLgTemplate('common', lgTemplateRef.name, newLgName);
+              return newLgTemplateRefString;
             };
             pasteNodes(data, e.id, e.position, clipboardActions, copyLgTemplateToNewNode).then(dialog => {
               onChange(dialog);

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

@@ -3,33 +3,18 @@
 
 import { useContext, useState, useEffect, useRef } from 'react';
 import debounce from 'lodash/debounce';
+import { LgTemplateRef } from '@bfc/shared';
 
 import { NodeRendererContext } from '../store/NodeRendererContext';
 
-// matches [bfd<someName>-123456]
-const TEMPLATE_PATTERN = /^\[(bfd.+-\d{6})\]$/;
-
-const getTemplateId = (str?: string): string | null => {
-  if (!str) {
-    return null;
-  }
-
-  const match = TEMPLATE_PATTERN.exec(str);
-
-  if (!match || !match[1]) {
-    return null;
-  }
-
-  return match[1];
-};
-
 export const useLgTemplate = (str?: string, dialogId?: string) => {
   const { getLgTemplates } = useContext(NodeRendererContext);
   const [templateText, setTemplateText] = useState('');
   let cancelled = false;
 
   const updateTemplateText = async () => {
-    const templateId = getTemplateId(str);
+    const lgTemplateRef = LgTemplateRef.parse(str || '');
+    const templateId = lgTemplateRef ? lgTemplateRef.name : '';
 
     if (templateId && dialogId) {
       // this is an LG template, go get it's content

Composer/packages/lib/indexers/package.json

@@ -28,6 +28,7 @@
     "ts-jest": "^24.1.0"
   },
   "dependencies": {
+    "@bfc/shared": "*",
     "botbuilder-expression-parser": "^4.5.11",
     "botbuilder-lg": "https://botbuilder.myget.org/F/botbuilder-declarative/npm/botbuilder-lg/-/4.7.0-preview2.tgz",
     "lodash": "^4.17.15",

Composer/packages/lib/indexers/src/dialogIndexer.ts

@@ -3,6 +3,7 @@
 
 import has from 'lodash/has';
 import uniq from 'lodash/uniq';
+import { extractLgTemplateNames } from '@bfc/shared';
 
 import { ITrigger, DialogInfo, FileInfo } from './type';
 import { DialogChecker } from './utils/dialogChecker';
@@ -37,14 +38,7 @@ function ExtractLgTemplates(dialog): string[] {
           return true;
       }
       targets.forEach(target => {
-        // match a template name match a temlate func  e.g. `showDate()`
-        // eslint-disable-next-line security/detect-unsafe-regex
-        const reg = /\[([A-Za-z_][-\w]+)(\(.*\))?\]/g;
-        let matchResult;
-        while ((matchResult = reg.exec(target)) !== null) {
-          const templateName = matchResult[1];
-          templates.push(templateName);
-        }
+        templates.push(...extractLgTemplateNames(target));
       });
     }
     return false;

Composer/packages/lib/package.json

@@ -10,7 +10,7 @@
     "build:code-editor": "cd code-editor && yarn build",
     "build:shared": "cd shared && yarn build",
     "build:indexers": "cd indexers && yarn build",
-    "build:all": "concurrently --kill-others-on-fail \"yarn:build:code-editor\" \"yarn:build:shared\" \"yarn:build:indexers\""
+    "build:all": "yarn build:shared && concurrently --kill-others-on-fail \"yarn:build:code-editor\" \"yarn:build:indexers\""
   },
   "author": "",
   "license": "ISC"

Composer/packages/lib/shared/__tests__/lgUtils/extractLgTemplateRefs.test.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { extractLgTemplateNames } from '../../src';
+
+describe('extractLgTemplateRefs', () => {
+  it('can extract lg refs from input string', () => {
+    expect(extractLgTemplateNames('Hi')).toEqual([]);
+    expect(extractLgTemplateNames(`-[Greeting], I'm a fancy bot, [Bye]`)).toEqual(['Greeting', 'Bye']);
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/models/LgMetaData.test.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { LgMetaData } from '../../../src';
+
+describe('LgMetaData', () => {
+  it('can construct an instance via constructor', () => {
+    const instance = new LgMetaData('activity', '123456');
+
+    expect(instance.type).toEqual('activity');
+    expect(instance.designerId).toEqual('123456');
+
+    expect(instance.toLgTemplateName).toBeDefined();
+    expect(instance.toLgTemplateRef).toBeDefined();
+    expect(instance.toLgTemplateRefString).toBeDefined();
+    expect(instance.toLgText).toBeDefined();
+  });
+
+  it('can generate correct output strings', () => {
+    const instance = new LgMetaData('activity', '123456');
+
+    expect(instance.toLgTemplateName()).toEqual('bfdactivity-123456');
+
+    expect(instance.toLgTemplateRefString()).toEqual('[bfdactivity-123456]');
+    expect(instance.toLgTemplateRefString(['1', '2'])).toEqual('[bfdactivity-123456(1,2)]');
+
+    expect(instance.toLgText()).toEqual('- [bfdactivity-123456]');
+    expect(instance.toLgText([])).toEqual('- [bfdactivity-123456()]');
+  });
+
+  it('can construct instance via `parse()` method', () => {
+    expect(LgMetaData.parse('bfdactivity-123456')).toBeInstanceOf(LgMetaData);
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/models/LgTemplateRef.test.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { LgTemplateRef } from '../../../src';
+
+describe('LgTemplateRef', () => {
+  it('can construct an instance via constructor', () => {
+    const a = new LgTemplateRef('a', undefined);
+    expect(a.name).toEqual('a');
+    expect(a.parameters).toEqual(undefined);
+
+    const b = new LgTemplateRef('b', []);
+    expect(b.name).toEqual('b');
+    expect(b.parameters).toEqual([]);
+
+    const c = new LgTemplateRef('c', ['1', '2']);
+    expect(c.name).toEqual('c');
+    expect(c.parameters).toEqual(['1', '2']);
+  });
+
+  it('can output correct strings', () => {
+    const a = new LgTemplateRef('a', undefined);
+    expect(a.toString()).toEqual('[a]');
+    expect(a.toLgText()).toEqual('- [a]');
+
+    const b = new LgTemplateRef('b', []);
+    expect(b.toString()).toEqual('[b()]');
+    expect(b.toLgText()).toEqual('- [b()]');
+
+    const c = new LgTemplateRef('c', ['1', '2']);
+    expect(c.toString()).toEqual('[c(1,2)]');
+    expect(c.toLgText()).toEqual('- [c(1,2)]');
+  });
+
+  it('can construct instance via `parse()`', () => {
+    expect(LgTemplateRef.parse('[bfdactivity-123456]')).toBeInstanceOf(LgTemplateRef);
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/parsers/parseLgParamString.test.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import parseLgParamString from '../../../src/lgUtils/parsers/parseLgParamString';
+
+describe('parseLgParamString', () => {
+  it('should return undefined when no params detected', () => {
+    expect(parseLgParamString('')).toBeUndefined();
+    expect(parseLgParamString('xxx')).toBeUndefined();
+  });
+
+  it('should return params array when input valid strings', () => {
+    expect(parseLgParamString('()')).toEqual([]);
+    expect(parseLgParamString('(a,b)')).toEqual(['a', 'b']);
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/parsers/parseLgTemplateName.test.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { parseLgTemplateName, LgMetaData } from '../../../src';
+
+describe('parseLgTemplateName', () => {
+  it('should return null when inputs are invalid', () => {
+    expect(parseLgTemplateName('')).toEqual(null);
+    expect(parseLgTemplateName('xxx')).toEqual(null);
+  });
+
+  it('should return LgMetaData when inputs are valid', () => {
+    const result = parseLgTemplateName('bfdactivity-123456');
+    expect(result).toBeInstanceOf(LgMetaData);
+    expect((result as LgMetaData).designerId).toEqual('123456');
+    expect((result as LgMetaData).type).toEqual('activity');
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/parsers/parseLgTemplateRef.test.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { parseLgTemplateRef, LgTemplateRef } from '../../../src';
+
+describe('parseLgTemplateRef', () => {
+  it('should return null when inputs are invalid', () => {
+    expect(parseLgTemplateRef('')).toEqual(null);
+    expect(parseLgTemplateRef('xxx')).toEqual(null);
+    expect(parseLgTemplateRef('[0]')).toEqual(null);
+  });
+
+  it('should return LgTemplateRef when inputs are valid', () => {
+    const a = parseLgTemplateRef('[bfdactivity-123456]');
+    expect(a).toBeInstanceOf(LgTemplateRef);
+    expect((a as LgTemplateRef).name).toEqual('bfdactivity-123456');
+    expect((a as LgTemplateRef).parameters).toEqual(undefined);
+
+    const b = parseLgTemplateRef('[greeting(1,2)]');
+    expect(b).toBeInstanceOf(LgTemplateRef);
+    expect((b as LgTemplateRef).name).toEqual('greeting');
+    expect((b as LgTemplateRef).parameters).toEqual(['1', '2']);
+  });
+});

Composer/packages/lib/shared/__tests__/lgUtils/parsers/parseLgText.test.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { parseLgText, LgTemplateRef } from '../../../src';
+
+describe('parseLgText', () => {
+  it('should return null when inputs are invalid', () => {
+    expect(parseLgText('')).toEqual(null);
+    expect(parseLgText('xxx')).toEqual(null);
+    expect(parseLgText('[bfdactivity-1234]')).toEqual(null);
+  });
+
+  it('should return LgTemplateRef when inputs are valid', () => {
+    const result = parseLgText('- [bfdactivity-123456]');
+    expect(result).toBeInstanceOf(LgTemplateRef);
+    expect((result as LgTemplateRef).name).toEqual('bfdactivity-123456');
+    expect((result as LgTemplateRef).parameters).toEqual(undefined);
+  });
+});

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

@@ -12,3 +12,4 @@ export * from './promptTabs';
 export * from './appschema';
 export * from './types';
 export * from './constant';
+export * from './lgUtils';

Composer/packages/lib/shared/src/lgUtils/extractLgTemplateNames.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { LgTemplateRefPattern } from './lgPatterns';
+import { LgTemplateName } from './models/stringTypes';
+
+/**
+ *
+ * @param text string
+ * -[Greeting], I'm a fancy bot, [Bye] ---> ['Greeting', 'Bye']
+ *
+ */
+export default function extractLgTemplateNames(text: string): LgTemplateName[] {
+  const templateNames: string[] = [];
+
+  // eslint-disable-next-line security/detect-non-literal-regexp
+  const reg = new RegExp(LgTemplateRefPattern, 'g');
+
+  let matchResult;
+  while ((matchResult = reg.exec(text)) !== null) {
+    const templateName = matchResult[1];
+    templateNames.push(templateName);
+  }
+  return templateNames;
+}

Composer/packages/lib/shared/src/lgUtils/index.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+/** models */
+export { default as LgMetaData } from './models/LgMetaData';
+export { default as LgTemplateRef } from './models/LgTemplateRef';
+
+/** parsers */
+export { default as parseLgTemplateName } from './parsers/parseLgTemplateName';
+export { default as parseLgTemplateRef } from './parsers/parseLgTemplateRef';
+export { default as parseLgText } from './parsers/parseLgText';
+
+export { default as extractLgTemplateNames } from './extractLgTemplateNames';