feat: display 6 actions as contentless node (#2108)

* display 6 types as contentless node * fix ut * header color to darker gray * fix UT * put copyright ahead
microsoft · Feb 27, 2020 · 482aaf7 · 482aaf7
1 parent 1112c86
commit 482aaf7
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 15 deletions.
diff --git a/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts b/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts
@@ -11,6 +11,8 @@ import {
   ChoiceInputSize,
   ChoiceInputMarginTop,
   ChoiceInputMarginBottom,
+  StandardNodeWidth,
+  HeaderHeight,
 } from '../../src/constants/ElementSizes';
 
 describe('measureJsonBoundary', () => {
@@ -30,9 +32,7 @@ describe('measureJsonBoundary', () => {
     expect(measureJsonBoundary({ $type: ObiTypes.LoopIndicator })).toEqual(
       new Boundary(LoopIconSize.width, LoopIconSize.height)
     );
-    expect(measureJsonBoundary({ $type: ObiTypes.LogAction })).toEqual(
-      new Boundary(InitNodeSize.width, InitNodeSize.height)
-    );
+    expect(measureJsonBoundary({ $type: ObiTypes.LogAction })).toEqual(new Boundary(StandardNodeWidth, HeaderHeight));
   });
   it("should return boundary whose size is determined by the data's choices when json.$type is choiceInput", () => {
     const data1: { [key: string]: any } = {

diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementColors.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementColors.ts
@@ -8,7 +8,7 @@ const Colors = {
   Black: '#000000',
   AzureGray: '#3C3C41',
   AzureGray2: '#656565',
-  AzureGray3: '#EBEBEB',
+  AzureGray3: '#D7D7D7',
   Gray80: '#B3B0AD',
   Gray60: '#C8C6C4',
 

diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts
@@ -1,8 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+export const StandardNodeWidth = 200;
+export const HeaderHeight = 24;
+
 export const InitNodeSize = {
-  width: 200,
+  width: StandardNodeWidth,
   height: 48,
 };
 

diff --git a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts
@@ -4,6 +4,8 @@
 import { ObiTypes } from '../constants/ObiTypes';
 import { Boundary } from '../models/Boundary';
 import {
+  StandardNodeWidth,
+  HeaderHeight,
   DiamondSize,
   InitNodeSize,
   LoopIconSize,
@@ -124,6 +126,14 @@ export function measureJsonBoundary(json): Boundary {
     case ObiTypes.InvalidPromptBrick:
       boundary = new Boundary(IconBrickSize.width, IconBrickSize.height);
       break;
+    case ObiTypes.EndDialog:
+    case ObiTypes.EndTurn:
+    case ObiTypes.RepeatDialog:
+    case ObiTypes.CancelAllDialogs:
+    case ObiTypes.LogAction:
+    case ObiTypes.TraceActivity:
+      boundary = new Boundary(StandardNodeWidth, HeaderHeight);
+      break;
     default:
       boundary = new Boundary(InitNodeSize.width, InitNodeSize.height);
       break;

diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx
@@ -14,6 +14,7 @@ import { IfConditionWidget } from '../widgets/IfConditionWidget';
 import { SwitchConditionWidget } from '../widgets/SwitchConditionWidget';
 import { ForeachWidget } from '../widgets/ForeachWidget';
 import { ChoiceInputChoices } from '../widgets/ChoiceInput';
+import { ActionHeader } from '../widgets/ActionHeader';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { ObiColors } from '../constants/ElementColors';
 
@@ -136,16 +137,16 @@ export const uiSchema: UISchema = {
     content: data => `Delete ${Array.isArray(data.properties) ? data.properties.length : 0} properties`,
   },
   [SDKTypes.EndDialog]: {
-    'ui:widget': ActionCard,
-    content: 'End this dialog',
+    'ui:widget': ActionHeader,
+  },
+  [SDKTypes.RepeatDialog]: {
+    'ui:widget': ActionHeader,
   },
   [SDKTypes.CancelAllDialogs]: {
-    'ui:widget': ActionCard,
-    content: 'Cancel all active dialogs',
+    'ui:widget': ActionHeader,
   },
   [SDKTypes.EndTurn]: {
-    'ui:widget': ActionCard,
-    content: 'Wait for another message',
+    'ui:widget': ActionHeader,
   },
   [SDKTypes.EmitEvent]: {
     'ui:widget': ActionCard,
@@ -156,12 +157,10 @@ export const uiSchema: UISchema = {
     content: data => data.url,
   },
   [SDKTypes.TraceActivity]: {
-    'ui:widget': ActionCard,
-    content: data => data.name,
+    'ui:widget': ActionHeader,
   },
   [SDKTypes.LogAction]: {
-    'ui:widget': ActionCard,
-    content: data => data.text,
+    'ui:widget': ActionHeader,
   },
   [SDKTypes.EditActions]: {
     'ui:widget': ActionCard,

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx
@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { generateSDKTitle } from '@bfc/shared';
+
+import { WidgetComponent, WidgetContainerProps } from '../schema/uischema.types';
+import { StandardNodeWidth, HeaderHeight } from '../constants/ElementSizes';
+import { ObiColors } from '../constants/ElementColors';
+import { NodeMenu } from '../components/menus/NodeMenu';
+
+export interface ActionHeaderProps extends WidgetContainerProps {
+  title: string;
+  disableSDKTitle?: boolean;
+  menu?: JSX.Element | 'none';
+  colors: {
+    theme: string;
+    icon: string;
+  };
+}
+
+const DefaultColors = {
+  theme: ObiColors.AzureGray3,
+  icon: ObiColors.AzureGray2,
+};
+
+const container = css`
+  cursor: pointer;
+  font-family: Segoe UI;
+  font-size: 12px;
+  line-height: 14px;
+  color: black;
+`;
+
+const header = css`
+  font-size: 12px;
+  font-family: Segoe UI;
+  line-height: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  whitespace: pre;
+`;
+
+export const ActionHeader: WidgetComponent<ActionHeaderProps> = ({
+  id,
+  data,
+  onEvent,
+  title,
+  disableSDKTitle,
+  menu,
+  colors = DefaultColors,
+}) => {
+  const headerContent = disableSDKTitle ? title : generateSDKTitle(data, title);
+
+  return (
+    <div
+      css={css`
+        ${container};
+        width: ${StandardNodeWidth}px;
+        height: ${HeaderHeight}px;
+        background-color: ${colors.theme};
+      `}
+    >
+      <div
+        css={css`
+          ${header};
+          width: calc(100% - 40px);
+          padding: 4px 8px;
+        `}
+      >
+        {headerContent}
+      </div>
+      <div css={{ position: 'absolute', top: 4, right: 0 }}>
+        {menu === 'none' ? null : menu || <NodeMenu id={id} onEvent={onEvent} />}
+      </div>
+    </div>
+  );
+};