fix: move field descriptions into tooltip (#1858)

* Moved description to tooltip * Updated tests and fixed regex recognizers entity fields * Removed comment
microsoft · Feb 3, 2020 · 983b29e · 983b29e
1 parent 8cec778
commit 983b29e
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 31 deletions.
diff --git a/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx b/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/ObjectArray.test.tsx
@@ -37,11 +37,13 @@ describe('<ObjectArray />', () => {
     expect(title).toBeTruthy();
   });
 
-  it('renders a DescriptionField', async () => {
-    const { findByText } = renderDefault();
+  it('renders a DescriptionField in tooltip', async () => {
+    const { baseElement, findAllByRole } = renderDefault();
+    const [icon] = await findAllByRole('presentation');
+
+    fireEvent.mouseOver(icon);
 
-    const description = await findByText('My array description.');
-    expect(description).toBeTruthy();
+    expect(baseElement).toHaveTextContent('My array description.');
   });
 
   it('renders a StringItem for each item', async () => {

diff --git a/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx b/.../packages/extensions/obiformeditor/__tests__/Form/ArrayFieldTemplate/StringArray.test.tsx
@@ -37,11 +37,13 @@ describe('<StringArray />', () => {
     expect(title).toBeTruthy();
   });
 
-  it('renders a DescriptionField', async () => {
-    const { findByText } = renderDefault();
+  it('renders a DescriptionField in tooltip', async () => {
+    const { baseElement, findAllByRole } = renderDefault();
+    const [icon] = await findAllByRole('presentation');
+
+    fireEvent.mouseOver(icon);
 
-    const description = await findByText('My array description.');
-    expect(description).toBeTruthy();
+    expect(baseElement).toHaveTextContent('My array description.');
   });
 
   it('renders a StringItem for each item', async () => {

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
@@ -9,6 +9,7 @@ import get from 'lodash/get';
 import classnames from 'classnames';
 
 import { FormContext } from '../types';
+import { WidgetLabel } from '../widgets/WidgetLabel';
 
 import { RootField } from './RootField';
 
@@ -75,23 +76,13 @@ export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
   ) : (
     <div className={classnames({ BaseField: !displayInline }, className)} key={key} id={key.replace(/\.|#/g, '')}>
       {!hideDescription && (
-        <div>
-          <h3 className="BaseFieldTitle">{getTitle()}</h3>
-          {descriptionOverride !== false && (descriptionOverride || description || schema.description) && (
-            <p className="BaseFieldDescription">
-              {getDescription()}
-              {helpLink && helpLinkText && (
-                <>
-                  <br />
-                  <br />
-                  <a href={helpLink} target="_blank" rel="noopener noreferrer">
-                    {helpLinkText}
-                  </a>
-                </>
-              )}
-            </p>
-          )}
-        </div>
+        <WidgetLabel
+          label={getTitle()}
+          description={getDescription()}
+          helpLink={helpLink}
+          helpLinkText={helpLinkText}
+          id={key}
+        />
       )}
       <div className={classnames({ BaseFieldInline: displayInline })}>{children}</div>
     </div>

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/types.ts b/Composer/packages/extensions/obiformeditor/src/Form/types.ts
@@ -40,6 +40,7 @@ export interface BFDWidgetProps extends Partial<WidgetProps> {
     hideLabel?: boolean;
     transparentBorder?: boolean;
   };
+  hideLabel?: boolean;
 }
 
 export interface SelectWidgetProps extends BFDWidgetProps {

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/SelectWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/SelectWidget.tsx
@@ -10,7 +10,7 @@ import { SelectWidgetProps } from '../types';
 import { WidgetLabel } from './WidgetLabel';
 
 export const SelectWidget: React.FunctionComponent<SelectWidgetProps> = props => {
-  const { onChange, onFocus, onBlur, value, options, label, schema, id } = props;
+  const { onChange, onFocus, onBlur, value, options, label, schema, id, hideLabel } = props;
   const { description } = schema;
 
   const handleChange = (_, option?: IDropdownOption) => {
@@ -23,7 +23,7 @@ export const SelectWidget: React.FunctionComponent<SelectWidgetProps> = props =>
 
   return (
     <>
-      <WidgetLabel label={label} description={description} id={id} />
+      {!hideLabel && <WidgetLabel label={label} description={description} id={id} />}
       <Dropdown
         id={id}
         onBlur={() => onBlur && onBlur(id, value)}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
@@ -11,10 +11,12 @@ interface DescriptionCalloutProps {
   title: string;
   description?: string;
   id?: string;
+  helpLink?: string;
+  helpLinkText?: string;
 }
 
 const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
-  const { description, title, id } = props;
+  const { description, title, id, helpLink, helpLinkText } = props;
 
   if (!description) {
     return null;
@@ -27,7 +29,18 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
         onRenderContent: () => (
           <div>
             <h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
-            <p>{description}</p>
+            <p>
+              {description}
+              {helpLink && helpLinkText && (
+                <>
+                  <br />
+                  <br />
+                  <a href={helpLink} target="_blank" rel="noopener noreferrer">
+                    {helpLinkText}
+                  </a>
+                </>
+              )}
+            </p>
           </div>
         ),
       }}
@@ -57,10 +70,12 @@ interface WidgetLabelProps {
   label?: string;
   description?: string;
   inline?: boolean;
+  helpLink?: string;
+  helpLinkText?: string;
 }
 
 export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
-  const { label, description, id, inline } = props;
+  const { label, description, id, inline, helpLink, helpLinkText } = props;
 
   if (!label) {
     return null;
@@ -79,7 +94,13 @@ export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
       }}
     >
       {label}
-      <DescriptionCallout description={description} title={label} id={id} />
+      <DescriptionCallout
+        description={description}
+        title={label}
+        id={id}
+        helpLink={helpLink}
+        helpLinkText={helpLinkText}
+      />
     </Label>
   );
 };
diff --git a/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts b/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts
@@ -45,6 +45,14 @@ export const uiSchema: { [key in SDKTypes]?: UiSchema } = {
           },
         },
       },
+      entities: {
+        items: {
+          'ui:options': {
+            hideLabel: true,
+            hideDescription: true,
+          },
+        },
+      },
     },
     'ui:order': ['recognizer', 'triggers', '*'],
     'ui:hidden': ['triggers', 'autoEndDialog', 'generator', ...globalHidden],