[BIOMAGE-1024] - Fix long project name hiding project controls (#284)

* remove from title to normal description item * align buttons to the top * fix long project names in main area * stick "create new project" on top of list
hms-dbmi-cellenics · May 27, 2021 · aa4ca95 · aa4ca95
1 parent 525386e
commit aa4ca95
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 67 deletions.
diff --git a/src/components/EditableField.jsx b/src/components/EditableField.jsx
@@ -128,7 +128,7 @@ const EditableField = (props) => {
   return (
     <>
       <Space direction='vertical'>
-        <Space>
+        <Space align='start'>
           {renderEditState()}
           {
             deleteEnabled

diff --git a/src/components/data-management/ProjectDetails.jsx b/src/components/data-management/ProjectDetails.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  Table, Typography, Space, Tooltip, PageHeader, Button, Input, Progress,
+  Table, Typography, Space, Tooltip, PageHeader, Button, Input, Progress, Row, Col,
 } from 'antd';
 import { useRouter } from 'next/router';
 import { useSelector, useDispatch } from 'react-redux';
@@ -47,7 +47,7 @@ import '../../utils/css/hover.css';
 import runGem2s from '../../redux/actions/pipeline/runGem2s';
 import loadBackendStatus from '../../redux/actions/experimentSettings/loadBackendStatus';
 
-const { Text, Paragraph } = Typography;
+const { Title, Text, Paragraph } = Typography;
 
 const ProjectDetails = ({ width, height }) => {
   const defaultNA = 'N.A.';
@@ -646,69 +646,79 @@ const ProjectDetails = ({ width, height }) => {
         onCancel={() => setUploadDetailsModalVisible(false)}
       />
       <div width={width} height={height}>
-        <PageHeader
-          title={activeProject.name}
-          extra={[
-            <Button
-              disabled={projects.ids.length === 0}
-              onClick={() => setUploadModalVisible(true)}
-            >
-              Add samples
-            </Button>,
-            <Button
-              disabled={
-                projects.ids.length === 0
+        <Space direction='vertical' style={{ width: '100%', padding: '8px 4px' }}>
+          <Row style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Title level={3}>{activeProject.name}</Title>
+            <Space>
+              <Button
+                disabled={projects.ids.length === 0}
+                onClick={() => setUploadModalVisible(true)}
+              >
+                Add samples
+              </Button>
+              <Button
+                disabled={
+                  projects.ids.length === 0
                 || activeProject?.samples?.length === 0
                 || isAddingMetadata
-              }
-              onClick={() => {
-                setIsAddingMetadata(true);
-                createMetadataColumn();
-              }}
-            >
-              Add metadata
-            </Button>,
-            <Button
-              type='primary'
-              disabled={
-                projects.ids.length === 0
+                }
+                onClick={() => {
+                  setIsAddingMetadata(true);
+                  createMetadataColumn();
+                }}
+              >
+                Add metadata
+              </Button>
+              <Button
+                type='primary'
+                disabled={
+                  projects.ids.length === 0
                 || activeProject?.samples?.length === 0
                 || !canLaunchAnalysis
+                }
+                onClick={() => openAnalysisModal()}
+              >
+                Launch analysis
+              </Button>
+            </Space>
+          </Row>
+
+          <Row>
+            <Col>
+              {
+                activeProjectUuid && (
+                  <Space direction='vertical' size='small'>
+                    <Text type='secondary'>{`ID : ${activeProjectUuid}`}</Text>
+                    <Text strong>Description:</Text>
+                    <Paragraph
+                      editable={{ onChange: changeDescription }}
+                    >
+                      {activeProject.description}
+
+                    </Paragraph>
+                  </Space>
+                )
               }
-              onClick={() => openAnalysisModal()}
-            >
-              Launch analysis
-            </Button>,
-          ]}
-        >
-          {
-            activeProjectUuid && (
-              <Space direction='vertical' size='small'>
-                <Text type='secondary'>{`ID : ${activeProjectUuid}`}</Text>
-                <Text strong>Description:</Text>
-                <Paragraph
-                  editable={{ onChange: changeDescription }}
-                >
-                  {activeProject.description}
-
-                </Paragraph>
-              </Space>
-            )
-          }
-        </PageHeader>
-
-        <Table
-          size='small'
-          scroll={{
-            x: 'max-content',
-            y: height - 250,
-          }}
-          bordered
-          columns={tableColumns}
-          dataSource={tableData}
-          sticky
-          pagination={false}
-        />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col>
+              <Table
+                size='small'
+                scroll={{
+                  x: 'max-content',
+                  y: height - 250,
+                }}
+                bordered
+                columns={tableColumns}
+                dataSource={tableData}
+                sticky
+                pagination={false}
+              />
+            </Col>
+          </Row>
+        </Space>
       </div>
     </>
   );

diff --git a/src/components/data-management/ProjectsListContainer.jsx b/src/components/data-management/ProjectsListContainer.jsx
@@ -90,8 +90,8 @@ const ProjectsListContainer = (props) => {
                 layout='horizontal'
                 size='small'
                 column={1}
-                colon=''
-                title={(
+              >
+                <Descriptions.Item contentStyle={{ fontWeight: 700, fontSize: 16 }}>
                   <EditableField
                     value={projects[uuid].name}
                     onAfterSubmit={(name) => {
@@ -110,8 +110,7 @@ const ProjectsListContainer = (props) => {
                       ).isValid
                     }
                   />
-                )}
-              >
+                </Descriptions.Item>
                 <Descriptions.Item
                   labelStyle={{ fontWeight: 'bold' }}
                   label='Samples'

diff --git a/src/pages/data-management/index.jsx b/src/pages/data-management/index.jsx
@@ -74,11 +74,16 @@ const DataManagementPage = ({ route }) => {
     'Projects List': {
       toolbarControls: [],
       component: (width, height) => (
-        <Space direction='vertical' style={{ width: '100%', overflowY: 'scroll' }}>
+        <Space
+          direction='vertical'
+          style={{ width: '100%' }}
+        >
           <Button type='primary' block onClick={() => setNewProjectModalVisible(true)}>
             Create New Project
           </Button>
-          <ProjectsListContainer height={height} />
+          <Space direction='vertical' style={{ width: '100%', overflowY: 'scroll' }}>
+            <ProjectsListContainer height={height} />
+          </Space>
         </Space>
       ),
     },