Update bootstrap computed props (#2087)

update computedProps to latest react-bootstrap update TabLayout components to latest react-bootstrap
ComPlat · Aug 22, 2024 · 51777c5 · 51777c5
1 parent 3471eab
commit 51777c5
Show file tree

Hide file tree

Showing 22 changed files with 244 additions and 224 deletions.
diff --git a/app/assets/stylesheets/cellLines.scss b/app/assets/stylesheets/cellLines.scss
@@ -187,6 +187,22 @@
     }
 }
 
+.tab-content{
+    .eln-panel-detail{
+        .header{
+            margin-top: 3px;
+            margin-right: 10px;
+            color: white;
+        }
+        .card-header{
+            min-height: 41px;
+        }
+        .blue-background{
+            background:rgb(51, 122, 183)
+        }
+    }
+}
+
 .floating{
     float:left;
 }

diff --git a/app/packs/src/apps/mydb/collections/CollectionTabs.js b/app/packs/src/apps/mydb/collections/CollectionTabs.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Tree from 'react-ui-tree';
 import {
-  Button, Form, Modal, Col
+  Button, Modal, Col
 } from 'react-bootstrap';
 import _ from 'lodash';
 import CollectionStore from 'src/stores/alt/stores/CollectionStore';

diff --git a/app/packs/src/apps/mydb/elements/details/computeTasks/ComputeTask.js b/app/packs/src/apps/mydb/elements/details/computeTasks/ComputeTask.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import { Button, ButtonToolbar, Badge } from 'react-bootstrap';
 
 import Aviator from 'aviator';
