Fix some minor js issues

app/packs/src/apps/mydb/elements/details/NumeralInput.js

@@ -72,7 +72,7 @@ NumeralInput.defaultProps = {
 
 NumeralInput.propTypes = {
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.number.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   numeralFormat: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   variant: PropTypes.string,

app/packs/src/apps/mydb/elements/details/PrivateNoteElement.js

@@ -112,5 +112,5 @@ export default class PrivateNoteElement extends React.Component {
 
 PrivateNoteElement.propTypes = {
   element: PropTypes.object.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
 };

app/packs/src/apps/mydb/elements/details/literature/DetailsTabLiteratures.js

@@ -219,22 +219,28 @@ export default class DetailsTabLiteratures extends Component {
     NotificationActions.removeByUid('literature');
     LoadingActions.start();
     Cite.async(sanitizeDoi(doi)).then((json) => {
-      if (json.data && json.data.length > 0) {
-        const data = json.data[0];
-        const citation = new Cite(data);
-        this.setState((prevState) => ({
-          ...prevState,
+      if (json?.data?.length == 0) { return null }
+
+      const data = json.data[0];
+      const citation = new Cite(data);
+
+      this.setState((prevState) => {
+        return {
           literature: {
             ...prevState.literature,
             doi,
             title: data.title || '',
-            year: (data && data.issued && data.issued['date-parts'][0]) || '',
-            refs: { citation, bibtex: citation.format('bibtex'), bibliography: json.format('bibliography') }
+            year: data?.issued?.['date-parts']?.[0] || '',
+            refs: {
+              citation,
+              bibtex: citation.format('bibtex'),
+              bibliography: json.format('bibliography')
+            }
           }
-        }));
-        const { literature } = this.state;
-        this.handleLiteratureAdd(literature);
-      }
+        }
+      });
+      const { literature } = this.state;
+      this.handleLiteratureAdd(literature);
     }).catch((errorMessage) => {
       NotificationActions.add(notification(`unable to fetch metadata for this doi: ${doi}, error: ${errorMessage}`));
     }).finally(() => {
@@ -248,17 +254,16 @@ export default class DetailsTabLiteratures extends Component {
     Cite.async(isbn).then((json) => {
       if (json.data && json.data.length > 0) {
         const data = json.data[0];
-        this.setState((prevState) => ({
-          ...prevState,
-          literature: {
-            ...prevState.literature,
-            isbn,
-            title: data.title || '',
-            year: (data && data.issued && data.issued['date-parts'][0]) || '',
-            url: (data && data.URL) || '',
-            refs: { citation: json, bibtex: json.format('bibtex'), bibliography: json.format('bibliography') }
-          }
-        }));
+        this.setState((prevState) => {
+          let updatedLiterature = prevState.literature;
+          updatedLiterature.isbn = isbn;
+          updatedLiterature.title = data.title || '';
+          updatedLiterature.year = (data && data.issued && data.issued['date-parts'][0]) || '';
+          updatedLiterature.url = (data && data.URL) || '';
+          updatedLiterature.refs = { citation: json, bibtex: json.format('bibtex'), bibliography: json.format('bibliography') }
+
+          return ({ literature: updatedLiterature });
+        });
         const { literature } = this.state;
         this.handleLiteratureAdd(literature);
       }
@@ -369,11 +374,11 @@ DetailsTabLiteratures.propTypes = {
     PropTypes.instanceOf(CellLine),
     PropTypes.instanceOf(Sample)
   ]).isRequired,
-  literatures: PropTypes.array,
+  literatures: PropTypes.object,
   readOnly: PropTypes.bool
 };
 
 DetailsTabLiteratures.defaultProps = {
   readOnly: false,
-  literatures: []
+  literatures: {}
 };

app/packs/src/apps/mydb/elements/details/reactions/ReactionDetails.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {
   Button, Tabs, Tab, OverlayTrigger, Tooltip, Card, ButtonToolbar, ButtonGroup
 } from 'react-bootstrap';
+import ButtonGroupToggleButton from 'src/components/common/ButtonGroupToggleButton';
 import SvgFileZoomPan from 'react-svg-file-zoom-pan-latest';
 import { findIndex } from 'lodash';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
@@ -49,7 +50,6 @@ import { commentActivation } from 'src/utilities/CommentHelper';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 import GasPhaseReactionActions from 'src/stores/alt/actions/GasPhaseReactionActions';
 import { ShowUserLabels } from 'src/components/UserLabels';
-import ButtonGroupToggleButton from 'src/components/common/ButtonGroupToggleButton';
 
 export default class ReactionDetails extends Component {
   constructor(props) {
@@ -489,11 +489,6 @@ export default class ReactionDetails extends Component {
     this.setState({ reaction });
   }
 
-  handleGaseousChange() {
-    const { reaction } = this.state;
-    this.handleInputChange('gaseous', !reaction.gaseous);
-  }
-
   // eslint-disable-next-line class-methods-use-this
   updateReactionVesselSize(reaction) {
     Promise.resolve().then(() => {
@@ -517,6 +512,11 @@ export default class ReactionDetails extends Component {
     });
   }
 
+  handleGaseousChange() {
+    const { reaction } = this.state;
+    this.handleInputChange('gaseous', !reaction.gaseous);
+  }
+
   render() {
     const { reaction, visible, activeTab } = this.state;
     this.updateReactionVesselSize(reaction);

app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js

@@ -109,6 +109,7 @@ export default class ReactionDetailsProperties extends Component {
                   id="solvents_dd"
                   onSelect={this.handleOnSolventSelect}
                   variant="light"
+                  title=""
                 >
                   {solventsItems}
                 </DropdownButton>

app/packs/src/apps/mydb/elements/details/samples/propertiesTab/ElementalCompositionCustom.js

@@ -50,7 +50,6 @@ export default class ElementalCompositionCustom extends React.Component {
             numeralFormat="0,0.00"
             label={key}
             value={newData[key]}
-            defaultValue={newData[key]}
             onChange={(v) => this.handleElementsListChanged(v, key, el_composition)}
           />
         </Form.Group>

app/packs/src/apps/mydb/elements/details/screens/ScreenDetails.js

@@ -63,11 +63,6 @@ export default class ScreenDetails extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { screen } = nextProps;
-    this.setState({ screen });
-  }
-
   componentWillUnmount() {
     UIStore.unlisten(this.onUIStoreChange);
   }

app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js

@@ -27,6 +27,8 @@ import {
 import { formatDate, parseDate } from 'src/utilities/timezoneHelper';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 import { observer } from 'mobx-react';
+import Wellplate from 'src/models/Wellplate';
+import Attachment from 'src/models/Attachment';
 
 const templateInfo = (
   <Popover id="popver-template-info" title="Template info">
@@ -384,52 +386,8 @@ export class WellplateDetailsAttachments extends Component {
 }
 
 WellplateDetailsAttachments.propTypes = {
-  wellplate: PropTypes.shape({
-    id: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]).isRequired,
-    changed: PropTypes.bool.isRequired,
-    body: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-      })
-    ).isRequired,
-    attachments: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.oneOfType([
-          PropTypes.string,
-          PropTypes.number
-        ]).isRequired,
-        aasm_state: PropTypes.string.isRequired,
-        content_type: PropTypes.string.isRequired,
-        filename: PropTypes.string.isRequired,
-        filesize: PropTypes.number.isRequired,
-        identifier: PropTypes.oneOfType([
-          PropTypes.string,
-          PropTypes.number
-        ]).isRequired,
-        thumb: PropTypes.bool.isRequired
-      })
-    )
-  }).isRequired,
-  attachments: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]).isRequired,
-    aasm_state: PropTypes.string.isRequired,
-    content_type: PropTypes.string.isRequired,
-    filename: PropTypes.string.isRequired,
-    filesize: PropTypes.number.isRequired,
-    identifier: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]).isRequired,
-    thumb: PropTypes.bool.isRequired
-  })),
+  wellplate: PropTypes.instanceOf(Wellplate).isRequired,
+  attachments: PropTypes.arrayOf(PropTypes.instanceOf(Attachment)).isRequired,
   onDrop: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUndoDelete: PropTypes.func.isRequired,

