feat: Schema-driven visual editor - migrates 15 simple types

Composer/packages/extensions/visual-designer/demo/src/index.js

@@ -8,6 +8,7 @@ import { EditorConfig } from '../../src/editors/editorConfig';
 import { VisualEditorDemo } from './stories/VisualEditorDemo';
 import { StepEditorDemo } from './stories/StepEditorDemo';
 import { EventsEditorDemo } from './stories/EventsEditorDemo';
+import { VisualSDKDemo } from './stories/VisualSDKDemo';
 import './index.css';
 
 initializeIcons(undefined, { disableWarnings: true });
@@ -27,6 +28,10 @@ const DemoMaps = {
     key: 'EventsEditorDemo',
     component: EventsEditorDemo,
   },
+  VisualSDKDemo: {
+    key: 'VisualSDKDemo',
+    component: VisualSDKDemo,
+  },
 };
 
 class Demo extends Component {
@@ -61,6 +66,10 @@ class Demo extends Component {
                 key: DemoMaps.EventsEditorDemo.key,
                 name: 'Event Editor',
               },
+              {
+                key: DemoMaps.VisualSDKDemo.key,
+                name: 'Visual SDK',
+              },
             ],
           },
           {

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

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { seedNewDialog, SDKTypes } from '@bfc/shared';
+
+import { renderSDKType } from '../../../src/schema/uischemaRenderer';
+import { EdgeMenu } from '../../../src/components/menus/EdgeMenu';
+import { JsonBlock } from '../components/json-block';
+
+import './story.css';
+
+export class VisualSDKDemo extends Component {
+  state = {
+    actions: this.seedInitialActions(),
+  };
+
+  seedInitialActions() {
+    const initialTypes = [
+      SDKTypes.EditArray,
+      SDKTypes.InitProperty,
+      SDKTypes.SetProperties,
+      SDKTypes.SetProperty,
+      SDKTypes.DeleteProperties,
+      SDKTypes.DeleteProperty,
+      SDKTypes.EndDialog,
+      SDKTypes.CancelAllDialogs,
+      SDKTypes.EmitEvent,
+    ];
+    const initalActions = initialTypes.map(t => seedNewDialog(t));
+    return initalActions;
+  }
+
+  appendActionPreview($type) {
+    this.setState({
+      actions: [...this.state.actions, seedNewDialog($type)],
+    });
+  }
+
+  renderActionPreview(action, index) {
+    return (
+      <div
+        className="action-preview"
+        key={`action-preview-${index}`}
+        style={{ display: 'flex', flexDirection: 'row', margin: 10 }}
+      >
+        <div className="action-preview--raw">
+          <JsonBlock
+            styles={{
+              width: '200px',
+              height: '80px',
+              fontSize: '8px',
+            }}
+            defaultValue={action}
+            onSubmit={newAction => {
+              const newActions = [...this.state.actions];
+              newActions[index] = newAction;
+              this.setState({
+                actions: newActions,
+              });
+            }}
+          />
+        </div>
+        <div className="action-preview--visual">{renderSDKType(action)}</div>
+      </div>
+    );
+  }
+
+  renderActionFactory() {
+    return (
+      <div style={{ height: 100, margin: 20 }}>
+        <h3>Create action by $type</h3>
+        <EdgeMenu id="visual-sdk-demo" onClick={$type => this.appendActionPreview($type)} />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <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()}
+        </div>
+      </div>
+    );
+  }
+}

Composer/packages/extensions/visual-designer/demo/src/stories/story.css

@@ -0,0 +1,21 @@
+.story-container {
+  height: 100%;
+}
+
+.story-title {
+  height: 50px;
+  margin: 0;
+}
+
+.story-content {
+  display: flex;
+  flex-direction: row;
+  height: calc(100% - 60px);
+}
+
+.block {
+  border: 1px solid grey;
+  margin: 10px;
+  width: 50%;
+  overflow: auto;
+}

Composer/packages/extensions/visual-designer/demo/webpack.config.demo.js

