fix: visual editor lg template don't show

Composer/packages/client/src/ShellApi.ts

@@ -126,16 +126,6 @@ export const ShellApi: React.FC = () => {
     return true;
   }
 
-  function getLgTemplates({ id }, event) {
-    if (isEventSourceValid(event) === false) return false;
-
-    if (id === undefined) throw new Error('must have a file id');
-    const file = lgFiles.find(file => file.id === id);
-    if (!file) throw new Error(`lg file ${id} not found`);
-
-    return lgUtil.parse(file.content);
-  }
-
   /**
    *
    * @param {
@@ -302,7 +292,6 @@ export const ShellApi: React.FC = () => {
     apiClient.registerApi('copyLgTemplate', copyLgTemplateHandler);
     apiClient.registerApi('removeLgTemplate', removeLgTemplateHandler);
     apiClient.registerApi('removeLgTemplates', removeLgTemplatesHandler);
-    apiClient.registerApi('getLgTemplates', ({ id }, event) => getLgTemplates({ id }, event));
     apiClient.registerApi('navTo', navTo);
     apiClient.registerApi('onFocusEvent', focusEvent);
     apiClient.registerApi('onFocusSteps', focusSteps);

Composer/packages/client/src/extension-container/ExtensionContainer.tsx

@@ -70,10 +70,6 @@ const shellApi: ShellApi = {
     return apiClient.apiCall('updateLgFile', { id, content });
   },
 
-  getLgTemplates: id => {
-    return apiClient.apiCall('getLgTemplates', { id });
-  },
-
   createLgTemplate: (id, template, position) => {
     return apiClient.apiCall('createLgTemplate', { id, template, position });
   },

Composer/packages/extensions/obiformeditor/demo/src/index.tsx

@@ -89,7 +89,10 @@ const luFiles: LuFile[] = [
     parsedContent: {
       LUISJsonStructure: {
         intents: [{ name: 'FirstHello' }, { name: 'FirstGoodBye' }],
-        utterances: [{ intent: 'FirstHello', text: 'Hi' }, { intent: 'FirstGoodBye', text: 'Goodbye' }],
+        utterances: [
+          { intent: 'FirstHello', text: 'Hi' },
+          { intent: 'FirstGoodBye', text: 'Goodbye' },
+        ],
       },
     },
   },
@@ -100,7 +103,10 @@ const luFiles: LuFile[] = [
     parsedContent: {
       LUISJsonStructure: {
         intents: [{ name: 'SecondHello' }, { name: 'SecondGoodBye' }],
-        utterances: [{ intent: 'SecondHello', text: 'Good morning' }, { intent: 'SecondGoodBye', text: 'See ya!' }],
+        utterances: [
+          { intent: 'SecondHello', text: 'Good morning' },
+          { intent: 'SecondGoodBye', text: 'See ya!' },
+        ],
       },
     },
   },
@@ -111,7 +117,10 @@ const luFiles: LuFile[] = [
     parsedContent: {
       LUISJsonStructure: {
         intents: [{ name: 'ThirdHello' }, { name: 'ThirdGoodbye' }],
-        utterances: [{ intent: 'ThirdHello', text: 'Hello' }, { intent: 'ThirdGoodbye', text: 'Later' }],
+        utterances: [
+          { intent: 'ThirdHello', text: 'Hello' },
+          { intent: 'ThirdGoodbye', text: 'Later' },
+        ],
       },
     },
   },
@@ -154,7 +163,6 @@ const mockShellApi = [
   'updateLgFile',
   'createLuFile',
   'createLgFile',
-  'getLgTemplates',
   'createLgTemplate',
   'updateLgTemplate',
   'validateExpression',

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, LgTemplateRef, LgMetaData } from '@bfc/shared';
+import { deleteAction, deleteActions, LgTemplateRef, LgMetaData, LgFile } from '@bfc/shared';
 
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { KeyboardCommandTypes, KeyboardPrimaryTypes } from '../constants/KeyboardCommandTypes';
@@ -349,6 +349,7 @@ interface ObiEditorProps {
   path: string;
   // Obi raw json
   data: any;
+  lgFiles: LgFile[];
   focusedSteps: string[];
   onFocusSteps: (stepIds: string[], fragment?: string) => any;
   focusedEvent: string;

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

@@ -31,6 +31,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
   data: inputData,
   shellApi,
   hosted,
+  lgFiles,
 }): JSX.Element => {
   const dataCache = useRef({});
 
@@ -53,7 +54,6 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
     onCopy,
     saveData,
     updateLgTemplate,
-    getLgTemplates,
     copyLgTemplate,
     removeLgTemplate,
     removeLgTemplates,
@@ -67,9 +67,9 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
     focusedId,
     focusedEvent,
     focusedTab,
+    lgFiles,
     clipboardActions: clipboardActions || [],
     updateLgTemplate,
-    getLgTemplates,
     copyLgTemplate,
     removeLgTemplate,
     removeLgTemplates,
@@ -84,6 +84,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
               key={dialogId}
               path={dialogId}
               data={data}
+              lgFiles={lgFiles}
               focusedSteps={focusedActions}
               onFocusSteps={onFocusSteps}
               focusedEvent={focusedEvent}

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

@@ -2,28 +2,24 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { ShellApi } from '@bfc/shared';
+import { ShellApi, LgFile } from '@bfc/shared';
 
-type ShellApiFuncs =
-  | 'getLgTemplates'
-  | 'copyLgTemplate'
-  | 'removeLgTemplate'
-  | 'removeLgTemplates'
-  | 'updateLgTemplate';
+type ShellApiFuncs = 'copyLgTemplate' | 'removeLgTemplate' | 'removeLgTemplates' | 'updateLgTemplate';
 
 interface NodeRendererContextValue extends Pick<ShellApi, ShellApiFuncs> {
   focusedId?: string;
   focusedEvent?: string;
   focusedTab?: string;
+  lgFiles: LgFile[];
   clipboardActions: any[];
 }
 
 export const NodeRendererContext = React.createContext<NodeRendererContextValue>({
   focusedId: '',
   focusedEvent: '',
   focusedTab: '',
+  lgFiles: [],
   clipboardActions: [],
-  getLgTemplates: () => Promise.resolve([]),
   copyLgTemplate: () => Promise.resolve(''),
   removeLgTemplate: () => Promise.resolve(),
   removeLgTemplates: () => Promise.resolve(),

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

@@ -8,7 +8,7 @@ import { LgTemplateRef } from '@bfc/shared';
 import { NodeRendererContext } from '../store/NodeRendererContext';
 
 export const useLgTemplate = (str?: string, dialogId?: string) => {
-  const { getLgTemplates } = useContext(NodeRendererContext);
+  const { lgFiles } = useContext(NodeRendererContext);
   const [templateText, setTemplateText] = useState('');
   let cancelled = false;
 
@@ -18,12 +18,15 @@ export const useLgTemplate = (str?: string, dialogId?: string) => {
 
     if (templateId && dialogId) {
       // this is an LG template, go get it's content
-      if (!getLgTemplates || typeof getLgTemplates !== 'function') {
+
+      const lgFile = Array.isArray(lgFiles) ? lgFiles.find(({ id }) => id === 'common') : null;
+
+      if (!lgFile) {
         setTemplateText(str || '');
+        return;
       }
 
-      const templates = getLgTemplates ? await getLgTemplates('common') : [];
-      const [template] = templates.filter(({ name }) => {
+      const template = lgFile.templates.find(({ name }) => {
         return name === templateId;
       });
 

Composer/packages/lib/shared/src/types/shell.ts

@@ -125,7 +125,6 @@ export interface ShellApi {
   createLuFile: (id: string) => Promise<void>;
   updateLuFile: (luFile: { id: string; content: string }) => Promise<void>;
   updateLgFile: (id: string, content: string) => Promise<void>;
-  getLgTemplates: (id: string) => Promise<LgTemplate[]>;
   copyLgTemplate: (id: string, fromTemplateName: string, toTemplateName?: string) => Promise<string>;
   createLgTemplate: (id: string, template: Partial<LgTemplate>, position: number) => Promise<void>;
   updateLgTemplate: (id: string, templateName: string, templateStr: string) => Promise<void>;