DialogFactory refactor (microsoft#1033)

* WIP

* More WIP

* Refactor dialog generation code into shared-menus

* Replace server side dialogTemplate.json

* Fix test

* WIP

* Merge from master

* Adds tests

* Change shared-menus to shared

* Revert schema changes

* Cleanup

Composer/Dockerfile

@@ -10,7 +10,7 @@ COPY yarn.lock ./packages/server/
 COPY packages/server/package.json ./packages/server/
 COPY packages/lib/package.json ./packages/lib/
 COPY packages/lib/code-editor/package.json ./packages/lib/code-editor/
-COPY packages/lib/shared-menus/package.json ./packages/lib/shared-menus/
+COPY packages/lib/shared/package.json ./packages/lib/shared/
 COPY packages/extensions/package.json ./packages/extensions/
 COPY packages/extensions/obiformeditor/package.json ./packages/extensions/obiformeditor/
 COPY packages/extensions/sample-json-editor/package.json ./packages/extensions/sample-json-editor/

Composer/jest.config.js

@@ -43,6 +43,6 @@ module.exports = {
     '<rootDir>/packages/extensions/sample-json-editor',
     '<rootDir>/packages/lib/code-editor',
     '<rootDir>/packages/lib/component-scaffold',
-    '<rootDir>/packages/lib/shared-menus',
+    '<rootDir>/packages/lib/shared',
   ],
 };

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

@@ -3,7 +3,8 @@ import { ActionButton, Breadcrumb, Icon, IBreadcrumbItem } from 'office-ui-fabri
 import formatMessage from 'format-message';
 import { globalHistory } from '@reach/router';
 import { toLower, get } from 'lodash';
-import { PromptTab } from 'shared-menus';
+import { PromptTab } from 'shared';
+import { getNewDesigner, seedNewDialog } from 'shared';
 
 import { VisualEditorAPI } from '../../messenger/FrameAPI';
 import { TestController } from '../../TestController';
@@ -17,7 +18,6 @@ import { ProjectTree } from '../../components/ProjectTree';
 import { StoreContext } from '../../store';
 import { ToolBar } from '../../components/ToolBar/index';
 import { clearBreadcrumb } from '../../utils/navigation';
-import { getNewDesigner } from '../../utils/dialogUtil';
 import undoHistory from '../../store/middlewares/undo/history';
 
 import NewDialogModal from './new-dialog-modal';