-import Label from 'src/components/legacyBootstrap/Label'
 
 const statusMap = {
   not_computed: 'pending'
@@ -53,28 +52,28 @@ export default class ComputeTask extends React.Component {
 
     return (
       <tr>
-        <td style={{ textAlign: 'center' }}>
+        <td className="text-center">
           <Button variant="link" onClick={this.navigateSample}>
             Sample
           </Button>
         </td>
-        <td style={{ textAlign: 'center' }}>
-          <Label variant="primary">{displayStatus}</Label>
+        <td className="text-center">
+          <Badge bg="primary">{displayStatus}</Badge>
         </td>
-        <td style={{ textAlign: 'center' }}>{task.updatedAt}</td>
-        <td style={{ textAlign: 'center' }}>
-          <Button variant="info" onClick={this.checkState} size="sm" style={{ width: '22px' }}>
-            <i className="fa fa-long-arrow-up" />
-            <i className="fa fa-long-arrow-down" />
-          </Button>
-          &nbsp;&nbsp;
-          <Button variant="warning" onClick={this.revokeTask} size="sm">
-            <i className="fa fa-stop" />
-          </Button>
-          &nbsp;&nbsp;
-          <Button variant="danger" onClick={this.deleteTask} size="sm">
-            <i className="fa fa-trash" />
-          </Button>
+        <td className="text-center">{task.updatedAt}</td>
+        <td className="text-center">
+          <ButtonToolbar className="gap-1">
+            <Button variant="info" onClick={this.checkState} size="xsm" style={{ width: '22px' }}>
+              <i className="fa fa-long-arrow-up" />
+              <i className="fa fa-long-arrow-down" />
+            </Button>
+            <Button variant="warning" onClick={this.revokeTask} size="xsm">
+              <i className="fa fa-stop" />
+            </Button>
+            <Button variant="danger" onClick={this.deleteTask} size="xsm">
+              <i className="fa fa-trash" />
+            </Button>
+          </ButtonToolbar>
         </td>
       </tr>
     );

diff --git a/app/packs/src/apps/mydb/elements/details/computeTasks/ComputeTaskContainer.js b/app/packs/src/apps/mydb/elements/details/computeTasks/ComputeTaskContainer.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Table } from 'react-bootstrap';
-import Panel from 'src/components/legacyBootstrap/Panel';
+import { Button, Table, Card } from 'react-bootstrap';
 
 import ComputeTaskActions from 'src/stores/alt/actions/ComputeTaskActions';
 import DetailActions from 'src/stores/alt/actions/DetailActions';
@@ -67,30 +66,31 @@ export default class ComputeTaskContainer extends React.Component {
     const { tasks } = this.state;
 
     return (
-      <Panel className="eln-panel-detail" variant="primary">
-        <Panel.Heading>
-          {'Task'}
+      <Card className="eln-panel-detail">
+        <Card.Header className="d-flex text-bg-primary align-items-baseline justify-content-between">
+          Task
           <Button
             key="closeBtn"
             onClick={this.onClose}
             variant="danger"
-            size="sm"
+            size="xxsm"
+            className="ms-auto"
           >
             <i className="fa fa-times" />
           </Button>
-        </Panel.Heading>
-        <Panel.Body>
+        </Card.Header>
+        <Card.Body>
           <Table striped condensed hover>
             <thead>
               <tr>
-                <th style={{ textAlign: 'center' }}>Sample</th>
-                <th style={{ textAlign: 'center' }}>Status</th>
-                <th style={{ textAlign: 'center' }}>Updated at</th>
-                <th style={{ textAlign: 'center' }}>Actions</th>
+                <th className="text-center">Sample</th>
+                <th className="text-center">Status</th>
+                <th className="text-center">Updated at</th>
+                <th className="text-center">Actions</th>
               </tr>
             </thead>
             <tbody>
-              {tasks.map(task => (
+              {tasks.map((task) => (
                 <ComputeTask
                   key={task.id}
                   task={task}
@@ -101,8 +101,8 @@ export default class ComputeTaskContainer extends React.Component {
               ))}
             </tbody>
           </Table>
-        </Panel.Body>
-      </Panel>
+        </Card.Body>
+      </Card>
     );
   }
 }

diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
@@ -412,6 +412,7 @@ export default class ResearchPlanDetails extends Component {
                 disabled={researchPlan.isMethodDisabled('name')}
                 onChange={this.handleNameChange}
                 edit={edit}
+                onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
               />
             </div>
             <div className="d-flex justify-content-center align-items-end">

diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -606,7 +606,7 @@ export default class SampleDetails extends React.Component {
     const title = (
       <span>
         <ComputedPropLabel cprops={sample.molecule_computed_props} />
-        &nbsp; Computed Properties
+         Computed Properties
       </span>
     );
 
@@ -1498,20 +1498,30 @@ export default class SampleDetails extends React.Component {
         </Card.Header>
         <Card.Body>
           {this.sampleInfo(sample)}
+          <ElementDetailSortTab
+            type="sample"
+            availableTabs={Object.keys(tabContentsMap)}
+            tabTitles={tabTitlesMap}
+            onTabPositionChanged={this.onTabPositionChanged}
+            addInventoryTab={sample.inventory_sample}
+          />
           {this.state.sfn && <ScifinderSearch el={sample} />}
           <div className='tabs-container--with-borders'>
             <Tabs activeKey={activeTab} onSelect={this.handleSelect} id="SampleDetailsXTab">
-              {this.samplePropertiesTab('properties')}
+              {tabContents}
+              {/* {this.samplePropertiesTab('properties')}
               {this.sampleContainerTab('analyses')}
               {this.sampleLiteratureTab()}
               {this.sampleImportReadoutTab('results')}
               {this.qualityCheckTab('qc_curation')}
-              {this.measurementsTab('measurements')}
+              {this.measurementsTab('measurements')} */}
+
             </Tabs>
+            {this.sampleFooter()}
+            {this.structureEditorModal(sample)}
+            {this.renderMolfileModal()}
           </div>
-          {this.sampleFooter()}
-          {this.structureEditorModal(sample)}
-          {this.renderMolfileModal()}
+
           <CommentModal element={sample} />
         </Card.Body>
       </Card>

diff --git a/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js b/app/packs/src/apps/mydb/elements/details/samples/propertiesTab/SampleForm.js
@@ -111,7 +111,7 @@ export default class SampleForm extends React.Component {
     if (sample.can_update) {
       return (
         <Form.Check
-          inputRef={(ref) => { this.topSecretInput = ref; }}
+          ref={(ref) => { this.topSecretInput = ref; }}
           checked={sample.is_top_secret}
           onChange={(e) => this.handleFieldChanged('is_top_secret', e.target.checked)}
           label="Top secret"
@@ -142,7 +142,7 @@ export default class SampleForm extends React.Component {
     if (sample.can_update) {
       return (
         <Form.Check
-          inputRef={(ref) => { this.decoupledInput = ref; }}
+          ref={(ref) => { this.decoupledInput = ref; }}
           checked={sample.decoupled}
           onChange={(e) => this.handleFieldChanged('decoupled', e.target.checked)}
           label="Decoupled"

diff --git a/...ks/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js b/...ks/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
@@ -194,6 +194,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
               disabled={researchPlan.isMethodDisabled('name')}
               onChange={this.handleNameChange}
               edit={edit}
+              onCopyToMetadata={this.handleCopyToMetadata.bind(this)}
             />
             <ResearchPlanDetailsBody
               body={body}

diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSettings.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSettings.js
@@ -150,7 +150,7 @@ export default class ElementsTableSettings extends React.Component {
       />
     );
 
-    const showSettings = (currentType == "sample" || currentType == "reaction");
+    const showSettings = (currentType === 'sample' || currentType === 'reaction');
     const popoverSettings = (
       <Popover
         className="scrollable-popover w-auto mw-100"

diff --git a/app/packs/src/apps/mydb/elements/tabLayout/TabLayoutCell.js b/app/packs/src/apps/mydb/elements/tabLayout/TabLayoutCell.js
@@ -13,7 +13,7 @@ const layoutSource = {
 };
 
 const layoutTarget = {
-  drop(props, monitor, component) {
+  drop(props, monitor) {
     props.moveLayout(monitor.getItem(), props);
   }
 };
@@ -30,7 +30,7 @@ class TabLayoutCell extends Component {
       isCollectionTab
     } = this.props;
 
-    const elnElements = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan','cell_line'];
+    const elnElements = ['sample', 'reaction', 'screen', 'wellplate', 'research_plan', 'cell_line'];
     let cellIcon = `icon-${cell}`;
     let cellTitle = capitalizeWords(cell);
     let cellDescription = '';
@@ -44,20 +44,24 @@ class TabLayoutCell extends Component {
     }
 
     let content = isElementDetails ? (
-      <div style={{ width: '100%' }}>
-        <p className="tab-layout-cell">{title === 'hidden' ? '-' : title}</p>
+      <div className="p-1 mt-2">
+        <p className={`text-center fs-6 ${title === 'hidden' ? 'text-muted' : ''}`}>
+          {title === 'hidden' ? '-' : title}
+        </p>
       </div>
     ) : (
       <div>
-        <i className={cellIcon} title={[cellTitle, cellDescription].join(': ')}>
-          {isHidden ? '\u00A0' : ''}
+        <i
+          className={`${cellIcon} text-center ${isHidden ? 'text-gray-600' : 'text-primary'}`}
+          title={[cellTitle, cellDescription].join(': ')}
+        >
         </i>
       </div>
     );
 
     content = isCollectionTab ? (
-      <div style={{ width: 'auto' }}>
-        <p className="tab-layout-cell">{title === 'hidden' ? '-' : title}</p>
+      <div className={`w-auto text-center p-0 m-0 ${title === 'hidden' ? 'text-muted' : ''}`}>
+          {title === 'hidden' ? '-' : title}
       </div>
     ) : (
       content

diff --git a/app/packs/src/apps/mydb/elements/tabLayout/TabLayoutContainer.js b/app/packs/src/apps/mydb/elements/tabLayout/TabLayoutContainer.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
 import Immutable from 'immutable';
 import uuid from 'uuid';
 
@@ -76,7 +77,7 @@ export default class TabLayoutContainer extends React.Component {
     const hiddenCells = hidden.map((cell, index) => {
       const defTitle = segmentTabs.includes(cell) ? cell : capitalizeWords(cell);
       return (
-        <td className="hidden-layout" key={uuid.v4()}>
+        <td key={uuid.v4()}>
           <TabLayoutCell
             cell={cell}
             index={index}
@@ -91,12 +92,18 @@ export default class TabLayoutContainer extends React.Component {
     });
 
     return (
-      <table className="layout-container" style={{ overflowY: 'scroll' }}>
-        <tbody style={{ textAlign: 'left' }}>
-          <tr>{visibleCells}</tr>
-          <tr>{hiddenCells}</tr>
+      <Table
+        bordered
+        responsive
+        className={`text-center ${!isCollectionTab ? 'fs-1' : ''} border-1 border-gray-300 m-0`}
+      >
+        <tbody>
+          <tr className="text-center">{visibleCells}</tr>
+          <tr className="text-center bg-gray-400 text-gray-200 border-bottom-0">
+            {hiddenCells}
+          </tr>
         </tbody>
-      </table>
+      </Table>
     );
   }
 }

diff --git a/app/packs/src/apps/mydb/inbox/AttachmentContainer.js b/app/packs/src/apps/mydb/inbox/AttachmentContainer.js
@@ -149,36 +149,38 @@ class AttachmentContainer extends Component {
         <p>
           {attachment.filename}
         </p>
-      </Tooltip>);
+      </Tooltip>
+    );
 
     return connectDragSource(
       <div className="d-flex align-items-center overflow-hidden p-1">
         <ButtonToolbar className="gap-2">
-        {checkBox}
-        {trash}
-        <i className="fa fa-download mt-1" onClick={() => handleAttachmentDownload(attachment)} role="button" />
-        {largerInbox && (
-          <MoveToAnalysisButton
-            attachment={attachment}
-            largerInbox={largerInbox}
-            sourceType={sourceType}
+          {checkBox}
+          {trash}
+          <i
+            className="fa fa-download mt-1"
+            onClick={() => handleAttachmentDownload(attachment)}
           />
-        )}
-        <OverlayTrigger placement="top" overlay={filenameTooltip} >
-          <span>
-            <span
-              className="text-info fa fa-arrows mx-1"
+          {largerInbox && (
+            <MoveToAnalysisButton
+              attachment={attachment}
+              largerInbox={largerInbox}
+              sourceType={sourceType}
             />
-            {attachment.filename}
-          </span>
+          )}
+          <OverlayTrigger placement="top" overlay={filenameTooltip} >
+            <span>
+              <i className="text-primary fa fa-arrows mx-1" />
+              {attachment.filename}
+            </span>
           </OverlayTrigger>
         </ButtonToolbar>
         {
           inboxSize && inboxSize !== 'Small'
           && (
             <span
-              className={`text-info ms-auto ${largerInbox ? '' : 'none'}`}
-              >
+              className={`text-dark ms-auto ${largerInbox ? '' : 'none'}`}
+            >
               {formatDate(attachment.created_at)}
             </span>
           )}