fix: dialog name incorrect when creating new dialog in form editor (#…

…1605)

* fix #1144

* fix flicker when jumping into the new dialog

* do not render dialog when hidden

* invoke onCreateDialogComplete callback async

* delay navigation by 500ms after creating dialog from form

* convert dialog wrapper and new dialog modal to typescript

* set up tests to allow for `@app` path mapping

* add test for dialog wrapper

Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { render } from 'react-testing-library';
+import { DialogWrapper } from '@app/components/DialogWrapper';
+
+describe('<DialogWrapper />', () => {
+  const props = {
+    isOpen: true,
+    title: 'My Dialog',
+    subText: 'Create new dialog',
+    onDismiss: jest.fn(),
+  };
+
+  it('renders null when not open', () => {
+    const { container } = render(<DialogWrapper {...props} isOpen={false} />);
+    expect(container.hasChildNodes()).toBeFalsy();
+  });
+});

Composer/packages/client/jest.config.js

@@ -14,6 +14,8 @@ module.exports = {
     // use commonjs modules for test so they do not need to be compiled
     'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
     '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+
+    '^@app/(.*)$': '<rootDir>/src/$1',
   },
   testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '/testUtils/'],
   // Some node modules are packaged and distributed in a non-transpiled form

Composer/packages/client/src/components/DialogWrapper/index.js → Composer/packages/client/src/components/DialogWrapper/index.tsx

@@ -2,15 +2,26 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import { Dialog, DialogType, IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 
 import { styles } from './styles';
 
-export function DialogWrapper(props) {
+interface DialogWrapperProps extends Pick<IDialogProps, 'onDismiss'> {
+  isOpen: boolean;
+  title: string;
+  subText: string;
+}
+
+export const DialogWrapper: React.FC<DialogWrapperProps> = props => {
   const { isOpen, onDismiss, title, subText, children } = props;
+
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <Dialog
-      hidden={!isOpen}
+      hidden={false}
       onDismiss={onDismiss}
       dialogContentProps={{
         type: DialogType.normal,
@@ -26,4 +37,4 @@ export function DialogWrapper(props) {
       {children}
     </Dialog>
   );
-}
+};

Composer/packages/client/src/components/DialogWrapper/styles.js → Composer/packages/client/src/components/DialogWrapper/styles.ts

@@ -3,8 +3,10 @@
 
 import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
 import { FontSizes } from '@uifabric/fluent-theme';
+import { IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
+import { IModalStyles } from 'office-ui-fabric-react/lib/Modal';
 
-export const styles = {
+export const styles: { dialog: Partial<IDialogContentStyles>; modal: Partial<IModalStyles> } = {
   dialog: {
     title: {
       fontWeight: FontWeights.bold,

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

@@ -317,7 +317,7 @@ function DesignPage(props) {
     );
   }, [dialogs, breadcrumb]);
 
-  async function onSubmit(data) {
+  async function onSubmit(data: { name: string; description: string }) {
     const content = getNewDesigner(data.name, data.description);
     const seededContent = seedNewDialog('Microsoft.AdaptiveDialog', content.$designer, content);
     await actions.createDialog({ id: data.name, content: seededContent });

Composer/packages/client/src/pages/design/new-dialog-modal.js → Composer/packages/client/src/pages/design/new-dialog-modal.tsx

@@ -2,12 +2,19 @@
 // Licensed under the MIT License.
 
 import React from 'react';
+import { IDialogProps } from 'office-ui-fabric-react/lib/Dialog';
 
 import { DialogCreationCopy } from '../../constants';
 import { DefineConversation } from '../../CreationFlow/DefineConversation/index';
 import { DialogWrapper } from '../../components/DialogWrapper/index';
 
-export default function NewDialogModal(props) {
+interface NewDialogModalProps extends Pick<IDialogProps, 'onDismiss'> {
+  isOpen: boolean;
+  onSubmit: (data: { name: string; description: string }) => void;
+  onGetErrorMessage: (text: string) => string;
+}
+
+const NewDialogModal: React.FC<NewDialogModalProps> = props => {
   const { isOpen, onDismiss, onSubmit, onGetErrorMessage } = props;
 
   return (
@@ -20,4 +27,6 @@ export default function NewDialogModal(props) {
       />
     </DialogWrapper>
   );
-}
+};
+
+export default NewDialogModal;

Composer/packages/client/src/store/action/dialog.ts

@@ -59,15 +59,14 @@ export const createDialogBase: ActionCreator = async (store, { id, content }) =>
     const response = await httpClient.post(`/projects/opened/dialogs`, { id, content });
     const onCreateDialogComplete = store.getState().onCreateDialogComplete;
     if (typeof onCreateDialogComplete === 'function') {
-      onCreateDialogComplete(id);
+      setTimeout(() => onCreateDialogComplete(id));
     }
     store.dispatch({
       type: ActionTypes.CREATE_DIALOG_SUCCESS,
       payload: {
         response,
       },
     });
-    navTo(store, id);
   } catch (err) {
     setError(store, {
       message: err.response && err.response.data.message ? err.response.data.message : err,

Composer/packages/client/tsconfig.json

@@ -4,6 +4,10 @@
     "allowJs": true,
     "declaration": false,
     "module": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "@app/*": ["src/*"]
+    }
   },
   "include": ["./src/**/*", "./__tests__/**/*"],
 }

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

@@ -51,7 +51,7 @@ export const DialogSelectWidget: React.FC<BFDWidgetProps> = props => {
         formContext.shellApi.createDialog().then(newDialog => {
           if (newDialog) {
             onChange(newDialog);
-            setComboboxTitle(newDialog);
+            setTimeout(() => formContext.shellApi.navTo(newDialog), 500);
           } else {
             setComboboxTitle(null);
           }