fix: Updated regex recognizer UI

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

@@ -10,7 +10,7 @@ import { ArrayFieldItem } from '@bfcomposer/react-jsonschema-form';
 import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
 
-import { arrayItem, arrayItemField } from './styles';
+import { arrayItem } from './styles';
 
 const ArrayItem: React.FC<ArrayFieldItem> = props => {
   const { children, hasMoveUp, hasMoveDown, hasRemove, onReorderClick, onDropIndexClick, index } = props;
@@ -47,13 +47,16 @@ const ArrayItem: React.FC<ArrayFieldItem> = props => {
 
   return (
     <div css={arrayItem}>
-      <div css={arrayItemField}>{children}</div>
+      {children}
       <IconButton
         menuProps={{ items: contextItems }}
         menuIconProps={{ iconName: 'MoreVertical' }}
         ariaLabel={formatMessage('Item Actions')}
         data-testid="ArrayItemContextMenu"
-        styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }}
+        styles={{
+          menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 },
+          root: { margin: 'auto 0' },
+        }}
       />
     </div>
   );

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

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { ArrayFieldTemplateProps } from '@bfcomposer/react-jsonschema-form';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
@@ -16,13 +16,7 @@ import { BaseField } from '../fields/BaseField';
 import { WidgetLabel } from '../widgets/WidgetLabel';
 
 import ArrayItem from './ArrayItem';
-import {
-  arrayItemInputFieldContainer,
-  arrayItemField,
-  objectItemLabel,
-  objectItemInputField,
-  objectItemValueLabel,
-} from './styles';
+import { arrayItemInputFieldContainer, objectItemLabel, objectItemInputField, objectItemValueLabel } from './styles';
 
 const ObjectArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
   const { canAdd, idSchema, items, onAddClick, schema = {}, uiSchema = {} } = props;
@@ -65,13 +59,14 @@ const ObjectArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
     [uiSchema]
   );
 
+  const objectProperties = useMemo(() => Object.keys(properties).filter(isVisible), [properties]);
+
   return (
     <BaseField {...props}>
       {object && (
         <div css={objectItemLabel}>
-          {Object.keys(properties)
-            .filter(isVisible)
-            .map((key, index) => {
+          {objectProperties.length > 1 &&
+            objectProperties.map((key, index) => {
               const { description, title } = properties[key] as JSONSchema6;
               const { __id = '' } = idSchema[key] || {};
 
@@ -90,40 +85,33 @@ const ObjectArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
         ))}
         {canAdd &&
           (!object ? (
-            <DefaultButton
-              type="button"
-              onClick={onAddClick}
-              data-testid="ArrayContainerAdd"
-              styles={{ root: { marginTop: '14px' } }}
-            >
-              {formatMessage('Add')}
-            </DefaultButton>
+            <div css={arrayItemInputFieldContainer}>
+              <DefaultButton type="button" onClick={onAddClick} data-testid="ArrayContainerAdd">
+                {formatMessage('Add')}
+              </DefaultButton>
+            </div>
           ) : (
             <div css={arrayItemInputFieldContainer}>
-              <div css={arrayItemField}>
-                {Object.keys(properties)
-                  .filter(isVisible)
-                  .map((property, index, items) => (
-                    <div css={objectItemInputField} key={index}>
-                      <TextField
-                        autoComplete="off"
-                        onChange={handleChange(property)}
-                        onKeyDown={handleKeyDown}
-                        placeholder={`${formatMessage('Add new')} ${property}`}
-                        value={value[property] || ''}
-                        iconProps={{
-                          ...(index === items.length - 1
-                            ? {
-                                iconName: 'ReturnKey',
-                                style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-                              }
-                            : {}),
-                        }}
-                        data-testid="object-array-text-input"
-                      />
-                    </div>
-                  ))}
-              </div>
+              {objectProperties.map((property, index, items) => (
+                <div css={objectItemInputField} key={index}>
+                  <TextField
+                    autoComplete="off"
+                    onChange={handleChange(property)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={`${formatMessage('Add new')} ${property}`}
+                    value={value[property] || ''}
+                    iconProps={{
+                      ...(index === items.length - 1
+                        ? {
+                            iconName: 'ReturnKey',
+                            style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
+                          }
+                        : {}),
+                    }}
+                    data-testid="object-array-text-input"
+                  />
+                </div>
+              ))}
               <IconButton
                 disabled={true}
                 menuIconProps={{ iconName: 'MoreVertical' }}

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

@@ -12,7 +12,7 @@ import formatMessage from 'format-message';
 
 import { BaseField } from '../fields/BaseField';
 
-import { arrayItemField, arrayItemInputFieldContainer } from './styles';
+import { arrayItemInputFieldContainer } from './styles';
 import ArrayItem from './ArrayItem';
 
 const StringArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
@@ -44,19 +44,17 @@ const StringArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
       </div>
       {canAdd && (
         <div css={arrayItemInputFieldContainer}>
-          <div css={arrayItemField}>
-            <TextField
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              value={value}
-              iconProps={{
-                iconName: 'ReturnKey',
-                style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
-              }}
-              styles={{ root: { width: '100%' } }}
-              data-testid="string-array-text-input"
-            />
-          </div>
+          <TextField
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            value={value}
+            iconProps={{
+              iconName: 'ReturnKey',
+              style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
+            }}
+            styles={{ root: { width: '100%' } }}
+            data-testid="string-array-text-input"
+          />
           <IconButton
             disabled={true}
             menuIconProps={{ iconName: 'MoreVertical' }}

Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.ts

@@ -6,36 +6,26 @@ import { NeutralColors } from '@uifabric/fluent-theme';
 
 export const arrayItem = css`
   display: flex;
-  padding: 7px 0;
+  padding: 4px 0;
 
-  border-bottom: 1px solid ${NeutralColors.gray30};
-
-  &:first-type-of {
-    border-top: 1px solid ${NeutralColors.gray30};
-  }
-`;
-
-export const arrayItemField = css`
-  flex: 1;
-  display: flex;
-  min-width: 0;
+  border-top: 1px solid ${NeutralColors.gray30};
 `;
 
 export const arrayItemInputFieldContainer = css`
+  border-top: 1px solid ${NeutralColors.gray30};
   display: flex;
-  padding: 7px 0;
+  padding: 8px 0;
 `;
 
 export const objectItemLabel = css`
-  border-bottom: 1px solid ${NeutralColors.gray30};
   display: flex;
 `;
 
 export const objectItemValueLabel = css`
   color: ${NeutralColors.gray130};
   flex: 1;
   font-size: 14px;
-  margin-left: 7px;
+  margin-left: 4px;
   & + & {
     margin-left: 20px;
   }

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

@@ -137,7 +137,6 @@ export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props
     <div className="RecognizerField">
       <BaseField {...props}>
         <Dropdown
-          styles={{ root: { paddingRight: '47px' } }}
           label={formatMessage('Recognizer Type')}
           onChange={handleChange}
           options={options}

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

@@ -48,6 +48,7 @@ export const uiSchema: { [key in SDKTypes]?: UiSchema } = {
       entities: {
         items: {
           'ui:options': {
+            displayLabel: false,
             hideLabel: true,
             hideDescription: true,
           },