Moves resourceToRow function into ResourceSelector

frontend/src/pages/NewRun.test.tsx

@@ -396,28 +396,6 @@ describe('NewRun', () => {
       await TestUtils.flushPromises();
     });
 
-    it('converts an ApiPipeline into a Row for displaying in the selector table', () => {
-      tree = shallow(<TestNewRun {...generateProps()} />);
-      const instance = tree.instance() as TestNewRun;
-
-      const pipeline = {
-        created_at: new Date(2018, 1, 2, 3, 4, 5),
-        description: 'a pipeline description',
-        id: 'a-pipeline-id',
-        name: 'a pipeline name',
-      };
-      expect(instance.callResourceToRow(pipeline)).toEqual({
-        error: undefined,
-        id: 'a-pipeline-id',
-        otherFields: [
-          'a pipeline name',
-          'a pipeline description',
-          '2/2/2018, 3:04:05 AM',
-        ],
-      });
-    });
-  });
-
   describe('choosing an experiment', () => {
     it('opens up the experiment selector modal when users clicks \'Choose\'', async () => {
       tree = TestUtils.mountWithRouter(<TestNewRun {...generateProps() as any} />);
@@ -497,27 +475,6 @@ describe('NewRun', () => {
       expect(tree.state('experimentSelectorOpen')).toBe(false);
       await TestUtils.flushPromises();
     });
-
-    it('converts an ApiExperiment into a Row for displaying in the selector table', () => {
-      tree = shallow(<TestNewRun {...generateProps()} />);
-      const instance = tree.instance() as TestNewRun;
-
-      const experiment = {
-        created_at: new Date(2018, 1, 2, 3, 4, 5),
-        description: 'a experiment description',
-        id: 'a-experiment-id',
-        name: 'a experiment name',
-      };
-      expect(instance.callResourceToRow(experiment)).toEqual({
-        error: undefined,
-        id: 'a-experiment-id',
-        otherFields: [
-          'a experiment name',
-          'a experiment description',
-          '2/2/2018, 3:04:05 AM',
-        ],
-      });
-    });
   });
 
   // TODO: Add test for when dialog is dismissed. Due to the particulars of how the Dialog element

frontend/src/pages/NewRun.tsx

@@ -188,9 +188,8 @@ class NewRun extends Page<{}, NewRunState> {
                 columns={this.pipelineSelectorColumns}
                 emptyMessage='No pipelines found. Upload a pipeline and then try again.'
                 initialSortColumn={PipelineSortKeys.CREATED_AT}
-                resourceToRow={this._resourceToRow}
                 selectionChanged={(selectedPipeline: ApiPipeline) =>
-                  this.setStateSafe({ unconfirmedSelectedPipeline: selectedPipeline })}/>
+                  this.setStateSafe({ unconfirmedSelectedPipeline: selectedPipeline })} />
             </DialogContent>
             <DialogActions>
               <Button id='cancelPipelineSelectionBtn' onClick={() => this._pipelineSelectorClosed(false)} color='secondary'>
@@ -208,7 +207,7 @@ class NewRun extends Page<{}, NewRunState> {
             onClose={() => this._experimentSelectorClosed(false)}
             PaperProps={{ id: 'experimentSelectorDialog' }}>
             <DialogContent>
-            <ResourceSelector {...this.props}
+              <ResourceSelector {...this.props}
                 title='Choose an experiment'
                 listApi={async (...args) => {
                   const response = await Apis.experimentServiceApi.listExperiment(...args);
@@ -217,9 +216,8 @@ class NewRun extends Page<{}, NewRunState> {
                 columns={this.experimentSelectorColumns}
                 emptyMessage='No experiments found. Create an experiment and then try again.'
                 initialSortColumn={ExperimentSortKeys.CREATED_AT}
-                resourceToRow={this._resourceToRow}
                 selectionChanged={(selectedExperiment: ApiExperiment) =>
-                  this.setStateSafe({ unconfirmedSelectedExperiment: selectedExperiment })}/>
+                  this.setStateSafe({ unconfirmedSelectedExperiment: selectedExperiment })} />
             </DialogContent>
             <DialogActions>
               <Button id='cancelExperimentSelectionBtn' onClick={() => this._experimentSelectorClosed(false)} color='secondary'>
@@ -237,6 +235,7 @@ class NewRun extends Page<{}, NewRunState> {
           <Input label='Description (optional)' multiline={true}
             onChange={this.handleChange('description')} value={description} />
 
+          <div>This run will be associated with the following experiment</div>
           <Input value={experimentName} required={true} label='Experiment' disabled={true}
             InputProps={{
               classes: { disabled: css.nonEditableInput },
@@ -406,19 +405,6 @@ class NewRun extends Page<{}, NewRunState> {
     this._validate();
   }
 
-  /* This function is passed as a callback to the selector dialogs to facilitate rendering */
-  protected _resourceToRow = (r: BaseResource) => {
-    return {
-      error: (r as any).error,
-      id: r.id!,
-      otherFields: [
-        r.name,
-        r.description,
-        formatDateString(r.created_at),
-      ],
-    } as Row;
-  };
-
   private async _prepareFormFromClone(originalRun: ApiRunDetail): Promise<void> {
     if (!originalRun.run) {
       logger.error('Could not get cloned run details');

frontend/src/pages/ResourceSelector.test.tsx

@@ -26,9 +26,14 @@ class TestResourceSelector extends ResourceSelector {
   public async _load(request: ListRequest): Promise<string> {
     return super._load(request);
   }
+
   public _selectionChanged(selectedIds: string[]): void {
     return super._selectionChanged(selectedIds);
   }
+
+  public _resourcesToRow(resources: BaseResource[]): Row[] {
+    return super._resourcesToRow(resources);
+  }
 }
 
 describe('ResourceSelector', () => {
@@ -81,7 +86,6 @@ describe('ResourceSelector', () => {
       listApi: listResourceSpy as any,
       location: '' as any,
       match: {} as any,
-      resourceToRow,
       selectionChanged: selectionChangedCbSpy,
       title: testTitle,
       updateDialog: updateDialogSpy,
@@ -101,12 +105,7 @@ describe('ResourceSelector', () => {
   });
 
   it('displays resource selector', async () => {
-    const props = generateProps();
-    props.columns = selectorColumns;
-    props.listApi = listResourceSpy as any;
-    props.initialSortColumn = 'created_at';
-
-    tree = shallow(<TestResourceSelector {...props} />);
+    tree = shallow(<TestResourceSelector {...generateProps()} />);
     await (tree.instance() as TestResourceSelector)._load({});
 
     expect(listResourceSpy).toHaveBeenCalledTimes(1);
@@ -115,10 +114,8 @@ describe('ResourceSelector', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('calls the provided helper function for converting a resource into a table row', async () => {
+  it('converts resources into a table rows', async () => {
     const props = generateProps();
-    props.columns = selectorColumns;
-    props.initialSortColumn = 'created_at';
     const resources: BaseResource[] = [
       {
         created_at: new Date(2018, 1, 2, 3, 4, 5),
@@ -130,25 +127,14 @@ describe('ResourceSelector', () => {
     listResourceSpy.mockImplementationOnce(() => ({ resources, nextPageToken: '' }));
     props.listApi = listResourceSpy as any;
 
-    props.resourceToRow = (r: BaseResource) => {
-      return {
-        id: r.id! + ' - test',
-        otherFields: [
-          r.name + ' - test',
-          r.description + ' - test',
-          formatDateString(r.created_at),
-        ],
-      } as Row;
-    };
-
     tree = shallow(<TestResourceSelector {...props} />);
     await (tree.instance() as TestResourceSelector)._load({});
 
     expect(tree.state('rows')).toEqual([{
-      id: 'an-id - test',
+      id: 'an-id',
       otherFields: [
-        'a name - test',
-        'a description - test',
+        'a name',
+        'a description',
         '2/2/2018, 3:04:05 AM',
       ],
     }]);

frontend/src/pages/ResourceSelector.tsx

@@ -19,7 +19,7 @@ import CustomTable, { Column, Row } from '../components/CustomTable';
 import Toolbar, { ToolbarActionConfig } from '../components/Toolbar';
 import { ListRequest } from '../lib/Apis';
 import { RouteComponentProps } from 'react-router-dom';
-import { logger, errorToMessage } from '../lib/Utils';
+import { logger, errorToMessage, formatDateString } from '../lib/Utils';
 import { DialogProps } from '../components/Router';
 
 interface BaseResponse {
@@ -40,7 +40,6 @@ export interface ResourceSelectorProps extends RouteComponentProps {
   columns: Column[];
   emptyMessage: string;
   initialSortColumn: any;
-  resourceToRow: (resource: BaseResource) => Row;
   selectionChanged: (resource: BaseResource) => void;
   title: string;
   updateDialog: (dialogProps: DialogProps) => void;
@@ -115,7 +114,7 @@ class ResourceSelector extends React.Component<ResourceSelectorProps, ResourceSe
 
       this.setStateSafe({
         resources: response.resources,
-        rows: response.resources.map((r) => this.props.resourceToRow(r))
+        rows: this._resourcesToRow(response.resources)
       });
 
       nextPageToken = response.nextPageToken;
@@ -130,6 +129,18 @@ class ResourceSelector extends React.Component<ResourceSelectorProps, ResourceSe
     }
     return nextPageToken;
   }
+
+  protected _resourcesToRow(resources: BaseResource[]): Row[] {
+    return resources.map((r) => ({
+      error: (r as any).error,
+      id: r.id!,
+      otherFields: [
+        r.name,
+        r.description,
+        formatDateString(r.created_at),
+      ],
+    } as Row));
+  }
 }
 
 export default ResourceSelector;