Refactor UI buttons to lib file

frontend/src/lib/Buttons.ts

@@ -0,0 +1,129 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import AddIcon from '@material-ui/icons/Add';
+import CollapseIcon from '@material-ui/icons/UnfoldLess';
+import ExpandIcon from '@material-ui/icons/UnfoldMore';
+import { ToolbarActionConfig } from '../components/Toolbar';
+
+interface ButtonsMap { [key: string]: (action: () => void) => ToolbarActionConfig; }
+
+// tslint:disable-next-line:variable-name
+const Buttons: ButtonsMap = {
+  archive: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Select at least one resource to archive',
+    id: 'archiveBtn',
+    title: 'Archive',
+    tooltip: 'Archive',
+  }),
+  cloneRun: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Select a run to clone',
+    id: 'cloneBtn',
+    title: 'Clone run',
+    tooltip: 'Create a copy from this run\s initial state',
+  }),
+  collapseSections: action => ({
+    action,
+    icon: CollapseIcon,
+    id: 'collapseBtn',
+    title: 'Collapse all',
+    tooltip: 'Collapse all sections',
+  }),
+  compareRuns: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Select multiple runs to compare',
+    id: 'compareBtn',
+    title: 'Compare runs',
+    tooltip: 'Compare up to 10 selected runs',
+  }),
+  delete: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Select at least one resource to delete',
+    id: 'deleteBtn',
+    title: 'Delete',
+    tooltip: 'Delete',
+  }),
+  disableRun: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Run schedule already disabled',
+    id: 'disableBtn',
+    title: 'Disable',
+    tooltip: 'Disable the run\'s trigger',
+  }),
+  enableRun: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Run schedule already enabled',
+    id: 'enableBtn',
+    title: 'Enable',
+    tooltip: 'Enable the run\'s trigger',
+  }),
+  expandSections: action => ({
+    action,
+    icon: ExpandIcon,
+    id: 'expandBtn',
+    title: 'Expand all',
+    tooltip: 'Expand all sections',
+  }),
+  newExperiment: action => ({
+    action,
+    icon: AddIcon,
+    id: 'newExperimentBtn',
+    outlined: true,
+    title: 'Create an experiment',
+    tooltip: 'Create a new experiment',
+  }),
+  newRun: action => ({
+    action,
+    icon: AddIcon,
+    id: 'createNewRunBtn',
+    outlined: true,
+    primary: true,
+    title: 'Create run',
+    tooltip: 'Create a new run within this pipeline',
+  }),
+  refresh: action => ({
+    action,
+    id: 'refreshBtn',
+    title: 'Refresh',
+    tooltip: 'Refresh the list',
+  }),
+  restore: action => ({
+    action,
+    disabled: true,
+    disabledTitle: 'Select at least one resource to restore',
+    id: 'archiveBtn',
+    title: 'Archive',
+    tooltip: 'Archive',
+  }),
+  upload: action => ({
+    action,
+    icon: AddIcon,
+    id: 'uploadBtn',
+    outlined: true,
+    title: 'Upload pipeline',
+    tooltip: 'Upload pipeline',
+  }),
+};
+
+export default Buttons;

frontend/src/pages/AllRunsList.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import AddIcon from '@material-ui/icons/Add';
+import Buttons from '../lib/Buttons';
 import RunList from './RunList';
 import { Page } from './Page';
 import { RoutePage, QUERY_PARAMS } from '../components/Router';
