fix: use different shellData in Form and Flow's ExtensionContext

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -143,7 +143,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
   const [exportSkillModalVisible, setExportSkillModalVisible] = useState(false);
-  const shell = useShell('ProjectTree');
+  const shell = useShell('DesignPage');
+  const shellForFlowEditor = useShell('FlowEditor');
+  const shellForPropertyEditor = useShell('PropertyEditor');
   const triggerApi = useTriggerApi(shell.api);
 
   useEffect(() => {
@@ -543,30 +545,32 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
             />
             <Toolbar toolbarItems={toolbarItems} />
           </div>
-          <Extension plugins={pluginConfig} shell={shell.api} shellData={shell.data}>
-            <Conversation css={editorContainer}>
-              <div css={editorWrapper}>
-                <div aria-label={formatMessage('Authoring canvas')} css={visualPanel} role="region">
-                  {breadcrumbItems}
-                  {dialogJsonVisible ? (
-                    <JsonEditor
-                      key="dialogjson"
-                      editorSettings={userSettings.codeEditor}
-                      id={currentDialog.id}
-                      schema={schemas.sdk.content}
-                      value={currentDialog.content || undefined}
-                      onChange={(data) => {
-                        updateDialog({ id: currentDialog.id, content: data });
-                      }}
-                    />
-                  ) : (
+          <Conversation css={editorContainer}>
+            <div css={editorWrapper}>
+              <div aria-label={formatMessage('Authoring canvas')} css={visualPanel} role="region">
+                {breadcrumbItems}
+                {dialogJsonVisible ? (
+                  <JsonEditor
+                    key="dialogjson"
+                    editorSettings={userSettings.codeEditor}
+                    id={currentDialog.id}
+                    schema={schemas.sdk.content}
+                    value={currentDialog.content || undefined}
+                    onChange={(data) => {
+                      updateDialog({ id: currentDialog.id, content: data });
+                    }}
+                  />
+                ) : (
+                  <Extension plugins={pluginConfig} shell={shellForFlowEditor}>
                     <VisualEditor openNewTriggerModal={openNewTriggerModal} />
-                  )}
-                </div>
-                <PropertyEditor key={focusPath} />
+                  </Extension>
+                )}
               </div>
-            </Conversation>
-          </Extension>
+              <Extension plugins={pluginConfig} shell={shellForPropertyEditor}>
+                <PropertyEditor key={focusPath} />
+              </Extension>
+            </div>
+          </Conversation>
         </div>
       </div>
       <Suspense fallback={<LoadingSpinner />}>

Composer/packages/client/src/shell/useShell.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { useMemo, useRef } from 'react';
-import { ShellApi, ShellData } from '@bfc/shared';
+import { ShellApi, ShellData, Shell } from '@bfc/shared';
 import isEqual from 'lodash/isEqual';
 import { useRecoilValue } from 'recoil';
 import formatMessage from 'format-message';
@@ -33,9 +33,9 @@ import { useLuApi } from './luApi';
 
 const FORM_EDITOR = 'PropertyEditor';
 
-type EventSource = 'VisualEditor' | 'PropertyEditor' | 'ProjectTree';
+type EventSource = 'FlowEditor' | 'PropertyEditor' | 'DesignPage';
 
-export function useShell(source: EventSource): { api: ShellApi; data: ShellData } {
+export function useShell(source: EventSource): Shell {
   const dialogMapRef = useRef({});
   const botName = useRecoilValue(botNameState);
   const dialogs = useRecoilValue(dialogsState);

Composer/packages/extensions/extension/src/components/Extension.tsx

@@ -1,25 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React, { useMemo } from 'react';
-import { ShellApi, ShellData } from '@bfc/shared';
+import { Shell } from '@bfc/shared';
 
 import ExtensionContext from '../extensionContext';
 import { PluginConfig } from '../types';
 
 interface ExtensionProps {
-  shell: ShellApi;
-  shellData: ShellData;
+  shell: Shell;
   plugins: PluginConfig;
 }
 
-export const Extension: React.FC<ExtensionProps> = function Extension(props) {
-  const { shell, shellData, plugins } = props;
-
+export const Extension: React.FC<ExtensionProps> = ({ shell, plugins, children }) => {
   const context = useMemo(() => {
-    return { shellApi: shell, shellData, plugins };
-  }, [shell, shellData, plugins]);
+    return { shellApi: shell.api, shellData: shell.data, plugins };
+  }, [shell.api, shell.data, plugins]);
 
-  return <ExtensionContext.Provider value={context}>{props.children}</ExtensionContext.Provider>;
+  return <ExtensionContext.Provider value={context}>{children}</ExtensionContext.Provider>;
 };
 
 export default Extension;

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

@@ -90,3 +90,8 @@ export interface ShellApi {
   announce: (message: string) => void;
   displayManifestModal: (manifestId: string) => void;
 }
+
+export interface Shell {
+  api: ShellApi;
+  data: ShellData;
+}

Composer/packages/ui-plugins/select-dialog/src/__tests__/selectDialog.test.tsx

@@ -33,7 +33,7 @@ const renderSelectDialog = ({ createDialog, navTo, onChange } = {}) => {
     ],
   };
   return render(
-    <Extension shell={shell} shellData={shellData}>
+    <Extension shell={{ api: shell, data: shellData }}>
       <SelectDialog {...props} />
     </Extension>
   );

Composer/packages/ui-plugins/select-skill-dialog/src/__tests__/BeginSkillDialogField.test.tsx

@@ -35,7 +35,7 @@ const renderBeginSkillDialog = ({ value = {}, onChange = jest.fn() } = {}) => {
   };
 
   return render(
-    <Extension plugins={{}} shell={shell} shellData={shellData}>
+    <Extension plugins={{}} shell={{ api: shell, data: shellData }}>
       <BeginSkillDialogField {...props} />
     </Extension>
   );

Composer/packages/ui-plugins/select-skill-dialog/src/__tests__/SelectSkillDialog.test.tsx

@@ -55,7 +55,7 @@ const renderSelectSkillDialog = ({ addSkillDialog, onChange } = {}) => {
   };
 
   return render(
-    <Extension shell={shell} shellData={shellData}>
+    <Extension shell={{ api: shell, data: shellData }}>
       <SelectSkillDialog {...props} />
     </Extension>
   );