chore: migrate IfCondition, SwitchCondition, Foreach(Page) to uischema

Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx

@@ -7,10 +7,6 @@ export * from './steps/BotAsks';
 export * from './steps/UserInput';
 export * from './steps/InvalidPromptBrick';
 
-export * from './layout-steps/Foreach';
-export * from './layout-steps/IfCondition';
-export * from './layout-steps/SwitchCondition';
-
 export * from './events/EventRule';
 export * from './events/IntentRule';
 export * from './events/UnknownIntentRule';

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/types.ts → Composer/packages/extensions/visual-designer/src/components/nodes/types.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { GraphNode } from '../../../models/GraphNode';
-import { Boundary } from '../../../models/Boundary';
+import { GraphNode } from '../../models/GraphNode';
+import { Boundary } from '../../models/Boundary';
 
 export type NodeMap = { [id: string]: GraphNode };
 export type BoundaryMap = { [id: string]: Boundary };

Composer/packages/extensions/visual-designer/src/components/renderers/StepRenderer.tsx

@@ -3,30 +3,15 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { FC, ComponentClass } from 'react';
+import { FC } from 'react';
 import { SDKTypes } from '@bfc/shared';
 import get from 'lodash/get';
 
-import { ObiTypes } from '../../constants/ObiTypes';
-import { IfCondition, SwitchCondition, Foreach } from '../nodes/index';
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
 import { UISchemaRenderer } from '../../schema/uischemaRenderer';
 
 import { ElementWrapper } from './ElementWrapper';
 