@@ -315,7 +315,8 @@ function DesignPage(props) {
 
   async function onSubmit(data) {
     const content = getNewDesigner(data.name, data.description);
-    await actions.createDialog({ id: data.name, content });
+    const seededContent = seedNewDialog('Microsoft.AdaptiveDialog', content.$designer, content);
+    await actions.createDialog({ id: data.name, content: seededContent });
   }
 
   async function handleDeleteDialog(id) {

Composer/packages/client/src/store/types.ts

@@ -2,7 +2,7 @@
 // TODO: remove this once we can expand the types
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
-import { PromptTab } from 'shared-menus';
+import { PromptTab } from 'shared';
 
 import { CreationFlowStatus, BotStatus } from '../constants';
 

Composer/packages/client/src/utils/dialogUtil.ts

@@ -1,8 +1,7 @@
-import { ConceptLabels, DialogGroup, SDKTypes, dialogGroups, seedNewDialog } from 'shared-menus';
+import { ConceptLabels, DialogGroup, SDKTypes, dialogGroups, seedNewDialog } from 'shared';
 import { cloneDeep, get, set } from 'lodash';
 import { ExpressionEngine } from 'botbuilder-expression-parser';
 import { IDropdownOption } from 'office-ui-fabric-react';
-import nanoid from 'nanoid/generate';
 
 import { DialogInfo } from '../store/types';
 
@@ -53,19 +52,6 @@ export function getFriendlyName(data) {
   return data.$type;
 }
 
-export function getNewDesigner(name: string, description: string) {
-  const timestamp = new Date().toISOString();
-  return {
-    $designer: {
-      name,
-      description,
-      createdAt: timestamp,
-      updatedAt: timestamp,
-      id: nanoid('1234567890', 6),
-    },
-  };
-}
-
 export function insert(content, path: string, position: number | undefined, data: TriggerFormData) {
   const current = get(content, path, []);
   const optionalAttributes: { constraint?: string; events?: string[] } = {};
@@ -75,6 +61,7 @@ export function insert(content, path: string, position: number | undefined, data
   if (data.eventType) {
     optionalAttributes.events = [data.eventType];
   }
+
   const newStep = {
     $type: data.$type,
     ...seedNewDialog(data.$type, { name: data.name }, optionalAttributes),

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

@@ -6,7 +6,7 @@ import debounce from 'lodash.debounce';
 import nanoid from 'nanoid';
 import { initializeIcons } from '@uifabric/icons';
 import { ExpressionEngine } from 'botbuilder-expression-parser';
-import { seedNewDialog } from 'shared-menus';
+import { seedNewDialog } from 'shared';
 
 import Example from '../../src';
 import { ShellApi, LuFile, DialogInfo } from '../../src/types';

Composer/packages/extensions/obiformeditor/package.json

@@ -40,7 +40,7 @@
     "nanoid": "^2.0.1",
     "office-ui-fabric-react": "7.37.1",
     "react-error-boundary": "^1.2.5",
-    "shared-menus": "0.0.0"
+    "shared": "0.0.0"
   },
   "peerDependencies": {
     "react": "16.9.0",

Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/IDialogArray.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { PrimaryButton } from 'office-ui-fabric-react';
 import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
 import formatMessage from 'format-message';
-import { createStepMenu, DialogGroup } from 'shared-menus';
+import { createStepMenu, DialogGroup } from 'shared';
 
 import ArrayItem from './ArrayItem';
 

Composer/packages/extensions/obiformeditor/src/Form/FieldTemplate.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import get from 'lodash.get';
 import { FieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
-
-import { FIELDS_TO_HIDE } from '../schema/appschema';
+import { FIELDS_TO_HIDE } from 'shared';
 
 export default function FieldTemplate(props: FieldTemplateProps) {
   const { children, label, uiSchema } = props;

Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/ObjectItem.tsx

@@ -4,11 +4,10 @@ import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
 import classnames from 'classnames';
 import { JSONSchema6 } from 'json-schema';
+import { FIELDS_TO_HIDE } from 'shared';
 
 import './styles.css';
 
-import { FIELDS_TO_HIDE } from '../../schema/appschema';
-
 interface ObjectItemProps {
   content: React.ReactNode;
   name: string;

Composer/packages/extensions/obiformeditor/src/Form/fields/CasesField.tsx

@@ -4,7 +4,7 @@ import { FieldProps } from '@bfcomposer/react-jsonschema-form';
 import { DefaultButton, TextField, DirectionalHint, IContextualMenuItem, IconButton } from 'office-ui-fabric-react';
 import get from 'lodash.get';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
-import { createStepMenu, DialogGroup } from 'shared-menus';
+import { createStepMenu, DialogGroup } from 'shared';
 
 import Modal from '../../Modal';
 import { swap } from '../utils';

Composer/packages/extensions/obiformeditor/src/Form/fields/DesignerField.tsx

@@ -1,22 +1,12 @@
 import React, { useEffect } from 'react';
-import nanoid from 'nanoid/generate';
 import formatMessage from 'format-message';
+import { getDesignerId, DesignerData } from 'shared';
 import { TextField } from 'office-ui-fabric-react';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import get from 'lodash.get';
 
-import { getTimestamp } from '../utils';
-
 import './DesignerField.css';
 
-interface DesignerData {
-  name?: string;
-  description?: string;
-  id: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
 interface DesignerFieldProps {
   placeholder: string;
   data: DesignerData;
@@ -29,14 +19,7 @@ export const DesignerField: React.FC<DesignerFieldProps> = props => {
   useEffect(() => {
     // create new designer metadata
     if (!data || !data.id) {
-      const timestamp = getTimestamp();
-      const newDesigner: DesignerData = {
-        createdAt: timestamp,
-        updatedAt: timestamp,
-        id: nanoid('1234567890', 6),
-        ...data,
-      };
-
+      const newDesigner = getDesignerId(data);
       onChange(newDesigner);
     }
   }, [data]);
@@ -45,7 +28,6 @@ export const DesignerField: React.FC<DesignerFieldProps> = props => {
     onChange({
       ...data,
       [field]: val,
-      updatedAt: getTimestamp(),
     });
   };
 
@@ -67,20 +49,6 @@ export const DesignerField: React.FC<DesignerFieldProps> = props => {
         />
       </div>
       <div className="DesignerFieldSection">
-        <TextField
-          value={
-            get(data, 'updatedAt')
-              ? formatMessage('{ updatedAt, date, short } { updatedAt, time }', {
-                  updatedAt: Date.parse(get(data, 'updatedAt')),
-                })
-              : 'N/A'
-          }
-          label={formatMessage('Last Edited')}
-          borderless
-          readOnly
-          styles={{ field: { color: NeutralColors.gray140, paddingLeft: 0 } }}
-        />
-        {/* HIDE ID UNTIL WE ACTUALLY HAVE A USE FOR IT */}
         <TextField
           value={get(data, 'id')}
           label={formatMessage('ID number')}

Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/UserAnswers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FieldProps } from '@bfcomposer/react-jsonschema-form';
 import formatMessage from 'format-message';
 import { JSONSchema6 } from 'json-schema';
-import { SDKTypes } from 'shared-menus';
+import { SDKTypes } from 'shared';
 
 import { TextWidget, SelectWidget } from '../../widgets';
 

Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/index.tsx

@@ -5,7 +5,7 @@ import { IdSchema } from '@bfcomposer/react-jsonschema-form';
 import formatMessage from 'format-message';
 import { Pivot, PivotLinkSize, PivotItem } from 'office-ui-fabric-react';
 import get from 'lodash.get';
-import { PromptTab } from 'shared-menus';
+import { PromptTab } from 'shared';
 
 import { BaseField } from '../BaseField';
 import { BFDFieldProps } from '../../types';

Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx

@@ -4,7 +4,7 @@ import { FontClassNames, FontWeights } from '@uifabric/styling';
 import classnames from 'classnames';
 import { JSONSchema6 } from 'json-schema';
 import { FontSizes } from '@uifabric/fluent-theme';
-import formatMessage, { date } from 'format-message';
+import formatMessage from 'format-message';
 
 import { FormContext } from '../types';
 
@@ -77,16 +77,6 @@ export const RootField: React.FC<RootFieldProps> = props => {
           </span>
           <span style={{ minWidth: '75px', display: 'inline-block' }}>{get(formData, '$designer.id')}</span>
         </div>
-        <div>
-          <span style={{ marginRight: '8px', fontWeight: FontWeights.semibold as number }}>
-            {formatMessage('Last Edited')}
-          </span>
-          <span>
-            {get(formData, '$designer.updatedAt')
-              ? date(Date.parse(get(formData, '$designer.updatedAt')), 'short')
-              : 'N/A'}
-          </span>
-        </div>
       </div>
     </div>
   );

Composer/packages/extensions/obiformeditor/src/Form/fields/RulesField.tsx

@@ -3,7 +3,7 @@ import formatMessage from 'format-message';
 import { DirectionalHint, DefaultButton } from 'office-ui-fabric-react';
 import { FieldProps } from '@bfcomposer/react-jsonschema-form';
 import get from 'lodash.get';
-import { createStepMenu, DialogGroup } from 'shared-menus';
+import { createStepMenu, DialogGroup } from 'shared';
 
 import { setOverridesOnField } from '../utils';
 

Composer/packages/extensions/obiformeditor/src/Form/fields/StepsField.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DialogGroup, createStepMenu } from 'shared-menus';
+import { DialogGroup, createStepMenu } from 'shared';
 import formatMessage from 'format-message';
 import { DefaultButton, DirectionalHint } from 'office-ui-fabric-react';
 

Composer/packages/extensions/obiformeditor/src/Form/fields/TableField.tsx

@@ -14,10 +14,10 @@ import { DirectionalHint } from 'office-ui-fabric-react';
 import get from 'lodash.get';
 import { FieldProps } from '@bfcomposer/react-jsonschema-form';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
+import { COMPOUND_TYPES } from 'shared';
 
 import { buildDialogOptions, swap, remove, insertAt, DialogOptionsOpts } from '../utils';
 import { FormContext } from '../types';
-import { COMPOUND_TYPES } from '../../schema/appschema';
 
 import { BaseField } from './BaseField';
 

Composer/packages/extensions/obiformeditor/src/Form/utils.ts

@@ -7,8 +7,7 @@ import {
 import { useState } from 'react';
 import merge from 'lodash.merge';
 import get from 'lodash.get';
-import { dialogGroups, DialogGroup, DialogGroupItem } from 'shared-menus';
-import nanoid from 'nanoid/generate';
+import { dialogGroups, DialogGroup, DialogGroupItem, getDesignerId } from 'shared';
 
 import { FormMemory, MemoryScope } from '../types';
 
@@ -26,10 +25,6 @@ export interface DialogOptionsOpts {
   onClick?: (e: any, item: IContextualMenuItem) => void;
 }
 
-export function getTimestamp(): string {
-  return new Date().toISOString();
-}
-
 /**
  * This method is used to build out the content of many popout menus in the form view
  * like context menus, "+Add" buttons and others.
@@ -68,11 +63,7 @@ export function buildDialogOptions(opts: DialogOptionsOpts = {}): IContextualMen
       text: dialog,
       data: {
         $type: dialog,
-        $designer: {
-          id: nanoid('1234567890', 6),
-          createdAt: getTimestamp(),
-          updatedAt: getTimestamp(),
-        },
+        $designer: getDesignerId(),
       },
       onClick: subMenu ? undefined : handleClick,
     }));

Composer/packages/extensions/obiformeditor/src/FormEditor.tsx

@@ -4,11 +4,11 @@ import { JSONSchema6Definition, JSONSchema6 } from 'json-schema';
 import merge from 'lodash.merge';
 import get from 'lodash.get';
 import isEqual from 'lodash.isequal';
+import { appschema } from 'shared';
 
 import Form from './Form';
 import { uiSchema } from './schema/uischema';
-import { appschema } from './schema/appschema';
-import { getMemoryOptions, getTimestamp } from './Form/utils';
+import { getMemoryOptions } from './Form/utils';
 import { DialogInfo, FormMemory, FormData, ShellApi, EditorSchema, LuFile, LgFile } from './types';
 
 const getType = (data: FormData): string | undefined => {
@@ -33,14 +33,6 @@ export interface FormEditorProps {
   shellApi: ShellApi;
 }
 
-function updateDesigner(data) {
-  if (data && data.$designer) {
-    data.$designer.updatedAt = getTimestamp();
-  }
-
-  return data;
-}
-
 export const FormEditor: React.FunctionComponent<FormEditorProps> = props => {
   const { data, schemas, memory, dialogs, shellApi } = props;
   const type = getType(data);
@@ -79,7 +71,7 @@ export const FormEditor: React.FunctionComponent<FormEditorProps> = props => {
 
   const onChange = newValue => {
     if (!isEqual(newValue.formData, data)) {
-      props.onChange(updateDesigner(newValue.formData));
+      props.onChange(newValue.formData);
     }
   };
 

Composer/packages/extensions/obiformeditor/src/schema/uischema.ts

@@ -1,8 +1,6 @@
-import { SDKTypes } from 'shared-menus';
+import { SDKTypes, PROMPT_TYPES } from 'shared';
 import { UiSchema } from '@bfcomposer/react-jsonschema-form';
 
-import { PROMPT_TYPES } from './appschema';
-
 const globalHidden = ['property', 'inputBindings', 'outputBinding', 'id', 'tags'];
 
 const promptFieldsSchemas = PROMPT_TYPES.reduce((schemas, type) => {

Composer/packages/extensions/visual-designer/package.json

@@ -56,7 +56,7 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-testing-library": "^6.0.2",
-    "shared-menus": "0.0.0",
+    "shared": "0.0.0",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.3"
   },

Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import formatMessage from 'format-message';
-import { createStepMenu, DialogGroup } from 'shared-menus';
+import { createStepMenu, DialogGroup } from 'shared';
 import { IContextualMenu } from 'office-ui-fabric-react';
 
 import { EdgeAddButtonSize } from '../../constants/ElementSizes';

Composer/packages/extensions/visual-designer/src/components/menus/EventMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStepMenu, DialogGroup } from 'shared-menus';
+import { createStepMenu, DialogGroup } from 'shared';
 
 import { IconMenu } from './IconMenu';