From 79cbc8a467bb2d569d0d6048ad5cdcf1be267e9b Mon Sep 17 00:00:00 2001 From: rushtong Date: Thu, 6 Feb 2025 11:31:53 -0500 Subject: [PATCH 01/19] feat: migrate AddUserAccess component --- src/components/common/AddUserAccess.tsx | 111 ++++++++++-------------- 1 file changed, 44 insertions(+), 67 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index bddb70a0e..fe92d6e87 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import _ from 'lodash'; -import { CustomTheme } from '@mui/material/styles'; -import { createStyles, WithStyles, withStyles } from '@mui/styles'; +import { styled } from '@mui/system'; import { Typography, Autocomplete, @@ -10,63 +9,22 @@ import { SelectChangeEvent, MenuItem, Button, + Box, } from '@mui/material'; +import { CustomTheme } from '@mui/material/styles'; import clsx from 'clsx'; import isEmail from 'validator/lib/isEmail'; -const styles = (theme: CustomTheme) => - createStyles({ - sharingArea: { - display: 'flex', - 'flex-direction': 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - emailEntryArea: { - display: 'flex', - }, - sharingCol: { - flexGrow: 1, - marginRight: '1rem', - }, - permissionsCol: { - flexGrow: 'unset', - width: 150, - }, - input: { - backgroundColor: theme.palette.common.white, - borderRadius: theme.spacing(0.5), - }, - sharingButtonContainer: { - paddingTop: 22, - }, - button: { - backgroundColor: theme.palette.common.link, - color: theme.palette.common.white, - '&:hover': { - backgroundColor: theme.palette.common.link, - }, - }, - section: { - margin: `${theme.spacing(1)} 0px`, - overflowX: 'hidden', - }, - errMessage: { - color: theme.palette.error.main, - }, - }); - -export interface AccessPermission { - policy: string; - disabled: boolean; -} - -interface AddUserAccessProps extends WithStyles { - permissions: AccessPermission[]; - onAdd: (policyName: string, usersToAdd: string[]) => void; -} +// Styled components (>3 styles) +const SharingArea = styled(Box)(({ theme }: { theme: CustomTheme }) => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', +})); -function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) { +// The rest can use sx prop as they have ≤3 styles +function AddUserAccess({ permissions, onAdd }: Omit) { const [policyName, setPolicyName] = useState(permissions[0].policy); const permissionDisplays = permissions.map((perm) => perm.policy @@ -123,8 +81,8 @@ function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) { return ( <> -
-
+ + People -
-
+ + Permissions -
-
+ + -
-
- {err &&
{err}
} + + + {err && {err}} ); } -export default withStyles(styles)(AddUserAccess); +export default AddUserAccess; From c948a8f215b125f1d905e58e7a2d2d730db3bc01 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 08:57:18 -0500 Subject: [PATCH 02/19] feat: fixes --- src/components/common/AddUserAccess.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index fe92d6e87..a49bc0aba 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -11,17 +11,25 @@ import { Button, Box, } from '@mui/material'; -import { CustomTheme } from '@mui/material/styles'; -import clsx from 'clsx'; import isEmail from 'validator/lib/isEmail'; // Styled components (>3 styles) -const SharingArea = styled(Box)(({ theme }: { theme: CustomTheme }) => ({ +const SharingArea = styled(Box)({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', -})); +}); + +export interface AccessPermission { + policy: string; + disabled: boolean; +} + +interface AddUserAccessProps { + permissions: AccessPermission[]; + onAdd: (policyName: string, usersToAdd: string[]) => void; +} // The rest can use sx prop as they have ≤3 styles function AddUserAccess({ permissions, onAdd }: Omit) { From 97ad89d15c77674a04e9f64d03b1936140c85c35 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 09:05:18 -0500 Subject: [PATCH 03/19] feat: migrate Failure component --- src/components/common/Failure.jsx | 44 ++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/common/Failure.jsx b/src/components/common/Failure.jsx index 34c41ddae..a361486aa 100644 --- a/src/components/common/Failure.jsx +++ b/src/components/common/Failure.jsx @@ -1,35 +1,37 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles } from '@mui/styles'; +import { Box } from '@mui/material'; +import { styled } from '@mui/system'; import ErrorIcon from 'media/icons/warning-standard-solid.svg?react'; -const styles = (theme) => ({ - text: { - alignSelf: 'center', - fontFamily: theme.typography.fontFamily, - fontSize: 12, - fontWeight: 600, - padding: `0 0 0 ${theme.spacing(2)}px`, - }, - icon: { - fill: theme.palette.primary.contrastText, - height: theme.spacing(4), - }, -}); +// Use styled component for text since it has >3 styles +const StyledText = styled(Box)(({ theme }) => ({ + alignSelf: 'center', + fontFamily: theme.typography.fontFamily, + fontSize: '12px', + fontWeight: 600, + padding: `0 0 0 ${theme.spacing(2)}`, +})); -function Failure({ errString, classes }) { +function Failure({ errString }) { + // Use sx prop for icon since it has ≤3 styles return ( -
- -
{errString}
-
+ + theme.palette.primary.contrastText, + height: (theme) => theme.spacing(4), + }} + alt="logo" + /> + {errString} + ); } Failure.propTypes = { - classes: PropTypes.object.isRequired, errString: PropTypes.string, }; -export default withStyles(styles)(Failure); +export default Failure; From f968404cc519539579e4079fd6cf08cee90f4201 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 09:27:52 -0500 Subject: [PATCH 04/19] feat: migrate FullViewSnapshotButton component --- .../common/FullViewSnapshotButton.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/common/FullViewSnapshotButton.tsx b/src/components/common/FullViewSnapshotButton.tsx index 9a8790876..4bd546a3c 100644 --- a/src/components/common/FullViewSnapshotButton.tsx +++ b/src/components/common/FullViewSnapshotButton.tsx @@ -14,8 +14,9 @@ import { FormLabel, Link, TextField, - CustomTheme, + Box, } from '@mui/material'; +import { styled } from '@mui/system'; import React, { Dispatch } from 'react'; import { BillingProfileModel, @@ -25,20 +26,17 @@ import { import { Action } from 'redux'; import { connect } from 'react-redux'; import { isEmpty, now, uniq } from 'lodash'; -import { createStyles, withStyles, WithStyles } from '@mui/styles'; import { ManagedGroupMembershipEntry } from 'models/group'; import TerraTooltip from './TerraTooltip'; import JadeDropdown from '../dataset/data/JadeDropdown'; import { useOnMount } from '../../libs/utils'; -const styles = (theme: CustomTheme) => - createStyles({ - jadeLink: { - ...theme.mixins.jadeLink, - }, - }); +const StyledLink = styled('span')(({ theme }) => ({ + // @ts-ignore + ...theme.mixins.jadeLink, +})); -interface FullViewSnapshotButtonProps extends WithStyles { +interface FullViewSnapshotButtonProps { dispatch: Dispatch; dataset: DatasetModel; billingProfiles: Array; @@ -46,7 +44,6 @@ interface FullViewSnapshotButtonProps extends WithStyles { } function FullViewSnapshotButton({ - classes, dataset, dispatch, billingProfiles, @@ -120,7 +117,7 @@ function FullViewSnapshotButton({ Creating snapshot - select a billing project -
+ Snapshot Name @@ -151,7 +148,7 @@ function FullViewSnapshotButton({ Do you want to use the Google Billing Project associated with this dataset or would you like to select a different one? -
+ Google Billing Project -
+ -
+ Authorization Domain - - (optional) + + {' '} + - (optional) + -
+ setSelectedAuthDomain(event.target.value)} value={selectedAuthDomain || ''} /> -
+ Authorization Domains restrict data access to only specified individuals in a group and are intended to fulfill requirements you may have for data governed by a compliance standard, such as federal controlled-access data or HIPAA protected data. They follow @@ -204,10 +204,10 @@ function FullViewSnapshotButton({ href="https://support.terra.bio/hc/en-us/articles/360026775691-Overview-Managing-access-to-controlled-data-with-Authorization-Domains#h_01J94P49XS1NE5KE4B3NA3A413" target="_blank" > - When to use an Authorization Domain + When to use an Authorization Domain . -
+ -
+ ); @@ -239,4 +239,4 @@ function mapStateToProps(state: TdrState) { }; } -export default connect(mapStateToProps)(withStyles(styles)(FullViewSnapshotButton)); +export default connect(mapStateToProps)(FullViewSnapshotButton); From 14627b189392a7fa6e66ebc65d84ec65cd03ce78 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 09:34:40 -0500 Subject: [PATCH 05/19] feat: AddUserAccess readonly props --- src/components/common/AddUserAccess.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index a49bc0aba..021d4b162 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -27,8 +27,8 @@ export interface AccessPermission { } interface AddUserAccessProps { - permissions: AccessPermission[]; - onAdd: (policyName: string, usersToAdd: string[]) => void; + readonly permissions: AccessPermission[]; + readonly onAdd: (policyName: string, usersToAdd: string[]) => void; } // The rest can use sx prop as they have ≤3 styles From 63afb2834298132a2936c6788f6cb06d7eb4b1ee Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 09:42:47 -0500 Subject: [PATCH 06/19] feat: revert --- src/components/common/AddUserAccess.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index 021d4b162..a49bc0aba 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -27,8 +27,8 @@ export interface AccessPermission { } interface AddUserAccessProps { - readonly permissions: AccessPermission[]; - readonly onAdd: (policyName: string, usersToAdd: string[]) => void; + permissions: AccessPermission[]; + onAdd: (policyName: string, usersToAdd: string[]) => void; } // The rest can use sx prop as they have ≤3 styles From c7b5f3bf426c93e41fdfa861bd7c2790c8dde90c Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 09:53:16 -0500 Subject: [PATCH 07/19] feat: migrate InfoModal component --- src/components/common/InfoModal.tsx | 113 ++++++++++------------------ 1 file changed, 39 insertions(+), 74 deletions(-) diff --git a/src/components/common/InfoModal.tsx b/src/components/common/InfoModal.tsx index 507cb8beb..7148b7c3f 100644 --- a/src/components/common/InfoModal.tsx +++ b/src/components/common/InfoModal.tsx @@ -1,104 +1,69 @@ import React from 'react'; -import { createStyles, withStyles, WithStyles } from '@mui/styles'; import { Button, Dialog, DialogTitle, DialogActions, IconButton, - CustomTheme, Typography, + Box, } from '@mui/material'; +import { styled } from '@mui/system'; import CloseIcon from '@mui/icons-material/Close'; -const styles = (theme: CustomTheme) => - createStyles({ - wrapper: { - padding: theme.spacing(4), - margin: theme.spacing(4), - }, - dialogTitle: { - borderBottom: `1px solid ${theme.palette.divider}`, - margin: 0, - padding: theme.spacing(2), - }, - closeButton: { - position: 'absolute', - right: theme.spacing(1), - top: theme.spacing(1), - color: theme.palette.grey[500], - }, - dialogInstructions: { - margin: 0, - padding: `${theme.spacing(2)} !important`, - whiteSpace: 'pre-wrap', - maxHeight: '24rem', - overflowY: 'scroll', - }, - dialogActions: { - borderTop: `1px solid ${theme.palette.divider}`, - margin: 0, - padding: theme.spacing(1), - }, - openButton: { - width: '100%', - border: 0, - justifyContent: 'left', - textTransform: 'none', - paddingTop: theme.spacing(1), - paddingBottom: theme.spacing(1), - '&:hover': { - border: 0, - }, - }, - openButtonIcon: { - marginRight: 5, - top: theme.spacing(1), - }, - horizontalModalButton: { - fontSize: theme.typography.h6.fontSize, - color: theme.palette.primary.light, - }, - overlaySpinner: { - opacity: 0.9, - position: 'absolute', - right: 0, - bottom: 0, - left: 0, - width: 'initial', - overflow: 'clip', - backgroundColor: theme.palette.common.white, - zIndex: 100, - }, - }); +const CloseIconButton = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], +})); -interface InfoModalProps extends WithStyles { +const StyledInstructions = styled(Typography)(({ theme }) => ({ + margin: 0, + padding: `${theme.spacing(2)} !important`, + whiteSpace: 'pre-wrap', + maxHeight: '24rem', + overflowY: 'scroll', +})); + +interface InfoModalProps { readonly modalContent: string; readonly modalHeading: string; readonly onDismiss: () => void; } -export function InfoModal(props: InfoModalProps) { - const { classes, modalContent, modalHeading, onDismiss } = props; - +export function InfoModal({ modalContent, modalHeading, onDismiss }: InfoModalProps) { return ( - + - + `1px solid ${theme.palette.divider}`, + margin: 0, + padding: (theme) => theme.spacing(2), + }} + > {modalHeading} - + - + - {modalContent} - + {modalContent} + `1px solid ${theme.palette.divider}`, + margin: 0, + padding: (theme) => theme.spacing(1), + }} + > - + ); } -export default withStyles(styles)(InfoModal); +export default InfoModal; From 2cab3e3756d3ea90ed921df69802923f715a924c Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 10:47:36 -0500 Subject: [PATCH 08/19] feat: readonly + destructure props --- src/components/common/AddUserAccess.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index a49bc0aba..42a46bc49 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -27,12 +27,13 @@ export interface AccessPermission { } interface AddUserAccessProps { - permissions: AccessPermission[]; - onAdd: (policyName: string, usersToAdd: string[]) => void; + readonly permissions: AccessPermission[]; + readonly onAdd: (policyName: string, usersToAdd: string[]) => void; } // The rest can use sx prop as they have ≤3 styles -function AddUserAccess({ permissions, onAdd }: Omit) { +function AddUserAccess(props: AddUserAccessProps) { + const { permissions, onAdd } = props; const [policyName, setPolicyName] = useState(permissions[0].policy); const permissionDisplays = permissions.map((perm) => perm.policy From 6f85f1222ef579e1c8c0d75ad6d6f647c0677a16 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 14:12:38 -0500 Subject: [PATCH 09/19] feat: theming fixes --- src/components/common/FullViewSnapshotButton.test.tsx | 2 +- src/components/common/FullViewSnapshotButton.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/FullViewSnapshotButton.test.tsx b/src/components/common/FullViewSnapshotButton.test.tsx index 3e3cadecf..a1f4855f3 100644 --- a/src/components/common/FullViewSnapshotButton.test.tsx +++ b/src/components/common/FullViewSnapshotButton.test.tsx @@ -1,6 +1,6 @@ import { mount } from 'cypress/react'; import { Router } from 'react-router-dom'; -import { ThemeProvider } from '@mui/styles'; +import { ThemeProvider } from '@mui/material/styles'; import { Provider } from 'react-redux'; import React from 'react'; import createMockStore from 'redux-mock-store'; diff --git a/src/components/common/FullViewSnapshotButton.tsx b/src/components/common/FullViewSnapshotButton.tsx index 4bd546a3c..49955a0b3 100644 --- a/src/components/common/FullViewSnapshotButton.tsx +++ b/src/components/common/FullViewSnapshotButton.tsx @@ -16,7 +16,7 @@ import { TextField, Box, } from '@mui/material'; -import { styled } from '@mui/system'; +import { styled } from '@mui/material/styles'; import React, { Dispatch } from 'react'; import { BillingProfileModel, From 0fa2f9ba82e0cb79489a115ed76b611d8b59d621 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 14:26:43 -0500 Subject: [PATCH 10/19] feat: migrate LoadingSpinner component --- src/components/common/LoadingSpinner.tsx | 29 +++++++++--------------- 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/components/common/LoadingSpinner.tsx b/src/components/common/LoadingSpinner.tsx index d41556ef7..f5a01e857 100644 --- a/src/components/common/LoadingSpinner.tsx +++ b/src/components/common/LoadingSpinner.tsx @@ -1,19 +1,13 @@ import React from 'react'; -import { makeStyles } from '@mui/styles'; -import { CircularProgress } from '@mui/material'; -import clsx from 'clsx'; +import { Box, CircularProgress } from '@mui/material'; +import { styled } from '@mui/material/styles'; -const useStyles = makeStyles(() => ({ - spinWrapper: { - height: 'calc(100% - 60px)', - display: 'grid', - width: 500, - textAlign: 'center', - margin: 'auto', - }, - spinner: { - margin: 'auto', - }, +const SpinWrapper = styled(Box)(() => ({ + height: 'calc(100% - 60px)', + display: 'grid', + width: '500px', + textAlign: 'center', + margin: 'auto', })); type LoadingSpinnerProps = { @@ -23,12 +17,11 @@ type LoadingSpinnerProps = { }; function LoadingSpinner({ className, delay, delayMessage }: LoadingSpinnerProps) { - const classes = useStyles(); return ( -
- + + {delay && delayMessage} -
+ ); } From 3e856c129283c42132acb15393714490fc69ebe6 Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 15:33:02 -0500 Subject: [PATCH 11/19] feat: import the correct `styled` function --- src/components/common/AddUserAccess.tsx | 2 +- src/components/common/Failure.jsx | 2 +- src/components/common/InfoModal.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/common/AddUserAccess.tsx b/src/components/common/AddUserAccess.tsx index 42a46bc49..443487355 100644 --- a/src/components/common/AddUserAccess.tsx +++ b/src/components/common/AddUserAccess.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import _ from 'lodash'; -import { styled } from '@mui/system'; +import { styled } from '@mui/material/styles'; import { Typography, Autocomplete, diff --git a/src/components/common/Failure.jsx b/src/components/common/Failure.jsx index a361486aa..c4d5f3ecb 100644 --- a/src/components/common/Failure.jsx +++ b/src/components/common/Failure.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Box } from '@mui/material'; -import { styled } from '@mui/system'; +import { styled } from '@mui/material/styles'; import ErrorIcon from 'media/icons/warning-standard-solid.svg?react'; diff --git a/src/components/common/InfoModal.tsx b/src/components/common/InfoModal.tsx index 7148b7c3f..dd7b1ce92 100644 --- a/src/components/common/InfoModal.tsx +++ b/src/components/common/InfoModal.tsx @@ -8,7 +8,7 @@ import { Typography, Box, } from '@mui/material'; -import { styled } from '@mui/system'; +import { styled } from '@mui/material/styles'; import CloseIcon from '@mui/icons-material/Close'; const CloseIconButton = styled(IconButton)(({ theme }) => ({ From 40fbe11d81db2e7323af757995bf19b1bb38aeae Mon Sep 17 00:00:00 2001 From: rushtong Date: Fri, 7 Feb 2025 15:36:44 -0500 Subject: [PATCH 12/19] feat: migrate TabPanel component --- src/components/common/TabPanel.tsx | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/components/common/TabPanel.tsx b/src/components/common/TabPanel.tsx index d310d0b51..78914670f 100644 --- a/src/components/common/TabPanel.tsx +++ b/src/components/common/TabPanel.tsx @@ -1,33 +1,24 @@ import React from 'react'; -import { createStyles, ClassNameMap, withStyles } from '@mui/styles'; - -const styles = () => - createStyles({ - tabPanel: { - padding: '1em 1em 1em 28px', - }, - }); +import { Box } from '@mui/material'; type TabPanelProps = { children: React.ReactNode; - classes: ClassNameMap; index: number; value: number; }; -function TabPanel(props: TabPanelProps) { - const { classes, children, value, index } = props; +function TabPanel({ children, value, index }: TabPanelProps) { return ( - + {value === index && {children}} + ); } -export default withStyles(styles)(TabPanel); +export default TabPanel; From 25450ec86e321c2b95c73923d9056dad7c1ddfaf Mon Sep 17 00:00:00 2001 From: rushtong Date: Sat, 8 Feb 2025 12:19:24 -0500 Subject: [PATCH 13/19] feat: migrate TabWrapper component --- src/components/common/TabWrapper.tsx | 104 ++++++++++++--------------- 1 file changed, 46 insertions(+), 58 deletions(-) diff --git a/src/components/common/TabWrapper.tsx b/src/components/common/TabWrapper.tsx index ec56cb11e..066846b63 100644 --- a/src/components/common/TabWrapper.tsx +++ b/src/components/common/TabWrapper.tsx @@ -1,16 +1,46 @@ -import { ClassNameMap, createStyles, withStyles } from '@mui/styles'; import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import Tabs from '@mui/material/Tabs'; -import { TabClasses } from '@mui/material/Tab/tabClasses'; import Tab from '@mui/material/Tab'; +import { Box } from '@mui/material'; import { Link, useLocation } from 'react-router-dom'; +import { styled } from '@mui/material/styles'; import HelpContainer from 'components/help/HelpContainer'; -import { CustomTheme } from '@mui/material/styles'; -import { IRoute } from 'routes/Private'; import { TdrState } from 'reducers'; import { RouterRootState } from 'connected-react-router'; import { SnapshotAccessRequest } from 'generated/tdr'; +import { IRoute } from 'routes/Private'; + +const StyledTabs = styled(Tabs)(({ theme }) => ({ + // @ts-ignore + borderBottom: `2px solid ${theme.palette.terra.green}`, + boxShadow: '0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)', + color: '#333F52', + fontFamily: theme.typography.fontFamily, + height: '18px', + fontSize: '14px', + fontWeight: 600, + lineHeight: '18px', + textAlign: 'center', + width: '100%', + transition: '0.3s background-color ease-in-out', +})); + +const StyledTab = styled(Tab)(({ theme }) => ({ + '&.Mui-selected': { + transition: '0.3s background-color ease-in-out', + backgroundColor: '#ddebd0', + color: theme.palette.secondary.dark, + fontWeight: '700 !important', + }, +})); + +const StyledHelpContainer = styled(HelpContainer)(({ theme }) => ({ + borderBottom: `2px solid ${theme.palette.terra.green}`, + boxShadow: '0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)', + float: 'right', + width: '20px', +})); interface ITabConfig { label: string; @@ -18,51 +48,12 @@ interface ITabConfig { hidden?: boolean; } -const styles = (theme: CustomTheme) => - createStyles({ - tabsIndicator: { - borderBottom: '8px solid #74ae43', - }, - tabsRoot: { - borderBottom: `2px solid ${theme.palette.terra.green}`, - boxShadow: '0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)', - color: '#333F52', - fontFamily: theme.typography.fontFamily, - height: 18, - fontSize: 14, - fontWeight: 600, - lineHeight: 18, - textAlign: 'center', - width: '100%', - transition: '0.3s background-color ease-in-out', - }, - tabSelected: { - transition: '0.3s background-color ease-in-out', - backgroundColor: '#ddebd0', - color: theme.palette.secondary.dark, - fontWeight: '700 !important', - }, - tabWrapper: { - display: 'flex', - position: 'relative', - zIndex: 2, - }, - helpIconDiv: { - borderBottom: `2px solid ${theme.palette.terra.green}`, - boxShadow: '0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)', - float: 'right', - width: '20px', - }, - }); - type TabWrapperProps = { routes: Array; - classes: ClassNameMap; snapshotAccessRequests: Array; }; -function TabWrapper(props: TabWrapperProps) { - const { classes, routes, snapshotAccessRequests } = props; +function TabWrapper({ routes, snapshotAccessRequests }: TabWrapperProps) { const [selectedTab, setSelectedTab] = React.useState('datasets'); const location = useLocation(); @@ -89,31 +80,28 @@ function TabWrapper(props: TabWrapperProps) { ); return ( -
- + tab.path).includes(selectedTab) ? selectedTab : false} - classes={ - { - root: classes.tabsRoot, - indicator: classes.tabsIndicator, - } as Partial - } + TabIndicatorProps={{ + sx: { borderBottom: '8px solid #74ae43' }, + }} > {visibleTabs.map((config: ITabConfig, i: number) => ( - } disableFocusRipple disableRipple /> ))} - - -
+ + + ); } @@ -123,4 +111,4 @@ function mapStateToProps(state: TdrState & RouterRootState) { }; } -export default connect(mapStateToProps)(withStyles(styles)(TabWrapper)); +export default connect(mapStateToProps)(TabWrapper); From c5d55b9854f96efb5e2c02d4d2585d27b12c34a9 Mon Sep 17 00:00:00 2001 From: rushtong Date: Sat, 8 Feb 2025 12:31:21 -0500 Subject: [PATCH 14/19] feat: migrate TerraTooltip component --- src/components/common/TerraTooltip.tsx | 38 ++++++++++++++++---------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/common/TerraTooltip.tsx b/src/components/common/TerraTooltip.tsx index 7128baf64..470d27140 100644 --- a/src/components/common/TerraTooltip.tsx +++ b/src/components/common/TerraTooltip.tsx @@ -1,30 +1,38 @@ import React from 'react'; -import { makeStyles } from '@mui/styles'; import Tooltip from '@mui/material/Tooltip'; import { TooltipProps } from '@mui/material/Tooltip/Tooltip'; -import { CustomTheme } from '@mui/material/styles'; - -const useStyles = makeStyles((theme: CustomTheme) => ({ - arrow: { - color: theme.palette.common.black, - }, - tooltip: { - backgroundColor: theme.palette.common.black, - fontSize: theme.typography.body1.fontSize, - }, -})); type TerraTooltipProps = TooltipProps & { disabled?: boolean; }; function TerraTooltip(props: TerraTooltipProps) { - const classes = useStyles(); - const { disabled, children } = props; + const { disabled, children, ...otherProps } = props; + if (disabled) { return children; } - return ; + + return ( + theme.palette.common.black }, + }, + tooltip: { + sx: { + backgroundColor: (theme) => theme.palette.common.black, + // @ts-ignore + fontSize: (theme) => theme.typography.body1.fontSize, + }, + }, + }} + {...otherProps} + > + {children} + + ); } export default TerraTooltip; From 4f206f0e2e9884d3a7ff37b7c40d4a9d59f0d95d Mon Sep 17 00:00:00 2001 From: rushtong Date: Sat, 8 Feb 2025 12:40:29 -0500 Subject: [PATCH 15/19] feat: fix readonly warnings --- src/components/common/TabPanel.tsx | 9 +++++---- src/components/common/TabWrapper.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/common/TabPanel.tsx b/src/components/common/TabPanel.tsx index 78914670f..ef8681981 100644 --- a/src/components/common/TabPanel.tsx +++ b/src/components/common/TabPanel.tsx @@ -2,12 +2,13 @@ import React from 'react'; import { Box } from '@mui/material'; type TabPanelProps = { - children: React.ReactNode; - index: number; - value: number; + readonly children: React.ReactNode; + readonly index: number; + readonly value: number; }; -function TabPanel({ children, value, index }: TabPanelProps) { +function TabPanel(props: TabPanelProps) { + const { children, value, index } = props; return ( ; - snapshotAccessRequests: Array; + readonly routes: Array; + readonly snapshotAccessRequests: Array; }; -function TabWrapper({ routes, snapshotAccessRequests }: TabWrapperProps) { +function TabWrapper(props: TabWrapperProps) { + const { routes, snapshotAccessRequests } = props; const [selectedTab, setSelectedTab] = React.useState('datasets'); const location = useLocation(); From eb5c1c09b8701a8f9fcd77dad7705cf241b3eae7 Mon Sep 17 00:00:00 2001 From: rushtong Date: Sat, 8 Feb 2025 13:34:48 -0500 Subject: [PATCH 16/19] feat: migrate TextContent component --- src/components/common/TextContent.tsx | 65 +++++++++++---------------- 1 file changed, 27 insertions(+), 38 deletions(-) diff --git a/src/components/common/TextContent.tsx b/src/components/common/TextContent.tsx index 8fa33af06..7ddefed97 100644 --- a/src/components/common/TextContent.tsx +++ b/src/components/common/TextContent.tsx @@ -1,59 +1,40 @@ import React from 'react'; import { Link, Box } from '@mui/material'; -import { CustomTheme } from '@mui/material/styles'; -import { createStyles, WithStyles, withStyles } from '@mui/styles'; +import { styled } from '@mui/material/styles'; import ReactMarkdown from 'react-markdown'; import strip from 'strip-markdown'; -const styles = (theme: CustomTheme) => - createStyles({ - nullValue: { - fontStyle: 'italic', - textColor: theme.palette.primary.dark, - color: theme.palette.primary.dark, - }, - jadeLink: { - ...theme.mixins.jadeLink, - }, - }); +const StyledLink = styled('span')(({ theme }) => ({ + // @ts-ignore + ...theme.mixins.jadeLink, +})); -interface TextContentProps extends WithStyles { - text: string | undefined; - markdown?: boolean; - stripMarkdown?: boolean; - emptyText?: string; +interface TextContentProps { + readonly text: string | undefined; + readonly markdown?: boolean; + readonly stripMarkdown?: boolean; + readonly emptyText?: string; } -function TextContent({ - classes, - emptyText = '(empty)', - markdown = false, - stripMarkdown = false, - text, -}: TextContentProps) { +function TextContent(props: TextContentProps) { + const { emptyText = '(empty)', markdown = false, stripMarkdown = false, text } = props; return ( <> - {text && !markdown && ( - - {text} - - )} + {text && !markdown && {text}} {text && markdown && !stripMarkdown && ( -
+ ( - - {children} - + {children} ), }} > {text} -
+ )} {text && markdown && stripMarkdown && ( )} {!text && ( - + theme.palette.primary.dark, + color: (theme) => theme.palette.primary.dark, + }} + > {emptyText} - + )} ); } -export default withStyles(styles)(TextContent); +export default TextContent; From c4a85896e1f279b934bb81a275011a786c100437 Mon Sep 17 00:00:00 2001 From: rushtong Date: Sat, 8 Feb 2025 13:52:29 -0500 Subject: [PATCH 17/19] feat: prop fixes --- src/components/common/TextContent.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/common/TextContent.tsx b/src/components/common/TextContent.tsx index 7ddefed97..b92c23e60 100644 --- a/src/components/common/TextContent.tsx +++ b/src/components/common/TextContent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, Box } from '@mui/material'; +import { Box, Link } from '@mui/material'; import { styled } from '@mui/material/styles'; import ReactMarkdown from 'react-markdown'; import strip from 'strip-markdown'; @@ -16,8 +16,8 @@ interface TextContentProps { readonly emptyText?: string; } -function TextContent(props: TextContentProps) { - const { emptyText = '(empty)', markdown = false, stripMarkdown = false, text } = props; +function TextContent(componentProps: TextContentProps) { + const { emptyText = '(empty)', markdown = false, stripMarkdown = false, text } = componentProps; return ( <> {text && !markdown && {text}} @@ -40,13 +40,13 @@ function TextContent(props: TextContentProps) { { - const r = props.children + p: (props: any) => + // eslint-disable-next-line react/prop-types + props.children + // eslint-disable-next-line react/prop-types .filter((child: any) => child && typeof child === 'string') .map((child: any) => `${child}`) - .join(' '); - return r; - }, + .join(' '), }} > {text} From 2862dea4e85fc6e4b2860b254e838c4db7b7b930 Mon Sep 17 00:00:00 2001 From: rushtong Date: Tue, 11 Feb 2025 11:30:40 -0500 Subject: [PATCH 18/19] feat: refactor TabWrapper for CustomTheme type safety --- src/components/common/TabWrapper.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/TabWrapper.tsx b/src/components/common/TabWrapper.tsx index c2c17896e..521fe7a19 100644 --- a/src/components/common/TabWrapper.tsx +++ b/src/components/common/TabWrapper.tsx @@ -2,17 +2,16 @@ import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; -import { Box } from '@mui/material'; +import { Box, useTheme } from '@mui/material'; import { Link, useLocation } from 'react-router-dom'; -import { styled } from '@mui/material/styles'; +import { styled, CustomTheme } from '@mui/material/styles'; import HelpContainer from 'components/help/HelpContainer'; import { TdrState } from 'reducers'; import { RouterRootState } from 'connected-react-router'; import { SnapshotAccessRequest } from 'generated/tdr'; import { IRoute } from 'routes/Private'; -const StyledTabs = styled(Tabs)(({ theme }) => ({ - // @ts-ignore +const StyledTabs = styled(Tabs)(({ theme }: { theme: CustomTheme }) => ({ borderBottom: `2px solid ${theme.palette.terra.green}`, boxShadow: '0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)', color: '#333F52', @@ -87,6 +86,7 @@ function TabWrapper(props: TabWrapperProps) { TabIndicatorProps={{ sx: { borderBottom: '8px solid #74ae43' }, }} + theme={useTheme()} > {visibleTabs.map((config: ITabConfig, i: number) => ( Date: Tue, 11 Feb 2025 11:34:21 -0500 Subject: [PATCH 19/19] feat: refactor FullViewSnapshotButton for CustomTheme type safety --- src/components/common/FullViewSnapshotButton.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/common/FullViewSnapshotButton.tsx b/src/components/common/FullViewSnapshotButton.tsx index 49955a0b3..7cc23fd71 100644 --- a/src/components/common/FullViewSnapshotButton.tsx +++ b/src/components/common/FullViewSnapshotButton.tsx @@ -15,6 +15,8 @@ import { Link, TextField, Box, + CustomTheme, + useTheme, } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { Dispatch } from 'react'; @@ -31,8 +33,7 @@ import TerraTooltip from './TerraTooltip'; import JadeDropdown from '../dataset/data/JadeDropdown'; import { useOnMount } from '../../libs/utils'; -const StyledLink = styled('span')(({ theme }) => ({ - // @ts-ignore +const StyledLink = styled('span')(({ theme }: { theme: CustomTheme }) => ({ ...theme.mixins.jadeLink, })); @@ -204,7 +205,7 @@ function FullViewSnapshotButton({ href="https://support.terra.bio/hc/en-us/articles/360026775691-Overview-Managing-access-to-controlled-data-with-Authorization-Domains#h_01J94P49XS1NE5KE4B3NA3A413" target="_blank" > - When to use an Authorization Domain + When to use an Authorization Domain .