fix: unable to clear form title (microsoft#2885)

* fix todo luis bot designer field * move key up to design page We need to remount the property editor every time the path changes * memoize starting title in form title * remove number from sample name * update send activity label to send a response * debounce saving data to shell for property editor * use $kind as form subtitle unless overridden * revert showing sdk kind for subtitle * update snapshot Co-authored-by: Ben Yackley <61990921+beyackle@users.noreply.github.com>
lei9444 · May 5, 2020 · e9461ae · e9461ae
1 parent 4482946
commit e9461ae
Show file tree

Hide file tree

Showing 7 changed files with 495 additions and 510 deletions.
diff --git a/Composer/packages/client/src/pages/design/PropertyEditor.tsx b/Composer/packages/client/src/pages/design/PropertyEditor.tsx
@@ -106,10 +106,6 @@ const PropertyEditor: React.FC = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleDataChange = (newData?: any) => {
     setLocalData(newData);
-
-    if (!isEqual(formData, newData)) {
-      shellApi.saveData(newData, focusedSteps[0]);
-    }
   };
 
   return (
@@ -122,12 +118,7 @@ const PropertyEditor: React.FC = () => {
       }}
       onResizeStop={handleResize}
     >
-      <div
-        css={formEditor}
-        aria-label={formatMessage('form editor')}
-        data-testid="PropertyEditor"
-        key={shellData.focusPath}
-      >
+      <div css={formEditor} aria-label={formatMessage('form editor')} data-testid="PropertyEditor">
         <Extension shell={shellApi} shellData={shellData} plugins={plugins}>
           <AdaptiveForm
             errors={errors}

diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
@@ -85,7 +85,7 @@ const getTabFromFragment = () => {
 const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string }>> = props => {
   const { state, actions } = useContext(StoreContext);
   const visualPanelRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
-  const { dialogs, designPageLocation, breadcrumb, visualEditorSelection, projectId, schemas } = state;
+  const { dialogs, designPageLocation, breadcrumb, visualEditorSelection, projectId, schemas, focusPath } = state;
   const {
     removeDialog,
     setDesignPageLocation,
@@ -424,7 +424,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                   <VisualEditor openNewTriggerModal={openNewTriggerModal} />
                 )}
               </div>
-              <PropertyEditor />
+              <PropertyEditor key={focusPath} />
             </div>
           </Conversation>
         </div>

diff --git a/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx b/Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/FormTitle.tsx
@@ -3,11 +3,10 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FontWeights } from '@uifabric/styling';
 import { FontSizes } from '@uifabric/fluent-theme';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import startCase from 'lodash/startCase';
 import formatMessage from 'format-message';
 import { UIOptions, JSONSchema7 } from '@bfc/extension';
 
@@ -19,35 +18,32 @@ interface FormTitleProps {
   description?: string;
   formData: any;
   id: string;
-  name?: string;
-  onChange?: (data: any) => void;
+  onChange: ($designer: object) => void;
   schema: JSONSchema7;
   title?: string;
   uiOptions?: UIOptions;
 }
 
 const FormTitle: React.FC<FormTitleProps> = props => {
-  const { name, description, schema, formData, uiOptions = {} } = props;
+  const { description, schema, formData, uiOptions = {} } = props;
 
   const handleTitleChange = (newTitle?: string): void => {
-    if (props.onChange) {
-      props.onChange({
-        ...formData.$designer,
-        name: newTitle,
-      });
-    }
+    props.onChange({
+      ...formData.$designer,
+      name: newTitle,
+    });
   };
 
   const uiLabel = typeof uiOptions?.label === 'function' ? uiOptions.label(formData) : uiOptions.label;
   const uiSubtitle = typeof uiOptions?.subtitle === 'function' ? uiOptions.subtitle(formData) : uiOptions.subtitle;
-  const getTitle = (): string => {
+  const initialValue = useMemo(() => {
     const designerName = formData.$designer?.name;
 
-    return designerName || uiLabel || schema.title || startCase(name);
-  };
+    return designerName || uiLabel || schema.title;
+  }, [formData.$designer?.name, uiLabel, schema.title]);
 
   const getHelpLinkLabel = (): string => {
-    return (uiLabel || schema.title || startCase(name) || '').toLowerCase();
+    return (uiLabel || schema.title || '').toLowerCase();
   };
 
   const getSubTitle = (): string => {
@@ -86,7 +82,7 @@ const FormTitle: React.FC<FormTitleProps> = props => {
             root: { margin: '5px 0 7px -9px' },
           }}
           uiOptions={{}}
-          value={getTitle()}
+          value={initialValue}
           onChange={handleTitleChange}
           ariaLabel={formatMessage('form title')}
         />

diff --git a/Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts b/Composer/packages/extensions/adaptive-form/src/defaultUiSchema.ts
@@ -256,7 +256,7 @@ const DefaultUISchema: UISchema = {
     order: ['dialog', 'options', 'includeActivity', '*'],
   },
   [SDKKinds.SendActivity]: {
-    label: () => formatMessage('Send an Activity'),
+    label: () => formatMessage('Send a response'),
     helpLink: 'https://aka.ms/bfc-send-activity',
     order: ['activity', '*'],
   },