app/packs/src/apps/mydb/elements/details/wellplates/designerTab/Wellplate.js

@@ -60,13 +60,17 @@ const Wellplate = ({ wellplate, handleWellsChange }) => {
     // generate first row - empty leading cell + column labels
     const columnLabels = []
     for (let columnIndex = 0; columnIndex <= wellplate.width; columnIndex += 1) {
-      columnLabels.push(<HorizontalHeaderField label={WellplateModel.columnLabel(columnIndex)} />)
+      const label = WellplateModel.columnLabel(columnIndex);
+      const key = `column_header_${columnIndex}`
+      columnLabels.push(<HorizontalHeaderField label={label} key={key} />)
     }
     rows.push(columnLabels)
 
     // generate remaining rows with leading header field
     for (let rowIndex = 1; rowIndex <= wellplate.height; rowIndex += 1) {
-      const row = [<VerticalHeaderField label={WellplateModel.rowLabel(rowIndex)} />]
+      const label = WellplateModel.rowLabel(rowIndex);
+      const key = `row_header_${rowIndex}`
+      const row = [<VerticalHeaderField label={label} key={key} />]
       rows.push(row)
     }
 
@@ -90,7 +94,7 @@ const Wellplate = ({ wellplate, handleWellsChange }) => {
 
   return(
     <div className="d-inline-flex flex-column">
-      {wellplateRows(wellplate).map(rowContent => (<div className="d-inline-flex flex-row">{rowContent}</div>))}
+      {wellplateRows(wellplate).map((rowContent, index) => (<div className="d-inline-flex flex-row" key={index}>{rowContent}</div>))}
       {selectedWell &&
         <WellDetails
           well={selectedWell}

app/packs/src/apps/mydb/elements/details/wellplates/propertiesTab/CustomSizeModal.js

@@ -93,9 +93,9 @@ const CustomSizeModal = ({show, wellplate, updateWellplate, handleClose}) => {
 
 CustomSizeModal.propTypes = {
   wellplate: PropTypes.instanceOf(Wellplate).isRequired,
-  showCustomSizeModal: PropTypes.bool.isRequired,
+  show: PropTypes.bool.isRequired,
   handleClose: PropTypes.func.isRequired,
-  triggerUIUpdate: PropTypes.func.isRequired,
+  updateWellplate: PropTypes.func.isRequired,
 }
 
 export default CustomSizeModal

app/packs/src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateSizeDropdown.js

@@ -8,8 +8,9 @@ import CustomSizeModal from 'src/apps/mydb/elements/details/wellplates/propertie
 const Option = (width, height) => {
   const label = `${height * width} (${width}x${height})`
   const value = `${width} ${height}`
+  const key = `${width}x${height}`
 
-  return (<option label={label} value={value} />)
+  return (<option label={label} key={key} value={value} />)
 }
 
 const WellplateSizeDropdown = ({wellplate, updateWellplate}) => {

app/packs/src/apps/mydb/elements/labels/ElementCollectionLabels.js

@@ -127,7 +127,7 @@ export default class ElementCollectionLabels extends React.Component {
 
 ElementCollectionLabels.propTypes = {
   element: PropTypes.shape({
-    id: PropTypes.number,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
     tag: PropTypes.shape({
       taggable_data: PropTypes.shape({

app/packs/src/components/common/ImageModal.js

@@ -200,7 +200,7 @@ export default class ImageModal extends Component {
 
 ImageModal.propTypes = {
   imageStyle: PropTypes.object,
-  hasPop: PropTypes.bool.isRequired,
+  hasPop: PropTypes.bool,
   previewObject: PropTypes.shape({
     src: PropTypes.string,
   }).isRequired,
@@ -217,5 +217,6 @@ ImageModal.propTypes = {
 ImageModal.defaultProps = {
   imageStyle: {},
   disableClick: false,
-  showPopImage: false
+  showPopImage: false,
+  hasPop: false
 };

app/packs/src/components/metadata/MetadataContainer.js

@@ -33,7 +33,7 @@ export default class MetadataContainer extends Component {
     this.handleClose = this.handleClose.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { metadata } = nextProps;
     this.setState({ metadata });
   }

package.json

@@ -91,7 +91,6 @@
     "react-select": "^5.8.1",
     "react-svg-file-zoom-pan": "0.1.5",
     "react-svg-file-zoom-pan-latest": "npm:@complat/[email protected]",
-    "react-svg-inline": "^1.2.0",
     "react-ui-tree": "3.1.0",
     "react-vis": "1.12.1",
     "reactflow": "^11.7.2",