feat: update recognizer UI in form

Composer/packages/adaptive-form/src/components/fields/RecognizerField/RecognizerField.tsx

@@ -1,59 +1,160 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React, { useMemo } from 'react';
+import { jsx, css } from '@emotion/core';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { FieldProps, useShellApi, useRecognizerConfig } from '@bfc/extension-client';
 import { MicrosoftIRecognizer } from '@bfc/shared';
-import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import formatMessage from 'format-message';
+import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { CheckboxVisibility, DetailsList, SelectionMode, Selection } from 'office-ui-fabric-react/lib/DetailsList';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 
 import { FieldLabel } from '../../FieldLabel';
 
 import { useMigrationEffect } from './useMigrationEffect';
-import { mapDropdownOptionToRecognizerSchema } from './mappers';
-import { getDropdownOptions } from './getDropdownOptions';
+import { mapListItemsToRecognizerSchema } from './mappers';
+import { getDetailsListItems } from './getDetailsListItems';
 
+const recognizerStyle = css`
+  display: flex;
+  justify-content: space-between;
+  margin: 5px 0px 10px 0px;
+`;
+const AzureBlue = '#0078D4';
+const recognizerContainer = css`
+  position: relative;
+  height: 500px;
+  border-top: 1px solid #f3f2f1;
+  border-bottom: 1px solid #f3f2f1;
+`;
+const learnRecognizerUrl = 'https://docs.microsoft.com/en-us/composer/concept-dialog?tabs=v2x#recognizer';
+
+export type RecognizerListItem = {
+  key: string;
+  text: string;
+  description: string;
+};
 export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (props) => {
   const { value, id, label, description, uiOptions, required, onChange } = props;
   const { shellApi, ...shellData } = useShellApi();
   const { telemetryClient } = shellApi;
+  const [showDialog, setShowDialog] = useState(false);
+  const [selectedRecognizer, setSelectedRecognizer] = useState<RecognizerListItem>();
 
   useMigrationEffect(value, onChange);
   const { recognizers: recognizerConfigs, currentRecognizer } = useRecognizerConfig();
-  const dropdownOptions = useMemo(() => getDropdownOptions(recognizerConfigs, shellData, shellApi), [
+  const detailsListItems = useMemo(() => getDetailsListItems(recognizerConfigs, shellData, shellApi), [
     recognizerConfigs,
   ]);
 
   const RecognizerEditor = currentRecognizer?.recognizerEditor;
   const widget = RecognizerEditor ? <RecognizerEditor {...props} /> : null;
 
-  const submit = (_, option?: IDropdownOption): void => {
-    if (!option) return;
+  const selection = useMemo(() => {
+    return new Selection({
+      onSelectionChanged: () => {
+        const selectedItems = selection.getSelection() as RecognizerListItem[];
+        if (selectedItems?.length > 0) {
+          setSelectedRecognizer(selectedItems[0]);
+        }
+      },
+    });
+  }, [setSelectedRecognizer]);
 
-    const recognizerDefinition = mapDropdownOptionToRecognizerSchema(option, recognizerConfigs);
+  const submit = useCallback((): void => {
+    if (!selectedRecognizer) return;
+
+    const recognizerDefinition = mapListItemsToRecognizerSchema(selectedRecognizer, recognizerConfigs);
 
     const seedNewRecognizer = recognizerDefinition?.seedNewRecognizer;
     const recognizerInstance =
       typeof seedNewRecognizer === 'function'
         ? seedNewRecognizer(shellData, shellApi)
-        : { $kind: option.key as string, intents: [] }; // fallback to default Recognizer instance;
+        : { $kind: selectedRecognizer.key as string, intents: [] }; // fallback to default Recognizer instance;
     onChange(recognizerInstance);
-    telemetryClient?.track('RecognizerChanged', { recognizer: option.key as string });
-  };
+    telemetryClient?.track('RecognizerChanged', { recognizer: selectedRecognizer.key as string });
+  }, [selectedRecognizer, recognizerConfigs, shellData, shellApi]);
+
+  useEffect(() => {
+    if (selection && currentRecognizer) {
+      selection.setItems(detailsListItems, false);
+      selection.setKeySelected(currentRecognizer.id, true, false);
+    }
+  }, [detailsListItems]);
 
   return (
     <React.Fragment>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
-      <Dropdown
-        ariaLabel={formatMessage('Recognizer Type')}
-        data-testid="recognizerTypeDropdown"
-        label={formatMessage('Recognizer Type')}
-        options={dropdownOptions}
-        responsiveMode={ResponsiveMode.large}
-        selectedKey={currentRecognizer?.id}
-        onChange={submit}
-      />
+      <div style={{ fontWeight: 600 }}>{formatMessage('Recognizer/Dispatch type')}</div>
+      <div css={recognizerStyle} data-testid="recognizerTypeList">
+        <span>
+          {typeof currentRecognizer?.displayName === 'function'
+            ? currentRecognizer?.displayName({})
+            : currentRecognizer?.displayName}
+        </span>
+        <span data-testid="openRecognizerDialog" style={{ color: AzureBlue }} onClick={() => setShowDialog(true)}>
+          {formatMessage('Change')}
+        </span>
+      </div>
+      <Dialog
+        dialogContentProps={{
+          type: DialogType.normal,
+          title: formatMessage('Choose a recognizer type'),
+        }}
+        hidden={!showDialog}
+        minWidth={450}
+        modalProps={{
+          isBlocking: true,
+          isClickableOutsideFocusTrap: true,
+        }}
+        onDismiss={() => setShowDialog(false)}
+      >
+        <div css={recognizerContainer}>
+          <ScrollablePane
+            scrollbarVisibility={ScrollbarVisibility.auto}
+            styles={{ root: { width: '100%', height: 'inherit', position: 'relative' } }}
+          >
+            <DetailsList
+              checkboxVisibility={CheckboxVisibility.always}
+              columns={[
+                {
+                  key: 'recognizer',
+                  name: 'Recognizer type',
+                  minWidth: 70,
+                  onRender: (item) => {
+                    return (
+                      <div>
+                        <div style={{ fontWeight: 'bold' }}>{item.text}</div>
+                        <div style={{ whiteSpace: 'normal' }}>{item.description}</div>
+                      </div>
+                    );
+                  },
+                },
+              ]}
+              isHeaderVisible={false}
+              items={detailsListItems}
+              selection={selection}
+              selectionMode={SelectionMode.single}
+            />
+          </ScrollablePane>
+        </div>
+        <DialogFooter>
+          <Link href={learnRecognizerUrl} styles={{ root: { fontSize: '12px', float: 'left' } }} target="_blank">
+            {formatMessage('Learn more about recognizers')}
+          </Link>
+          <DefaultButton text={formatMessage('Cancel')} onClick={() => setShowDialog(false)} />
+          <PrimaryButton
+            text={formatMessage('Done')}
+            onClick={() => {
+              setShowDialog(false);
+              submit();
+            }}
+          />
+        </DialogFooter>
+      </Dialog>
       {widget}
     </React.Fragment>
   );

Composer/packages/adaptive-form/src/components/fields/RecognizerField/getDropdownOptions.ts → Composer/packages/adaptive-form/src/components/fields/RecognizerField/getDetailsListItems.ts

@@ -5,7 +5,7 @@ import { RecognizerSchema, FallbackRecognizerKey, ShellApi, ShellData } from '@b
 import { checkForPVASchema } from '@bfc/shared';
 
 import { recognizerOrderMap } from './defaultRecognizerOrder';
-import { mapRecognizerSchemaToDropdownOption } from './mappers';
+import { mapRecognizerSchemaToListItems } from './mappers';
 
 const getRankScore = (r: RecognizerSchema, shellData: ShellData, shellApi: ShellApi) => {
   // Always put disabled recognizer behind. Handle 'disabled' before 'default'.
@@ -17,7 +17,7 @@ const getRankScore = (r: RecognizerSchema, shellData: ShellData, shellApi: Shell
   return recognizerOrderMap[r.id] ?? Number.MAX_VALUE - 1;
 };
 
-export const getDropdownOptions = (configs: RecognizerSchema[], shellData: ShellData, shellApi: ShellApi) => {
+export const getDetailsListItems = (configs: RecognizerSchema[], shellData: ShellData, shellApi: ShellApi) => {
   const isPVASchema = checkForPVASchema(shellData.schemas?.sdk);
   let recognizerConfigs: RecognizerSchema[] = configs;
   if (isPVASchema) {
@@ -31,5 +31,5 @@ export const getDropdownOptions = (configs: RecognizerSchema[], shellData: Shell
     .sort((r1, r2) => {
       return getRankScore(r1, shellData, shellApi) - getRankScore(r2, shellData, shellApi);
     })
-    .map(mapRecognizerSchemaToDropdownOption);
+    .map(mapRecognizerSchemaToListItems);
 };

Composer/packages/adaptive-form/src/components/fields/RecognizerField/mappers.ts

@@ -2,14 +2,16 @@
 // Licensed under the MIT License.
 
 import { RecognizerSchema } from '@bfc/extension-client';
-import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 
-export const mapDropdownOptionToRecognizerSchema = (option: IDropdownOption, recognizerConfigs: RecognizerSchema[]) => {
-  return recognizerConfigs.find((r) => r.id === option.key);
+import { RecognizerListItem } from './RecognizerField';
+
+export const mapListItemsToRecognizerSchema = (item: RecognizerListItem, recognizerConfigs: RecognizerSchema[]) => {
+  return recognizerConfigs.find((r) => r.id === item.key);
 };
 
-export const mapRecognizerSchemaToDropdownOption = (recognizerSchema: RecognizerSchema): IDropdownOption => {
-  const { id, displayName } = recognizerSchema;
+export const mapRecognizerSchemaToListItems = (recognizerSchema: RecognizerSchema) => {
+  const { id, displayName, description } = recognizerSchema;
   const recognizerName = typeof displayName === 'function' ? displayName({}) : displayName;
-  return { key: id, text: recognizerName || id };
+  const recognizerDescription = typeof description === 'function' ? description({}) : description;
+  return { key: id, text: recognizerName || id, description: recognizerDescription };
 };

Composer/packages/adaptive-form/src/components/fields/__tests__/RecognizerField.test.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { render, fireEvent, screen } from '@botframework-composer/test-utils';
+import { render, fireEvent, screen, getAllByText } from '@botframework-composer/test-utils';
 import { useRecognizerConfig, useShellApi } from '@bfc/extension-client';
 import assign from 'lodash/assign';
 
@@ -37,12 +37,14 @@ describe('<RecognizerField />', () => {
       {
         id: 'one',
         displayName: 'One Recognizer',
+        description: 'test1',
         isSelected: () => false,
         seedNewRecognizer: handleChange,
       },
       {
         id: 'two',
         displayName: 'Two Recognizer',
+        description: 'test2',
         isSelected: () => true,
         seedNewRecognizer: jest.fn(),
       },
@@ -51,12 +53,17 @@ describe('<RecognizerField />', () => {
       recognizers,
       currentRecognizer: recognizers[1],
     });
-    const { getByTestId } = renderSubject({ value: { $kind: 'two' } });
-    const dropdown = getByTestId('recognizerTypeDropdown');
-    expect(dropdown).toHaveTextContent('Two Recognizer');
-    fireEvent.click(dropdown);
+    const { getByText, getAllByText } = renderSubject({ value: { $kind: 'two' } });
+    // two recognizer already choosed
+    expect(getByText('Two Recognizer')).not.toBeNull();
+
+    // click change recognizer, pop up dialog
+    fireEvent.click(getByText('Change'));
+    expect(getByText('One Recognizer')).not.toBeNull();
+    expect(getAllByText('Two Recognizer').length).toBe(2);
 
     fireEvent.click(screen.getByText('One Recognizer'));
+    fireEvent.click(screen.getByText('Done'));
     expect(handleChange).toHaveBeenCalled();
   });
 });

Composer/packages/client/__tests__/plugins.test.ts

@@ -53,25 +53,25 @@ describe('mergePluginConfigs', () => {
     const config1 = {
       uiSchema: {
         [SDKKinds.RegexRecognizer]: {
-          recognizer: { displayName: 'recognizer1' },
+          recognizer: { displayName: 'recognizer1', description: 'recognizer1' },
         },
       },
     };
 
     const config2 = {
       uiSchema: {
         [SDKKinds.LuisRecognizer]: {
-          recognizer: { displayName: 'recognizer2' },
+          recognizer: { displayName: 'recognizer2', description: 'recognizer2' },
         },
       },
     };
 
     expect(mergePluginConfigs(config1, config2).uiSchema).toEqual({
       [SDKKinds.RegexRecognizer]: {
-        recognizer: { displayName: 'recognizer1' },
+        recognizer: { displayName: 'recognizer1', description: 'recognizer1' },
       },
       [SDKKinds.LuisRecognizer]: {
-        recognizer: { displayName: 'recognizer2' },
+        recognizer: { displayName: 'recognizer2', description: 'recognizer2' },
       },
     });
   });

Composer/packages/extension-client/src/types/formSchema.ts

@@ -82,6 +82,8 @@ export type RecognizerSchema = {
   disabled?: boolean | ((shellData: ShellData, shellApi: ShellApi) => boolean);
   /** Display name used in the UI. Recommended to use function over static string to enable multi-locale feature. */
   displayName: UIOptionValue<string>;
+  /** Description used in the UI. describe the usage of this recognizer */
+  description: UIOptionValue<string>;
   /** An inline editor to edit an intent. If none provided, users will not be able to edit. */
   intentEditor?: FieldWidget | string;
   /** A function invoked with the form data to determine if this is the currently selected recognizer */

Composer/packages/integration-tests/cypress/integration/DesignPage.spec.ts

@@ -73,8 +73,10 @@ context('breadcrumb', () => {
   it('can create different kinds of triggers ', () => {
     cy.visitPage('Create');
     cy.findByTestId('DialogHeader-TestBot_TestSample').click();
-    cy.findByTestId('recognizerTypeDropdown').click();
-    cy.findByText('Regular expression recognizer').click();
+    // cy.findByText('Change').click();
+    cy.findByTestId('openRecognizerDialog').click();
+    cy.findByText('Regular expression').click();
+    cy.findByText('Done').click();
 
     //onintent trigger
     cy.findByTestId('DialogHeader-TestBot_TestSample').within(() => {