GUI detached configurations (#3413): select pipeline - latest version… (

#3416) * GUI detached configurations (#3413): select pipeline - latest version placeholder * GUI, Pipeline selection modal, latestVersionPlaceholder -> allowSelectLatestVersion * GUI, Pipeline selection modal, hide actions button if no actions specified --------- Co-authored-by: Mikhail Rodichenko <[email protected]>
epam · Dec 22, 2023 · b7bdd9b · b7bdd9b
1 parent 5897d2a
commit b7bdd9b
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 70 deletions.
diff --git a/client/src/components/pipelines/browser/Pipeline.js b/client/src/components/pipelines/browser/Pipeline.js
@@ -54,6 +54,14 @@ import HiddenObjects from '../../../utils/hidden-objects';
 import CloneForm from './forms/CloneForm';
 import styles from './Browser.css';
 
+const LATEST_VERSION_PLACEHOLDER = {
+  id: 'latest',
+  key: 'latest',
+  name: 'latest',
+  commitId: 'latest',
+  type: ItemTypes.version
+};
+
 @connect({
   pipelinesLibrary,
   folders,
@@ -91,7 +99,8 @@ export default class Pipeline extends localization.LocalizedReactComponent {
     onReloadTree: PropTypes.func,
     selectedVersion: PropTypes.string,
     selectedConfiguration: PropTypes.string,
-    configurationSelectionMode: PropTypes.bool
+    configurationSelectionMode: PropTypes.bool,
+    allowSelectLatestVersion: PropTypes.bool
   };
 
   state = {
@@ -152,6 +161,9 @@ export default class Pipeline extends localization.LocalizedReactComponent {
       key: 'createdDate',
       className: `${styles.treeItemName}`,
       render: (text, item) => {
+        if (item.id === LATEST_VERSION_PLACEHOLDER.id) {
+          return null;
+        }
         return this.renderTreeItemText(
           <span>
             Last updated: {
@@ -218,6 +230,9 @@ export default class Pipeline extends localization.LocalizedReactComponent {
       key: 'createdDate',
       className: styles.treeItemName,
       render: (text, item) => {
+        if (item.id === LATEST_VERSION_PLACEHOLDER.id) {
+          return null;
+        }
         return this.renderTreeItemText(
           <span>
             Last updated: {item.author && 'by '}
@@ -296,7 +311,7 @@ export default class Pipeline extends localization.LocalizedReactComponent {
           const configurations = this.state.configurations[item.id].list;
           return (
             <Select
-              style={{width: '100%'}}
+              style={{width: '100%', minWidth: '70px'}}
               value={this.state.configurations[item.id].selected}
               onSelect={this.onSelectConfiguration(item)}>
               {
@@ -708,28 +723,31 @@ export default class Pipeline extends localization.LocalizedReactComponent {
         </MenuItem>
       );
     }
-    return (
-      <Dropdown
-        placement="bottomRight"
-        overlay={
-          <Menu
-            selectedKeys={[]}
-            onClick={onClick}
-            style={{width: 100}}
-          >
-            {actions}
-          </Menu>
-        }
-        key="edit">
-        <Button
-          key="edit"
-          id="edit-pipeline-menu-button"
-          style={{lineHeight: 1}}
-          size="small">
-          <Icon type="setting" />
-        </Button>
-      </Dropdown>
-    );
+    if (actions.length > 0) {
+      return (
+        <Dropdown
+          placement="bottomRight"
+          overlay={
+            <Menu
+              selectedKeys={[]}
+              onClick={onClick}
+              style={{width: 100}}
+            >
+              {actions}
+            </Menu>
+          }
+          key="edit">
+          <Button
+            key="edit"
+            id="edit-pipeline-menu-button"
+            style={{lineHeight: 1}}
+            size="small">
+            <Icon type="setting"/>
+          </Button>
+        </Dropdown>
+      );
+    }
+    return null;
   };
 
   render () {
@@ -755,6 +773,12 @@ export default class Pipeline extends localization.LocalizedReactComponent {
           filter: this.props.hiddenObjectsTreeFilter()
         }
       );
+      if (this.props.allowSelectLatestVersion) {
+        this._versions = [
+          LATEST_VERSION_PLACEHOLDER,
+          ...this._versions
+        ];
+      }
       versionsContent = (
         <Table
           key={CONTENT_PANEL_KEY}
@@ -885,7 +909,13 @@ export default class Pipeline extends localization.LocalizedReactComponent {
   }
 
   loadConfigurations = async () => {
-    const versions = this.props.versions.value.map(v => v);
+    let versions = this.props.versions.value.map(v => v);
+    if (this.props.allowSelectLatestVersion) {
+      versions = [
+        LATEST_VERSION_PLACEHOLDER,
+        ...versions
+      ];
+    }
     const configurations = {};
     for (let i = 0; i < versions.length; i++) {
       const version = versions[i];

diff --git a/client/src/components/pipelines/launch/dialogs/PipelineBrowser.js b/client/src/components/pipelines/launch/dialogs/PipelineBrowser.js
@@ -66,7 +66,8 @@ export default class PipelineBrowser extends localization.LocalizedReactComponen
     fireCloudMethodConfigurationSnapshot: PropTypes.string,
     visible: PropTypes.bool,
     onSelect: PropTypes.func,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
+    allowSelectLatestVersion: PropTypes.bool
   };
 
   rootItems = [];
@@ -211,7 +212,7 @@ export default class PipelineBrowser extends localization.LocalizedReactComponen
               className={`pipelines-library-tree-node-${item.key}`}
               title={this.renderItemTitle(item)}
               key={item.key}
-              isLeaf={item.isLeaf}/>
+              isLeaf={item.isLeaf} />
           );
         } else {
           return (
@@ -477,6 +478,7 @@ export default class PipelineBrowser extends localization.LocalizedReactComponen
             listingMode
             configurationSelectionMode
             readOnly
+            allowSelectLatestVersion={!!this.props.allowSelectLatestVersion}
           />
         );
       } else {

diff --git a/client/src/components/pipelines/launch/form/LaunchPipelineForm.js b/client/src/components/pipelines/launch/form/LaunchPipelineForm.js
@@ -2396,57 +2396,55 @@ class LaunchPipelineForm extends localization.LocalizedReactComponent {
           }
         });
       }
-    } else {
-      if (pipeline) {
-        const [existedPipeline] = this.props.pipelines.filter(p => p.id === pipeline.id);
-        if (existedPipeline) {
-          this.addedParameters = {};
-          this.rebuildParameters = {
-            [PARAMETERS]: true,
-            [SYSTEM_PARAMETERS]: true
-          };
-          this.setState({
-            pipeline: existedPipeline,
-            version: pipeline.version,
-            pipelineConfiguration: pipeline.configuration,
-            fireCloudMethodName: null,
-            fireCloudMethodNamespace: null,
-            fireCloudMethodSnapshot: null,
-            fireCloudMethodConfiguration: null,
-            fireCloudMethodConfigurationSnapshot: null,
-            fireCloudInputs: {},
-            fireCloudOutputs: {},
-            fireCloudInputsErrors: {},
-            fireCloudOutputsErrors: {},
-            fireCloudDefaultInputs: [],
-            fireCloudDefaultOutputs: []
-          }, () => {
-            if (this.props.onSelectPipeline) {
-              this.props.onSelectPipeline({
-                pipeline: existedPipeline,
-                version: pipeline.version,
-                configuration: pipeline.configuration
-              }, () => {
-                this.prevParameters = this.props.form.getFieldsValue().parameters;
-                this.reset(true);
-                this.evaluateEstimatedPrice({});
-              });
-            }
-          });
-        }
-      } else {
+    } else if (pipeline) {
+      const [existedPipeline] = this.props.pipelines.filter(p => p.id === pipeline.id);
+      if (existedPipeline) {
+        this.addedParameters = {};
+        this.rebuildParameters = {
+          [PARAMETERS]: true,
+          [SYSTEM_PARAMETERS]: true
+        };
         this.setState({
-          pipeline: null,
-          version: null,
-          configuration: null
+          pipeline: existedPipeline,
+          version: pipeline.version,
+          pipelineConfiguration: pipeline.configuration,
+          fireCloudMethodName: null,
+          fireCloudMethodNamespace: null,
+          fireCloudMethodSnapshot: null,
+          fireCloudMethodConfiguration: null,
+          fireCloudMethodConfigurationSnapshot: null,
+          fireCloudInputs: {},
+          fireCloudOutputs: {},
+          fireCloudInputsErrors: {},
+          fireCloudOutputsErrors: {},
+          fireCloudDefaultInputs: [],
+          fireCloudDefaultOutputs: []
         }, () => {
           if (this.props.onSelectPipeline) {
-            this.props.onSelectPipeline(null, () => {
+            this.props.onSelectPipeline({
+              pipeline: existedPipeline,
+              version: pipeline.version,
+              configuration: pipeline.configuration
+            }, () => {
+              this.prevParameters = this.props.form.getFieldsValue().parameters;
               this.reset(true);
+              this.evaluateEstimatedPrice({});
             });
           }
         });
       }
+    } else {
+      this.setState({
+        pipeline: null,
+        version: null,
+        configuration: null
+      }, () => {
+        if (this.props.onSelectPipeline) {
+          this.props.onSelectPipeline(null, () => {
+            this.reset(true);
+          });
+        }
+      });
     }
     this.closePipelineBrowser();
     this.formFieldsChanged();
@@ -5793,6 +5791,7 @@ class LaunchPipelineForm extends localization.LocalizedReactComponent {
           pipelineId={this.state.pipeline ? this.state.pipeline.id : undefined}
           version={this.state.version}
           pipelineConfiguration={this.state.pipelineConfiguration}
+          allowSelectLatestVersion={!!this.props.isDetachedConfiguration}
           fireCloudMethod={this.state.fireCloudMethodName}
           fireCloudNamespace={this.state.fireCloudMethodNamespace}
           fireCloudMethodSnapshot={this.state.fireCloudMethodSnapshot}