add function signatures

frontend/src/Css.tsx

@@ -15,8 +15,8 @@
  */
 
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import { style, stylesheet } from 'typestyle';
 import { NestedCSSProperties } from 'typestyle/lib/types';
+import { style, stylesheet } from 'typestyle';
 
 export const color = {
   activeBg: '#eaf1fd',
@@ -145,14 +145,14 @@ export const theme = createMuiTheme({
       },
     },
     MuiInput: {
-      input: {padding: 0},
-      root: {padding: 0}
+      input: { padding: 0 },
+      root: { padding: 0 }
     },
     MuiInputAdornment: {
       positionEnd: {
         paddingRight: 0,
       },
-      root: {padding: 0},
+      root: { padding: 0 },
     },
     MuiTooltip: {
       tooltip: {
@@ -267,7 +267,7 @@ export const commonCss = stylesheet({
   },
 });
 
-export function _paddingInternal(units?: number, directions?: string) {
+export function _paddingInternal(units?: number, directions?: string): NestedCSSProperties {
   units = units || baseSpacing;
   directions = directions || 'blrt';
   const rules: NestedCSSProperties = {};
@@ -286,6 +286,6 @@ export function _paddingInternal(units?: number, directions?: string) {
   return rules;
 }
 
-export function padding(units?: number, directions?: string) {
+export function padding(units?: number, directions?: string): string {
   return style(_paddingInternal(units, directions));
 }

frontend/src/TestUtils.tsx

@@ -17,15 +17,15 @@
 import * as React from 'react';
 // @ts-ignore
 import createRouterContext from 'react-router-test-context';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { object } from 'prop-types';
 
 export default class TestUtils {
   /**
    * Mounts the given component with a fake router and returns the mounted tree
    */
   // tslint:disable-next-line:variable-name
-  public static mountWithRouter(component: React.ReactElement<any>) {
+  public static mountWithRouter(component: React.ReactElement<any>): ReactWrapper {
     const childContextTypes = {
       router: object,
     };
@@ -39,15 +39,15 @@ export default class TestUtils {
    * only work if the promises have already been queued, so it cannot be used to
    * wait on a promise that hasn't been dispatched yet.
    */
-  public static flushPromises() {
+  public static flushPromises(): Promise<void> {
     return new Promise(resolve => setImmediate(resolve));
   }
 
   /**
    * Adds a one-time mock implementation to the provided spy that mimics an error
    * network response
    */
-  public static makeErrorResponseOnce(spy: jest.SpyInstance, message: string) {
+  public static makeErrorResponseOnce(spy: jest.SpyInstance, message: string): void {
     spy.mockImplementationOnce(() => {
       throw {
         text: () => Promise.resolve(message),

frontend/src/atoms/BusyButton.tsx

@@ -54,7 +54,7 @@ interface BusyButtonProps extends ButtonProps {
 }
 
 class BusyButton extends React.Component<BusyButtonProps> {
-  public render() {
+  public render(): JSX.Element {
     const { title, busy, className, disabled, icon, outlined, ...rest } = this.props;
 
     return <Button {...rest} color={outlined ? 'primary' : 'secondary'}

frontend/src/atoms/MD2Tabs.tsx

@@ -72,7 +72,7 @@ class MD2Tabs extends React.Component<MD2TabsProps, any> {
   private _tabRefs = this.props.tabs.map(t => React.createRef<HTMLSpanElement>());
   private _timeoutHandle = 0;
 
-  public render() {
+  public render(): JSX.Element {
     const selected = this._getSelectedIndex();
     const switchHandler = this.props.onSwitch || (() => null);
     return (
@@ -89,19 +89,19 @@ class MD2Tabs extends React.Component<MD2TabsProps, any> {
     );
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._timeoutHandle = setTimeout(this._updateIndicator.bind(this));
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     this._timeoutHandle = setTimeout(this._updateIndicator.bind(this));
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     clearTimeout(this._timeoutHandle);
   }
 
-  private _getSelectedIndex() {
+  private _getSelectedIndex(): number {
     let selected = this.props.selectedTab;
     if (this.props.tabs[selected] === undefined) {
       logger.error('Out of bound index passed for selected tab');
@@ -110,7 +110,7 @@ class MD2Tabs extends React.Component<MD2TabsProps, any> {
     return selected;
   }
 
-  private _updateIndicator() {
+  private _updateIndicator(): void {
     const selected = this._getSelectedIndex();
     const activeLabelElement = this._tabRefs[selected].current as HTMLSpanElement;
     const leftOffset = activeLabelElement.getBoundingClientRect().left -

frontend/src/components/Banner.tsx

@@ -77,7 +77,7 @@ class Banner extends React.Component<BannerProps, BannerState> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
 
     // Default to error styles.
     let bannerModeCss = stylesheet({ mode: { backgroundColor: color.errorBg, color: color.errorText, } });
@@ -121,12 +121,12 @@ class Banner extends React.Component<BannerProps, BannerState> {
 
         {this.props.additionalInfo
           && <Dialog open={this.state.dialogOpen} onClose={this._dialogClosed.bind(this)}>
-          <DialogTitle>{dialogTitle}</DialogTitle>
-          <DialogContent className={commonCss.prewrap}>{this.props.additionalInfo}</DialogContent>
-          <DialogActions>
-            <Button id='dismissDialogBtn' onClick={this._dialogClosed.bind(this)}>Dismiss</Button>
-          </DialogActions>
-        </Dialog>}
+            <DialogTitle>{dialogTitle}</DialogTitle>
+            <DialogContent className={commonCss.prewrap}>{this.props.additionalInfo}</DialogContent>
+            <DialogActions>
+              <Button id='dismissDialogBtn' onClick={this._dialogClosed.bind(this)}>Dismiss</Button>
+            </DialogActions>
+          </Dialog>}
       </div>
     );
   }

frontend/src/components/CustomTable.tsx

@@ -191,7 +191,7 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     };
   }
 
-  public handleSelectAllClick(event: React.MouseEvent) {
+  public handleSelectAllClick(event: React.MouseEvent): void {
     if (this.props.disableSelection === true) {
       return;
     }
@@ -202,7 +202,7 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     }
   }
 
-  public handleClick(e: React.MouseEvent, id: string) {
+  public handleClick(e: React.MouseEvent, id: string): void {
     if (this.props.disableSelection === true) {
       return;
     }
@@ -225,19 +225,19 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     e.stopPropagation();
   }
 
-  public isSelected(id: string) {
-    return this.props.selectedIds && this.props.selectedIds.indexOf(id) !== -1;
+  public isSelected(id: string): boolean {
+    return !!this.props.selectedIds && this.props.selectedIds.indexOf(id) !== -1;
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._pageChanged(0);
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     this._isMounted = false;
   }
 
-  public render() {
+  public render(): JSX.Element {
     const { pageSize, sortBy, sortOrder } = this.state;
     const numSelected = (this.props.selectedIds || []).length;
     const totalFlex = this.props.columns.reduce((total, c) => total += (c.flex || 1), 0);
@@ -386,13 +386,13 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     return this.props.reload(request);
   }
 
-  private setStateSafe(newState: Partial<CustomTableState>, cb?: () => void) {
+  private setStateSafe(newState: Partial<CustomTableState>, cb?: () => void): void {
     if (this._isMounted) {
       this.setState(newState as any, cb);
     }
   }
 
-  private _requestSort(sortBy?: string) {
+  private _requestSort(sortBy?: string): void {
     if (sortBy) {
       // Set the sort column to the provided column if it's different, and
       // invert the sort order it if it's the same column
@@ -405,7 +405,7 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     }
   }
 
-  private async _pageChanged(offset: number) {
+  private async _pageChanged(offset: number): Promise<void> {
     let newCurrentPage = this.state.currentPage + offset;
     let maxPageIndex = this.state.maxPageIndex;
     newCurrentPage = Math.max(0, newCurrentPage);
@@ -427,13 +427,13 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     this.setStateSafe({ currentPage: newCurrentPage, maxPageIndex });
   }
 
-  private async _requestRowsPerPage(event: React.ChangeEvent) {
+  private async _requestRowsPerPage(event: React.ChangeEvent): Promise<void> {
     const pageSize = (event.target as TextFieldProps).value as number;
 
     this._resetToFirstPage(await this.reload({ pageSize, pageToken: '' }));
   }
 
-  private _resetToFirstPage(newPageToken?: string) {
+  private _resetToFirstPage(newPageToken?: string): void {
     let maxPageIndex = Number.MAX_SAFE_INTEGER;
     const newTokenList = [''];
 
@@ -451,7 +451,7 @@ export default class CustomTable extends React.Component<CustomTableProps, Custo
     });
   }
 
-  private _expandButtonToggled(e: React.MouseEvent, rowIndex: number) {
+  private _expandButtonToggled(e: React.MouseEvent, rowIndex: number): void {
     e.stopPropagation();
     if (this.props.toggleExpansion) {
       this.props.toggleExpansion(rowIndex);

frontend/src/components/Graph.test.tsx

@@ -19,7 +19,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import Graph from './Graph';
 
-function newGraph() {
+function newGraph(): dagre.graphlib.Graph {
   const graph = new dagre.graphlib.Graph();
   graph.setGraph({});
   graph.setDefaultEdgeLabel(() => ({}));

frontend/src/components/Graph.tsx

@@ -119,7 +119,7 @@ interface GraphProps {
 }
 
 export default class Graph extends React.Component<GraphProps> {
-  public render() {
+  public render(): JSX.Element {
     const { graph } = this.props;
     const displayEdges: Edge[] = [];
     const displayEdgeStartPoints: number[][] = [];

frontend/src/components/LogViewer.tsx

@@ -69,15 +69,15 @@ interface LogViewerProps {
 class LogViewer extends React.Component<LogViewerProps> {
   private _rootRef = React.createRef<List>();
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this._scrollToEnd();
   }
 
-  public componentDidUpdate() {
+  public componentDidUpdate(): void {
     this._scrollToEnd();
   }
 
-  public render() {
+  public render(): JSX.Element {
     return <AutoSizer>
       {({ height, width }) => (
         <List id='logViewer' width={width} height={height} rowCount={this.props.logLines.length}
@@ -87,7 +87,7 @@ class LogViewer extends React.Component<LogViewerProps> {
     </AutoSizer>;
   }
 
-  private _scrollToEnd() {
+  private _scrollToEnd(): void {
     const root = this._rootRef.current;
     if (root) {
       root.scrollToRow(this.props.logLines.length + 1);

frontend/src/components/PlotCard.tsx

@@ -99,7 +99,7 @@ class PlotCard extends React.Component<PlotCardProps, PlotCardState> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element | null {
     const { title, configs, maxDimension, ...otherProps } = this.props;
 
     if (!configs || !configs.length) {

frontend/src/components/Router.tsx

@@ -92,7 +92,7 @@ class Router extends React.Component<{}, RouteComponentState> {
     };
   }
 
-  public render() {
+  public render(): JSX.Element {
     const childProps = {
       toolbarProps: this.state.toolbarProps,
       updateBanner: this._updateBanner.bind(this),

frontend/src/components/SideNav.tsx

@@ -146,7 +146,7 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
     };
   }
 
-  public async componentDidMount() {
+  public async componentDidMount(): Promise<void> {
     window.addEventListener('resize', this._maybeResize.bind(this));
     this._maybeResize();
 
@@ -156,7 +156,7 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
     }
   }
 
-  public render() {
+  public render(): JSX.Element {
     const page = this.props.page;
     const { collapsed } = this.state;
     const iconColor = {
@@ -209,7 +209,7 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
     );
   }
 
-  private _toggleNavClicked() {
+  private _toggleNavClicked(): void {
     this.setState({
       collapsed: !this.state.collapsed,
       manualCollapseState: true,
@@ -223,7 +223,7 @@ class SideNav extends React.Component<SideNavProps, SideNavState> {
     });
   }
 
-  private _maybeResize() {
+  private _maybeResize(): void {
     if (!this.state.manualCollapseState) {
       this._toggleNavCollapsed(window.innerWidth < this._AUTO_COLLAPSE_WIDTH);
     }

frontend/src/components/Toolbar.tsx

@@ -37,6 +37,11 @@ export interface ToolbarActionConfig {
   tooltip: string;
 }
 
+export interface Breadcrumb {
+  displayName: string;
+  href: string;
+}
+
 const backIconHeight = 24;
 
 const css = stylesheet({
@@ -92,11 +97,6 @@ const css = stylesheet({
   },
 });
 
-export interface Breadcrumb {
-  displayName: string;
-  href: string;
-}
-
 export interface ToolbarProps {
   actions: ToolbarActionConfig[];
   breadcrumbs: Breadcrumb[];
@@ -106,7 +106,7 @@ export interface ToolbarProps {
 
 class Toolbar extends React.Component<ToolbarProps> {
 
-  public render() {
+  public render(): JSX.Element {
     const currentPage = this.props.breadcrumbs.length ?
       this.props.breadcrumbs[this.props.breadcrumbs.length - 1].displayName : '';
     const breadcrumbs = this.props.breadcrumbs.slice(0, this.props.breadcrumbs.length - 1);

frontend/src/components/Trigger.test.tsx

@@ -23,7 +23,7 @@ describe('Trigger', () => {
   // tslint:disable-next-line:variable-name
   const RealDate = Date;
 
-  function mockDate(isoDate: any) {
+  function mockDate(isoDate: any): void {
     (global as any).Date = class extends RealDate {
       constructor() {
         super();