[Visual Editor]rename js to ts (microsoft#423)

* rename

* resolve error caused by convert

* resolve test case error

* test

* refactor

.gitignore

@@ -392,4 +392,7 @@ SampleBots/__Test*
 SampleBots/*/generated/
 
 #tmp.zip
-*.zip
+*.zip
+
+# VsCode
+Composer/.vscode/

Composer/packages/extensions/visual-designer/jest.config.js

@@ -1,11 +1,21 @@
 module.exports = {
-  testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '__tests__/setup.js'],
-  transform: {
-    '^.+\\.(j|t)sx?$': 'babel-jest',
-  },
+  preset: 'ts-jest/presets/js-with-babel',
+  testPathIgnorePatterns: [
+    '"/node_modules/(?!office-ui-fabric-react).+\\.js$"',
+    '/node_modules/',
+    '/jestMocks/',
+    '__tests__/index.test.tsx',
+  ],
   moduleNameMapper: {
     // Any imports of .scss / .css files will instead import styleMock.js which is an empty object
-    '\\.(s)?css$': '<rootDir>/__tests__/jestMocks/styleMock.js',
+    '\\.(s)?css$': '<rootDir>/__tests__/jestMocks/styleMock.ts',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: './tsconfig.json',
+      diagnostics: {
+        warnOnly: true,
+      },
+    },
   },
-  transformIgnorePatterns: ['"/node_modules/(?!office-ui-fabric-react).+\\.js$"'],
 };

Composer/packages/extensions/visual-designer/package.json

@@ -31,13 +31,13 @@
     "lodash": "^4.17.11",
     "office-ui-fabric-react": "^6.180.0",
     "prop-types": "^15.7.2",
-    "source-map-loader": "^0.2.4",
-    "ts-loader": "^6.0.3"
+    "source-map-loader": "^0.2.4"
   },
   "peerDependencies": {
     "react": "16.x"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.11",
     "@babel/cli": "7.2.3",
     "@babel/core": "7.3.4",
     "@babel/plugin-proposal-class-properties": "7.3.4",
@@ -51,7 +51,9 @@
     "react": "^16.8.4",
     "react-dom": "16.8.2",
     "react-testing-library": "^6.0.1",
-    "shared-menus": "0.0.0"
+    "shared-menus": "0.0.0",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.3"
   },
   "author": "",
   "homepage": "",

Composer/packages/extensions/visual-designer/src/components/DragScroll.js → Composer/packages/extensions/visual-designer/src/components/DragScroll.tsx

@@ -5,7 +5,7 @@ function getScrollParent(node) {
 
   const isNodeOverflow = node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth;
   // REF: https://github.com/jquery/jquery-ui/blob/master/ui/scroll-parent.js
-  const isNodeScrollable = getComputedStyle(node).overflow.match(/(auto|scroll|hidden)/);
+  const isNodeScrollable = (getComputedStyle(node).overflow || '').match(/(auto|scroll|hidden)/);
 
   if (isNodeOverflow && isNodeScrollable) {
     return node;

Composer/packages/extensions/visual-designer/src/components/groups/CollapsedRuleGroup.js → Composer/packages/extensions/visual-designer/src/components/groups/CollapsedRuleGroup.tsx

@@ -10,7 +10,7 @@ const ElementMarginX = EventNodeLayout.marginX;
 const ElementMarginY = EventNodeLayout.marginX;
 const maxBlockHeight = (ElementHeight + ElementMarginY) * 2;
 export const CollapsedRuleGroup = ({ count }) => {
-  const items = [];
+  const items: any[] = [];
   for (let i = 0; i < count; i++) {
     items.push(
       <div

Composer/packages/extensions/visual-designer/src/components/groups/RuleGroup.js → Composer/packages/extensions/visual-designer/src/components/groups/RuleGroup.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line no-unused-vars
 import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
 import { NodeRenderer } from '../shared/NodeRenderer';
 import { Boundary } from '../../shared/Boundary';
@@ -12,7 +13,8 @@ const RulePaddingY = EventNodeLayout.marginY;
 const RuleBlockWidth = RuleElementWidth + RulePaddingX;
 const RuleBlockHeight = RuleElementHeight + RulePaddingY;
 
-export class RuleGroup extends React.Component {
+export class RuleGroup extends React.Component<NodeProps> {
+  static defaultProps = defaultNodeProps;
   containerElement;
 
   propagateBoundary() {
@@ -70,6 +72,3 @@ export class RuleGroup extends React.Component {
     );
   }
 }
-
-RuleGroup.propTypes = NodeProps;
-RuleGroup.defaultProps = defaultNodeProps;

Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.js → Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useMemo, useEffect } from 'react';
+// eslint-disable-next-line no-unused-vars
+import React, { useState, useMemo, useEffect, FunctionComponent } from 'react';
 import { EdgeMenu } from 'shared-menus';
 
+// eslint-disable-next-line no-unused-vars
 import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
 import { NodeRenderer } from '../shared/NodeRenderer';
 import { GraphNode } from '../../shared/GraphNode';
@@ -25,7 +27,7 @@ const calculateLayout = (nodes, boundaryMap) => {
   return sequentialLayouter(nodes);
 };
 
-export const StepGroup = function({ id, data, focusedId, onEvent, onResize }) {
+export const StepGroup: FunctionComponent<NodeProps> = ({ id, data, focusedId, onEvent, onResize }: NodeProps) => {
   const [boundaryMap, setBoundaryMap] = useState({});
   const initialNodes = useMemo(() => calculateNodes(data), [id, data]);
   const layout = useMemo(() => calculateLayout(initialNodes, boundaryMap), [initialNodes, boundaryMap]);
@@ -86,6 +88,4 @@ export const StepGroup = function({ id, data, focusedId, onEvent, onResize }) {
     </div>
   );
 };
-
-StepGroup.propTypes = NodeProps;
 StepGroup.defaultProps = defaultNodeProps;

Composer/packages/extensions/visual-designer/src/components/nodes/BeginDialog.js → Composer/packages/extensions/visual-designer/src/components/nodes/BeginDialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { NodeEventTypes } from '../../shared/NodeEventTypes';
+// eslint-disable-next-line no-unused-vars
 import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
 import { NodeMenu } from '../shared/NodeMenu';
 import { getDialogGroupByType } from '../../shared/appschema';
@@ -9,7 +10,8 @@ import { getElementColor } from '../../shared/elementColors';
 import { FormCard } from './templates/FormCard';
 import { getFriendlyName } from './utils';
 
-export class BeginDialog extends React.Component {
+export class BeginDialog extends React.Component<NodeProps, object> {
+  static defaultProps = defaultNodeProps;
   renderCallDialogLink() {
     const { data, onEvent } = this.props;
     if (!data || !data.dialog) return null;
@@ -47,6 +49,3 @@ export class BeginDialog extends React.Component {
     );
   }
 }
-
-BeginDialog.propTypes = NodeProps;
-BeginDialog.defaultProps = defaultNodeProps;

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

@@ -4,6 +4,7 @@ import { NodeEventTypes } from '../../shared/NodeEventTypes';
 import { ObiTypes } from '../../shared/ObiTypes';
 import { getDialogGroupByType } from '../../shared/appschema';
 import { getElementColor } from '../../shared/elementColors';
+// eslint-disable-next-line no-unused-vars
 import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
 import { NodeMenu } from '../shared/NodeMenu';
 
@@ -34,7 +35,11 @@ function makeLabel(data) {
   }
 }
 
-const ContentKeyByTypes = {
+const ContentKeyByTypes: {
+  [key: string]: {
+    [key: string]: string;
+  };
+} = {
   [ObiTypes.SendActivity]: {
     label: 'activity',
   },
@@ -126,21 +131,21 @@ const ContentKeyByTypes = {
  * more events like 'Expand' or 'Open', it should define a renderer it self to
  * control its behavior.
  */
-export class DefaultRenderer extends React.Component {
+
+export class DefaultRenderer extends React.Component<NodeProps, {}> {
+  static defaultProps = defaultNodeProps;
   render() {
     const { id, data, onEvent } = this.props;
     let header = getFriendlyName(data),
-      label = '',
-      details = '';
+      label = '';
 
-    const keyMap = data.$type ? ContentKeyByTypes[data.$type] || DefaultKeyMap : null;
+    const keyMap = data.$type ? ContentKeyByTypes[data.$type] || DefaultKeyMap : { label: '', details: '' };
     const dialogGroup = getDialogGroupByType(data.$type);
     const nodeColors = getElementColor(dialogGroup);
     const icon = dialogGroup === 'INPUT' ? 'User' : 'MessageBot';
     if (keyMap) {
       header = header || keyMap.header || '';
       label = data[keyMap.label] || label;
-      details = data[keyMap.details] || details;
     }
 
     if (makeLabel(data)) {
@@ -162,14 +167,10 @@ export class DefaultRenderer extends React.Component {
         corner={<NodeMenu id={id} onEvent={onEvent} />}
         icon={icon}
         label={label}
-        details={details}
         onClick={() => {
           onEvent(NodeEventTypes.Focus, id);
         }}
       />
     );
   }
 }
-
-DefaultRenderer.propTypes = NodeProps;
-DefaultRenderer.defaultProps = defaultNodeProps;

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

@@ -0,0 +1,12 @@
+// eslint-disable-next-line no-unused-vars
+import React, { FunctionComponent } from 'react';
+
+// eslint-disable-next-line no-unused-vars
+import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
+
+import { RuleCard } from './templates/RuleCard';
+
+export const EventRule: FunctionComponent<NodeProps> = ({ id, data, focusedId, onEvent }) => {
+  return <RuleCard id={id} data={data} label={data.events} focusedId={focusedId} onEvent={onEvent} />;
+};
+EventRule.defaultProps = defaultNodeProps;

Composer/packages/extensions/visual-designer/src/components/nodes/IfCondition.js → Composer/packages/extensions/visual-designer/src/components/nodes/IfCondition.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState, useMemo } from 'react';
+// eslint-disable-next-line no-unused-vars
+import React, { FunctionComponent, useEffect, useState, useMemo } from 'react';
 
 import { transformIfCondtion } from '../../transformers/transformIfCondition';
 import { NodeEventTypes } from '../../shared/NodeEventTypes';
+// eslint-disable-next-line no-unused-vars
 import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
 import { GraphNode } from '../../shared/GraphNode';
 import { OffsetContainer } from '../../shared/OffsetContainer';
@@ -26,12 +28,12 @@ const calculateNodeMap = (path, data) => {
 const calculateLayout = (nodeMap, boundaryMap) => {
   Object.values(nodeMap)
     .filter(x => !!x)
-    .forEach(x => (x.boundary = boundaryMap[x.id] || x.boundary));
+    .forEach((x: any) => (x.boundary = boundaryMap[x.id] || x.boundary));
 
   return ifElseLayouter(nodeMap.conditionNode, nodeMap.choiceNode, nodeMap.ifGroupNode, nodeMap.elseGroupNode);
 };
 
-export const IfCondition = function({ id, data, focusedId, onEvent, onResize }) {
+export const IfCondition: FunctionComponent<NodeProps> = ({ id, data, focusedId, onEvent, onResize }) => {
   const [boundaryMap, setBoundaryMap] = useState({});
   const initialNodeMap = useMemo(() => calculateNodeMap(id, data), [id, data]);
   const layout = useMemo(() => calculateLayout(initialNodeMap, boundaryMap), [initialNodeMap, boundaryMap]);
@@ -52,46 +54,47 @@ export const IfCondition = function({ id, data, focusedId, onEvent, onResize })
   }, [layout]);
 
   const { boundary, nodeMap, edges } = layout;
+  const condition = nodeMap ? nodeMap.condition : { id: '', data: {}, offset: '' };
+
   return (
     <div style={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
-      <OffsetContainer offset={nodeMap.condition.offset}>
+      <OffsetContainer offset={condition.offset}>
         <DefaultRenderer
-          key={nodeMap.condition.id}
-          id={nodeMap.condition.id}
-          data={nodeMap.condition.data}
+          key={condition.id}
+          id={condition.id}
+          data={condition.data}
           focusedId={focusedId}
           onEvent={onEvent}
         />
       </OffsetContainer>
-      <OffsetContainer offset={nodeMap.choice.offset}>
+      <OffsetContainer offset={nodeMap && nodeMap.choice.offset}>
         <Diamond
           onClick={() => {
             onEvent(NodeEventTypes.Focus, id);
           }}
         />
       </OffsetContainer>
-      {[nodeMap.if, nodeMap.else]
-        .filter(x => !!x)
-        .map(x => (
-          <OffsetContainer key={`${x.id}/offset`} offset={x.offset}>
-            <StepGroup
-              key={x.id}
-              id={x.id}
-              data={x.data}
-              focusedId={focusedId}
-              onEvent={onEvent}
-              onResize={size => {
-                patchBoundary(x.id, size);
-              }}
-            />
-          </OffsetContainer>
-        ))}
-      {edges.map(x => (
-        <Edge key={x.id} {...x} />
-      ))}
+      {nodeMap
+        ? [nodeMap.if, nodeMap.else]
+            .filter(x => !!x)
+            .map(x => (
+              <OffsetContainer key={`${x.id}/offset`} offset={x.offset}>
+                <StepGroup
+                  key={x.id}
+                  id={x.id}
+                  data={x.data}
+                  focusedId={focusedId}
+                  onEvent={onEvent}
+                  onResize={size => {
+                    patchBoundary(x.id, size);
+                  }}
+                />
+              </OffsetContainer>
+            ))
+        : null}
+      {edges ? edges.map(x => <Edge key={x.id} {...x} />) : null}
     </div>
   );
 };
 
-IfCondition.propTypes = NodeProps;
 IfCondition.defaultProps = defaultNodeProps;

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

@@ -0,0 +1,13 @@
+// eslint-disable-next-line no-unused-vars
+import React, { FunctionComponent } from 'react';
+
+// eslint-disable-next-line no-unused-vars
+import { NodeProps, defaultNodeProps } from '../shared/sharedProps';
+
+import { RuleCard } from './templates/RuleCard';
+
+export const IntentRule: FunctionComponent<NodeProps> = ({ id, data, focusedId, onEvent }) => {
+  return <RuleCard id={id} data={data} label={data.intent} focusedId={focusedId} onEvent={onEvent} />;
+};
+
+IntentRule.defaultProps = defaultNodeProps;