Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DUOS-2789] Switch pages and components to JSX #2397

Merged
merged 25 commits into from
Nov 27, 2023
Merged
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
8c09862
refactor: replace App and Footer with JSX
fboulnois Nov 14, 2023
2c585b5
refactor: switch ResearcherConsole to JSX
fboulnois Nov 13, 2023
1f8262b
refactor: switch Terms of Service to JSX
fboulnois Nov 13, 2023
7bb8c0c
refactor: switch PrivacyPolicy to JSX
fboulnois Nov 13, 2023
686614e
refactor: switch MemberConsole to JSX
fboulnois Nov 13, 2023
00cd83e
refactor: switch AdminManageUsers to JSX
fboulnois Nov 13, 2023
71c2b36
refactor: switch HealthCheck to JSX
fboulnois Nov 13, 2023
dfb3f28
refactor: switch DatasetStatistics to JSX
fboulnois Nov 13, 2023
96cef74
refactor: switch BackgroundSignIn to JSX
fboulnois Nov 13, 2023
a7ab6e8
refactor: switch ChairConsole to JSX
fboulnois Nov 13, 2023
d9b5822
refactor: switch AdminManageDarCollections to JSX
fboulnois Nov 13, 2023
c812a7a
refactor: switch Home to JSX
fboulnois Nov 13, 2023
522b03d
refactor: switch RadioButton to JSX
fboulnois Nov 13, 2023
f89f388
refactor: switch SimpleButton to JSX
fboulnois Nov 13, 2023
a5f4b2b
refactor: switch PageHeading to JSX
fboulnois Nov 13, 2023
3ffdb8e
refactor: switch PaginationBar to JSX
fboulnois Nov 13, 2023
e4139c5
refactor: switch SignIn to JSX
fboulnois Nov 13, 2023
5f8c7e2
refactor: switch Spinner to JSX
fboulnois Nov 13, 2023
23f5cd8
refactor: switch SearchBar to JSX
fboulnois Nov 13, 2023
bf2e463
refactor: switch SelectableText to JSX
fboulnois Nov 13, 2023
74dd6a9
refactor: switch DownloadLink to JSX
fboulnois Nov 13, 2023
e9a5a82
fix: minor fixes to styles and content
fboulnois Nov 13, 2023
97893ed
refactor: switch AdminManageLC to JSX
fboulnois Nov 14, 2023
a230f7c
refactor: switch ReadMore to JSX
fboulnois Nov 14, 2023
5a8e7f0
style: lint and prettify code
fboulnois Nov 17, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {useEffect, useState} from 'react';
import React, { useEffect, useState } from 'react';
import ReactGA from 'react-ga';
import {div, h} from 'react-hyperscript-helpers';
import Modal from 'react-modal';
import './App.css';
import {Config} from './libs/config';
@@ -81,18 +80,16 @@ function App() {
};

return (
div({className: 'body'}, [
div({className: 'wrap'}, [
div({className: 'main'}, [
h(DuosHeader, {onSignOut: signOut}),
h(Spinner, {
name: 'mainSpinner', group: 'duos', loadingImage
}),
h(Routes, {onSignOut: signOut, onSignIn: signIn, isLogged: isLoggedIn, env: env})
])
]),
DuosFooter()
])
<div className="body">
<div className="wrap">
<div className="main">
<DuosHeader onSignOut={signOut} />
<Spinner name="mainSpinner" group="duos" loadingImage={loadingImage} />
<Routes onSignOut={signOut} onSignIn={signIn} isLogged={isLoggedIn} env={env} />
</div>
</div>
<DuosFooter />
</div>
);
}

