Add experiment selector to NewRun (#486)

* Adds an experiment selector to the new run page. Needs tests * Adds an experiment selector to the new run page. Needs tests * Adds tests for the new experiment selector in NewRun * Rename PipelineSelector -> ResourceSelector since it handles experiments as well * Makes ResourceSelector more abstract. No longer coupled to experiments and pipelines * PR comments, NewRun clean-up * Moves resourceToRow function into ResourceSelector * Fix e2e test
kubeflow · Dec 7, 2018 · 114c99d · 114c99d
1 parent ad1950b
commit 114c99d
Show file tree

Hide file tree

Showing 13 changed files with 3,659 additions and 1,119 deletions.
diff --git a/frontend/src/TestUtils.tsx b/frontend/src/TestUtils.tsx
@@ -47,7 +47,7 @@ export default class TestUtils {
    * Adds a one-time mock implementation to the provided spy that mimics an error
    * network response
    */
-  public static makeErrorResponseOnce(spy: jest.SpyInstance, message: string): void {
+  public static makeErrorResponseOnce(spy: jest.MockInstance<{}>, message: string): void {
     spy.mockImplementationOnce(() => {
       throw {
         text: () => Promise.resolve(message),

diff --git a/frontend/src/components/Trigger.tsx b/frontend/src/components/Trigger.tsx
@@ -28,6 +28,7 @@ import {
   pickersToDate, buildTrigger
 } from '../lib/TriggerUtils';
 import { ApiTrigger } from '../apis/job';
+import { stylesheet } from 'typestyle';
 
 interface TriggerProps {
   onChange?: (trigger?: ApiTrigger, maxConcurrentRuns?: string) => void;
@@ -49,6 +50,12 @@ interface TriggerState {
   type: TriggerType;
 }
 
+const css = stylesheet({
+  noMargin: {
+    margin: 0
+  },
+});
+
 export default class Trigger extends React.Component<TriggerProps, TriggerState> {
   constructor(props: any) {
     super(props);
@@ -108,10 +115,12 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
             label='Has start date' />
           <Input label='Start date' type='date' onChange={this.handleChange('startDate')}
             value={startDate} width={160}
+            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
             style={{ visibility: hasStartDate ? 'visible' : 'hidden' }} />
           <Separator />
           <Input label='Start time' type='time' onChange={this.handleChange('startTime')}
             value={startTime} width={120}
+            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}}
             style={{ visibility: hasStartDate ? 'visible' : 'hidden' }} />
         </div>
 
@@ -121,10 +130,12 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
               onClick={this.handleChange('hasEndDate')} />}
             label='Has end date' />
           <Input label='End date' type='date' onChange={this.handleChange('endDate')}
-            value={endDate} width={160} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }} />
+            value={endDate} width={160} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
+            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}} />
           <Separator />
           <Input label='End time' type='time' onChange={this.handleChange('endTime')}
-            value={endTime} width={120} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }} />
+            value={endTime} width={120} style={{ visibility: hasEndDate ? 'visible' : 'hidden' }}
+            InputLabelProps={{ classes: { outlined: css.noMargin }, shrink: true}} />
         </div>
 
         <span className={commonCss.flex}>

diff --git a/frontend/src/components/__snapshots__/Trigger.test.tsx.snap b/frontend/src/components/__snapshots__/Trigger.test.tsx.snap
@@ -43,6 +43,14 @@ exports[`Trigger enables a single day on click 1`] = `
         label="Has start date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start date"
         onChange={[Function]}
         style={
@@ -56,6 +64,14 @@ exports[`Trigger enables a single day on click 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start time"
         onChange={[Function]}
         style={
@@ -82,6 +98,14 @@ exports[`Trigger enables a single day on click 1`] = `
         label="Has end date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End date"
         onChange={[Function]}
         style={
@@ -95,6 +119,14 @@ exports[`Trigger enables a single day on click 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End time"
         onChange={[Function]}
         style={
@@ -314,6 +346,14 @@ exports[`Trigger renders all week days enabled 1`] = `
         label="Has start date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start date"
         onChange={[Function]}
         style={
@@ -327,6 +367,14 @@ exports[`Trigger renders all week days enabled 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start time"
         onChange={[Function]}
         style={
@@ -353,6 +401,14 @@ exports[`Trigger renders all week days enabled 1`] = `
         label="Has end date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End date"
         onChange={[Function]}
         style={
@@ -366,6 +422,14 @@ exports[`Trigger renders all week days enabled 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End time"
         onChange={[Function]}
         style={
@@ -585,6 +649,14 @@ exports[`Trigger renders periodic schedule controls for initial render 1`] = `
         label="Has start date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start date"
         onChange={[Function]}
         style={
@@ -598,6 +670,14 @@ exports[`Trigger renders periodic schedule controls for initial render 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start time"
         onChange={[Function]}
         style={
@@ -624,6 +704,14 @@ exports[`Trigger renders periodic schedule controls for initial render 1`] = `
         label="Has end date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End date"
         onChange={[Function]}
         style={
@@ -637,6 +725,14 @@ exports[`Trigger renders periodic schedule controls for initial render 1`] = `
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End time"
         onChange={[Function]}
         style={
@@ -755,6 +851,14 @@ exports[`Trigger renders periodic schedule controls if the trigger type is CRON
         label="Has start date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start date"
         onChange={[Function]}
         style={
@@ -768,6 +872,14 @@ exports[`Trigger renders periodic schedule controls if the trigger type is CRON
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start time"
         onChange={[Function]}
         style={
@@ -794,6 +906,14 @@ exports[`Trigger renders periodic schedule controls if the trigger type is CRON
         label="Has end date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End date"
         onChange={[Function]}
         style={
@@ -807,6 +927,14 @@ exports[`Trigger renders periodic schedule controls if the trigger type is CRON
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End time"
         onChange={[Function]}
         style={
@@ -947,6 +1075,14 @@ exports[`Trigger renders week days if the trigger type is CRON and interval is w
         label="Has start date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start date"
         onChange={[Function]}
         style={
@@ -960,6 +1096,14 @@ exports[`Trigger renders week days if the trigger type is CRON and interval is w
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="Start time"
         onChange={[Function]}
         style={
@@ -986,6 +1130,14 @@ exports[`Trigger renders week days if the trigger type is CRON and interval is w
         label="Has end date"
       />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End date"
         onChange={[Function]}
         style={
@@ -999,6 +1151,14 @@ exports[`Trigger renders week days if the trigger type is CRON and interval is w
       />
       <Component />
       <Component
+        InputLabelProps={
+          Object {
+            "classes": Object {
+              "outlined": "noMargin",
+            },
+            "shrink": true,
+          }
+        }
         label="End time"
         onChange={[Function]}
         style={