refactor: re-provide getLgTemplates api

Composer/packages/client/src/ShellApi.ts

@@ -126,6 +126,14 @@ 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 file.templates;
+  }
+
   /**
    *
    * @param {
@@ -292,6 +300,7 @@ 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,6 +70,10 @@ 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

@@ -164,6 +164,7 @@ const mockShellApi = [
   'updateLgFile',
   'createLuFile',
   'createLgFile',
+  'getLgTemplates',
   'createLgTemplate',
   'updateLgTemplate',
   'validateExpression',

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

@@ -6,7 +6,6 @@ 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 { LgFile } from '@bfc/indexers';
 
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { KeyboardCommandTypes, KeyboardPrimaryTypes } from '../constants/KeyboardCommandTypes';
@@ -350,7 +349,6 @@ 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,7 +31,6 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
   data: inputData,
   shellApi,
   hosted,
-  lgFiles,
 }): JSX.Element => {
   const dataCache = useRef({});
 
@@ -54,6 +53,7 @@ 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,7 +84,6 @@ 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

@@ -3,24 +3,27 @@
 
 import React from 'react';
 import { ShellApi } from '@bfc/shared';
-import { LgFile } from '@bfc/indexers';
 
-type ShellApiFuncs = 'copyLgTemplate' | 'removeLgTemplate' | 'removeLgTemplates' | 'updateLgTemplate';
+type ShellApiFuncs =
+  | 'getLgTemplates'
+  | '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 { lgFiles } = useContext(NodeRendererContext);
+  const { getLgTemplates } = useContext(NodeRendererContext);
   const [templateText, setTemplateText] = useState('');
   let cancelled = false;
 
@@ -18,15 +18,13 @@ export const useLgTemplate = (str?: string, dialogId?: string) => {
 
     if (templateId && dialogId) {
       // this is an LG template, go get it's content
-
-      const lgFile = Array.isArray(lgFiles) ? lgFiles.find(({ id }) => id === 'common') : null;
-
-      if (!lgFile) {
+      if (!getLgTemplates || typeof getLgTemplates !== 'function') {
         setTemplateText(str || '');
         return;
       }
 
-      const template = lgFile.templates.find(({ name }) => {
+      const templates = getLgTemplates ? await getLgTemplates('common') : [];
+      const [template] = templates.filter(({ name }) => {
         return name === templateId;
       });
 

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

@@ -48,6 +48,7 @@ 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>;