Finish types/ and common/, WIP tests due to default values

Signed-off-by: Everett Ross <reverett@uber.com>

package.json

@@ -46,7 +46,8 @@
     "check-license": "./scripts/check-license.sh",
     "coverage": "lerna run coverage",
     "eslint": "eslint 'scripts/*.{js,ts,tsx}' 'packages/*/src/**/*.{js,ts,tsx}' 'packages/*/*.{js,ts,tsx}'",
-    "flow": "glow",
+    "flow-comment": "echo 'disable flow as it dislikes typescript'",
+    "flow": "exit 0 || glow",
     "lint":
       "yarn run prettier-lint && yarn run tsc-lint && yarn run eslint && yarn run flow && yarn run check-license",
     "prepare": "lerna run --stream --sort prepublishOnly",

packages/jaeger-ui/package.json

@@ -34,11 +34,18 @@
   },
   "dependencies": {
     "@jaegertracing/plexus": "0.0.1-dev.4",
+    "@types/classnames": "^2.2.7",
+    "@types/deep-freeze": "^0.1.1",
+    "@types/history": "^4.7.2",
     "@types/jsdom": "^12.2.3",
     "@types/lodash": "^4.14.123",
     "@types/moment": "^2.13.0",
     "@types/node": "^11.11.2",
+    "@types/react-copy-to-clipboard": "^4.2.6",
+    "@types/react-icons": "2.2.7",
+    "@types/react-redux": "^7.0.3",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react-virtualized-select": "^3.0.7",
     "antd": "3.8.0",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceTimelineLink.js

@@ -17,7 +17,7 @@
 import * as React from 'react';
 
 import { getUrl } from '../../TracePage/url';
-import NewWindowIcon from '../../common/NewWindowIcon.js';
+import NewWindowIcon from '../../common/NewWindowIcon';
 
 type PropsType = {
   traceID: string,

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceTimelineLink.test.js

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 
 import TraceTimelineLink from './TraceTimelineLink';
-import NewWindowIcon from '../../common/NewWindowIcon.js';
+import NewWindowIcon from '../../common/NewWindowIcon';
 
 describe('TraceTimelineLink', () => {
   const traceID = 'test-trace-id';

packages/jaeger-ui/src/components/TraceDiff/getValidState.js → packages/jaeger-ui/src/components/TraceDiff/getValidState.ts

@@ -1,5 +1,3 @@
-// @flow
-
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,9 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export default function getValidState(state?: ?{ a?: ?string, b?: ?string, cohort: string[] }) {
-  const { a: stA, b: stB, cohort: stCohort } = state || {};
-  const cohortSet = new Set([].concat(stA, stB, stCohort || []).filter(Boolean));
+import TNullable from '../../types/nullable'; // eslint-disable-line no-unused-vars
+import { TraceDiffState } from '../../types/trace-diff'; // eslint-disable-line no-unused-vars
+
+export default function getValidState(state: TraceDiffState) {
+  const { a: stA, b: stB, cohort: stCohort } = state;
+  const cohortSet = new Set(
+    ([] as (string | TNullable)[])
+      .concat(stA, stB, stCohort)
+      .filter((str: string | TNullable): str is string => Boolean(str))
+  );
   const cohort: string[] = Array.from(cohortSet);
   const a = cohort[0];
   const b = cohort[1];

packages/jaeger-ui/src/components/TraceDiff/url.js → packages/jaeger-ui/src/components/TraceDiff/url.ts

@@ -1,5 +1,3 @@
-// @flow
-
 // Copyright (c) 2018 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,6 +16,7 @@ import queryString from 'query-string';
 import { matchPath } from 'react-router-dom';
 
 import getValidState from './getValidState';
+import { TraceDiffState } from '../../types/trace-diff'; // eslint-disable-line no-unused-vars
 import prefixUrl from '../../utils/prefix-url';
 
 export const ROUTE_PATH = prefixUrl('/trace/:a?\\.\\.\\.:b?');
@@ -28,7 +27,7 @@ export function matches(path: string) {
   return Boolean(matchPath(path, ROUTE_MATCHER));
 }
 
-export function getUrl(state?: ?{ a?: ?string, b?: ?string, cohort: string[] }) {
+export function getUrl(state: TraceDiffState) {
   const { a, b, cohort } = getValidState(state);
   const search = queryString.stringify({ cohort });
   return prefixUrl(`/trace/${a || ''}...${b || ''}${search ? '?' : ''}${search}`);

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/DetailState.js → packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/DetailState.ts

@@ -14,18 +14,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type { Log } from '../../../../types/trace';
+import { Log } from '../../../../types/trace'; // eslint-disable-line no-unused-vars
 
 /**
  * Which items of a {@link SpanDetail} component are expanded.
  */
 export default class DetailState {
   isTagsOpen: boolean;
   isProcessOpen: boolean;
-  logs: { isOpen: boolean, openedItems: Set<Log> };
+  logs: { isOpen: boolean; openedItems: Set<Log> };
 
   constructor(oldState?: DetailState) {
-    const { isTagsOpen, isProcessOpen, logs } = oldState || {};
+    const { isTagsOpen, isProcessOpen, logs }: DetailState | Record<string, undefined> = oldState || {};
     this.isTagsOpen = Boolean(isTagsOpen);
     this.isProcessOpen = Boolean(isProcessOpen);
     this.logs = {

packages/jaeger-ui/src/components/common/BreakableText.js → packages/jaeger-ui/src/components/common/BreakableText.tsx

@@ -21,12 +21,16 @@ import './BreakableText.css';
 const WORD_RX = /\W*\w+\W*/g;
 
 type Props = {
-  text: string,
-  className?: string,
-  wordRegexp?: RegExp,
+  text: string;
+  className?: string;
+  wordRegexp?: RegExp;
 };
 
-export default function BreakableText(props: Props) {
+// TODO typescript doesn't understand text or null as react nodes
+// https://github.com/Microsoft/TypeScript/issues/21699
+export default function BreakableText(
+  props: Props
+): any /* React.ReactNode /* React.ReactElement | React.ReactElement[] \*\/ */ {
   const { className, text, wordRegexp = WORD_RX } = props;
   if (!text) {
     return typeof text === 'string' ? text : null;

packages/jaeger-ui/src/components/common/CopyIcon.js → packages/jaeger-ui/src/components/common/CopyIcon.tsx

@@ -17,23 +17,21 @@
 import * as React from 'react';
 
 import { Icon, Tooltip } from 'antd';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import CopyToClipboard from 'react-copy-to-clipboard';
 
 type PropsType = {
-  className?: string,
-  copyText: string,
-  tooltipTitle: string,
+  className?: string;
+  copyText: string;
+  tooltipTitle: string;
 };
 
 type StateType = {
-  hasCopied: boolean,
+  hasCopied: boolean;
 };
 
 export default class CopyIcon extends React.PureComponent<PropsType, StateType> {
-  props: PropsType;
-
-  static defaultProps = {
-    className: null,
+  static defaultProps: Partial<PropsType> = {
+    className: undefined,
   };
 
   state = {

packages/jaeger-ui/src/components/common/ErrorMessage.js → packages/jaeger-ui/src/components/common/ErrorMessage.tsx

@@ -16,25 +16,25 @@
 
 import * as React from 'react';
 
-import type { ApiError } from '../../types/api-error';
+import { ApiError } from '../../types/api-error'; // eslint-disable-line no-unused-vars
 
 import './ErrorMessage.css';
 
 type ErrorMessageProps = {
-  className?: string,
-  detailClassName?: string,
-  messageClassName?: string,
-  error: ApiError,
+  className?: string;
+  detailClassName?: string;
+  messageClassName?: string;
+  error: ApiError;
 };
 
 type SubPartProps = {
-  className?: string,
-  error: ApiError,
-  wrap?: boolean,
-  wrapperClassName?: string,
+  className?: string;
+  error: ApiError;
+  wrap?: boolean;
+  wrapperClassName?: string;
 };
 
-function ErrorAttr({ name, value }: { name: string, value: any }) {
+function ErrorAttr({ name, value }: { name: string; value: any }) {
   return (
     <tr className="ErrorMessage--detailItem">
       <td className="ErrorMessage--attr">{name}</td>
@@ -46,12 +46,12 @@ function ErrorAttr({ name, value }: { name: string, value: any }) {
 function Message(props: SubPartProps) {
   const { className, error, wrap, wrapperClassName } = props;
   const cssClass = `ErrorMessage--msg ${className || ''}`;
-  let msg: React.Node;
-  if (typeof error === 'string') {
-    msg = <h3 className={cssClass}>{error}</h3>;
-  } else {
-    msg = <h3 className={cssClass}>{error.message}</h3>;
-  }
+  const msg =
+    typeof error === 'string' ? (
+      <h3 className={cssClass}>{error}</h3>
+    ) : (
+      <h3 className={cssClass}>{error.message}</h3>
+    );
   if (wrap) {
     return <div className={`ErrorMessage ${wrapperClassName || ''}`}>{msg}</div>;
   }

packages/jaeger-ui/src/components/common/LabeledList.js → packages/jaeger-ui/src/components/common/LabeledList.tsx

@@ -20,9 +20,9 @@ import { Divider } from 'antd';
 import './LabeledList.css';
 
 type LabeledListProps = {
-  className?: string,
-  dividerClassName?: string,
-  items: { key: string, label: React.Node, value: React.Node }[],
+  className?: string;
+  dividerClassName?: string;
+  items: { key: string; label: React.ReactNode; value: React.ReactNode }[];
 };
 
 export default function LabeledList(props: LabeledListProps) {
@@ -46,8 +46,3 @@ export default function LabeledList(props: LabeledListProps) {
     </ul>
   );
 }
-
-LabeledList.defaultProps = {
-  className: undefined,
-  dividerClassName: undefined,
-};

packages/jaeger-ui/src/components/common/LoadingIndicator.js → packages/jaeger-ui/src/components/common/LoadingIndicator.tsx

@@ -20,9 +20,9 @@ import { Icon } from 'antd';
 import './LoadingIndicator.css';
 
 type LoadingIndicatorProps = {
-  centered?: boolean,
-  className?: string,
-  small?: boolean,
+  centered?: boolean;
+  className?: string;
+  small?: boolean;
 };
 
 export default function LoadingIndicator(props: LoadingIndicatorProps) {

packages/jaeger-ui/src/components/common/NewWindowIcon.js → packages/jaeger-ui/src/components/common/NewWindowIcon.tsx

@@ -21,7 +21,7 @@ import IoAndroidOpen from 'react-icons/lib/io/android-open';
 import './NewWindowIcon.css';
 
 type Props = {
-  isLarge?: boolean,
+  isLarge?: boolean;
 };
 
 export default function NewWindowIcon(props: Props) {

packages/jaeger-ui/src/components/common/TraceName.js → packages/jaeger-ui/src/components/common/TraceName.tsx

@@ -20,22 +20,23 @@ import BreakableText from './BreakableText';
 import LoadingIndicator from './LoadingIndicator';
 import { fetchedState, FALLBACK_TRACE_NAME } from '../../constants';
 
-import type { FetchedState } from '../../types';
-import type { ApiError } from '../../types/api-error';
+import { FetchedState } from '../../types'; // eslint-disable-line no-unused-vars
+import { ApiError } from '../../types/api-error'; // eslint-disable-line no-unused-vars
 
 import './TraceName.css';
 
 type Props = {
-  className?: string,
-  error?: ?ApiError,
-  state?: ?FetchedState,
-  traceName?: ?string,
+  className?: string;
+  // TODO nullable type
+  error?: ApiError | undefined | null;
+  state?: FetchedState | undefined | null;
+  traceName?: string | undefined | null;
 };
 
 export default function TraceName(props: Props) {
   const { className, error, state, traceName } = props;
   const isErred = state === fetchedState.ERROR;
-  let title = traceName || FALLBACK_TRACE_NAME;
+  let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
   let errorCssClass = '';
   if (isErred) {
     errorCssClass = 'is-error';
@@ -46,19 +47,13 @@ export default function TraceName(props: Props) {
     if (!titleStr) {
       titleStr = 'Error: Unknown error';
     }
+    title = titleStr;
     title = <BreakableText text={titleStr} />;
   } else if (state === fetchedState.LOADING) {
     title = <LoadingIndicator small />;
   } else {
-    const text = traceName || FALLBACK_TRACE_NAME;
+    const text: string = String(traceName || FALLBACK_TRACE_NAME);
     title = <BreakableText text={text} />;
   }
   return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
 }
-
-TraceName.defaultProps = {
-  className: '',
-  error: null,
-  state: null,
-  traceName: null,
-};