[multipipeline-group-ui] add collapse/expand feature to multipipeline group

web/src/screens/repo/screens/build/components/procs.js

@@ -15,24 +15,47 @@ const renderEnviron = data => {
   );
 };
 
-const ProcListHolder = ({ vars, renderName, children }) => (
+class ProcListHolder extends Component {
-  <div className={styles.list}>
+  constructor(props, context) {
-    {renderName && vars.name !== "drone" ? (
+    super(props, context);
-      <div>
+    this.state = { open: false };
-        <StatusText status={vars.state} text={vars.name} />
+  }
+
+  toggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { vars, renderName, children } = this.props;
+    const groupExpandStatus = this.state.open
+      ? styles.collapsed
+      : styles.expanded;
+    return (
+      <div className={styles.list}>
+        {renderName && vars.name !== "drone" ? (
+          <div
+            onClick={this.toggleOpen}
+            className={`${styles.group} ${groupExpandStatus}`}
+          >
+            <StatusText status={vars.state} text={vars.name} />
+          </div>
+        ) : null}
+        {vars.environ ? (
+          <div
+            onClick={this.toggleOpen}
+            className={`${styles.group} ${groupExpandStatus}`}
+          >
+            <StatusText
+              status={vars.state}
+              text={Object.entries(vars.environ).map(renderEnviron)}
+            />
+          </div>
+        ) : null}
+        <div className={!this.state.open ? styles.hide : ""}>{children}</div>
       </div>
-    ) : null}
+    );
-    {vars.environ ? (
+  }
-      <div>
+}
-        <StatusText
-          status={vars.state}
-          text={Object.entries(vars.environ).map(renderEnviron)}
-        />
-      </div>
-    ) : null}
-    {children}
-  </div>
-);
 
 export class ProcList extends Component {
   render() {

web/src/screens/repo/screens/build/components/procs.less

@@ -8,6 +8,33 @@
 	}
 }
 
+.group {
+	cursor: pointer;
+	position: relative;
+}
+
+.expanded:after {
+	content: "+";
+	position: absolute;
+	top: 8px;
+	right: 12px;
+	color: white;
+	font-size: 16px;
+}
+
+.collapsed:after {
+	content: "—";
+	position: absolute;
+	top: 8px;
+	right: 12px;
+	color: white;
+	font-size: 16px;
+}
+
+.hide {
+	display: none;
+}
+
 .vars {
 	padding: 30px 0 0 10px;
 }