Bootstrap upgrade bugfixes 2 (#2189)

Various fixes Clean up analyses Fix tests for Reactions and ResearchPlans analyses
ComPlat · Oct 8, 2024 · 69ed236 · 69ed236
1 parent 45c14e1
commit 69ed236
Show file tree

Hide file tree

Showing 36 changed files with 527 additions and 515 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -27,6 +27,7 @@
 
 @import "legacy/miscellaneous";
 @import "legacy/AttachmentContainer";
+@import "legacy/sample";
 @import "legacy/cellLines";
 @import "legacy/chemical-tab";
 @import "legacy/chemspectra";
@@ -59,7 +60,6 @@
 @import "legacy/reaction";
 @import "legacy/research-plan-table-context-menu";
 @import "legacy/research-plan";
-@import "legacy/sample";
 @import "legacy/select";
 @import "legacy/spectra";
 @import "legacy/structur_editor";

diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Nav, Navbar, Container, Button, } from 'react-bootstrap';
+import { Nav, Navbar, Container, Button } from 'react-bootstrap';
 
 import UserAuth from 'src/components/navigation/UserAuth';
 import UserStore from 'src/stores/alt/stores/UserStore';
@@ -43,17 +43,25 @@ export default class AdminNavigation extends React.Component {
   render() {
     const { currentUser } = this.state;
     return (
-      <Navbar bg="grey" expand="lg" className="bg-gray-200 py-4" >
+      <Navbar bg="grey" expand="lg" className="bg-gray-200 py-4">
         <Container fluid>
           <Navbar.Brand className="d-flex align-items-center">
-            <Button variant="light" className="me-2 p-0 border-0 bg-transparent" onClick={this.toggleTree} aria-label="Toggle Tree">
-              <i className='fa fa-list' size="lg" />
+            <Button
+              variant="light"
+              className="me-2 p-0 border-0 bg-transparent"
+              onClick={this.toggleTree}
+              aria-label="Toggle Tree"
+            >
+              <i className="fa fa-list" size="lg" />
             </Button>
             <NavHead />
           </Navbar.Brand>
           <div className="h1 mb-0 ms-5 ps-5">ELN Administration</div>
           <Nav className="ms-auto fs-5">
-            {currentUser ? <UserAuth /> : <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />}
+            {currentUser
+              ? <UserAuth />
+              : <NavNewSession authenticityToken={DocumentHelper.getMetaContent('csrf-token')} />
+            }
           </Nav>
         </Container>
       </Navbar>

diff --git a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/AnalysesContainer.js b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/AnalysesContainer.js
@@ -16,11 +16,9 @@ class AnalysesContainer extends Component {
     this.state = {
       mode: 'edit'
     };
-    this.handleChange.bind(this);
-    this.handleHoverOver.bind(this);
   }
 
-  handleAdd() {
+  handleAdd = () => {
     const { item } = this.props;
     const { cellLineDetailsStore } = this.context;
     const newContainer = cellLineDetailsStore.addEmptyContainer(item.id);
@@ -29,18 +27,18 @@ class AnalysesContainer extends Component {
     this.handleChange(true);
   }
 
-  handleStartDrag(container) {
+  handleStartDrag = (container) => {
     this.setState({ draggingContainer: container.id });
   }
 
-  handleEndDrag() {
+  handleEndDrag = () => {
     this.setState({
       draggingContainer: '',
       lastHoveredContainer: ''
     });
   }
 
-  handleModeToggle() {
+  handleModeToggle = () => {
     const { mode } = this.state;
     if (mode === 'edit') {
       this.setState({ mode: 'order' });
@@ -49,7 +47,7 @@ class AnalysesContainer extends Component {
     }
   }
 
-  handleHoverOver(containerId) {
+  handleHoverOver = (containerId) => {
     const { lastHoveredContainer } = this.state;
     if (lastHoveredContainer !== undefined
        && lastHoveredContainer === containerId) {
@@ -59,7 +57,7 @@ class AnalysesContainer extends Component {
     this.setState({ lastHoveredContainer: containerId });
   }
 
-  handleChange(changed = false) {
+  handleChange = (changed = false) => {
     const { item } = this.props;
     if (changed) {
       const { cellLineDetailsStore } = this.context;
@@ -68,7 +66,7 @@ class AnalysesContainer extends Component {
     this.forceUpdate();
   }
 
-  renderAddButton() {
+  renderAddButton = () => {
     const { readOnly } = this.props;
 
     return (
@@ -83,7 +81,7 @@ class AnalysesContainer extends Component {
     );
   }
 
-  renderModeButton() {
+  renderModeButton = () => {
     const { mode } = this.state;
     const { readOnly } = this.props;
     const buttonText = mode === 'order' ? 'Order mode' : 'Edit mode';
@@ -102,7 +100,7 @@ class AnalysesContainer extends Component {
     );
   }
 
-  renderEditModeContainer() {
+  renderEditModeContainer = () => {
     const { currentElement } = ElementStore.getState();
     const { readOnly } = this.props;
 
@@ -118,13 +116,16 @@ class AnalysesContainer extends Component {
     ));
 
     return (
-      <Accordion id={`cellLineAnalysisPanelGroupOf:${currentElement.id}`}>
+      <Accordion
+        id={`cellLineAnalysisPanelGroupOf:${currentElement.id}`}
+        className='border rounded overflow-hidden'
+      >
         {analysisRows}
       </Accordion>
     );
   }
 
-  renderOrderModeContainer() {
+  renderOrderModeContainer = () => {
     const { currentElement } = ElementStore.getState();
     const { draggingContainer, lastHoveredContainer } = this.state;
     const containers = currentElement.container.children[0].children;
@@ -154,7 +155,7 @@ class AnalysesContainer extends Component {
     );
   }
 
-  renderContainerPanel() {
+  renderContainerPanel = () => {
     const { currentElement } = ElementStore.getState();
     const containers = currentElement.container.children[0].children;
 

diff --git a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js
@@ -2,31 +2,36 @@ import React from 'react';
 import Header from 'src/apps/mydb/elements/details/cellLines/analysesTab/Header';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import PropTypes from 'prop-types';
-import { Accordion } from 'react-bootstrap';
+import { Accordion, Card } from 'react-bootstrap';
+import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
 
 const EditModeRow = ({ container, handleChange, element, readOnly }) => (
-  <Accordion.Item eventKey={container.id}>
-    <Accordion.Header as="div">
-      <Header
-        isEditHeader
-        element={element}
-        container={container}
-        handleChange={handleChange}
-        readOnly={readOnly}
-      />
-    </Accordion.Header>
-    <Accordion.Body>
-      <ContainerComponent
-        analysisMethodTitle="Type (BioAssay Ontology)"
-        ontologyName="bao"
-        templateType="researchPlan"
-        readOnly={readOnly}
-        disabled={false}
-        container={container}
-        onChange={() => handleChange(container)}
-      />
-    </Accordion.Body>
-  </Accordion.Item>
+  <Card eventKey={container.id} className="border-0 rounded-0">
+    <Card.Header className="rounded-0 p-0 border-bottom-0">
+      <AccordionHeaderWithButtons as="div">
+        <Header
+          isEditHeader
+          element={element}
+          container={container}
+          handleChange={handleChange}
+          readOnly={readOnly}
+        />
+      </AccordionHeaderWithButtons>
+    </Card.Header>
+    <Accordion.Collapse>
+      <Card.Body>
+        <ContainerComponent
+          analysisMethodTitle="Type (BioAssay Ontology)"
+          ontologyName="bao"
+          templateType="researchPlan"
+          readOnly={readOnly}
+          disabled={false}
+          container={container}
+          onChange={() => handleChange(container)}
+        />
+      </Card.Body>
+    </Accordion.Collapse>
+  </Card>
 );
 
 EditModeRow.propTypes = {

diff --git a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/Header.js b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/Header.js
@@ -6,15 +6,15 @@ import ImageModal from 'src/components/common/ImageModal';
 import { Button } from 'react-bootstrap';
 
 export default class Header extends React.Component {
-  handleUndoDeletionOfContainer(container, e) {
+  handleUndoDeletionOfContainer = (container, e) => {
     const { handleChange } = this.props;
     e.stopPropagation();
     // eslint-disable-next-line   no-param-reassign
     container.is_deleted = false;
     handleChange(container);
   }
 
-  handleDeleteContainer(container, e) {
+  handleDeleteContainer = (container, e) => {
     const { handleChange } = this.props;
     e.stopPropagation();
 
@@ -26,7 +26,7 @@ export default class Header extends React.Component {
     }
   }
 
-  renderDeletedContainer() {
+  renderDeletedContainer = () => {
     const { container, isEditHeader } = this.props;
     const kind = container.extended_metadata.kind && container.extended_metadata.kind !== '';
     const titleKind = kind
@@ -45,7 +45,7 @@ export default class Header extends React.Component {
         </div>
         {isEditHeader && (
           <Button
-            size="sm"
+            size="xsm"
             variant="danger"
             onClick={(e) => this.handleUndoDeletionOfContainer(container, e)}
           >
@@ -56,7 +56,7 @@ export default class Header extends React.Component {
     );
   }
 
-  renderNotDeletedContainer() {
+  renderNotDeletedContainer = () => {
     const { container, readOnly, isEditHeader } = this.props;
     const content = container.extended_metadata.content || { ops: [{ insert: '' }] };
 
@@ -71,8 +71,8 @@ export default class Header extends React.Component {
     };
 
     return (
-      <div className="d-flex align-items-start flex-grow-1 justify-content-between gap-2 pe-2">
-        <div>{this.renderImagePreview(container)}</div>
+      <div className="analysis-header d-flex align-items-start flex-grow-1 justify-content-between gap-2 pe-2">
+        <div className="preview">{this.renderImagePreview(container)}</div>
         <div className="flex-grow-1">
           <div className="mb-2 fs-4 text-decoration-underline">{container.name}</div>
           <div>
@@ -93,7 +93,7 @@ export default class Header extends React.Component {
         {isEditHeader && (
           <Button
             disabled={readOnly}
-            size="sm"
+            size="xxsm"
             variant="danger"
             onClick={(e) => { this.handleDeleteContainer(container, e); }}
           >
@@ -105,7 +105,7 @@ export default class Header extends React.Component {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  renderImagePreview() {
+  renderImagePreview = () => {
     const { container, isEditHeader } = this.props;
     const previewImg = previewContainerImage(container);
     const fetchNeeded = false;