2 changes: 1 addition & 1 deletion src/Routes.js
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ const Routes = (props) => (
<Route exact path="/" render={(routeProps) => <Home {...routeProps} {...props} />} />
<Route exact path="/home" render={(routeProps) => <Home {...routeProps} {...props} />} />
<Route exact path="/status" render={(routeProps) => Status(mergeAll([routeProps, props]))} />
<Route exact path="/liveness" render={() => HealthCheck()} />
<Route exact path="/liveness" component={HealthCheck} />
<Route exact path="/backgroundsignin" render={
(routeProps) =>
checkEnv(envGroups.NON_STAGING)
20 changes: 9 additions & 11 deletions src/components/DownloadLink.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'lodash';
import { div, a, i, span } from 'react-hyperscript-helpers';
import React from 'react';
import { Theme } from '../libs/theme';

const ICON = {
@@ -9,14 +9,12 @@ const ICON = {

export const DownloadLink = props => {
const { label, onDownload } = props;
return div({}, [
a({
id: _.kebabCase(label),
onClick: () => onDownload()
},
[
i({ className: 'glyphicon glyphicon-download-alt', style: ICON }),
span({style: { fontSize: Theme.font.size.small }}, label)
])
]);
return (
<div>
<a id={_.kebabCase(label)} onClick={onDownload}>
<i className='glyphicon glyphicon-download-alt' style={ICON} />
<span style={{ fontSize: Theme.font.size.small }}>{label}</span>
</a>
</div>
);
};
24 changes: 12 additions & 12 deletions src/components/DuosFooter.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { a, div, footer, img, li, ul } from 'react-hyperscript-helpers';
import React from 'react';
import footerLogo from '../images/broad_logo_allwhite.png';

function DuosFooter() {
@@ -24,17 +24,17 @@ function DuosFooter() {
};

return (
div({ style: footerStyle }, [
footer({ style: mainFooterStyle }, [
img({ src: footerLogo, style: footerLogoStyle, alt: 'Broad Institute logo' }),
ul({ className: 'footer-links' }, [
li({ className: 'footer-links__item' }, ['\u00A9 Broad Institute']),
li({ className: 'footer-links__item' }, [a({ href: '/privacy' }, ['Privacy Policy']),]),
li({ className: 'footer-links__item' }, [a({ href: '/tos' }, ['Terms of Service']),]),
li({ className: 'footer-links__item' }, [a({ href: '/status' }, ['Status'])])
])
])
])
<div style={footerStyle}>
<footer style={mainFooterStyle}>
<img src={footerLogo} style={footerLogoStyle} alt='Broad Institute logo' />
<ul className='footer-links'>
<li className='footer-links__item'Broad Institute</li>
<li className='footer-links__item'><a href='/privacy'>Privacy Policy</a></li>
<li className='footer-links__item'><a href='/tos'>Terms of Service</a></li>
<li className='footer-links__item'><a href='/status'>Status</a></li>
</ul>
</footer>
</div>
);
}

150 changes: 74 additions & 76 deletions src/components/PageHeading.js
Original file line number Diff line number Diff line change
@@ -1,82 +1,80 @@
import {Component} from 'react';
import {div, hh, img, h2, span} from 'react-hyperscript-helpers';
import {isNil} from 'lodash';
import React from 'react';
import { isNil } from 'lodash';

export const PageHeading = hh(class PageHeading extends Component {
const margins = (iconSize) => {

margins(iconSize) {
const MEDIUM = {
marginLeft: '55px'
};

const MEDIUM = {
marginLeft: '55px'
};
const LARGE = {
marginLeft: '70px'
};

const LARGE = {
marginLeft: '70px'
};

const NONE = {
marginLeft: '0'
};

if (iconSize === 'none') {
return NONE;
}
if (iconSize === 'large') {
return LARGE;
} else {
return MEDIUM;
}
}

render() {

const HEADING = {
width: '100%',
margin: '20px 0 10px 0',
position: 'relative'
};

const ICON = {
position: 'absolute',
top: '0',
left: '0',
height: '50px'
};

const DESCRIPTION = {
color: '#000000',
height: '25px',
fontWeight: '400',
fontSize: '19px'
};

const TITLE = {
margin: '7px 0 5px 0',
lineBreak: 'auto'
};

const MARGINS = this.margins(this.props.iconSize);
const DESCRIPT_STYLE = isNil(this.props.descriptionStyle) ? DESCRIPTION : this.props.descriptionStyle;

return div({id: this.props.id + '_heading', style: HEADING}, [
img({
id: this.props.id + '_icon',
isRendered: this.props.imgSrc !== undefined,
src: this.props.imgSrc,
alt: this.props.title,
style: ICON
}),
div({style: MARGINS}, [
h2({
id: this.props.id + '_title',
className: this.props.color + '-color',
style: TITLE
}, [this.props.title]),
span({id: this.props.id + '_description', style: DESCRIPT_STYLE}, [this.props.description]),
]),

]);
const NONE = {
marginLeft: '0'
};

if (iconSize === 'none') {
return NONE;
} else if (iconSize === 'large') {
return LARGE;
} else {
return MEDIUM;
}

});
};

export const PageHeading = (props) => {
const { id, title, description, imgSrc, color, iconSize, descriptionStyle } = props;

const HEADING = {
width: '100%',
margin: '20px 0 10px 0',
position: 'relative'
};

const ICON = {
position: 'absolute',
top: '0',
left: '0',
height: '50px'
};

const DESCRIPTION = {
color: '#000000',
height: '25px',
fontWeight: '400',
fontSize: '19px'
};

const TITLE = {
margin: '7px 0 5px 0',
lineBreak: 'auto'
};

const MARGINS = margins(iconSize);
const DESCRIPT_STYLE = isNil(descriptionStyle) ? DESCRIPTION : descriptionStyle;

return (
<div id={id + '_heading'} style={HEADING}>
{imgSrc !== undefined &&
<img
id={id + '_icon'}
src={imgSrc}
alt={title}
style={ICON}
/>
}
<div style={MARGINS}>
<h2 id={id + '_title'} className={`${color}-color`} style={TITLE}>
{title}
</h2>
<span id={id + '_description'} style={DESCRIPT_STYLE}>
{description}
</span>
</div>
</div>
);
};

export default PageHeading;
86 changes: 39 additions & 47 deletions src/components/PaginationBar.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { div, input, span } from 'react-hyperscript-helpers';
import React from 'react';
import { useRef, useEffect } from 'react';
import { toNumber } from 'lodash';
import {Styles, Theme} from '../libs/theme';
import { Styles, Theme } from '../libs/theme';

//NOTE: This is a new pagination made to fit with the updated table look
//Component does not use third-party libraries for pagination, whereas the old version relies on 'react-pagination'
//Style works with Current Dar Table, but allows for modification with styles passed as a prop (though I expect to do some more fine-tuning with future implementations)
export default function PaginationBar(props) {
const {pageCount, goToPage, changeTableSize} = props;
const { pageCount, goToPage, changeTableSize } = props;
const currentPage = useRef(props.currentPage);
const tableSize = useRef(props.tableSize);
const applyTextHover = (e) => {
@@ -25,49 +25,41 @@ export default function PaginationBar(props) {
}, [props.currentPage, props.tableSize]);

return (
div({style: Styles.TABLE.FOOTER}, [
div({style: Styles.TABLE.PAGINATION_SECTION_OFFSET}),
div({style: Styles.TABLE.PAGINATION_BUTTON_SECTION}, [
div({
style: Styles.TABLE.PAGINATION_BUTTON
}, [
span({
onClick: () => goToPage(toNumber(currentPage.current.value) - 1),
onMouseEnter: applyTextHover,
onMouseLeave: (e) => removeTextHover(e, Theme.palette.primary),
},['Prev']),
]),
div({style: Styles.TABLE.PAGINATION_CURRENT_PAGE}, [
span({},['Page ']),
input({
onChange: () => goToPage(toNumber(currentPage.current.value)),
type: 'text',
ref: currentPage,
defaultValue: props.currentPage,
style: Styles.TABLE.PAGINATION_INPUT
}),
span({}, [` of ${pageCount}`])
]),
div({
style: Styles.TABLE.PAGINATION_BUTTON
}, [
span({
onClick: () => goToPage(toNumber(currentPage.current.value) + 1),
onMouseEnter: applyTextHover,
onMouseLeave: (e) => removeTextHover(e, '#1f3b50')
}, ['Next'])
]),
]),
div({style: Styles.TABLE.PAGINATION_TABLE_SIZE_SECTION}, [
span({style: {marginRight: '2%'}}, ['Rows per page: ']),
input({
onChange: () => changeTableSize(tableSize.current.value),
type: 'text',
ref: tableSize,
defaultValue: props.tableSize,
style: Styles.TABLE.PAGINATION_INPUT
})
])
])
<div style={Styles.TABLE.FOOTER}>
<div style={Styles.TABLE.PAGINATION_SECTION_OFFSET}></div>
<div style={Styles.TABLE.PAGINATION_BUTTON_SECTION}>
<div style={Styles.TABLE.PAGINATION_BUTTON}>
<span onClick={() => goToPage(toNumber(currentPage.current.value) - 1)}
onMouseEnter={applyTextHover}
onMouseLeave={(e) => removeTextHover(e, Theme.palette.primary)}>
Prev
</span>
</div>
<div style={Styles.TABLE.PAGINATION_CURRENT_PAGE}>
<span>Page </span>
<input onChange={() => goToPage(toNumber(currentPage.current.value))}
type="text"
ref={currentPage}
defaultValue={props.currentPage}
style={Styles.TABLE.PAGINATION_INPUT} />
<span> of {pageCount}</span>
</div>
<div style={Styles.TABLE.PAGINATION_BUTTON}>
<span onClick={() => goToPage(toNumber(currentPage.current.value) + 1)}
onMouseEnter={applyTextHover}
onMouseLeave={(e) => removeTextHover(e, '#1f3b50')}>
Next
</span>
</div>
</div>
<div style={Styles.TABLE.PAGINATION_TABLE_SIZE_SECTION}>
<span style={{ marginRight: '2%' }}>Rows per page: </span>
<input onChange={() => changeTableSize(tableSize.current.value)}
type="text"
ref={tableSize}
defaultValue={props.tableSize}
style={Styles.TABLE.PAGINATION_INPUT} />
</div>
</div>
);
}
Loading