mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-15 17:50:48 +02:00
chore: update MUI to v5 (#923)
* refactor: update mui packages * refactor: run mui codemods * refactor: format files after codemods * refactor: fix broken types * refactor: clean up theme * refactor: fix broken tests * refactor: replace @mui/styles with tss-react * refactor: move breakpoints into classes for tss * refactor: fix crash on missing feature description * refactor: remove void classNames * refactor: adjust styles to new defaults * refactor: remove broken rollout slider e2e test * refactor: fix duplicate e2e testid * refactor: update makeStyles after rebase * refactor: add missing snapshot after rebase * refactor: fix TableCellSortable focus styles * refactor: use 1.4 as the default line-height * refactor: hide webkit search field icons * refactor: fix select box label * refactor: make AutocompleteBox smaller * refactor: make heading smaller * refactor: fix toast close icon color * refactor: update snapshots * refactor: add missing test event awaits * refactor: fix default button line-height
This commit is contained in:
olav
GitHub
parent
23a874d051
commit
24c11332b5
@ -106,16 +106,8 @@ describe('feature', () => {
|
||||
`/projects/default/features/${featureToggleName}/strategies/create?environmentId=development&strategyName=flexibleRollout`
|
||||
);
|
||||
|
||||
cy.wait(1000);
|
||||
cy.get('[data-testid=ROLLOUT_SLIDER_ID')
|
||||
.click()
|
||||
.type('{leftarrow}'.repeat(20));
|
||||
|
||||
if (ENTERPRISE) {
|
||||
cy.get('[data-testid=ADD_CONSTRAINT_ID]').click();
|
||||
cy.get('[data-testid=CONSTRAINT_AUTOCOMPLETE_ID]')
|
||||
.type('{downArrow}'.repeat(1))
|
||||
.type('{enter}');
|
||||
cy.get('[data-testid=DIALOGUE_CONFIRM_ID]').click();
|
||||
}
|
||||
|
||||
@ -126,7 +118,7 @@ describe('feature', () => {
|
||||
expect(req.body.name).to.equal('flexibleRollout');
|
||||
expect(req.body.parameters.groupId).to.equal(featureToggleName);
|
||||
expect(req.body.parameters.stickiness).to.equal('default');
|
||||
expect(req.body.parameters.rollout).to.equal('30');
|
||||
expect(req.body.parameters.rollout).to.equal(100);
|
||||
|
||||
if (ENTERPRISE) {
|
||||
expect(req.body.constraints.length).to.equal(1);
|
||||
@ -149,11 +141,6 @@ describe('feature', () => {
|
||||
`/projects/default/features/${featureToggleName}/strategies/edit?environmentId=development&strategyId=${strategyId}`
|
||||
);
|
||||
|
||||
cy.wait(1000);
|
||||
cy.get('[data-testid=ROLLOUT_SLIDER_ID')
|
||||
.click()
|
||||
.type('{rightArrow}'.repeat(10));
|
||||
|
||||
cy.get('[data-testid=FLEXIBLE_STRATEGY_STICKINESS_ID]')
|
||||
.first()
|
||||
.click()
|
||||
@ -172,7 +159,7 @@ describe('feature', () => {
|
||||
req => {
|
||||
expect(req.body.parameters.groupId).to.equal('new-group-id');
|
||||
expect(req.body.parameters.stickiness).to.equal('sessionId');
|
||||
expect(req.body.parameters.rollout).to.equal('60');
|
||||
expect(req.body.parameters.rollout).to.equal(100);
|
||||
|
||||
if (ENTERPRISE) {
|
||||
expect(req.body.constraints.length).to.equal(1);
|
||||
@ -301,10 +288,7 @@ describe('feature', () => {
|
||||
.children()
|
||||
.find('input')
|
||||
.should('have.attr', 'disabled');
|
||||
cy.get('[data-testid=VARIANT_WEIGHT_TYPE]')
|
||||
.children()
|
||||
.find('input')
|
||||
.check();
|
||||
cy.get('[data-testid=VARIANT_WEIGHT_CHECK]').find('input').check();
|
||||
cy.get('[data-testid=VARIANT_WEIGHT_INPUT]').clear().type('15');
|
||||
|
||||
cy.intercept(
|
||||
|
||||
@ -37,9 +37,11 @@
|
||||
"e2e:heroku": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=example@example.com"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@material-ui/core": "4.12.4",
|
||||
"@material-ui/icons": "4.11.3",
|
||||
"@material-ui/lab": "4.0.0-alpha.61",
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/icons-material": "^5.6.2",
|
||||
"@mui/lab": "^5.0.0-alpha.79",
|
||||
"@mui/material": "^5.6.3",
|
||||
"@openapitools/openapi-generator-cli": "2.5.1",
|
||||
"@testing-library/dom": "8.13.0",
|
||||
"@testing-library/jest-dom": "5.16.4",
|
||||
@ -70,6 +72,7 @@
|
||||
"immer": "^9.0.12",
|
||||
"lodash.clonedeep": "4.5.0",
|
||||
"msw": "^0.39.2",
|
||||
"pkginfo": "^0.4.1",
|
||||
"prettier": "2.6.2",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "17.0.2",
|
||||
@ -85,6 +88,7 @@
|
||||
"sass": "1.51.0",
|
||||
"semver": "7.3.7",
|
||||
"swr": "1.3.0",
|
||||
"tss-react": "^3.6.2",
|
||||
"typescript": "4.6.4"
|
||||
},
|
||||
"jest": {
|
||||
@ -119,8 +123,5 @@
|
||||
"ignorePatterns": [
|
||||
"cypress"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"pkginfo": "^0.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import classnames from 'classnames';
|
||||
import { Paper } from '@material-ui/core';
|
||||
import CheckIcon from '@material-ui/icons/Check';
|
||||
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
|
||||
import { Paper } from '@mui/material';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import styles from './ReportCard.module.scss';
|
||||
import ReactTimeAgo from 'react-timeago';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
reportToggleList: {
|
||||
width: '100%',
|
||||
margin: 'var(--card-margin-y) 0',
|
||||
@ -11,11 +11,9 @@ export const useStyles = makeStyles(theme => ({
|
||||
backgroundColor: '#f2f2f2',
|
||||
fontSize: 'var(--p-size)',
|
||||
},
|
||||
|
||||
sortIcon: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
|
||||
reportToggleListHeader: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@ -23,22 +21,18 @@ export const useStyles = makeStyles(theme => ({
|
||||
borderBottom: '1px solid #f1f1f1',
|
||||
padding: '1rem var(--card-padding-x)',
|
||||
},
|
||||
|
||||
reportToggleListInnerContainer: {
|
||||
padding: 'var(--card-padding)',
|
||||
},
|
||||
|
||||
reportToggleListHeading: {
|
||||
fontSize: 'var(--h1-size)',
|
||||
margin: 0,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
reportIcon: {
|
||||
fontsize: '1.5rem',
|
||||
marginRight: 5,
|
||||
},
|
||||
|
||||
reportingToggleTable: {
|
||||
width: ' 100%',
|
||||
borderSpacing: '0 0.8rem',
|
||||
@ -50,20 +44,16 @@ export const useStyles = makeStyles(theme => ({
|
||||
expired: {
|
||||
color: 'var(--danger)',
|
||||
},
|
||||
|
||||
active: {
|
||||
color: 'var(--success)',
|
||||
},
|
||||
|
||||
stale: {
|
||||
color: 'var(--danger)',
|
||||
},
|
||||
|
||||
reportStatus: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
|
||||
tableRow: {
|
||||
'&:hover': {
|
||||
backgroundColor: '#eeeeee',
|
||||
@ -73,30 +63,28 @@ export const useStyles = makeStyles(theme => ({
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
},
|
||||
|
||||
link: {
|
||||
color: theme.palette.primary.main,
|
||||
textDecoration: 'none',
|
||||
fontWeight: theme.fontWeight.bold,
|
||||
},
|
||||
|
||||
[theme.breakpoints.down(800)]: {
|
||||
hideColumn: {
|
||||
hideColumn: {
|
||||
[theme.breakpoints.down(800)]: {
|
||||
display: 'none',
|
||||
},
|
||||
th: {
|
||||
},
|
||||
th: {
|
||||
[theme.breakpoints.down(800)]: {
|
||||
minWidth: '120px',
|
||||
},
|
||||
},
|
||||
|
||||
[theme.breakpoints.down(550)]: {
|
||||
hideColumnStatus: {
|
||||
hideColumnStatus: {
|
||||
[theme.breakpoints.down(550)]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[theme.breakpoints.down(425)]: {
|
||||
hideColumnLastSeen: {
|
||||
hideColumnLastSeen: {
|
||||
[theme.breakpoints.down(425)]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useState, useEffect, VFC } from 'react';
|
||||
import { Paper, MenuItem } from '@material-ui/core';
|
||||
import { Paper, MenuItem } from '@mui/material';
|
||||
import { useFeaturesSort } from 'hooks/useFeaturesSort';
|
||||
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
@ -25,7 +25,7 @@ export const ReportToggleList: VFC<IReportToggleListProps> = ({
|
||||
features,
|
||||
selectedProject,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const [checkAll, setCheckAll] = useState(false);
|
||||
const [localFeatures, setFeatures] = useState<IFeatureToggleListItem[]>([]);
|
||||
// @ts-expect-error
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Dispatch, SetStateAction, VFC } from 'react';
|
||||
import { Checkbox } from '@material-ui/core';
|
||||
import UnfoldMoreOutlinedIcon from '@material-ui/icons/UnfoldMoreOutlined';
|
||||
import { Checkbox } from '@mui/material';
|
||||
import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { ReportingSortType } from 'component/Reporting/constants';
|
||||
import { useStyles } from '../ReportToggleList.styles';
|
||||
@ -20,7 +20,7 @@ export const ReportToggleListHeader: VFC<IReportToggleListHeaderProps> = ({
|
||||
setSort,
|
||||
bulkActionsOn,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const handleSort = (type: ReportingSortType) => {
|
||||
setSort(prev => ({
|
||||
type,
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { memo, ReactNode } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Checkbox } from '@material-ui/core';
|
||||
import CheckIcon from '@material-ui/icons/Check';
|
||||
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
|
||||
import { Checkbox } from '@mui/material';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
|
||||
import {
|
||||
@ -41,7 +41,7 @@ export const ReportToggleListItem = memo<IReportToggleListItemProps>(
|
||||
bulkActionsOn,
|
||||
setFeatures,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const nameMatches = (feature: { name: string }) =>
|
||||
feature.name === name;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
|
||||
import { Grid, FormControlLabel, Checkbox } from '@mui/material';
|
||||
|
||||
import { styles as commonStyles } from 'component/common';
|
||||
import { styles as themeStyles } from 'component/common';
|
||||
import { IAddonProvider } from 'interfaces/addons';
|
||||
|
||||
interface IAddonProps {
|
||||
@ -24,7 +24,7 @@ export const AddonEvents = ({
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h4>Events</h4>
|
||||
<span className={commonStyles.error}>{error}</span>
|
||||
<span className={themeStyles.error}>{error}</span>
|
||||
<Grid container spacing={0}>
|
||||
{provider.events.map(e => (
|
||||
<Grid item xs={4} key={e}>
|
||||
|
||||
@ -7,9 +7,9 @@ import {
|
||||
FormEventHandler,
|
||||
MouseEventHandler,
|
||||
} from 'react';
|
||||
import { TextField, FormControlLabel, Switch, Button } from '@material-ui/core';
|
||||
import { TextField, FormControlLabel, Switch, Button } from '@mui/material';
|
||||
import produce from 'immer';
|
||||
import { styles as commonStyles } from 'component/common';
|
||||
import { styles as themeStyles } from 'component/common';
|
||||
import { trim } from 'component/common/util';
|
||||
import { IAddon, IAddonProvider } from 'interfaces/addons';
|
||||
import { AddonParameters } from './AddonParameters/AddonParameters';
|
||||
@ -19,10 +19,10 @@ import PageContent from 'component/common/PageContent/PageContent';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
|
||||
import useToast from 'hooks/useToast';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
import { formatUnknownError } from 'utils/formatUnknownError';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const useStyles = makeStyles()(theme => ({
|
||||
nameInput: {
|
||||
marginRight: '1.5rem',
|
||||
},
|
||||
@ -51,7 +51,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
|
||||
const { createAddon, updateAddon } = useAddonsApi();
|
||||
const { setToastData, setToastApiError } = useToast();
|
||||
const history = useHistory();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const [formValues, setFormValues] = useState(initialValues);
|
||||
const [errors, setErrors] = useState<{
|
||||
@ -190,7 +190,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
|
||||
<a href={documentationUrl} target="_blank" rel="noreferrer">
|
||||
Read more
|
||||
</a>
|
||||
<p className={commonStyles.error}>{errors.general}</p>
|
||||
<p className={themeStyles.error}>{errors.general}</p>
|
||||
</section>
|
||||
<form onSubmit={onSubmit}>
|
||||
<section className={styles.formSection}>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { TextField } from '@material-ui/core';
|
||||
import { TextField } from '@mui/material';
|
||||
import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons';
|
||||
import { ChangeEventHandler } from 'react';
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { ReactElement } from 'react';
|
||||
import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
|
||||
import { AvailableAddons } from './AvailableAddons/AvailableAddons';
|
||||
import { Avatar } from '@material-ui/core';
|
||||
import { DeviceHub } from '@material-ui/icons';
|
||||
import { Avatar } from '@mui/material';
|
||||
import { DeviceHub } from '@mui/icons-material';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import slackIcon from 'assets/icons/slack.svg';
|
||||
import jiraIcon from 'assets/icons/jira.svg';
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
ListItemAvatar,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import { CREATE_ADDON } from 'component/providers/AccessProvider/permissions';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
|
||||
|
||||
@ -4,8 +4,8 @@ import {
|
||||
ListItemAvatar,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
} from '@material-ui/core';
|
||||
import { Delete, Edit, Visibility, VisibilityOff } from '@material-ui/icons';
|
||||
} from '@mui/material';
|
||||
import { Delete, Edit, Visibility, VisibilityOff } from '@mui/icons-material';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import {
|
||||
DELETE_ADDON,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
maxWidth: '400px',
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from '@material-ui/core';
|
||||
import { KeyboardArrowDownOutlined } from '@material-ui/icons';
|
||||
import { Button } from '@mui/material';
|
||||
import { KeyboardArrowDownOutlined } from '@mui/icons-material';
|
||||
import React from 'react';
|
||||
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
|
||||
import useProjects from 'hooks/api/getters/useProjects/useProjects';
|
||||
@ -40,7 +40,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
|
||||
clearErrors,
|
||||
}) => {
|
||||
const TYPE_ADMIN = 'ADMIN';
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { environments } = useEnvironments();
|
||||
const { projects: availableProjects } = useProjects();
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
selectOptionsLink: {
|
||||
cursor: 'pointer',
|
||||
fontSize: theme.fontSizes.bodySize,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { FC } from 'react';
|
||||
import { Box, Link } from '@material-ui/core';
|
||||
import { Box, Link } from '@mui/material';
|
||||
import { useStyles } from './SelectAllButton.styles';
|
||||
|
||||
type SelectAllButtonProps = {
|
||||
@ -11,7 +11,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
|
||||
isAllSelected,
|
||||
onClick,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<Box sx={{ ml: 3.5, my: 0.5 }}>
|
||||
@ -19,6 +19,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
|
||||
onClick={onClick}
|
||||
className={styles.selectOptionsLink}
|
||||
component="button"
|
||||
underline="hover"
|
||||
>
|
||||
{isAllSelected ? 'Deselect all' : 'Select all'}
|
||||
</Link>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
selectOptionCheckbox: {
|
||||
marginRight: '0.2rem',
|
||||
},
|
||||
|
||||
@ -36,7 +36,7 @@ describe('SelectProjectInput', () => {
|
||||
expect(checkbox).toBeChecked();
|
||||
|
||||
const selectInputContainer = screen.getByTestId('select-input');
|
||||
const input = within(selectInputContainer).getByRole('textbox');
|
||||
const input = within(selectInputContainer).getByRole('combobox');
|
||||
expect(input).toBeDisabled();
|
||||
});
|
||||
|
||||
@ -72,7 +72,7 @@ describe('SelectProjectInput', () => {
|
||||
expect(checkbox).not.toBeChecked();
|
||||
|
||||
const selectInputContainer = screen.getByTestId('select-input');
|
||||
const input = within(selectInputContainer).getByRole('textbox');
|
||||
const input = within(selectInputContainer).getByRole('combobox');
|
||||
expect(input).toBeEnabled();
|
||||
});
|
||||
|
||||
@ -138,7 +138,7 @@ describe('SelectProjectInput', () => {
|
||||
/>
|
||||
);
|
||||
const input = await screen.findByLabelText('Projects');
|
||||
user.type(input, 'alp');
|
||||
await user.type(input, 'alp');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Alpha')).toBeVisible();
|
||||
@ -153,8 +153,8 @@ describe('SelectProjectInput', () => {
|
||||
expect(screen.getByText('Alpaca')).toBeVisible();
|
||||
});
|
||||
|
||||
user.clear(input);
|
||||
user.type(input, 'bravo');
|
||||
await user.clear(input);
|
||||
await user.type(input, 'bravo');
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Bravo')).toBeVisible();
|
||||
});
|
||||
|
||||
@ -5,15 +5,17 @@ import {
|
||||
TextField,
|
||||
Box,
|
||||
Paper,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import { Autocomplete } from '@mui/material';
|
||||
|
||||
import {
|
||||
Autocomplete,
|
||||
AutocompleteRenderGroupParams,
|
||||
AutocompleteRenderInputParams,
|
||||
AutocompleteRenderOptionState,
|
||||
} from '@material-ui/lab';
|
||||
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
|
||||
import CheckBoxIcon from '@material-ui/icons/CheckBox';
|
||||
} from '@mui/material/Autocomplete';
|
||||
|
||||
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
|
||||
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
||||
import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
|
||||
import { useStyles } from '../ApiTokenForm.styles';
|
||||
import { SelectAllButton } from './SelectAllButton/SelectAllButton';
|
||||
@ -41,7 +43,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
|
||||
error,
|
||||
onFocus,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const [projects, setProjects] = useState<string[]>(
|
||||
typeof defaultValue === 'string' ? [defaultValue] : defaultValue
|
||||
);
|
||||
@ -75,10 +77,11 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
|
||||
};
|
||||
|
||||
const renderOption = (
|
||||
props: object,
|
||||
option: IAutocompleteBoxOption,
|
||||
{ selected }: AutocompleteRenderOptionState
|
||||
) => (
|
||||
<>
|
||||
<li {...props}>
|
||||
<Checkbox
|
||||
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
|
||||
checkedIcon={<CheckBoxIcon fontSize="small" />}
|
||||
@ -86,7 +89,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
|
||||
className={styles.selectOptionCheckbox}
|
||||
/>
|
||||
{option.label}
|
||||
</>
|
||||
</li>
|
||||
);
|
||||
|
||||
const renderGroup = ({ key, children }: AutocompleteRenderGroupParams) => (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
tableRow: {
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
@ -22,17 +22,17 @@ export const useStyles = makeStyles(theme => ({
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
hideSM: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideMD: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideMD: {
|
||||
[theme.breakpoints.down('lg')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideXS: {
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
TableHead,
|
||||
TableRow,
|
||||
Tooltip,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import useToast from 'hooks/useToast';
|
||||
import useLoading from 'hooks/useLoading';
|
||||
@ -18,7 +18,7 @@ import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
|
||||
import ApiError from 'component/common/ApiError/ApiError';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
|
||||
import { Delete, FileCopy } from '@material-ui/icons';
|
||||
import { Delete, FileCopy } from '@mui/icons-material';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useLocationSettings } from 'hooks/useLocationSettings';
|
||||
@ -37,7 +37,7 @@ interface IApiToken {
|
||||
}
|
||||
|
||||
export const ApiTokenList = () => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const { uiConfig } = useUiConfig();
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
@ -196,6 +196,7 @@ export const ApiTokenList = () => {
|
||||
onClick={() => {
|
||||
copyToken(item.secret);
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
<FileCopy />
|
||||
</IconButton>
|
||||
@ -209,6 +210,7 @@ export const ApiTokenList = () => {
|
||||
setDeleteToken(item);
|
||||
setShowDelete(true);
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
infoBoxContainer: {
|
||||
marginBottom: 40,
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useContext } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Button } from '@material-ui/core';
|
||||
import { Button } from '@mui/material';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import PageContent from 'component/common/PageContent';
|
||||
@ -12,12 +12,12 @@ import {
|
||||
} from 'component/providers/AccessProvider/permissions';
|
||||
import { useStyles } from './ApiTokenPage.styles';
|
||||
import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
import { ApiTokenList } from 'component/admin/apiToken/ApiTokenList/ApiTokenList';
|
||||
import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
|
||||
|
||||
export const ApiTokenPage = () => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const { uiConfig } = useUiConfig();
|
||||
const history = useHistory();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Typography } from '@material-ui/core';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { Typography } from '@mui/material';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import { UserToken } from './UserToken/UserToken';
|
||||
|
||||
@ -14,7 +14,8 @@ export const ConfirmToken = ({
|
||||
closeConfirm,
|
||||
token,
|
||||
}: IConfirmUserLink) => {
|
||||
const commonStyles = useCommonStyles();
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
|
||||
return (
|
||||
<Dialogue
|
||||
open={open}
|
||||
@ -22,7 +23,7 @@ export const ConfirmToken = ({
|
||||
primaryButtonText="Close"
|
||||
title="New token created"
|
||||
>
|
||||
<div className={commonStyles.contentSpacingYLarge}>
|
||||
<div className={themeStyles.contentSpacingYLarge}>
|
||||
<Typography variant="body1">
|
||||
Your new token has been created successfully.
|
||||
</Typography>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { IconButton, Tooltip } from '@material-ui/core';
|
||||
import CopyIcon from '@material-ui/icons/FileCopy';
|
||||
import { IconButton, Tooltip } from '@mui/material';
|
||||
import CopyIcon from '@mui/icons-material/FileCopy';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import useToast from 'hooks/useToast';
|
||||
|
||||
@ -38,7 +38,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
|
||||
>
|
||||
{token}
|
||||
<Tooltip title="Copy token">
|
||||
<IconButton onClick={copyToken}>
|
||||
<IconButton onClick={copyToken} size="large">
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import AdminMenu from '../menu/AdminMenu';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
|
||||
@ -8,7 +8,8 @@ import {
|
||||
Select,
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
|
||||
interface IAutoCreateFormProps {
|
||||
data?: {
|
||||
@ -28,10 +29,8 @@ export const AutoCreateForm = ({
|
||||
setValue('autoCreate', !data.autoCreate);
|
||||
};
|
||||
|
||||
const updateDefaultRootRole = (
|
||||
evt: ChangeEvent<{ name?: string; value: unknown }>
|
||||
) => {
|
||||
setValue('defaultRootRole', evt.target.value as string);
|
||||
const updateDefaultRootRole = (evt: SelectChangeEvent) => {
|
||||
setValue('defaultRootRole', evt.target.value);
|
||||
};
|
||||
|
||||
const updateField = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
@ -40,7 +39,7 @@ export const AutoCreateForm = ({
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Auto-create users</strong>
|
||||
<p>
|
||||
@ -61,7 +60,7 @@ export const AutoCreateForm = ({
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Default Root Role</strong>
|
||||
<p>
|
||||
@ -75,6 +74,7 @@ export const AutoCreateForm = ({
|
||||
Default Role
|
||||
</InputLabel>
|
||||
<Select
|
||||
label="Default Role"
|
||||
labelId="defaultRootRole-label"
|
||||
id="defaultRootRole"
|
||||
name="defaultRootRole"
|
||||
@ -90,7 +90,7 @@ export const AutoCreateForm = ({
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Email domains</strong>
|
||||
<p>
|
||||
|
||||
@ -5,8 +5,8 @@ import {
|
||||
Grid,
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
} from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
@ -93,7 +93,7 @@ export const GoogleAuth = () => {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<form onSubmit={onSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item xs={5}>
|
||||
<strong>Enable</strong>
|
||||
<p>
|
||||
@ -115,7 +115,7 @@ export const GoogleAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item xs={5}>
|
||||
<strong>Client ID</strong>
|
||||
<p>
|
||||
@ -137,7 +137,7 @@ export const GoogleAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Client Secret</strong>
|
||||
<p>
|
||||
@ -159,7 +159,7 @@ export const GoogleAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Unleash hostname</strong>
|
||||
<p>
|
||||
@ -186,7 +186,7 @@ export const GoogleAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Auto-create users</strong>
|
||||
<p>
|
||||
@ -202,7 +202,7 @@ export const GoogleAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Email domains</strong>
|
||||
<p>
|
||||
|
||||
@ -5,8 +5,8 @@ import {
|
||||
Grid,
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
} from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
@ -105,7 +105,7 @@ export const OidcAuth = () => {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<form onSubmit={onSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Enable</strong>
|
||||
<p>Enable Open Id Connect Authentication.</p>
|
||||
@ -124,7 +124,7 @@ export const OidcAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Discover URL</strong>
|
||||
<p>(Required) Issuer discover metadata URL</p>
|
||||
@ -142,7 +142,7 @@ export const OidcAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Client ID</strong>
|
||||
<p>(Required) Client ID of your OpenID application</p>
|
||||
@ -161,7 +161,7 @@ export const OidcAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={4}>
|
||||
<Grid item md={5}>
|
||||
<strong>Client secret</strong>
|
||||
<p>
|
||||
@ -183,7 +183,7 @@ export const OidcAuth = () => {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<h3>Optional Configuration</h3>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Enable Single Sign-Out</strong>
|
||||
<p>
|
||||
@ -210,7 +210,7 @@ export const OidcAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>ACR Values</strong>
|
||||
<p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { Button, FormControlLabel, Grid, Switch } from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
@ -59,7 +59,7 @@ export const PasswordAuth = () => {
|
||||
return (
|
||||
<PageContent headerContent="">
|
||||
<form onSubmit={onSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Password based login</strong>
|
||||
<p>Allow users to login with username & password</p>
|
||||
|
||||
@ -5,8 +5,8 @@ import {
|
||||
Grid,
|
||||
Switch,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
} from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
@ -102,7 +102,7 @@ export const SamlAuth = () => {
|
||||
</Grid>
|
||||
<form onSubmit={onSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item md={5}>
|
||||
<Grid item md={5} mb={2}>
|
||||
<strong>Enable</strong>
|
||||
<p>Enable SAML 2.0 Authentication.</p>
|
||||
</Grid>
|
||||
@ -120,7 +120,7 @@ export const SamlAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Entity ID</strong>
|
||||
<p>(Required) The Entity Identity provider issuer.</p>
|
||||
@ -139,7 +139,7 @@ export const SamlAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Single Sign-On URL</strong>
|
||||
<p>
|
||||
@ -161,7 +161,7 @@ export const SamlAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={4}>
|
||||
<Grid item md={5}>
|
||||
<strong>X.509 Certificate</strong>
|
||||
<p>
|
||||
@ -185,7 +185,7 @@ export const SamlAuth = () => {
|
||||
}}
|
||||
multiline
|
||||
rows={14}
|
||||
rowsMax={14}
|
||||
maxRows={14}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
required
|
||||
@ -193,7 +193,7 @@ export const SamlAuth = () => {
|
||||
</Grid>
|
||||
</Grid>
|
||||
<h3>Optional Configuration</h3>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Single Sign-out URL</strong>
|
||||
<p>
|
||||
@ -214,7 +214,7 @@ export const SamlAuth = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid container spacing={3} mb={2}>
|
||||
<Grid item md={5}>
|
||||
<strong>Service Provider X.509 Certificate</strong>
|
||||
<p>
|
||||
@ -240,7 +240,7 @@ export const SamlAuth = () => {
|
||||
}}
|
||||
multiline
|
||||
rows={14}
|
||||
rowsMax={14}
|
||||
maxRows={14}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
@ -3,7 +3,7 @@ import InvoiceList from './InvoiceList';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
|
||||
const InvoiceAdminPage = () => {
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
|
||||
@ -6,8 +6,8 @@ import {
|
||||
TableRow,
|
||||
TableCell,
|
||||
Button,
|
||||
} from '@material-ui/core';
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew';
|
||||
} from '@mui/material';
|
||||
import OpenInNew from '@mui/icons-material/OpenInNew';
|
||||
import PageContent from 'component/common/PageContent';
|
||||
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import { Paper, Tab, Tabs } from '@material-ui/core';
|
||||
import { Paper, Tab, Tabs } from '@mui/material';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
|
||||
const navLinkStyle = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
environmentPermissionContainer: {
|
||||
marginBottom: '1.25rem',
|
||||
},
|
||||
|
||||
@ -4,8 +4,8 @@ import {
|
||||
AccordionSummary,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
} from '@material-ui/core';
|
||||
import { ExpandMore } from '@material-ui/icons';
|
||||
} from '@mui/material';
|
||||
import { ExpandMore } from '@mui/icons-material';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
IPermission,
|
||||
@ -34,7 +34,7 @@ const EnvironmentPermissionAccordion = ({
|
||||
}: IEnvironmentPermissionAccordionProps) => {
|
||||
const [permissionMap, setPermissionMap] = useState<PermissionMap>({});
|
||||
const [permissionCount, setPermissionCount] = useState(0);
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
useEffect(() => {
|
||||
const permissionMap = environment?.permissions?.reduce(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
maxWidth: '400px',
|
||||
},
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import Input from 'component/common/Input/Input';
|
||||
import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
|
||||
import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
|
||||
|
||||
import { useStyles } from './ProjectRoleForm.styles';
|
||||
@ -54,7 +49,7 @@ const ProjectRoleForm: React.FC<IProjectRoleForm> = ({
|
||||
clearErrors,
|
||||
getRoleKey,
|
||||
}: IProjectRoleForm) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { permissions } = useProjectRolePermissions({
|
||||
revalidateIfStale: false,
|
||||
revalidateOnReconnect: false,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
deleteParagraph: {
|
||||
marginTop: '2rem',
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { IProjectRole } from 'interfaces/role';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
@ -22,7 +22,7 @@ const ProjectRoleDeleteConfirm = ({
|
||||
confirmName,
|
||||
setConfirmName,
|
||||
}: IProjectRoleDeleteConfirmProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setConfirmName(e.currentTarget.value);
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import usePagination from 'hooks/usePagination';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
@ -24,7 +24,7 @@ const ROOTROLE = 'root';
|
||||
const ProjectRoleList = () => {
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const { roles } = useProjectRoles();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
tableRow: {
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
@ -16,17 +16,17 @@ export const useStyles = makeStyles(theme => ({
|
||||
description: {
|
||||
textAlign: 'left',
|
||||
maxWidth: '300px',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideSM: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideXS: {
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { useStyles } from './ProjectRoleListItem.styles';
|
||||
import { TableCell, TableRow, Typography } from '@material-ui/core';
|
||||
import { Delete, Edit } from '@material-ui/icons';
|
||||
import { TableCell, TableRow, Typography } from '@mui/material';
|
||||
import { Delete, Edit } from '@mui/icons-material';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
|
||||
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
|
||||
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
|
||||
import { IProjectRole } from 'interfaces/role';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
@ -28,7 +28,7 @@ const RoleListItem = ({
|
||||
setDelDialog,
|
||||
}: IRoleListItemProps) => {
|
||||
const history = useHistory();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
rolesListBody: {
|
||||
paddingBottom: '4rem',
|
||||
minHeight: '50vh',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button } from '@material-ui/core';
|
||||
import { Button } from '@mui/material';
|
||||
import { useContext } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
@ -13,7 +13,7 @@ import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
|
||||
|
||||
const ProjectRoles = () => {
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
export const useStyles = makeStyles()({
|
||||
iconContainer: {
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Typography } from '@material-ui/core';
|
||||
import { Typography } from '@mui/material';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
|
||||
import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
|
||||
@ -16,7 +16,7 @@ const ConfirmUserEmail = ({
|
||||
closeConfirm,
|
||||
inviteLink,
|
||||
}: IConfirmUserEmailProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
return (
|
||||
<Dialogue
|
||||
open={open}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Typography } from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { Typography } from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import UserInviteLink from './UserInviteLink/UserInviteLink';
|
||||
|
||||
@ -15,7 +15,7 @@ const ConfirmUserLink = ({
|
||||
closeConfirm,
|
||||
inviteLink,
|
||||
}: IConfirmUserLink) => {
|
||||
const commonStyles = useCommonStyles();
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
return (
|
||||
<Dialogue
|
||||
open={open}
|
||||
@ -23,7 +23,7 @@ const ConfirmUserLink = ({
|
||||
primaryButtonText="Close"
|
||||
title="Team member added"
|
||||
>
|
||||
<div className={commonStyles.contentSpacingYLarge}>
|
||||
<div className={themeStyles.contentSpacingYLarge}>
|
||||
<Typography variant="body1">
|
||||
A new team member has been added. Please provide them with
|
||||
the following link to get started:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { IconButton, Tooltip } from '@material-ui/core';
|
||||
import CopyIcon from '@material-ui/icons/FileCopy';
|
||||
import { IconButton, Tooltip } from '@mui/material';
|
||||
import CopyIcon from '@mui/icons-material/FileCopy';
|
||||
import useToast from 'hooks/useToast';
|
||||
|
||||
interface IInviteLinkProps {
|
||||
@ -48,7 +48,7 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
|
||||
>
|
||||
{inviteLink}
|
||||
<Tooltip title="Copy link">
|
||||
<IconButton onClick={handleCopy}>
|
||||
<IconButton onClick={handleCopy} size="large">
|
||||
<CopyIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(() => ({
|
||||
export const useStyles = makeStyles()(() => ({
|
||||
userListBody: {
|
||||
paddingBottom: '4rem',
|
||||
minHeight: '50vh',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
maxWidth: '400px',
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
Typography,
|
||||
Radio,
|
||||
Switch,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import { useStyles } from './UserForm.styles';
|
||||
import React from 'react';
|
||||
import useUsers from 'hooks/api/getters/useUsers/useUsers';
|
||||
@ -47,7 +47,7 @@ const UserForm: React.FC<IUserForm> = ({
|
||||
clearErrors,
|
||||
mode,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { roles } = useUsers();
|
||||
const { bootstrap } = useUiBootstrap();
|
||||
|
||||
|
||||
@ -5,9 +5,9 @@ import PageContent from 'component/common/PageContent/PageContent';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import { Button } from '@mui/material';
|
||||
import { TableActions } from 'component/common/Table/TableActions/TableActions';
|
||||
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
|
||||
import { Button } from '@material-ui/core';
|
||||
import { useStyles } from './UserAdmin.styles';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
|
||||
@ -16,7 +16,7 @@ const UsersAdmin = () => {
|
||||
const [search, setSearch] = useState('');
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const history = useHistory();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Avatar, TextField, Typography } from '@material-ui/core';
|
||||
import { Avatar, TextField, Typography } from '@mui/material';
|
||||
import { trim } from 'component/common/util';
|
||||
import { modalStyles } from 'component/admin/users/util';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
import { IUser } from 'interfaces/user';
|
||||
|
||||
interface IChangePasswordProps {
|
||||
@ -27,7 +27,7 @@ const ChangePassword = ({
|
||||
const [data, setData] = useState({});
|
||||
const [error, setError] = useState<Record<string, string>>({});
|
||||
const [validPassword, setValidPassword] = useState(false);
|
||||
const commonStyles = useCommonStyles();
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
|
||||
// @ts-expect-error
|
||||
const updateField = e => {
|
||||
@ -90,8 +90,8 @@ const ChangePassword = ({
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className={classnames(
|
||||
commonStyles.contentSpacingY,
|
||||
commonStyles.flexColumn
|
||||
themeStyles.contentSpacingY,
|
||||
themeStyles.flexColumn
|
||||
)}
|
||||
>
|
||||
<ConditionallyRender
|
||||
@ -101,7 +101,7 @@ const ChangePassword = ({
|
||||
<Typography variant="subtitle1">
|
||||
Changing password for user
|
||||
</Typography>
|
||||
<div className={commonStyles.flexRow}>
|
||||
<div className={themeStyles.flexRow}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt="Gravatar"
|
||||
|
||||
@ -2,10 +2,10 @@ import React from 'react';
|
||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { REMOVE_USER_ERROR } from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
import useLoading from 'hooks/useLoading';
|
||||
import { Avatar, Typography } from '@material-ui/core';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { Avatar, Typography } from '@mui/material';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { IUser } from 'interfaces/user';
|
||||
|
||||
interface IDeleteUserProps {
|
||||
@ -26,7 +26,7 @@ const DeleteUser = ({
|
||||
userApiErrors,
|
||||
}: IDeleteUserProps) => {
|
||||
const ref = useLoading(userLoading);
|
||||
const commonStyles = useCommonStyles();
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
|
||||
return (
|
||||
<Dialogue
|
||||
@ -50,7 +50,7 @@ const DeleteUser = ({
|
||||
</Alert>
|
||||
}
|
||||
/>
|
||||
<div data-loading className={commonStyles.flexRow}>
|
||||
<div data-loading className={themeStyles.flexRow}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt="Gravatar"
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
import { unleashGrey } from 'themes/themeColors';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
tableRow: {
|
||||
'& > td': {
|
||||
padding: '4px 16px',
|
||||
borderColor: theme.v2.palette.grey[30],
|
||||
borderColor: unleashGrey[300],
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: theme.v2.palette.grey[10],
|
||||
backgroundColor: unleashGrey[100],
|
||||
},
|
||||
},
|
||||
tableCellHeader: {
|
||||
'& > th': {
|
||||
backgroundColor: theme.v2.palette.grey[20],
|
||||
backgroundColor: unleashGrey[200],
|
||||
fontWeight: 'normal',
|
||||
border: 0,
|
||||
'&:first-child': {
|
||||
@ -42,24 +43,24 @@ export const useStyles = makeStyles(theme => ({
|
||||
margin: 'auto',
|
||||
},
|
||||
firstColumnSM: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
borderTopLeftRadius: '8px',
|
||||
borderBottomLeftRadius: '8px',
|
||||
},
|
||||
},
|
||||
firstColumnXS: {
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
borderTopLeftRadius: '8px',
|
||||
borderBottomLeftRadius: '8px',
|
||||
},
|
||||
},
|
||||
hideSM: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
hideXS: {
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -5,9 +5,9 @@ import {
|
||||
TableRow,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import classnames from 'classnames';
|
||||
import { Delete, Edit, Lock } from '@material-ui/icons';
|
||||
import { Delete, Edit, Lock } from '@mui/icons-material';
|
||||
import { SyntheticEvent, useContext } from 'react';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
@ -38,7 +38,7 @@ const UserListItem = ({
|
||||
}: IUserListItemProps) => {
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const history = useHistory();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<TableRow key={user.id} className={styles.tableRow}>
|
||||
@ -90,6 +90,7 @@ const UserListItem = ({
|
||||
onClick={() =>
|
||||
history.push(`/admin/users/${user.id}/edit`)
|
||||
}
|
||||
size="large"
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
@ -98,6 +99,7 @@ const UserListItem = ({
|
||||
<IconButton
|
||||
data-loading
|
||||
onClick={openPwDialog(user)}
|
||||
size="large"
|
||||
>
|
||||
<Lock />
|
||||
</IconButton>
|
||||
@ -106,6 +108,7 @@ const UserListItem = ({
|
||||
<IconButton
|
||||
data-loading
|
||||
onClick={openDelDialog(user)}
|
||||
size="large"
|
||||
>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
|
||||
@ -6,7 +6,7 @@ import {
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import classnames from 'classnames';
|
||||
import ChangePassword from './ChangePassword/ChangePassword';
|
||||
import DeleteUser from './DeleteUser/DeleteUser';
|
||||
@ -36,7 +36,7 @@ interface IUsersListProps {
|
||||
}
|
||||
|
||||
const UsersList = ({ search }: IUsersListProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { users, roles, refetch, loading } = useUsers();
|
||||
const { setToastData, setToastApiError } = useToast();
|
||||
const {
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import { ThemeProvider } from '@material-ui/core';
|
||||
import { ApplicationEdit } from './ApplicationEdit';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { ADMIN } from 'component/providers/AccessProvider/permissions';
|
||||
import theme from 'themes/mainTheme';
|
||||
import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
|
||||
import UIProvider from 'component/providers/UIProvider/UIProvider';
|
||||
import { ThemeProvider } from 'themes/ThemeProvider';
|
||||
import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
|
||||
|
||||
test('renders correctly if no application', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<AccessProvider permissions={[{ permission: ADMIN }]}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<AccessProviderMock permissions={[{ permission: ADMIN }]}>
|
||||
<ThemeProvider>
|
||||
<UIProvider>
|
||||
<MemoryRouter initialEntries={['/test']}>
|
||||
<ApplicationEdit
|
||||
@ -23,7 +22,7 @@ test('renders correctly if no application', () => {
|
||||
</MemoryRouter>
|
||||
</UIProvider>
|
||||
</ThemeProvider>
|
||||
</AccessProvider>
|
||||
</AccessProviderMock>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
@ -34,9 +33,11 @@ test('renders correctly without permission', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<MemoryRouter>
|
||||
<ThemeProvider theme={theme}>
|
||||
<ThemeProvider>
|
||||
<UIProvider>
|
||||
<AccessProvider permissions={[{ permission: ADMIN }]}>
|
||||
<AccessProviderMock
|
||||
permissions={[{ permission: ADMIN }]}
|
||||
>
|
||||
<ApplicationEdit
|
||||
fetchApplication={() => Promise.resolve({})}
|
||||
storeApplicationMetaData={jest.fn()}
|
||||
@ -82,7 +83,7 @@ test('renders correctly without permission', () => {
|
||||
}}
|
||||
locationSettings={{ locale: 'en-GB' }}
|
||||
/>
|
||||
</AccessProvider>
|
||||
</AccessProviderMock>
|
||||
</UIProvider>
|
||||
</ThemeProvider>
|
||||
</MemoryRouter>
|
||||
@ -96,9 +97,11 @@ test('renders correctly with permissions', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<MemoryRouter>
|
||||
<ThemeProvider theme={theme}>
|
||||
<ThemeProvider>
|
||||
<UIProvider>
|
||||
<AccessProvider permissions={[{ permission: ADMIN }]}>
|
||||
<AccessProviderMock
|
||||
permissions={[{ permission: ADMIN }]}
|
||||
>
|
||||
<ApplicationEdit
|
||||
fetchApplication={() => Promise.resolve({})}
|
||||
storeApplicationMetaData={jest.fn()}
|
||||
@ -144,7 +147,7 @@ test('renders correctly with permissions', () => {
|
||||
}}
|
||||
locationSettings={{ locale: 'en-GB' }}
|
||||
/>
|
||||
</AccessProvider>
|
||||
</AccessProviderMock>
|
||||
</UIProvider>
|
||||
</ThemeProvider>
|
||||
</MemoryRouter>
|
||||
|
||||
@ -7,8 +7,8 @@ import {
|
||||
LinearProgress,
|
||||
Link,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
import { Link as LinkIcon } from '@material-ui/icons';
|
||||
} from '@mui/material';
|
||||
import { Link as LinkIcon } from '@mui/icons-material';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
|
||||
import { ApplicationView } from '../ApplicationView/ApplicationView';
|
||||
@ -112,7 +112,11 @@ export const ApplicationEdit = () => {
|
||||
<ConditionallyRender
|
||||
condition={Boolean(url)}
|
||||
show={
|
||||
<IconButton component={Link} href={url}>
|
||||
<IconButton
|
||||
component={Link}
|
||||
href={url}
|
||||
size="large"
|
||||
>
|
||||
<LinkIcon titleAccess={url} />
|
||||
</IconButton>
|
||||
}
|
||||
|
||||
@ -5,19 +5,19 @@ exports[`renders correctly if no application 1`] = `
|
||||
<p>
|
||||
Loading...
|
||||
</p>
|
||||
<div
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
|
||||
style={Object {}}
|
||||
/>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -26,19 +26,19 @@ exports[`renders correctly with permissions 1`] = `
|
||||
<p>
|
||||
Loading...
|
||||
</p>
|
||||
<div
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
|
||||
style={Object {}}
|
||||
/>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -47,18 +47,18 @@ exports[`renders correctly without permission 1`] = `
|
||||
<p>
|
||||
Loading...
|
||||
</p>
|
||||
<div
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
|
||||
role="progressbar"
|
||||
>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
|
||||
style={Object {}}
|
||||
/>
|
||||
<div
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
|
||||
<span
|
||||
className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
|
||||
style={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { CircularProgress } from '@material-ui/core';
|
||||
import { Warning } from '@material-ui/icons';
|
||||
import { AppsLinkList, styles as commonStyles } from 'component/common';
|
||||
import { CircularProgress } from '@mui/material';
|
||||
import { Warning } from '@mui/icons-material';
|
||||
import { AppsLinkList, styles as themeStyles } from 'component/common';
|
||||
import { SearchField } from 'component/common/SearchField/SearchField';
|
||||
import PageContent from 'component/common/PageContent/PageContent';
|
||||
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
|
||||
@ -44,11 +44,11 @@ export const ApplicationList = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={commonStyles.searchField}>
|
||||
<div className={themeStyles.searchField}>
|
||||
<SearchField initialValue={filter} updateValue={setFilter} />
|
||||
</div>
|
||||
<PageContent headerContent={<HeaderTitle title="Applications" />}>
|
||||
<div className={commonStyles.fullwidth}>
|
||||
<div className={themeStyles.fullwidth}>
|
||||
<ConditionallyRender
|
||||
condition={filteredApplications.length > 0}
|
||||
show={<AppsLinkList apps={filteredApplications} />}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { Grid, TextField } from '@material-ui/core';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { Grid, TextField } from '@mui/material';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import icons from 'component/application/iconNames';
|
||||
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
|
||||
import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
|
||||
@ -20,7 +20,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
|
||||
const [localUrl, setLocalUrl] = useState(url || '');
|
||||
const [localDescription, setLocalDescription] = useState(description || '');
|
||||
const { setToastData, setToastApiError } = useToast();
|
||||
const commonStyles = useCommonStyles();
|
||||
const { classes: themeStyles } = useThemeStyles();
|
||||
|
||||
const onChange = async (
|
||||
field: string,
|
||||
@ -43,7 +43,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
|
||||
|
||||
return (
|
||||
<Grid container style={{ marginTop: '1rem' }}>
|
||||
<Grid item sm={12} xs={12} className={commonStyles.contentSpacingY}>
|
||||
<Grid item sm={12} xs={12} className={themeStyles.contentSpacingY}>
|
||||
<Grid item>
|
||||
<GeneralSelect
|
||||
name="iconSelect"
|
||||
|
||||
@ -7,14 +7,14 @@ import {
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Extension,
|
||||
FlagRounded,
|
||||
Report,
|
||||
SvgIconComponent,
|
||||
Timeline,
|
||||
} from '@material-ui/icons';
|
||||
} from '@mui/icons-material';
|
||||
import {
|
||||
CREATE_FEATURE,
|
||||
CREATE_STRATEGY,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Alert } from '@mui/material';
|
||||
|
||||
export const AdminAlert = () => {
|
||||
return (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles({
|
||||
export const useStyles = makeStyles()({
|
||||
container: {
|
||||
clip: 'rect(0 0 0 0)',
|
||||
clipPath: 'inset(50%)',
|
||||
|
||||
@ -9,7 +9,7 @@ interface IAnnouncerElementProps {
|
||||
export const AnnouncerElement = ({
|
||||
announcement,
|
||||
}: IAnnouncerElementProps): ReactElement => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Button } from '@material-ui/core';
|
||||
import { Alert } from '@material-ui/lab';
|
||||
import { Button } from '@mui/material';
|
||||
import { Alert } from '@mui/material';
|
||||
import React from 'react';
|
||||
|
||||
interface IApiErrorProps {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -8,14 +8,14 @@ export const useStyles = makeStyles(theme => ({
|
||||
},
|
||||
icon: {
|
||||
background: theme.palette.primary.main,
|
||||
height: 56,
|
||||
height: 40,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: 56,
|
||||
width: 40,
|
||||
justifyContent: 'center',
|
||||
paddingLeft: 6,
|
||||
borderTopLeftRadius: 50,
|
||||
borderBottomLeftRadius: 50,
|
||||
borderTopLeftRadius: 40,
|
||||
borderBottomLeftRadius: 40,
|
||||
color: '#fff',
|
||||
},
|
||||
iconDisabled: {
|
||||
@ -30,8 +30,11 @@ export const useStyles = makeStyles(theme => ({
|
||||
borderTopRightRadius: 50,
|
||||
borderBottomRightRadius: 50,
|
||||
'& fieldset': {
|
||||
borderColor: theme.palette,
|
||||
borderColor: theme.palette.grey[300],
|
||||
borderLeftColor: 'transparent',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles';
|
||||
import { Search, ArrowDropDown } from '@material-ui/icons';
|
||||
import { Autocomplete, AutocompleteRenderInputParams } from '@material-ui/lab';
|
||||
import { TextField } from '@material-ui/core';
|
||||
import { Search, ArrowDropDown } from '@mui/icons-material';
|
||||
import { Autocomplete } from '@mui/material';
|
||||
import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
|
||||
import { TextField } from '@mui/material';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface IAutocompleteBoxProps {
|
||||
@ -24,7 +25,7 @@ export const AutocompleteBox = ({
|
||||
onChange,
|
||||
disabled,
|
||||
}: IAutocompleteBoxProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const renderInput = (params: AutocompleteRenderInputParams) => {
|
||||
return <TextField {...params} variant="outlined" label={label} />;
|
||||
@ -51,6 +52,7 @@ export const AutocompleteBox = ({
|
||||
renderInput={renderInput}
|
||||
getOptionLabel={value => value.label}
|
||||
disabled={disabled}
|
||||
size="small"
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
breadcrumbNav: {
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
|
||||
import Breadcrumbs from '@mui/material/Breadcrumbs';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { useStyles } from './BreadcrumbNav.styles';
|
||||
@ -8,7 +8,7 @@ import StringTruncator from '../StringTruncator/StringTruncator';
|
||||
|
||||
const BreadcrumbNav = () => {
|
||||
const { isAdmin } = useContext(AccessContext);
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const location = useLocation();
|
||||
|
||||
const paths = location.pathname
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
badge: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
width: '75px',
|
||||
@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
[theme.breakpoints.down('xs')]: {
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Check, Close } from '@material-ui/icons';
|
||||
import { Check, Close } from '@mui/icons-material';
|
||||
import { useStyles } from './CheckMarkBadge.styles';
|
||||
import classnames from 'classnames';
|
||||
|
||||
@ -8,7 +8,7 @@ interface ICheckMarkBadgeProps {
|
||||
}
|
||||
|
||||
const CheckMarkBadge = ({ type, className }: ICheckMarkBadgeProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
return (
|
||||
<div className={classnames(styles.badge, className)}>
|
||||
{type === 'error' ? (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
padding: '1rem',
|
||||
|
||||
@ -5,7 +5,7 @@ interface ICodeboxProps {
|
||||
}
|
||||
|
||||
const Codebox = ({ text }: ICodeboxProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
constraintIconContainer: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
height: '28px',
|
||||
|
||||
@ -4,11 +4,7 @@ import { IConstraint } from 'interfaces/strategy';
|
||||
import { useStyles } from '../ConstraintAccordion.styles';
|
||||
import { ConstraintAccordionEditBody } from './ConstraintAccordionEditBody/ConstraintAccordionEditBody';
|
||||
import { ConstraintAccordionEditHeader } from './ConstraintAccordionEditHeader/ConstraintAccordionEditHeader';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
} from '@material-ui/core';
|
||||
import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
|
||||
import { cleanConstraint } from 'utils/cleanConstraint';
|
||||
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
|
||||
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
|
||||
@ -64,7 +60,7 @@ export const ConstraintAccordionEdit = ({
|
||||
const { validateConstraint } = useFeatureApi();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [action, setAction] = useState('');
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
useEffect(() => {
|
||||
// Setting expanded to true on mount will cause the accordion
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormControlLabel, Switch } from '@material-ui/core';
|
||||
import { FormControlLabel, Switch } from '@mui/material';
|
||||
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
|
||||
|
||||
interface ICaseInsensitiveProps {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
inputContainer: {
|
||||
padding: '1rem',
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button, FormControlLabel, Switch } from '@material-ui/core';
|
||||
import { Button, FormControlLabel, Switch } from '@mui/material';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
import { CANCEL } from '../ConstraintAccordionEdit';
|
||||
|
||||
@ -31,7 +31,7 @@ export const ConstraintAccordionEditBody: React.FC<
|
||||
setAction,
|
||||
onSubmit,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { makeStyles } from '@material-ui/core';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
import React from 'react';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const useStyles = makeStyles()(theme => ({
|
||||
header: {
|
||||
fontSize: theme.fontSizes.bodySize,
|
||||
fontWeight: 'normal',
|
||||
@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
|
||||
export const ConstraintFormHeader: React.FC<
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
> = ({ children, ...rest }) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
return (
|
||||
<h3 {...rest} className={styles.header}>
|
||||
{children}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Button, Chip, makeStyles } from '@material-ui/core';
|
||||
import { Button, Chip } from '@mui/material';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
import Input from 'component/common/Input/Input';
|
||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||
import React, { useState } from 'react';
|
||||
@ -13,7 +14,7 @@ interface IFreeTextInputProps {
|
||||
setError: React.Dispatch<React.SetStateAction<string>>;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const useStyles = makeStyles()(theme => ({
|
||||
valueChip: {
|
||||
margin: '0 0.5rem 0.5rem 0',
|
||||
},
|
||||
@ -58,7 +59,7 @@ export const FreeTextInput = ({
|
||||
setError,
|
||||
}: IFreeTextInputProps) => {
|
||||
const [inputValues, setInputValues] = useState('');
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (event.key === ENTER) {
|
||||
@ -137,7 +138,7 @@ const ConstraintValueChips = ({
|
||||
values,
|
||||
removeValue,
|
||||
}: IConstraintValueChipsProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
return (
|
||||
<>
|
||||
{values.map((value, index) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
display: 'inline-block',
|
||||
wordBreak: 'break-word',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ILegalValue } from 'interfaces/context';
|
||||
import { useStyles } from './LegalValueLabel.styles';
|
||||
import React from 'react';
|
||||
import { FormControlLabel } from '@material-ui/core';
|
||||
import { FormControlLabel } from '@mui/material';
|
||||
|
||||
interface ILegalValueTextProps {
|
||||
legal: ILegalValue;
|
||||
@ -9,7 +9,7 @@ interface ILegalValueTextProps {
|
||||
}
|
||||
|
||||
export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { Checkbox } from '@material-ui/core';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { Checkbox } from '@mui/material';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
|
||||
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
|
||||
import { ILegalValue } from 'interfaces/context';
|
||||
@ -44,7 +44,7 @@ export const RestrictiveLegalValues = ({
|
||||
|
||||
// Lazily initialise the values because there might be a lot of them.
|
||||
const [valuesMap, setValuesMap] = useState(() => createValuesMap(values));
|
||||
const styles = useCommonStyles();
|
||||
const { classes: styles } = useThemeStyles();
|
||||
|
||||
useEffect(() => {
|
||||
setValuesMap(createValuesMap(values));
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
|
||||
import { FormControl, RadioGroup, Radio } from '@material-ui/core';
|
||||
import { FormControl, RadioGroup, Radio } from '@mui/material';
|
||||
import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { useCommonStyles } from 'themes/commonStyles';
|
||||
import { useThemeStyles } from 'themes/themeStyles';
|
||||
import { ILegalValue } from 'interfaces/context';
|
||||
import {
|
||||
LegalValueLabel,
|
||||
@ -28,7 +28,7 @@ export const SingleLegalValue = ({
|
||||
setError,
|
||||
}: ISingleLegalValueProps) => {
|
||||
const [filter, setFilter] = useState('');
|
||||
const styles = useCommonStyles();
|
||||
const { classes: styles } = useThemeStyles();
|
||||
const filteredValues = filterLegalValues(legalValues, filter);
|
||||
|
||||
return (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import Input from 'component/common/Input/Input';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
|
||||
|
||||
interface ISingleValueProps {
|
||||
@ -10,7 +10,7 @@ interface ISingleValueProps {
|
||||
setError: React.Dispatch<React.SetStateAction<string>>;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const useStyles = makeStyles()(theme => ({
|
||||
singleValueContainer: { maxWidth: '300px', marginTop: '-1rem' },
|
||||
singleValueInput: {
|
||||
width: '100%',
|
||||
@ -25,7 +25,7 @@ export const SingleValue = ({
|
||||
error,
|
||||
setError,
|
||||
}: ISingleValueProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
return (
|
||||
<>
|
||||
<ConstraintFormHeader>
|
||||
|
||||
@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord
|
||||
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
|
||||
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
|
||||
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
|
||||
import { Help } from '@material-ui/icons';
|
||||
import { Help } from '@mui/icons-material';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { dateOperators, DATE_AFTER, IN } from 'constants/operators';
|
||||
import { SAVE } from '../ConstraintAccordionEdit';
|
||||
@ -17,7 +17,7 @@ import {
|
||||
operatorsForContext,
|
||||
CURRENT_TIME_CONTEXT_FIELD,
|
||||
} from 'utils/operatorsForContext';
|
||||
import { Tooltip } from '@material-ui/core';
|
||||
import { Tooltip } from '@mui/material';
|
||||
|
||||
interface IConstraintAccordionViewHeader {
|
||||
localConstraint: IConstraint;
|
||||
@ -36,7 +36,7 @@ export const ConstraintAccordionEditHeader = ({
|
||||
setOperator,
|
||||
action,
|
||||
}: IConstraintAccordionViewHeader) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { context } = useUnleashContext();
|
||||
const { contextName, operator } = localConstraint;
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
|
||||
@ -7,8 +7,8 @@ import { useWeakMap } from 'hooks/useWeakMap';
|
||||
import { objectId } from 'utils/objectId';
|
||||
import { useStyles } from './ConstraintAccordionList.styles';
|
||||
import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
|
||||
import { Button } from '@material-ui/core';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { Button } from '@mui/material';
|
||||
|
||||
interface IConstraintAccordionListProps {
|
||||
constraints: IConstraint[];
|
||||
@ -37,7 +37,7 @@ export const ConstraintAccordionList = forwardRef<
|
||||
>(({ constraints, setConstraints, showCreateButton }, ref) => {
|
||||
const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
|
||||
const { context } = useUnleashContext();
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const addConstraint =
|
||||
setConstraints &&
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import {
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
} from '@material-ui/core';
|
||||
import { ExpandMore } from '@material-ui/icons';
|
||||
import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
|
||||
import { ExpandMore } from '@mui/icons-material';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
|
||||
import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
|
||||
@ -29,7 +25,7 @@ export const ConstraintAccordionView = ({
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: IConstraintAccordionViewProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const singleValue = oneOf(
|
||||
[...semVerOperators, ...numOperators, ...dateOperators],
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Chip } from '@material-ui/core';
|
||||
import { ImportExportOutlined, TextFormatOutlined } from '@material-ui/icons';
|
||||
import { Chip } from '@mui/material';
|
||||
import { ImportExportOutlined, TextFormatOutlined } from '@mui/icons-material';
|
||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||
import { useState } from 'react';
|
||||
import { stringOperators } from 'constants/operators';
|
||||
@ -18,7 +18,7 @@ interface IConstraintAccordionViewBodyProps {
|
||||
export const ConstraintAccordionViewBody = ({
|
||||
constraint,
|
||||
}: IConstraintAccordionViewBodyProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { locationSettings } = useLocationSettings();
|
||||
|
||||
return (
|
||||
@ -63,7 +63,7 @@ interface ISingleValueProps {
|
||||
}
|
||||
|
||||
const SingleValue = ({ value, operator }: ISingleValueProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
if (!value) return null;
|
||||
|
||||
return (
|
||||
@ -89,7 +89,7 @@ interface IMultipleValuesProps {
|
||||
|
||||
const MultipleValues = ({ values }: IMultipleValuesProps) => {
|
||||
const [filter, setFilter] = useState('');
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
if (!values || values.length === 0) return null;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
|
||||
import { Chip, useMediaQuery, IconButton } from '@material-ui/core';
|
||||
import { Chip, useMediaQuery, IconButton } from '@mui/material';
|
||||
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
|
||||
import { Delete, Edit } from '@material-ui/icons';
|
||||
import { Delete, Edit } from '@mui/icons-material';
|
||||
import { IConstraint } from 'interfaces/strategy';
|
||||
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
|
||||
@ -26,7 +26,7 @@ export const ConstraintAccordionViewHeader = ({
|
||||
onDelete,
|
||||
singleValue,
|
||||
}: IConstraintAccordionViewHeaderProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const { locationSettings } = useLocationSettings();
|
||||
const smallScreen = useMediaQuery(`(max-width:${790}px)`);
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { useStyles } from './ConstraintAccordion.styles';
|
||||
import { TrackChanges } from '@material-ui/icons';
|
||||
import { TrackChanges } from '@mui/icons-material';
|
||||
|
||||
export const ConstraintIcon = () => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
return (
|
||||
<div className={styles.constraintIconContainer}>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
container: {
|
||||
padding: '0.5rem 0.75rem',
|
||||
borderRadius: theme.borders.radius.main,
|
||||
borderRadius: theme.borderRadius.main,
|
||||
backgroundColor: theme.palette.grey[200],
|
||||
lineHeight: 1.25,
|
||||
},
|
||||
@ -21,7 +21,7 @@ export const useStyles = makeStyles(theme => ({
|
||||
'& > span': {
|
||||
display: 'inline-block',
|
||||
padding: '0 0.25rem',
|
||||
borderRadius: theme.borders.radius.main,
|
||||
borderRadius: theme.borderRadius.main,
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
color: 'white',
|
||||
|
||||
@ -9,7 +9,7 @@ interface IConstraintOperatorProps {
|
||||
export const ConstraintOperator = ({
|
||||
constraint,
|
||||
}: IConstraintOperatorProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
|
||||
const operatorName = constraint.operator;
|
||||
const operatorText = formatOperatorDescription(constraint.operator);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles(theme => ({
|
||||
export const useStyles = makeStyles()(theme => ({
|
||||
valueContainer: {
|
||||
lineHeight: 1.1,
|
||||
marginTop: -5,
|
||||
marginTop: -2,
|
||||
marginBottom: -10,
|
||||
},
|
||||
optionContainer: {
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
|
||||
import {
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
SelectChangeEvent,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Operator,
|
||||
stringOperators,
|
||||
@ -7,7 +13,7 @@ import {
|
||||
numOperators,
|
||||
inOperators,
|
||||
} from 'constants/operators';
|
||||
import React, { useState, ChangeEvent } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
|
||||
import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
|
||||
import classNames from 'classnames';
|
||||
@ -23,12 +29,10 @@ export const ConstraintOperatorSelect = ({
|
||||
value,
|
||||
onChange,
|
||||
}: IConstraintOperatorSelectProps) => {
|
||||
const styles = useStyles();
|
||||
const { classes: styles } = useStyles();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const onSelectChange = (
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>
|
||||
) => {
|
||||
const onSelectChange = (event: SelectChangeEvent) => {
|
||||
onChange(event.target.value as Operator);
|
||||
};
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user