diff --git a/Composer/packages/client/src/ShellApi.ts b/Composer/packages/client/src/ShellApi.ts index c5a1991e6e..5398c78c45 100644 --- a/Composer/packages/client/src/ShellApi.ts +++ b/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); diff --git a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx b/Composer/packages/client/src/extension-container/ExtensionContainer.tsx index 6e211c3e8f..bb37bc25b1 100644 --- a/Composer/packages/client/src/extension-container/ExtensionContainer.tsx +++ b/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 }); }, diff --git a/Composer/packages/extensions/obiformeditor/demo/src/index.tsx b/Composer/packages/extensions/obiformeditor/demo/src/index.tsx index df29a7ae94..2b71754fc5 100644 --- a/Composer/packages/extensions/obiformeditor/demo/src/index.tsx +++ b/Composer/packages/extensions/obiformeditor/demo/src/index.tsx @@ -164,6 +164,7 @@ const mockShellApi = [ 'updateLgFile', 'createLuFile', 'createLgFile', + 'getLgTemplates', 'createLgTemplate', 'updateLgTemplate', 'validateExpression', diff --git a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx index 4d5e68a192..392d736235 100644 --- a/Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx +++ b/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; diff --git a/Composer/packages/extensions/visual-designer/src/index.tsx b/Composer/packages/extensions/visual-designer/src/index.tsx index e3547529a9..c54693165d 100644 --- a/Composer/packages/extensions/visual-designer/src/index.tsx +++ b/Composer/packages/extensions/visual-designer/src/index.tsx @@ -31,7 +31,6 @@ const VisualDesigner: React.FC = ({ data: inputData, shellApi, hosted, - lgFiles, }): JSX.Element => { const dataCache = useRef({}); @@ -54,6 +53,7 @@ const VisualDesigner: React.FC = ({ onCopy, saveData, updateLgTemplate, + getLgTemplates, copyLgTemplate, removeLgTemplate, removeLgTemplates, @@ -67,9 +67,9 @@ const VisualDesigner: React.FC = ({ focusedId, focusedEvent, focusedTab, - lgFiles, clipboardActions: clipboardActions || [], updateLgTemplate, + getLgTemplates, copyLgTemplate, removeLgTemplate, removeLgTemplates, @@ -84,7 +84,6 @@ const VisualDesigner: React.FC = ({ key={dialogId} path={dialogId} data={data} - lgFiles={lgFiles} focusedSteps={focusedActions} onFocusSteps={onFocusSteps} focusedEvent={focusedEvent} diff --git a/Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts b/Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts index b63ecc70ad..36aa1abd0f 100644 --- a/Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts +++ b/Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts @@ -3,15 +3,18 @@ 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 { focusedId?: string; focusedEvent?: string; focusedTab?: string; - lgFiles: LgFile[]; clipboardActions: any[]; } @@ -19,8 +22,8 @@ export const NodeRendererContext = React.createContext focusedId: '', focusedEvent: '', focusedTab: '', - lgFiles: [], clipboardActions: [], + getLgTemplates: () => Promise.resolve([]), copyLgTemplate: () => Promise.resolve(''), removeLgTemplate: () => Promise.resolve(), removeLgTemplates: () => Promise.resolve(), diff --git a/Composer/packages/extensions/visual-designer/src/utils/hooks.ts b/Composer/packages/extensions/visual-designer/src/utils/hooks.ts index 9ba9f122f0..acf156af71 100644 --- a/Composer/packages/extensions/visual-designer/src/utils/hooks.ts +++ b/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; }); diff --git a/Composer/packages/lib/shared/src/types/shell.ts b/Composer/packages/lib/shared/src/types/shell.ts index 4bff8bdbb8..0e46cc0975 100644 --- a/Composer/packages/lib/shared/src/types/shell.ts +++ b/Composer/packages/lib/shared/src/types/shell.ts @@ -48,6 +48,7 @@ export interface ShellApi { createLuFile: (id: string) => Promise; updateLuFile: (luFile: { id: string; content: string }) => Promise; updateLgFile: (id: string, content: string) => Promise; + getLgTemplates: (id: string) => Promise; copyLgTemplate: (id: string, fromTemplateName: string, toTemplateName?: string) => Promise; createLgTemplate: (id: string, template: Partial, position: number) => Promise; updateLgTemplate: (id: string, templateName: string, templateStr: string) => Promise;