feat(frontend): Add support for namespace pipelines in runs V2

Signed-off-by: Tasos Alexiou <tasos@arrikto.com>
kubeflow · Feb 10, 2023 · f315b65 · f315b65
1 parent 4b52e13
commit f315b65
Showing 1 changed file with 14 additions and 50 deletions.
diff --git a/frontend/src/pages/NewRunV2.tsx b/frontend/src/pages/NewRunV2.tsx
@@ -56,6 +56,7 @@ import { convertYamlToV2PipelineSpec } from 'src/lib/v2/WorkflowUtils';
 import { classes, stylesheet } from 'typestyle';
 import { PageProps } from './Page';
 import ResourceSelector from './ResourceSelector';
+import PipelinesDialog from 'src/components/PipelinesDialog';
 
 const css = stylesheet({
   nonEditableInput: {
@@ -704,7 +705,6 @@ type PipelineSelectorProps = PageProps & PipelineSelectorSpecificProps;
 
 function PipelineSelector(props: PipelineSelectorProps) {
   const [pipelineSelectorOpen, setPipelineSelectorOpen] = useState(false);
-  const [pendingPipeline, setPendingPipeline] = useState<ApiPipeline>();
 
   return (
     <>
@@ -733,56 +733,20 @@ function PipelineSelector(props: PipelineSelectorProps) {
       />
 
       {/* Pipeline selector dialog */}
-      <Dialog
+      <PipelinesDialog
+        {...props}
         open={pipelineSelectorOpen}
-        classes={{ paper: css.selectorDialog }}
-        onClose={() => setPipelineSelectorOpen(false)}
-        PaperProps={{ id: 'pipelineSelectorDialog' }}
-      >
-        <DialogContent>
-          <ResourceSelector
-            {...props}
-            title='Choose a pipeline'
-            filterLabel='Filter pipelines'
-            listApi={async (...args) => {
-              const response = await Apis.pipelineServiceApi.listPipelines(...args);
-              return {
-                nextPageToken: response.next_page_token || '',
-                resources: response.pipelines || [],
-              };
-            }}
-            columns={PIPELINE_SELECTOR_COLUMNS}
-            emptyMessage='No pipelines found. Upload a pipeline and then try again.'
-            initialSortColumn={PipelineSortKeys.CREATED_AT}
-            selectionChanged={(selectedPipeline: ApiPipeline) =>
-              setPendingPipeline(selectedPipeline)
-            }
-            // TODO(jlyaoyuli): enable pipeline upload function in the selector dialog
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button
-            id='cancelPipelineSelectionBtn'
-            onClick={() => setPipelineSelectorOpen(false)}
-            color='secondary'
-          >
-            Cancel
-          </Button>
-          <Button
-            id='usePipelineBtn'
-            onClick={() => {
-              if (pendingPipeline) {
-                props.handlePipelineChange(pendingPipeline);
-              }
-              setPipelineSelectorOpen(false);
-            }}
-            color='secondary'
-            disabled={!pendingPipeline}
-          >
-            Use this pipeline
-          </Button>
-        </DialogActions>
-      </Dialog>
+        selectorDialog={css.selectorDialog}
+        onClose={(confirmed, selectedPipeline?: ApiPipeline) => {
+          if (confirmed && selectedPipeline) {
+            props.handlePipelineChange(selectedPipeline);
+          }
+          setPipelineSelectorOpen(false);
+        }}
+        namespace={props.namespace}
+        pipelineSelectorColumns={PIPELINE_SELECTOR_COLUMNS}
+        // TODO(jlyaoyuli): enable pipeline upload function in the selector dialog
+      ></PipelinesDialog>
     </>
   );
 }