@@ -15,6 +15,9 @@ module.exports = {
     port: 3001,
     stats: 'errors-only',
   },
+  node: {
+    fs: 'empty',
+  },
   module: {
     rules: [
       {

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

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { FC } from 'react';
+import get from 'lodash/get';
+
+import { FormCard } from '../templates/FormCard';
+import { NodeProps } from '../nodeProps';
+import { getElementIcon, getElementColor } from '../../../utils/obiPropertyResolver';
+import { NodeMenu } from '../../menus/NodeMenu';
+import { NodeEventTypes } from '../../../constants/NodeEventTypes';
+
+export const ConditionNode: FC<NodeProps> = ({ id, data, onEvent }) => {
+  const { $type } = data;
+
+  return (
+    <FormCard
+      nodeColors={getElementColor($type)}
+      icon={getElementIcon($type)}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      header={'Branch'}
+      label={get(data, 'condition', '')}
+      onClick={() => {
+        onEvent(NodeEventTypes.Focus, { id });
+      }}
+    />
+  );
+};

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

@@ -1,179 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { FC } from 'react';
 
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-import { ObiTypes } from '../../../constants/ObiTypes';
-import { getElementColor, getElementIcon } from '../../../utils/obiPropertyResolver';
+import { NodeProps } from '../nodeProps';
+import { renderSDKType } from '../../../schema/uischemaRenderer';
 import { NodeMenu } from '../../menus/NodeMenu';
-import { FormCard } from '../templates/FormCard';
-import { NodeProps, defaultNodeProps } from '../nodeProps';
-import { getFriendlyName } from '../utils';
-
-const truncateType = $type => (typeof $type === 'string' ? $type.split('Microsoft.')[1] : '');
-
-const DefaultKeyMap = {
-  label: 'property',
-};
-
-/**
- * Create labels out of compound values
- */
-function makeLabel(data) {
-  switch (data.$type) {
-    case ObiTypes.SetProperty:
-      return `{${data.property || '?'}} = ${data.value || '?'}`;
-    case ObiTypes.SetProperties:
-      return `Set ${Array.isArray(data.assignments) ? data.assignments.length : 0} property values`;
-    case ObiTypes.DeleteProperties:
-      return `Delete ${Array.isArray(data.properties) ? data.properties.length : 0} properties`;
-    case ObiTypes.InitProperty:
-      return `{${data.property || '?'}} = new ${data.type || '?'}`;
-    case ObiTypes.EditArray:
-      return `${data.changeType} {${data.itemsProperty || '?'}}`;
-    case ObiTypes.ForeachDetail:
-      return `Each value in {${data.itemsProperty || '?'}}`;
-    case ObiTypes.ForeachPageDetail:
-      return `Each page of ${data.pageSize || '?'} in {${data.itemsProperty || '?'}}`;
-
-    default:
-      return '';
-  }
-}
+import { NodeEventTypes } from '../../../constants/NodeEventTypes';
 
-const ContentKeyByTypes: {
-  [key: string]: {
-    [key: string]: string;
-  };
-} = {
-  [ObiTypes.EditArray]: {
-    label: 'changeType',
-    details: 'arrayProperty',
-  },
-  [ObiTypes.InitProperty]: {
-    label: 'property',
-  },
-  [ObiTypes.SetProperty]: {
-    label: 'property',
-  },
-  [ObiTypes.ConditionNode]: {
-    header: 'Branch',
-    label: 'condition',
-  },
-  [ObiTypes.DeleteProperty]: {
-    label: 'property',
-  },
-  [ObiTypes.IfCondition]: {
-    label: 'condition',
-  },
-  [ObiTypes.SwitchCondition]: {
-    label: 'condition',
-  },
-  [ObiTypes.ForeachDetail]: {
-    header: 'Loop: For Each',
-    label: 'itemsProperty',
-  },
-  [ObiTypes.ForeachPageDetail]: {
-    header: 'Loop: For Each Page',
-    label: 'itemsProperty',
-  },
-  [ObiTypes.TextInput]: {
-    label: 'prompt',
-    details: 'property',
-  },
-  [ObiTypes.NumberInput]: {
-    label: 'prompt',
-    details: 'property',
-  },
-  [ObiTypes.ConfirmInput]: {
-    label: 'prompt',
-    details: 'property',
-  },
-  [ObiTypes.AttachmentInput]: {
-    label: 'prompt',
-    details: 'property',
-  },
-  [ObiTypes.EndDialog]: {
-    details: 'property',
-    text: 'End this dialog',
-  },
-  [ObiTypes.CancelAllDialogs]: {
-    label: 'eventName',
-    text: 'Cancel all active dialogs',
-  },
-  [ObiTypes.EndTurn]: {
-    text: 'Wait for another message',
-  },
-  [ObiTypes.EmitEvent]: {
-    label: 'eventName',
-  },
-  [ObiTypes.HttpRequest]: {
-    label: 'url',
-  },
-  [ObiTypes.TraceActivity]: {
-    label: 'name',
-  },
-  [ObiTypes.LogAction]: {
-    label: 'text',
-  },
-  [ObiTypes.EditActions]: {
-    label: 'changeType',
-  },
-  [ObiTypes.QnAMakerDialog]: {
-    label: 'hostname',
-  },
-  [ObiTypes.OAuthInput]: {
-    label: 'tokenProperty',
-  },
+export const DefaultRenderer: FC<NodeProps> = ({ id, data, onEvent }) => {
+  return renderSDKType(data, {
+    menu: <NodeMenu id={id} onEvent={onEvent} />,
+    onClick: () => onEvent(NodeEventTypes.Focus, { id }),
+  });
 };
-
-/**
- * DefaultRenderer is designed for rendering simple or unrecognized OBI elements.
- * Only the 'Focus' event could be triggered in it, if an element wants trigger
- * more events like 'Expand' or 'Open', it should define a renderer it self to
- * control its behavior.
- */
-
-export class DefaultRenderer extends React.Component<NodeProps, {}> {
-  static defaultProps = defaultNodeProps;
-  render() {
-    const { id, data, onEvent } = this.props;
-    let header = getFriendlyName(data),
-      label = '';
-
-    const keyMap = data.$type ? ContentKeyByTypes[data.$type] || DefaultKeyMap : { label: '', details: '' };
-    const icon = getElementIcon(data.$type);
-    const nodeColors = getElementColor(data.$type);
-
-    if (keyMap) {
-      header = header || keyMap.header || '';
-      label = data[keyMap.label] || label;
-    }
-
-    if (makeLabel(data)) {
-      label = makeLabel(data);
-    }
-
-    if (data.$type && ContentKeyByTypes[data.$type] && ContentKeyByTypes[data.$type].text) {
-      label = ContentKeyByTypes[data.$type].text;
-    }
-
-    if (!header) {
-      header = truncateType(data.$type);
-    }
-
-    return (
-      <FormCard
-        nodeColors={nodeColors}
-        header={header}
-        corner={<NodeMenu id={id} onEvent={onEvent} />}
-        icon={icon}
-        label={label}
-        onClick={() => {
-          onEvent(NodeEventTypes.Focus, { id });
-        }}
-      />
-    );
-  }
-}

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

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { FC } from 'react';
+
+import { FormCard } from '../templates/FormCard';
+import { NodeProps } from '../nodeProps';
+import { getElementIcon, getElementColor } from '../../../utils/obiPropertyResolver';
+import { NodeMenu } from '../../menus/NodeMenu';
+import { NodeEventTypes } from '../../../constants/NodeEventTypes';
+
+export const ForeachDetail: FC<NodeProps> = ({ id, data, onEvent }) => {
+  const { $type } = data;
+  const label = `Each value in {${data.itemsProperty || '?'}}`;
+
+  return (
+    <FormCard
+      nodeColors={getElementColor($type)}
+      icon={getElementIcon($type)}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      header={'Loop: For Each'}
+      label={label}
+      onClick={() => {
+        onEvent(NodeEventTypes.Focus, { id });
+      }}
+    />
+  );
+};