Merge branch 'master' into managed-lg

microsoft · Feb 13, 2020 · fc2e1a3 · fc2e1a3
2 parents 6fdba8d + 0b680f8
commit fc2e1a3
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 85 deletions.
diff --git a/Composer/packages/client/src/utils/convertUtils/parsePathToFocused.ts b/Composer/packages/client/src/utils/convertUtils/parsePathToFocused.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import { FieldNames } from '@bfc/shared';
+import values from 'lodash/values';
 
 import { parsePathToSelected } from './parsePathToSelected';
 
@@ -12,7 +13,15 @@ export function parsePathToFocused(path: string): string {
 
   const list = path.split('.');
 
-  const matchActions = list.filter(x => x.startsWith(FieldNames.Actions) || x.startsWith(FieldNames.ElseActions));
+  const matchActions = list.filter(x => {
+    if (/\[|\]/.test(x)) {
+      const reg = /\[.*\]/;
+      x = x.replace(reg, '');
+      return x !== FieldNames.Events && values(FieldNames).indexOf(x) > -1;
+    }
+
+    return false;
+  });
 
   if (matchActions.length > 0) {
     return `${trigger}.${matchActions.join('.')}`;

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ArrayItem.tsx b/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>
   );

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx b/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' }}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx b/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' }}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/styles.ts b/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;
   }

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/index.tsx b/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}

diff --git a/Composer/packages/extensions/obiformeditor/src/schema/uischema.ts b/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,
           },

diff --git a/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts b/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts
@@ -10,6 +10,7 @@ import {
   LoopIconSize,
   ChoiceInputSize,
   ChoiceInputMarginTop,
+  ChoiceInputMarginBottom,
 } from '../../src/constants/ElementSizes';
 
 describe('measureJsonBoundary', () => {
@@ -34,13 +35,23 @@ describe('measureJsonBoundary', () => {
     );
   });
   it("should return boundary whose size is determined by the data's choices when json.$type is choiceInput", () => {
-    const data: { [key: string]: any } = {
+    const data1: { [key: string]: any } = {
       $type: ObiTypes.ChoiceInputDetail,
       choices: [{ value: '1' }],
     };
 
-    expect(measureJsonBoundary(data)).toEqual(
-      new Boundary(InitNodeSize.width, InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop)
+    const data2: { [key: string]: any } = {
+      $type: ObiTypes.ChoiceInputDetail,
+      choices: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }],
+    };
+    expect(measureJsonBoundary(data1)).toEqual(
+      new Boundary(
+        InitNodeSize.width,
+        InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop + ChoiceInputMarginBottom
+      )
+    );
+    expect(measureJsonBoundary(data2)).toEqual(
+      new Boundary(InitNodeSize.width, InitNodeSize.height + 4 * (ChoiceInputSize.height + ChoiceInputMarginTop))
     );
   });
 });
diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts
@@ -29,11 +29,12 @@ export const TriggerSize = InitNodeSize;
 export const TerminatorSize = { width: 14, height: 14 };
 
 export const ChoiceInputSize = {
-  width: 145,
+  width: 155,
   height: 22,
 };
 
-export const ChoiceInputMarginTop = 5;
+export const ChoiceInputMarginTop = 8;
+export const ChoiceInputMarginBottom = 10;
 
 export const EventNodeSize = {
   width: 240,

diff --git a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
@@ -9,6 +9,7 @@ import {
   LoopIconSize,
   ChoiceInputSize,
   ChoiceInputMarginTop,
+  ChoiceInputMarginBottom,
   IconBrickSize,
 } from '../constants/ElementSizes';
 import { transformIfCondtion } from '../transformers/transformIfCondition';
@@ -64,7 +65,9 @@ export function measureChoiceInputDetailBoundary(data): Boundary {
   const height =
     InitNodeSize.height +
     (data.choices && Array.isArray(data.choices)
-      ? (data.choices.length <= 4 ? data.choices.length : 4) * (ChoiceInputSize.height + ChoiceInputMarginTop)
+      ? data.choices.length < 4
+        ? data.choices.length * (ChoiceInputSize.height + ChoiceInputMarginTop) + ChoiceInputMarginBottom
+        : 4 * (ChoiceInputSize.height + ChoiceInputMarginTop)
       : 0);
   return new Boundary(width, height);
 }

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ChoiceInput.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ChoiceInput.tsx
@@ -21,7 +21,7 @@ export const ChoiceInputChoices = ({ choices }) => {
   }
 
   return (
-    <div data-testid="ChoiceInput" css={{ padding: '0 0 8px 45px' }}>
+    <div data-testid="ChoiceInput" css={{ padding: '0 0 16px 29px' }}>
       {choices.map(({ value }, index) => {
         if (index < 3) {
           return (
@@ -60,7 +60,7 @@ export const ChoiceInputChoices = ({ choices }) => {
             textAlign: 'center',
             fontFamily: 'Segoe UI',
             fontSize: '12px',
-            lineHeight: '19px',
+            lineHeight: '14px',
             boxSizing: 'border-box',
           }}
         >