restore refresh, add test for it

kubeflow · Nov 20, 2018 · a0b154b · a0b154b
1 parent ec9c146
commit a0b154b
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 2 deletions.
diff --git a/frontend/src/pages/RecurringRunsManager.test.tsx b/frontend/src/pages/RecurringRunsManager.test.tsx
@@ -193,4 +193,17 @@ describe('RecurringRunsManager', () => {
     expect(enableJobSpy).toHaveBeenLastCalledWith(JOBS[2].id);
   });
 
+  it('reloads the list of runs after enable/disabling', async () => {
+    const tree = TestUtils.mountWithRouter(<RecurringRunsManager {...generateProps()} />);
+    await TestUtils.flushPromises();
+    tree.update();
+
+    const enableBtn = tree.find('.tableRow Button').at(0);
+    expect(enableBtn).toMatchSnapshot();
+
+    expect(listJobsSpy).toHaveBeenCalledTimes(1);
+    enableBtn.simulate('click');
+    await TestUtils.flushPromises();
+    expect(listJobsSpy).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/frontend/src/pages/RecurringRunsManager.tsx b/frontend/src/pages/RecurringRunsManager.tsx
@@ -41,6 +41,8 @@ interface RecurringRunListState {
 }
 
 class RecurringRunsManager extends React.Component<RecurringRunListProps, RecurringRunListState> {
+  private _tableRef = React.createRef<CustomTable>();
+
   constructor(props: any) {
     super(props);
 
@@ -80,12 +82,19 @@ class RecurringRunsManager extends React.Component<RecurringRunListProps, Recurr
 
     return (<div>
       <Toolbar actions={toolbarActions} breadcrumbs={[{ displayName: 'Recurring runs', href: '' }]} />
-      <CustomTable columns={columns} rows={rows} selectedIds={selectedIds} disableSelection={true}
+      <CustomTable columns={columns} rows={rows} ref={this._tableRef} selectedIds={selectedIds}
         updateSelection={ids => this.setState({ selectedIds: ids })} initialSortColumn={JobSortKeys.CREATED_AT}
-        reload={this._loadRuns.bind(this)} emptyMessage={'No recurring runs found in this experiment.'} />
+        reload={this._loadRuns.bind(this)} emptyMessage={'No recurring runs found in this experiment.'}
+        disableSelection={true} />
     </div>);
   }
 
+  public async refresh(): Promise<void> {
+    if (this._tableRef.current) {
+      await this._tableRef.current.reload();
+    }
+  }
+
   protected async _loadRuns(request: ListRequest): Promise<string> {
     let runs: ApiJob[] = [];
     let nextPageToken = '';
@@ -129,6 +138,7 @@ class RecurringRunsManager extends React.Component<RecurringRunListProps, Recurr
           busyIds = this.state.busyIds;
           busyIds.delete(id);
           this.setState({ busyIds });
+          await this.refresh();
         });
       }} />;
   }

diff --git a/frontend/src/pages/__snapshots__/RecurringRunsManager.test.tsx.snap b/frontend/src/pages/__snapshots__/RecurringRunsManager.test.tsx.snap
@@ -75,6 +75,140 @@ exports[`RecurringRunsManager calls API to load recurring runs 1`] = `
 </div>
 `;
 