-const rendererByObiType = {
-  [ObiTypes.IfCondition]: IfCondition,
-  [ObiTypes.SwitchCondition]: SwitchCondition,
-  [ObiTypes.Foreach]: Foreach,
-  [ObiTypes.ForeachPage]: Foreach,
-};
-const DEFAULT_RENDERER = UISchemaRenderer;
-
-function chooseRendererByType($type): FC<NodeProps> | ComponentClass<NodeProps> {
-  const renderer = rendererByObiType[$type] || DEFAULT_RENDERER;
-  return renderer;
-}
-
 /** TODO: (zeye) integrate this array into UISchema */
 const TypesWithoutWrapper = [
   SDKTypes.IfCondition,
@@ -40,20 +25,11 @@ const TypesWithoutWrapper = [
   SDKTypes.TextInput,
   SDKTypes.ChoiceInput,
 ];
-export const StepRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }): JSX.Element => {
+
+export const StepRenderer: FC<NodeProps> = ({ id, data, onEvent }): JSX.Element => {
   const $type = get(data, '$type', '');
 
-  const ChosenRenderer = chooseRendererByType($type);
-  const content = (
-    <ChosenRenderer
-      id={id}
-      data={data}
-      onEvent={onEvent}
-      onResize={size => {
-        onResize(size, 'node');
-      }}
-    />
-  );
+  const content = <UISchemaRenderer id={id} data={data} onEvent={onEvent} />;
 
   if (TypesWithoutWrapper.some(x => $type === x)) {
     return content;

Composer/packages/extensions/visual-designer/src/schema/uischema.tsx

@@ -2,12 +2,17 @@
 // Licensed under the MIT License.
 
 import { SDKTypes, getInputType } from '@bfc/shared';
+import formatMessage from 'format-message';
 import React from 'react';
+import get from 'lodash/get';
 
 import { ActionCard } from '../widgets/ActionCard';
 import { ActivityRenderer } from '../widgets/ActivityRenderer';
 import { DialogRefCard } from '../widgets/DialogRefCard';
 import { PromptWidget } from '../widgets/PromptWidget';
+import { IfConditionWidget } from '../widgets/IfConditionWidget';
+import { SwitchConditionWidget } from '../widgets/SwitchConditionWidget';
+import { ForeachWidget } from '../widgets/ForeachWidget';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { ObiColors } from '../constants/ElementColors';
 
@@ -44,6 +49,42 @@ export const uiSchema: UISchema = {
   default: {
     'ui:widget': ActionCard,
   },
+  [SDKTypes.IfCondition]: {
+    'ui:widget': IfConditionWidget,
+    judgement: {
+      'ui:widget': ActionCard,
+      title: formatMessage('Branch'),
+      content: data => data.condition,
+    },
+  },
+  [SDKTypes.SwitchCondition]: {
+    'ui:widget': SwitchConditionWidget,
+    judgement: {
+      'ui:widget': ActionCard,
+      title: formatMessage('Branch'),
+      content: data => data.condition,
+    },
+  },
+  [SDKTypes.Foreach]: {
+    'ui:widget': ForeachWidget,
+    loop: {
+      'ui:widget': ActionCard,
+      title: formatMessage('Loop: For Each'),
+      content: data => `${formatMessage('Each value in')} {${data.itemsProperty || '?'}}`,
+    },
+  },
+  [SDKTypes.ForeachPage]: {
+    'ui:widget': ForeachWidget,
+    loop: {
+      'ui:widget': ActionCard,
+      title: formatMessage('Loop: For Each Page'),
+      content: data => {
+        const pageSizeString = get(data, 'pageSize', '?');
+        const propString = get(data, 'itemsProperty', '?');
+        return `${formatMessage('Each page of')} ${pageSizeString} ${formatMessage('in')} {${propString}}`;
+      },
+    },
+  },
   [SDKTypes.SendActivity]: {
     'ui:widget': ActivityRenderer,
     field: 'activity',

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/Foreach.tsx → Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx

@@ -5,22 +5,18 @@
 import { jsx } from '@emotion/core';
 import { useMemo, useEffect, useState, FunctionComponent } from 'react';
 
-import { transformForeach } from '../../../transformers/transformForeach';
-import { foreachLayouter } from '../../../layouters/foreachLayouter';
-import { areBoundariesEqual, Boundary } from '../../../models/Boundary';
-import { GraphNode } from '../../../models/GraphNode';
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-import { OffsetContainer } from '../../lib/OffsetContainer';
-import { Edge } from '../../lib/EdgeComponents';
-import { LoopIndicator } from '../../decorations/LoopIndicator';
-import { StepGroup } from '../../groups';
-import { NodeProps, defaultNodeProps } from '../nodeProps';
-import { ForeachDetail } from '../steps/ForeachDetail';
-import { ElementWrapper } from '../../renderers/ElementWrapper';
-import { ObiTypes } from '../../../constants/ObiTypes';
-import { ForeachPageDetail } from '../steps/ForeachPageDetail';
-
-import { NodeMap, BoundaryMap } from './types';
+import { transformForeach } from '../transformers/transformForeach';
+import { foreachLayouter } from '../layouters/foreachLayouter';
+import { areBoundariesEqual, Boundary } from '../models/Boundary';
+import { GraphNode } from '../models/GraphNode';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { OffsetContainer } from '../components/lib/OffsetContainer';
+import { Edge } from '../components/lib/EdgeComponents';
+import { LoopIndicator } from '../components/decorations/LoopIndicator';
+import { StepGroup } from '../components/groups';
+import { ElementWrapper } from '../components/renderers/ElementWrapper';
+import { NodeMap, BoundaryMap } from '../components/nodes/types';
+import { WidgetContainerProps } from '../schema/uischema.types';
 
 const calculateNodeMap = (jsonpath, data): NodeMap => {
   const result = transformForeach(data, jsonpath);
@@ -45,7 +41,11 @@ const calculateLayout = (nodeMap: NodeMap, boundaryMap: BoundaryMap) => {
   return foreachLayouter(nodeMap.foreachNode, nodeMap.stepGroupNode, nodeMap.loopBeginNode, nodeMap.loopEndNode);
 };
 
-export const Foreach: FunctionComponent<NodeProps> = ({ id, data, onEvent, onResize }) => {
+export interface ForeachWidgetProps extends WidgetContainerProps {
+  loop: JSX.Element;
+}
+
+export const ForeachWidget: FunctionComponent<ForeachWidgetProps> = ({ id, data, onEvent, onResize, loop }) => {
   const [boundaryMap, setBoundaryMap] = useState({});
   const initialNodeMap = useMemo(() => calculateNodeMap(id, data), [id, data]);
   const layout = useMemo(() => calculateLayout(initialNodeMap, boundaryMap), [initialNodeMap, boundaryMap]);
@@ -71,18 +71,11 @@ export const Foreach: FunctionComponent<NodeProps> = ({ id, data, onEvent, onRes
   }
 
   const { foreachNode, stepsNode, loopBeginNode, loopEndNode } = nodeMap;
-  const ForeachHeader = data.$type === ObiTypes.Foreach ? ForeachDetail : ForeachPageDetail;
   return (
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
       <OffsetContainer offset={foreachNode.offset}>
         <ElementWrapper id={id} onEvent={onEvent}>
-          <ForeachHeader
-            key={foreachNode.id}
-            id={foreachNode.id}
-            data={foreachNode.data}
-            onEvent={onEvent}
-            onResize={onResize}
-          />
+          {loop}
         </ElementWrapper>
       </OffsetContainer>
       <OffsetContainer offset={stepsNode.offset}>
@@ -108,4 +101,6 @@ export const Foreach: FunctionComponent<NodeProps> = ({ id, data, onEvent, onRes
   );
 };
 
-Foreach.defaultProps = defaultNodeProps;
+ForeachWidget.defaultProps = {
+  onResize: () => null,
+};

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/IfCondition.tsx → Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx

@@ -5,20 +5,18 @@
 import { jsx } from '@emotion/core';
 import { FunctionComponent, useEffect, useState, useMemo } from 'react';
 
-import { transformIfCondtion } from '../../../transformers/transformIfCondition';
-import { ifElseLayouter } from '../../../layouters/ifelseLayouter';
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-import { GraphNode } from '../../../models/GraphNode';
-import { areBoundariesEqual, Boundary } from '../../../models/Boundary';
-import { OffsetContainer } from '../../lib/OffsetContainer';
-import { Edge } from '../../lib/EdgeComponents';
-import { StepGroup } from '../../groups';
-import { Diamond } from '../templates/Diamond';
-import { ElementWrapper } from '../../renderers/ElementWrapper';
-import { NodeProps, defaultNodeProps } from '../nodeProps';
-import { ConditionNode } from '../steps/ConditionNode';
-
-import { NodeMap, BoundaryMap } from './types';
+import { transformIfCondtion } from '../transformers/transformIfCondition';
+import { ifElseLayouter } from '../layouters/ifelseLayouter';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { GraphNode } from '../models/GraphNode';
+import { areBoundariesEqual, Boundary } from '../models/Boundary';
+import { OffsetContainer } from '../components/lib/OffsetContainer';
+import { Edge } from '../components/lib/EdgeComponents';
+import { StepGroup } from '../components/groups';
+import { Diamond } from '../components/nodes/templates/Diamond';
+import { ElementWrapper } from '../components/renderers/ElementWrapper';
+import { NodeMap, BoundaryMap } from '../components/nodes/types';
+import { WidgetContainerProps } from '../schema/uischema.types';
 
 const calculateNodeMap = (path, data): NodeMap => {
   const result = transformIfCondtion(data, path);
@@ -41,7 +39,17 @@ const calculateLayout = (nodeMap: NodeMap, boundaryMap: BoundaryMap) => {
   return ifElseLayouter(nodeMap.conditionNode, nodeMap.choiceNode, nodeMap.ifGroupNode, nodeMap.elseGroupNode);
 };
 
-export const IfCondition: FunctionComponent<NodeProps> = ({ id, data, onEvent, onResize }) => {
+export interface IfConditionWidgetProps extends WidgetContainerProps {
+  judgement: JSX.Element;
+}
+
+export const IfConditionWidget: FunctionComponent<IfConditionWidgetProps> = ({
+  id,
+  data,
+  onEvent,
+  onResize,
+  judgement,
+}) => {
   const [boundaryMap, setBoundaryMap] = useState<BoundaryMap>({});
   const initialNodeMap = useMemo(() => calculateNodeMap(id, data), [id, data]);
   const layout = useMemo(() => calculateLayout(initialNodeMap, boundaryMap), [initialNodeMap, boundaryMap]);
@@ -69,13 +77,7 @@ export const IfCondition: FunctionComponent<NodeProps> = ({ id, data, onEvent, o
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
       <OffsetContainer offset={condition.offset}>
         <ElementWrapper id={condition.id} onEvent={onEvent}>
-          <ConditionNode
-            key={condition.id}
-            id={condition.id}
-            data={condition.data}
-            onEvent={onEvent}
-            onResize={onResize}
-          />
+          {judgement}
         </ElementWrapper>
       </OffsetContainer>
       <OffsetContainer offset={choice.offset}>
@@ -107,4 +109,6 @@ export const IfCondition: FunctionComponent<NodeProps> = ({ id, data, onEvent, o
   );
 };
 
-IfCondition.defaultProps = defaultNodeProps;
+IfConditionWidget.defaultProps = {
+  onResize: () => null,
+};