feat: implement new action design to improve readability

Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { seedNewDialog, SDKTypes } from '@bfc/shared';
+import { seedNewDialog, SDKTypes, dialogGroups, DialogGroup } from '@bfc/shared';
 
 import { EdgeMenu } from '../../../src/components/menus/EdgeMenu';
 import { JsonBlock } from '../components/json-block';
@@ -18,26 +18,21 @@ export class VisualSDKDemo extends Component {
 
   seedInitialActions() {
     const initialTypes = [
-      SDKTypes.SendActivity,
-      SDKTypes.EditArray,
-      SDKTypes.SetProperties,
-      SDKTypes.SetProperty,
-      SDKTypes.DeleteProperties,
-      SDKTypes.DeleteProperty,
-      SDKTypes.BeginDialog,
-      SDKTypes.EndDialog,
-      SDKTypes.RepeatDialog,
-      SDKTypes.ReplaceDialog,
-      SDKTypes.CancelAllDialogs,
-      SDKTypes.EmitEvent,
+      ...dialogGroups[DialogGroup.RESPONSE].types,
+      ...dialogGroups[DialogGroup.INPUT].types,
+      ...dialogGroups[DialogGroup.BRANCHING].types,
+      ...dialogGroups[DialogGroup.MEMORY].types,
+      ...dialogGroups[DialogGroup.STEP].types,
+      ...dialogGroups[DialogGroup.CODE].types,
+      ...dialogGroups[DialogGroup.LOG].types,
     ];
     const initalActions = initialTypes.map(t => seedNewDialog(t));
     return initalActions;
   }
 
-  appendActionPreview($type) {
+  insertActionPreview($type) {
     this.setState({
-      actions: [...this.state.actions, seedNewDialog($type)],
+      actions: [seedNewDialog($type), ...this.state.actions],
     });
   }
 
@@ -51,7 +46,7 @@ export class VisualSDKDemo extends Component {
         <div className="action-preview--raw">
           <JsonBlock
             styles={{
-              width: '200px',
+              width: '300px',
               height: '80px',
               fontSize: '8px',
             }}
@@ -65,7 +60,7 @@ export class VisualSDKDemo extends Component {
             }}
           />
         </div>
-        <div className="action-preview--visual">
+        <div className="action-preview--visual" style={{ marginLeft: 20 }}>
           {renderUIWidget(uiSchemaPrivider.get(action.$type), {
             id: `actions[${index}]`,
             data: action,
@@ -78,9 +73,9 @@ export class VisualSDKDemo extends Component {
 
   renderActionFactory() {
     return (
-      <div style={{ height: 100, margin: 20 }}>
+      <div style={{ width: '100%', height: 100, margin: 20 }}>
         <h3>Create action by $type</h3>
-        <EdgeMenu id="visual-sdk-demo" onClick={$type => this.appendActionPreview($type)} />
+        <EdgeMenu id="visual-sdk-demo" onClick={$type => this.insertActionPreview($type)} />
       </div>
     );
   }
@@ -90,8 +85,8 @@ export class VisualSDKDemo extends Component {
       <div className="story-container">
         <h1 className="story-title">Visual SDK Demo</h1>
         <div className="story-content" style={{ display: 'flex', flexFlow: 'wrap' }}>
-          {this.state.actions.map((action, index) => this.renderActionPreview(action, index))}
           {this.renderActionFactory()}
+          {this.state.actions.map((action, index) => this.renderActionPreview(action, index))}
         </div>
       </div>
     );

Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx

@@ -1,34 +1,49 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { FC } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { FC } from 'react';
 
 import { SingleLineDiv } from '../elements/styledComponents';
 
-export interface ListOverviewProps {
-  items: string[];
-  renderItem: (item: object | string) => JSX.Element;
-  maxCount: number;
+export interface ListOverviewProps<T> {
+  items: T[];
+  renderItem: (item: T) => JSX.Element;
+  maxCount?: number;
+  itemPadding?: number;
 }
-export const ListOverview: FC<ListOverviewProps> = ({ items, renderItem, maxCount }) => {
-  if (!Array.isArray(items)) {
+
+export const ListOverview: FC<ListOverviewProps<any>> = ({
+  items,
+  renderItem,
+  maxCount = 3,
+  itemPadding: itemInterval = 4,
+}) => {
+  if (!Array.isArray(items) || !items.length) {
     return null;
   }
   return (
-    <div style={{ padding: '0 0 8px 8px' }}>
+    <div
+      className="ListOverview"
+      css={css`
+        width: 100%;
+      `}
+    >
       {items.slice(0, maxCount).map((item, index) => {
         return (
-          <div style={{ marginTop: '8px' }} key={index}>
+          <div style={{ marginTop: index ? itemInterval : 0 }} key={index}>
             {renderItem(item)}
           </div>
         );
       })}
       {items.length > maxCount ? (
         <SingleLineDiv
           data-testid="hasMore"
-          style={{
-            marginTop: '8px',
+          css={{
+            marginTop: '3px',
             textAlign: 'center',
+            color: '#757575',
           }}
         >
           {`${items.length - maxCount} more`}

Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { css } from '@emotion/core';
+
+export const StandardFontCSS = css`
+  font-size: 12px;
+  line-height: 14px;
+  font-family: Segoe UI;
+  color: black;
+`;
+
+export const TruncatedCSS = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const MultilineCSS = css`
+  white-space: initial;
+  overflow-wrap: break-word;
+  word-break: break-all;
+`;

Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx

@@ -7,7 +7,8 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 
 import { ObiColors } from '../../constants/ElementColors';
 
-import { MultiLineDivProps, DivProps } from './styledComponents.types';
+import { DivProps } from './styledComponents.types';
+import { StandardFontCSS, TruncatedCSS, MultilineCSS } from './sharedCSS';
 
 const dynamicStyle = props =>
   css`
@@ -22,43 +23,45 @@ export const Span = styled.span`
   ${dynamicStyle}
 `;
 
-export const BorderedDiv = styled.div<DivProps>(props => ({
-  color: props.color || ObiColors.Black,
-  width: props.width,
-  height: props.height,
-  padding: '2px 0 0 8px',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  fontFamily: 'Segoe UI',
-  fontSize: '12px',
-  lineHeight: '14px',
-  border: '1px solid #C4C4C4',
-  boxSizing: 'border-box',
-}));
+export const BorderedDiv = styled.div<DivProps>(
+  css`
+    ${StandardFontCSS};
+    ${TruncatedCSS};
+    padding: 2px 0 0 8px;
+    border: 1px solid #c4c4c4;
+    box-sizing: border-box;
+  `,
+  props => ({
+    color: props.color || ObiColors.Black,
+    width: props.width,
+    height: props.height,
+  })
+);
 
-export const MultiLineDiv = styled.div<MultiLineDivProps>(props => ({
-  color: props.color || ObiColors.Black,
-  fontSize: '12px',
-  height: `${(props.lineNum || 1) * 19}px`,
-  lineHeight: '19px',
-  fontFamily: 'Segoe UI',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  wordBreak: 'break-word',
-  display: '-webkit-box',
-  '-webkit-line-clamp': `${props.lineNum || 1}`,
-  '-webkit-box-orient': 'vertical',
-}));
+export const SingleLineDiv = styled.div<DivProps>`
+  ${StandardFontCSS};
+  ${TruncatedCSS};
+  line-height: ${height => (height ? height + 'px' : undefined)};
+`;
 
-export const SingleLineDiv = styled.div<DivProps>(props => ({
-  width: props.width || 150,
-  height: props.height || '19px',
-  color: props.color || ObiColors.Black,
-  fontSize: '12px',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  lineHeight: '19px',
-  fontFamily: 'Segoe UI',
-}));
+export const TextDiv = styled.div`
+  ${StandardFontCSS};
+  ${MultilineCSS};
+  line-height: 16px;
+  display: inline-block;
+`;
+
+export const Text = styled.span(
+  css`
+    ${StandardFontCSS};
+  `,
+  ({ color }) =>
+    css`
+      color: ${color};
+    `
+);
+
+export const FixedInfo = styled.span`
+  ${StandardFontCSS};
+  color: #757575;
+`;

Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts

@@ -1,15 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { DetailedHTMLProps, HTMLAttributes, ComponentClass, FC } from 'react';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 export type ElementProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
 export interface DivProps extends ElementProps {
   width?: number;
   height?: number;
 }
-
-export interface MultiLineDivProps extends DivProps {
-  lineNum?: number;
-}
-export type ElementComponent<T extends ElementProps> = FC<T> | ComponentClass<T, any>;

Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+export interface ArrowLineProps {
+  width: number;
+  arrowsize: number;
+  containerHeight?: number;
+  color?: string;
+}
+export const ArrowLine: React.FC<ArrowLineProps> = ({ width, arrowsize, color }) => {
+  const points = [
+    { x: 0, y: 0 },
+    { x: width / 2 - (arrowsize + 2), y: 0 },
+    { x: width / 2, y: arrowsize },
+    { x: width / 2 + (arrowsize + 2), y: 0 },
+    { x: width, y: 0 },
+  ];
+  const pointsString = points.map(p => `${p.x},${p.y}`).join(' ');
+  return (
+    <svg css={{ display: 'block' }} width={width} height={1} overflow="visible">
+      <polyline points={pointsString} stroke={color} strokeWidth="1" fill="none" strokeDasharray="none" />
+    </svg>
+  );
+};
+
+ArrowLine.defaultProps = {
+  width: 200,
+  arrowsize: 8,
+  containerHeight: 1,
+  color: 'black',
+};

Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx

@@ -62,7 +62,7 @@ export const IconMenu: React.FC<IconMenuProps> = ({
     const buttonStyles: IButtonStyles = {
       root: {
         minWidth: 0,
-        padding: '0 8px',
+        padding: 0,
         margin: 0,
         alignSelf: 'stretch',
         height: 'auto',