+exports[`RecurringRunsManager reloads the list of runs after enable/disabling 1`] = `
+<Button
+  className="root"
+  classes={
+    Object {
+      "colorInherit": "MuiButton-colorInherit-104",
+      "contained": "MuiButton-contained-94",
+      "containedPrimary": "MuiButton-containedPrimary-95",
+      "containedSecondary": "MuiButton-containedSecondary-96",
+      "disabled": "MuiButton-disabled-103",
+      "extendedFab": "MuiButton-extendedFab-101",
+      "fab": "MuiButton-fab-100",
+      "flat": "MuiButton-flat-88",
+      "flatPrimary": "MuiButton-flatPrimary-89",
+      "flatSecondary": "MuiButton-flatSecondary-90",
+      "focusVisible": "MuiButton-focusVisible-102",
+      "fullWidth": "MuiButton-fullWidth-108",
+      "label": "MuiButton-label-84",
+      "mini": "MuiButton-mini-105",
+      "outlined": "MuiButton-outlined-91",
+      "outlinedPrimary": "MuiButton-outlinedPrimary-92",
+      "outlinedSecondary": "MuiButton-outlinedSecondary-93",
+      "raised": "MuiButton-raised-97",
+      "raisedPrimary": "MuiButton-raisedPrimary-98",
+      "raisedSecondary": "MuiButton-raisedSecondary-99",
+      "root": "MuiButton-root-83",
+      "sizeLarge": "MuiButton-sizeLarge-107",
+      "sizeSmall": "MuiButton-sizeSmall-106",
+      "text": "MuiButton-text-85",
+      "textPrimary": "MuiButton-textPrimary-86",
+      "textSecondary": "MuiButton-textSecondary-87",
+    }
+  }
+  color="primary"
+  component="button"
+  disableFocusRipple={false}
+  disabled={false}
+  fullWidth={false}
+  mini={false}
+  onClick={[Function]}
+  size="medium"
+  type="button"
+  variant="text"
+>
+  <WithStyles(ButtonBase)
+    className="MuiButton-root-83 MuiButton-text-85 MuiButton-textPrimary-86 MuiButton-flat-88 MuiButton-flatPrimary-89 root"
+    component="button"
+    disabled={false}
+    focusRipple={true}
+    focusVisibleClassName="MuiButton-focusVisible-102"
+    onClick={[Function]}
+    type="button"
+  >
+    <ButtonBase
+      centerRipple={false}
+      className="MuiButton-root-83 MuiButton-text-85 MuiButton-textPrimary-86 MuiButton-flat-88 MuiButton-flatPrimary-89 root"
+      classes={
+        Object {
+          "disabled": "MuiButtonBase-disabled-14",
+          "focusVisible": "MuiButtonBase-focusVisible-15",
+          "root": "MuiButtonBase-root-13",
+        }
+      }
+      component="button"
+      disableRipple={false}
+      disableTouchRipple={false}
+      disabled={false}
+      focusRipple={true}
+      focusVisibleClassName="MuiButton-focusVisible-102"
+      onClick={[Function]}
+      tabIndex="0"
+      type="button"
+    >
+      <button
+        className="MuiButtonBase-root-13 MuiButton-root-83 MuiButton-text-85 MuiButton-textPrimary-86 MuiButton-flat-88 MuiButton-flatPrimary-89 root"
+        disabled={false}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex="0"
+        type="button"
+      >
+        <span
+          className="MuiButton-label-84"
+        >
+          <span>
+            Enabled
+          </span>
+        </span>
+        <WithStyles(TouchRipple)
+          center={false}
+          innerRef={[Function]}
+        >
+          <TouchRipple
+            center={false}
+            classes={
+              Object {
+                "child": "MuiTouchRipple-child-80",
+                "childLeaving": "MuiTouchRipple-childLeaving-81",
+                "childPulsate": "MuiTouchRipple-childPulsate-82",
+                "ripple": "MuiTouchRipple-ripple-77",
+                "ripplePulsate": "MuiTouchRipple-ripplePulsate-79",
+                "rippleVisible": "MuiTouchRipple-rippleVisible-78",
+                "root": "MuiTouchRipple-root-76",
+              }
+            }
+          >
+            <TransitionGroup
+              childFactory={[Function]}
+              className="MuiTouchRipple-root-76"
+              component="span"
+              enter={true}
+              exit={true}
+            >
+              <span
+                className="MuiTouchRipple-root-76"
+              />
+            </TransitionGroup>
+          </TouchRipple>
+        </WithStyles(TouchRipple)>
+      </button>
+    </ButtonBase>
+  </WithStyles(ButtonBase)>
+</Button>
+`;
+
 exports[`RecurringRunsManager renders a disable button if the run is enabled, clicking the button calls disable API 1`] = `
 <Button
   className="root"