@@ -42,33 +42,12 @@ class AllRunsList extends Page<{}, AllRunsListState> {
 
   public getInitialToolbarState(): ToolbarProps {
     return {
-      actions: [{
-        action: this._newExperimentClicked.bind(this),
-        icon: AddIcon,
-        id: 'newExperimentBtn',
-        outlined: true,
-        title: 'Create experiment',
-        tooltip: 'Create a new experiment',
-      }, {
-        action: this._compareRuns.bind(this),
-        disabled: true,
-        disabledTitle: 'Select multiple runs to compare',
-        id: 'compareBtn',
-        title: 'Compare runs',
-        tooltip: 'Compare up to 10 selected runs',
-      }, {
-        action: this._cloneRun.bind(this),
-        disabled: true,
-        disabledTitle: 'Select a run to clone',
-        id: 'cloneBtn',
-        title: 'Clone run',
-        tooltip: 'Create a copy from this run\s initial state',
-      }, {
-        action: this.refresh.bind(this),
-        id: 'refreshBtn',
-        title: 'Refresh',
-        tooltip: 'Refresh the list of runs',
-      }],
+      actions: [
+        Buttons.newExperiment(this._newExperimentClicked.bind(this)),
+        Buttons.compareRuns(this._compareRuns.bind(this)),
+        Buttons.cloneRun(this._cloneRun.bind(this)),
+        Buttons.refresh(this.refresh.bind(this)),
+      ],
       breadcrumbs: [],
       pageTitle: 'Experiments',
     };

frontend/src/pages/Compare.tsx

@@ -15,18 +15,18 @@
  */
 
 import * as React from 'react';
+import Buttons from '../lib/Buttons';
 import CollapseButton from '../components/CollapseButton';
-import CollapseIcon from '@material-ui/icons/UnfoldLess';
 import CompareTable, { CompareTableProps } from '../components/CompareTable';
 import CompareUtils from '../lib/CompareUtils';
-import ExpandIcon from '@material-ui/icons/UnfoldMore';
 import Hr from '../atoms/Hr';
 import PlotCard, { PlotCardProps } from '../components/PlotCard';
 import RunList from './RunList';
 import Separator from '../atoms/Separator';
 import WorkflowParser from '../lib/WorkflowParser';
 import { ApiRunDetail } from '../apis/run';
 import { Apis } from '../lib/Apis';
+import { OutputArtifactLoader } from '../lib/OutputArtifactLoader';
 import { Page } from './Page';
 import { RoutePage, QUERY_PARAMS } from '../components/Router';
 import { ToolbarProps } from '../components/Toolbar';
@@ -36,7 +36,6 @@ import { Workflow } from '../../third_party/argo-ui/argo_template';
 import { classes, stylesheet } from 'typestyle';
 import { commonCss, padding } from '../Css';
 import { componentMap } from '../components/viewers/ViewerContainer';
-import { OutputArtifactLoader } from '../lib/OutputArtifactLoader';
 import { logger } from '../lib/Utils';
 
 const css = stylesheet({
@@ -83,19 +82,10 @@ class Compare extends Page<{}, CompareState> {
 
   public getInitialToolbarState(): ToolbarProps {
     return {
-      actions: [{
-        action: () => this.setState({ collapseSections: {} }),
-        icon: ExpandIcon,
-        id: 'expandBtn',
-        title: 'Expand all',
-        tooltip: 'Expand all sections',
-      }, {
-        action: this._collapseAllSections.bind(this),
-        icon: CollapseIcon,
-        id: 'collapseBtn',
-        title: 'Collapse all',
-        tooltip: 'Collapse all sections',
-      }],
+      actions: [
+        Buttons.expandSections(() => this.setState({ collapseSections: {} })),
+        Buttons.collapseSections(this._collapseAllSections.bind(this)),
+      ],
       breadcrumbs: [{ displayName: 'Experiments', href: RoutePage.EXPERIMENTS }],
       pageTitle: 'Compare runs',
     };

frontend/src/pages/ExperimentDetails.tsx

@@ -17,6 +17,7 @@
 import * as React from 'react';
 import AddIcon from '@material-ui/icons/Add';
 import Button from '@material-ui/core/Button';
+import Buttons from '../lib/Buttons';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -163,12 +164,7 @@ class ExperimentDetails extends Page<{}, ExperimentDetailsState> {
 
   public getInitialToolbarState(): ToolbarProps {
     return {
-      actions: [{
-        action: this.refresh.bind(this),
-        id: 'refreshBtn',
-        title: 'Refresh',
-        tooltip: 'Refresh',
-      }],
+      actions: [Buttons.refresh(this.refresh.bind(this))],
       breadcrumbs: [{ displayName: 'Experiments', href: RoutePage.EXPERIMENTS }],
       // TODO: determine what to show if no props.
       pageTitle: this.props ? this.props.match.params[RouteParams.experimentId] : '',

frontend/src/pages/ExperimentList.test.tsx

@@ -247,15 +247,15 @@ describe('ExperimentList', () => {
   it('navigates to new experiment page when Create experiment button is clicked', async () => {
     const tree = TestUtils.mountWithRouter(<ExperimentList {...generateProps()} />);
     const createBtn = (tree.instance() as ExperimentList)
-      .getInitialToolbarState().actions.find(b => b.title === 'Create experiment');
+      .getInitialToolbarState().actions.find(b => b.title === 'Create an experiment');
     await createBtn!.action();
     expect(historyPushSpy).toHaveBeenLastCalledWith(RoutePage.NEW_EXPERIMENT);
   });
 
   it('always has new experiment button enabled', async () => {
     const tree = await mountWithNExperiments(1, 1);
     const calls = updateToolbarSpy.mock.calls[0];
-    expect(calls[0].actions.find((b: any) => b.title === 'Create experiment')).not.toHaveProperty('disabled');
+    expect(calls[0].actions.find((b: any) => b.title === 'Create an experiment')).not.toHaveProperty('disabled');
     tree.unmount();
   });
 

frontend/src/pages/ExperimentList.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import AddIcon from '@material-ui/icons/Add';
+import Buttons from '../lib/Buttons';
 import CustomTable, { Column, Row, ExpandState } from '../components/CustomTable';
 import RunList from './RunList';
 import produce from 'immer';
@@ -59,33 +59,12 @@ class ExperimentList extends Page<{}, ExperimentListState> {
 
   public getInitialToolbarState(): ToolbarProps {
     return {
-      actions: [{
-        action: this._newExperimentClicked.bind(this),
-        icon: AddIcon,
-        id: 'newExperimentBtn',
-        outlined: true,
-        title: 'Create experiment',
-        tooltip: 'Create a new experiment',
-      }, {
-        action: this._compareRuns.bind(this),
-        disabled: true,
-        disabledTitle: 'Select multiple runs to compare',
-        id: 'compareBtn',
-        title: 'Compare runs',
-        tooltip: 'Compare up to 10 selected runs',
-      }, {
-        action: this._cloneRun.bind(this),
-        disabled: true,
-        disabledTitle: 'Select a run to clone',
-        id: 'cloneBtn',
-        title: 'Clone run',
-        tooltip: 'Create a copy from this run\s initial state',
-      }, {
-        action: this.refresh.bind(this),
-        id: 'refreshBtn',
-        title: 'Refresh',
-        tooltip: 'Refresh the list of experiments',
-      }],
+      actions: [
+        Buttons.newExperiment(this._newExperimentClicked.bind(this)),
+        Buttons.compareRuns(this._compareRuns.bind(this)),
+        Buttons.cloneRun(this._cloneRun.bind(this)),
+        Buttons.refresh(this.refresh.bind(this)),
+      ],
       breadcrumbs: [],
       pageTitle: 'Experiments',
     };

frontend/src/pages/PipelineDetails.tsx

@@ -19,8 +19,8 @@ import 'codemirror/mode/yaml/yaml.js';
 import * as JsYaml from 'js-yaml';
 import * as React from 'react';
 import * as StaticGraphParser from '../lib/StaticGraphParser';
-import AddIcon from '@material-ui/icons/Add';
 import Button from '@material-ui/core/Button';
+import Buttons from '../lib/Buttons';
 import Graph from '../components/Graph';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import MD2Tabs from '../atoms/MD2Tabs';
@@ -114,15 +114,7 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
 
   public getInitialToolbarState(): ToolbarProps {
     const fromRunId = new URLParser(this.props).get(QUERY_PARAMS.fromRunId);
-    const actions: ToolbarActionConfig[] = [{
-      action: () => this._createNewRun(),
-      icon: AddIcon,
-      id: 'createNewRunBtn',
-      outlined: true,
-      primary: true,
-      title: 'Create run',
-      tooltip: 'Create a new run within this pipeline',
-    }];
+    let actions: ToolbarActionConfig[] = [Buttons.newRun(this._createNewRun.bind(this))];
 
     if (fromRunId) {
       return {
@@ -134,26 +126,17 @@ class PipelineDetails extends Page<{}, PipelineDetailsState> {
       };
     } else {
       // Add buttons for creating experiment and deleting pipeline
-      actions.push({
-        action: this._createNewExperiment.bind(this),
-        icon: AddIcon,
-        id: 'createNewExperimentBtn',
-        outlined: true,
-        title: 'Create an experiment',
-        tooltip: 'Create a new experiment beginning with this pipeline',
-      }, {
-        action: () => this.props.updateDialog({
+      actions = actions.concat([
+        Buttons.newExperiment(this._createNewExperiment.bind(this)),
+        Buttons.delete(() => this.props.updateDialog({
           buttons: [
             { onClick: () => this._deleteDialogClosed(true), text: 'Delete' },
             { onClick: () => this._deleteDialogClosed(false), text: 'Cancel' },
           ],
           onClose: () => this._deleteDialogClosed(false),
           title: 'Delete this pipeline?',
-        }),
-        id: 'deleteBtn',
-        title: 'Delete',
-        tooltip: 'Delete this pipeline',
-      });
+        }))
+      ]);
       return {
         actions,
         breadcrumbs: [{ displayName: 'Pipelines', href: RoutePage.PIPELINES }],