Update Metadata Rights components

ComPlat · Aug 15, 2024 · 35922a9 · 35922a9
1 parent 4a5e749
commit 35922a9
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 99 deletions.
diff --git a/app/packs/src/components/metadata/MetadataRights.js b/app/packs/src/components/metadata/MetadataRights.js
@@ -1,53 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Col, FormControl, FormGroup, Row } from 'react-bootstrap';
+import {
+  Button, Form
+} from 'react-bootstrap';
 import Select from 'react-select3';
 
-import { controlledRightsList } from 'src/components/staticDropdownOptions/radar/controlledRightsList'
-import ControlLabel from 'src/components/legacyBootstrap/ControlLabel'
+import { controlledRightsList } from 'src/components/staticDropdownOptions/radar/controlledRightsList';
 
-const MetadataRights = ({ rights, index, onChange, onRemove }) => {
-  const controlledRights = controlledRightsList.find(el => el.value == rights.controlledRights)
+const MetadataRights = ({
+  rights, index, onChange, onRemove
+}) => {
+  const controlledRights = controlledRightsList.find((el) => el.value == rights.controlledRights);
 
   return (
     <div>
-      <Row>
-        <Col sm={12}>
-          <FormGroup>
-            <ControlLabel>
-              Controlled rights
-            </ControlLabel>
-            <Select
-              name="relationType"
-              options={controlledRightsList}
-              onChange={option => onChange(option.value, 'rights', index, 'controlledRights')}
-              value={controlledRights}
-              menuPortalTarget={document.body}
-              styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
-            />
-          </FormGroup>
-        </Col>
-        <Col sm={12}>
-          <FormGroup>
-            <ControlLabel>
-              Additional rights
-            </ControlLabel>
-            <FormControl
-              type="text"
-              value={rights.additionalRights}
-              onChange={event => onChange(event.target.value, 'rights', index, 'additionalRights')}
-            />
-          </FormGroup>
-        </Col>
-        <Col sm={12}>
-          <Button variant="danger" size="sm" onClick={() => onRemove('rights', index)}>
-            Remove rights
-          </Button>
-        </Col>
-      </Row>
+      <Form.Group className="mb-3">
+        <Form.Label>
+          Controlled rights
+        </Form.Label>
+        <Select
+          name="relationType"
+          options={controlledRightsList}
+          onChange={(option) => onChange(option.value, 'rights', index, 'controlledRights')}
+          value={controlledRights}
+          menuPortalTarget={document.body}
+          styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
+        />
+      </Form.Group>
+      <Form.Group className="mb-3">
+        <Form.Label>
+          Additional rights
+        </Form.Label>
+        <Form.Control
+          type="text"
+          value={rights.additionalRights}
+          onChange={(event) => onChange(event.target.value, 'rights', index, 'additionalRights')}
+        />
+      </Form.Group>
+      <Button variant="danger" size="sm" onClick={() => onRemove('rights', index)}>
+        Remove rights
+      </Button>
       <hr />
     </div>
-  )
+  );
 };
 
 MetadataRights.propTypes = {

diff --git a/app/packs/src/components/metadata/MetadataRightsHolder.js b/app/packs/src/components/metadata/MetadataRightsHolder.js
@@ -1,26 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Col, FormControl, FormGroup, Row } from 'react-bootstrap';
+import {
+  Button, Col, Form, Row
+} from 'react-bootstrap';
 
-const MetadataRightsHolder = ({ rightsHolder, index, onChange, onRemove }) => (
-  <div>
-    <Row>
-      <Col sm={11}>
-        <FormGroup>
-          <FormControl
-            type="text"
-            value={rightsHolder}
-            onChange={event => onChange(event.target.value, 'rightsHolders', index)}
-          />
-        </FormGroup>
-      </Col>
-      <Col sm={1}>
-        <Button variant="danger" onClick={() => onRemove('rightsHolders', index)}>
-          <i className="fa fa-trash-o" />
-        </Button>
-      </Col>
-    </Row>
-  </div>
+const MetadataRightsHolder = ({
+  rightsHolder, index, onChange, onRemove
+}) => (
+  <Row className="mb-3">
+    <Form.Group as={Col} xs={11}>
+      <Form.Control
+        type="text"
+        value={rightsHolder}
+        onChange={(event) => onChange(event.target.value, 'rightsHolders', index)}
+      />
+    </Form.Group>
+    <Col xs={1}>
+      <Button variant="danger" onClick={() => onRemove('rightsHolders', index)}>
+        <i className="fa fa-trash-o" />
+      </Button>
+    </Col>
+  </Row>
 );
 
 MetadataRightsHolder.propTypes = {

diff --git a/app/packs/src/components/metadata/MetadataRightsList.js b/app/packs/src/components/metadata/MetadataRightsList.js
@@ -1,46 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, FormControl } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
-import MetadataRights from './MetadataRights'
-import MetadataRightsHolder from './MetadataRightsHolder'
+import MetadataRights from 'src/components/metadata/MetadataRights';
+import MetadataRightsHolder from 'src/components/metadata/MetadataRightsHolder';
 
-const MetadataRightsList = ({ metadata, onAdd, onChange, onRemove }) => {
-  return (
-    <div>
-      <h4>Rights holder</h4>
-      <p>
-        Name of the holder of the rights of re-use of the research data. Should be in the format "Family name, given name".
-      </p>
-      {
-        metadata.rightsHolders && metadata.rightsHolders.map((rightsHolder, index) => (
-          <MetadataRightsHolder
-            rightsHolder={rightsHolder} index={index} key={index}
-            onChange={onChange} onRemove={onRemove}
-          />
-        ))
-      }
-      <Button variant="success" size="sm" onClick={event => onAdd('rightsHolders')}>
-        Add new rights holder
-      </Button>
-      <h4>Rights</h4>
-      <p>
-        Rights information for this resource. The property may be repeated to record complex rights characteristics.
-      </p>
-      {
-        metadata.rights && metadata.rights.map((rights, index) => (
-          <MetadataRights
-            rights={rights} index={index} key={index}
-            onChange={onChange} onRemove={onRemove}
-          />
-        ))
-      }
-      <Button variant="success" size="sm" onClick={event => onAdd('rights')}>
-        Add new rights
-      </Button>
-    </div>
-  )
-}
+const MetadataRightsList = ({
+  metadata, onAdd, onChange, onRemove
+}) => (
+  <div>
+    <h4>Rights holder</h4>
+    <p>
+      Name of the holder of the rights of re-use of the research data.
+      Should be in the format &quot;Family name, given name&quot;.
+    </p>
+    {metadata.rightsHolders && metadata.rightsHolders.map((rightsHolder, index) => (
+      <MetadataRightsHolder
+        rightsHolder={rightsHolder}
+        index={index}
+        key={index}
+        onChange={onChange}
+        onRemove={onRemove}
+      />
+    ))}
+    <Button variant="success" size="sm" onClick={() => onAdd('rightsHolders')}>
+      Add new rights holder
+    </Button>
+
+    <hr />
+
+    <h4>Rights</h4>
+    <p>
+      Rights information for this resource. The property may be repeated to record complex rights characteristics.
+    </p>
+    {metadata.rights && metadata.rights.map((rights, index) => (
+      <MetadataRights
+        rights={rights}
+        index={index}
+        key={index}
+        onChange={onChange}
+        onRemove={onRemove}
+      />
+    ))}
+    <Button variant="success" size="sm" onClick={() => onAdd('rights')}>
+      Add new rights
+    </Button>
+  </div>
+);
 
 MetadataRightsList.propTypes = {
   metadata: PropTypes.object.isRequired,