In progress

src/settings/PipelineForm.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Field } from 'react-final-form';
+import arrayMutators from 'final-form-arrays';
+import { Pane, Row, Col, Checkbox, TextField, TextArea } from '@folio/stripes/components';
+import { TitleManager } from '@folio/stripes/core';
+import stripesFinalForm from '@folio/stripes/final-form';
+import { isEqual } from 'lodash';
+import setFieldData from 'final-form-set-field-data'; // XXX do we need this?
+import { RCF, CF, RCLF } from '../components/CF';
+import renderPaneFooter from './renderPaneFooter';
+
+
+function validate(values) {
+  const errors = {};
+  const requiredTextMessage = <FormattedMessage id="ui-harvester-admin.fillIn" />;
+
+  if (!values.name) {
+    errors.name = requiredTextMessage;
+  }
+
+  return errors;
+}
+
+
+const PipelineForm = (props) => {
+  const { handleSubmit, onCancel, pristine, submitting } = props;
+
+  const title = props.initialValues.name;
+
+  return (
+    <Pane
+      centerContent
+      defaultWidth="60%"
+      footer={renderPaneFooter(handleSubmit, onCancel, pristine, submitting)}
+      id="pane-pipeline-form"
+      paneTitle={title}
+    >
+      <TitleManager record={title}>
+        <form id="form-pipeline">
+          <Row>
+            <CF tag="id" xs={2} disabled />
+            <CF tag="name" xs={8} required />
+          </Row>
+          <RCF tag="description" domain="pipeline" component={TextArea} rows="4" />
+          <RCF tag="enabled" domain="pipeline" component={Checkbox} type="checkbox" />
+          <RCF tag="parallel" domain="pipeline" component={Checkbox} type="checkbox" />
+          <br />
+          <RCLF
+            tag="stepAssociations"
+            domain="pipeline"
+            renderEntry={(name) => (
+              <Row>
+                <Col xs={4}>
+                  <Field name={`${name}.name`} component={TextField} />
+                </Col>
+                <Col xs={4}>
+                  <Field name={`${name}.inputFormat`} component={TextField} />
+                </Col>
+                <Col xs={4}>
+                  <Field name={`${name}.outputFormat`} component={TextField} />
+                </Col>
+              </Row>
+            )}
+            emptyValue={{ key: '', value: '' }}
+          />
+        </form>
+      </TitleManager>
+    </Pane>
+  );
+};
+
+
+PipelineForm.propTypes = {
+  initialValues: PropTypes.object,
+  handleSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  pristine: PropTypes.bool,
+  submitting: PropTypes.bool,
+};
+
+
+export default stripesFinalForm({
+  initialValuesEqual: (a, b) => isEqual(a, b),
+  validate,
+  navigationCheck: true,
+  subscription: {
+    values: true,
+  },
+  mutators: { setFieldData, ...arrayMutators }
+})(PipelineForm);

src/settings/PipelineSettings.js

@@ -6,12 +6,12 @@ import { stripesConnect } from '@folio/stripes/core';
 import { EntryManager } from '../smart-components';
 
 import PipelineDetail from './PipelineDetail';
-import PipelineForm from './StorageForm';
+import PipelineForm from './PipelineForm';
 
 const PERMS = {
-  put: 'harvester-admin.storages.item.put',
-  post: 'harvester-admin.storages.item.post',
-  delete: 'harvester-admin.storages.item.delete',
+  put: 'harvester-admin.transformations.item.put',
+  post: 'harvester-admin.transformations.item.post',
+  delete: 'harvester-admin.transformations.item.delete',
 };
 
 const PipelineSettings = (props) => {
@@ -30,13 +30,9 @@ const PipelineSettings = (props) => {
       nameKey="name"
       permissions={PERMS}
       enableDetailsActionMenu
-      parseInitialValues={values => {
-        if (!values.json) return values;
-        return { ...values, json: JSON.stringify(values.json, null, 2) };
-      }}
       onBeforeSave={values => {
-        if (!values.json) return values;
-        return { ...values, json: JSON.parse(values.json) };
+        if (values.type) return values;
+        return { ...values, type: 'basicTransformation' };
       }}
     />
   );

src/settings/StepSettings.js

@@ -1,15 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Pane } from '@folio/stripes/components';
+import { injectIntl } from 'react-intl';
+import { stripesConnect } from '@folio/stripes/core';
+import { EntryManager } from '../smart-components';
 
-const StepSettings = ({ label }) => (
-  <Pane defaultWidth="fill" paneTitle={label}>
-    This is the step settings page
-  </Pane>
-);
+import StepDetail from './PipelineDetail';
+import StepForm from './PipelineForm';
+
+const PERMS = {
+  put: 'harvester-admin.steps.item.put',
+  post: 'harvester-admin.steps.item.post',
+  delete: 'harvester-admin.steps.item.delete',
+};
+
+const StepSettings = (props) => {
+  const { mutator, resources, intl } = props;
+
+  const entriesWithVirtualName = ((resources.entries || {}).records || [])
+    .map(entry => ({
+      ...entry,
+      virtualName: `${entry.name} (${entry.inputFormat}→${entry.outputFormat})`,
+    }));
+
+  return (
+    <EntryManager
+      {...props}
+      resourcePath="harvester-admin/steps"
+      parentMutator={mutator}
+      entryList={entriesWithVirtualName}
+      detailComponent={StepDetail}
+      paneTitle={intl.formatMessage({ id: 'ui-harvester-admin.settings.step' })}
+      entryLabel={intl.formatMessage({ id: 'ui-harvester-admin.settings.step.heading' })}
+      entryFormComponent={StepForm}
+      nameKey="virtualName"
+      permissions={PERMS}
+      enableDetailsActionMenu
+    />
+  );
+};
 
 StepSettings.propTypes = {
-  label: PropTypes.object.isRequired,
+  resources: PropTypes.shape({
+    entries: PropTypes.shape({
+      records: PropTypes.arrayOf(PropTypes.object),
+    }),
+  }).isRequired,
+  mutator: PropTypes.shape({
+    entries: PropTypes.shape({
+      POST: PropTypes.func,
+      PUT: PropTypes.func,
+      DELETE: PropTypes.func,
+    }),
+  }).isRequired,
+  intl: PropTypes.object.isRequired,
 };
 
-export default StepSettings;
+StepSettings.manifest = Object.freeze({
+  entries: {
+    type: 'okapi',
+    records: 'transformationSteps',
+    path: 'harvester-admin/steps?limit=1000', // XXX will this always be enough?
+    throwErrors: false,
+  },
+});
+
+export default stripesConnect(injectIntl(StepSettings));

translations/ui-harvester-admin/en.json

@@ -287,6 +287,7 @@
     "pipeline.field.description": "Description",
     "pipeline.field.enabled": "Enabled",
     "pipeline.field.parallel": "Parallel",
+    "pipeline.field.stepAssociations": "Transformation steps",
     "pipeline.steps.position": "#",
     "pipeline.steps.name": "Name",
     "pipeline.steps.in": "In",