New interface for displaying and editing pipeline configuration.

src/components/Pipelines/BoxForm/index.js

@@ -0,0 +1,3 @@
+import BoxForm, { newBoxInitialData } from './BoxForm';
+export { newBoxInitialData };
+export default BoxForm;

src/components/Pipelines/BoxesTable/BoxesTable.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { Table } from 'react-bootstrap';
+import { defaultMemoize } from 'reselect';
+
+import BoxesTableRow from './BoxesTableRow';
+import { arrayToObject } from '../../../helpers/common';
+
+const prepareSelectionIndex = defaultMemoize(
+  selections =>
+    selections &&
+    arrayToObject(
+      selections,
+      x => x,
+      () => true
+    )
+);
+
+const BoxesTable = ({
+  boxes,
+  variables = null,
+  secondarySelections = null,
+  selectedVariable = null,
+  removeBox = null,
+  intl: { locale },
+  ...rowProps
+}) => {
+  const selectionIndex = secondarySelections && prepareSelectionIndex(secondarySelections);
+  const variable = selectedVariable && variables && variables.find(v => v.name === selectedVariable);
+  return (
+    <Table className={boxes.length > 0 ? 'tbody-hover' : ''} size="sm">
+      <thead>
+        <tr>
+          <th>
+            <FormattedMessage id="app.pipelines.boxesTable.name" defaultMessage="Name" />
+          </th>
+          <th>
+            <FormattedMessage id="app.pipelines.boxesTable.boxType" defaultMessage="Box Type" />
+          </th>
+          <th colSpan={2}>
+            <FormattedMessage id="app.pipelines.boxesTable.port" defaultMessage="Port" />
+          </th>
+          <th>
+            <FormattedMessage id="app.pipelines.boxesTable.portType" defaultMessage="Data Type" />
+          </th>
+          <th>
+            <FormattedMessage id="app.pipelines.boxesTable.variable" defaultMessage="Variable" />
+          </th>
+          <th />
+          {removeBox && <th />}
+        </tr>
+      </thead>
+
+      {boxes
+        .sort((a, b) => a.name.localeCompare(b.name, locale))
+        .map(box => (
+          <BoxesTableRow
+            key={box.name}
+            box={box}
+            variables={variables}
+            selectedVariable={variable}
+            secondarySelections={selectionIndex}
+            removeBox={removeBox}
+            {...rowProps}
+          />
+        ))}
+
+      {boxes.length === 0 && (
+        <tbody>
+          <tr>
+            <td colSpan={7} className="text-center text-muted small">
+              <em>
+                <FormattedMessage
+                  id="app.pipelines.boxesTable.noBoxes"
+                  defaultMessage="There are no boxes in the pipeline."
+                />
+              </em>
+            </td>
+          </tr>
+        </tbody>
+      )}
+    </Table>
+  );
+};
+
+BoxesTable.propTypes = {
+  boxes: PropTypes.array.isRequired,
+  variables: PropTypes.array,
+  removeBox: PropTypes.func,
+  secondarySelections: PropTypes.array,
+  selectedVariable: PropTypes.string,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired,
+};
+
+export default injectIntl(BoxesTable);