[UI] Fix artifact preview with outdated content (kubeflow#3749)

* Fix preview with outdated content * Update snapshot
Jeffwan · Dec 9, 2020 · 400a734 · 400a734
1 parent ca92bfb
commit 400a734
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/frontend/src/pages/RunDetails.tsx b/frontend/src/pages/RunDetails.tsx
@@ -356,9 +356,14 @@ class RunDetails extends Page<RunDetailsInternalProps, RunDetailsState> {
 
                                 {sidepanelSelectedTab === SidePaneTab.INPUT_OUTPUT && (
                                   <div className={padding(20)}>
-                                    <DetailsTable title='Input parameters' fields={inputParams} />
+                                    <DetailsTable
+                                      key={`input-parameters-${selectedNodeId}`}
+                                      title='Input parameters'
+                                      fields={inputParams}
+                                    />
 
                                     <DetailsTable
+                                      key={`input-artifacts-${selectedNodeId}`}
                                       title='Input artifacts'
                                       fields={inputArtifacts}
                                       valueComponent={MinioArtifactPreview}
@@ -367,9 +372,14 @@ class RunDetails extends Page<RunDetailsInternalProps, RunDetailsState> {
                                       }}
                                     />
 
-                                    <DetailsTable title='Output parameters' fields={outputParams} />
+                                    <DetailsTable
+                                      key={`output-parameters-${selectedNodeId}`}
+                                      title='Output parameters'
+                                      fields={outputParams}
+                                    />
 
                                     <DetailsTable
+                                      key={`output-artifacts-${selectedNodeId}`}
                                       title='Output artifacts'
                                       fields={outputArtifacts}
                                       valueComponent={MinioArtifactPreview}

diff --git a/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap b/frontend/src/pages/__snapshots__/RunDetails.test.tsx.snap
@@ -1056,10 +1056,12 @@ exports[`RunDetails opens side panel when graph node is clicked 1`] = `
                 >
                   <DetailsTable
                     fields={Array []}
+                    key="input-parameters-node1"
                     title="Input parameters"
                   />
                   <DetailsTable
                     fields={Array []}
+                    key="input-artifacts-node1"
                     title="Input artifacts"
                     valueComponent={[Function]}
                     valueComponentProps={
@@ -1070,10 +1072,12 @@ exports[`RunDetails opens side panel when graph node is clicked 1`] = `
                   />
                   <DetailsTable
                     fields={Array []}
+                    key="output-parameters-node1"
                     title="Output parameters"
                   />
                   <DetailsTable
                     fields={Array []}
+                    key="output-artifacts-node1"
                     title="Output artifacts"
                     valueComponent={[Function]}
                     valueComponentProps={
@@ -1645,10 +1649,12 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
                         ],
                       ]
                     }
+                    key="input-parameters-node1"
                     title="Input parameters"
                   />
                   <DetailsTable
                     fields={Array []}
+                    key="input-artifacts-node1"
                     title="Input artifacts"
                     valueComponent={[Function]}
                     valueComponentProps={
@@ -1670,10 +1676,12 @@ exports[`RunDetails switches to inputs/outputs tab in side pane 1`] = `
                         ],
                       ]
                     }
+                    key="output-parameters-node1"
                     title="Output parameters"
                   />
                   <DetailsTable
                     fields={Array []}
+                    key="output-artifacts-node1"
                     title="Output artifacts"
                     valueComponent={[Function]}
                     valueComponentProps={