Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +02:00
Code Issues Projects Releases Wiki Activity

refactor: extract styled components (#2798)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-01-03 12:41:48 +01:00 committed by GitHub
parent 6b5e25b191
commit 644ec69a13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 357 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
View File

@ -1,11 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
display: 'flex',
alignItems: 'center',
},
header: {
fontSize: theme.fontSizes.mainHeader,
},
}));

21
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
View File

@ -1,21 +1,28 @@
import { Typography } from '@mui/material'; import { styled, Typography } from '@mui/material';
import { Edit } from '@mui/icons-material'; import { Edit } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { useStyles } from './FeatureSettingsInformation.style';
interface IFeatureSettingsInformationProps { interface IFeatureSettingsInformationProps {
projectId: string; projectId: string;
featureId: string; featureId: string;
} }
const StyledContainer = styled('div')({
display: 'flex',
alignItems: 'center',
});
const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
}));
export const FeatureSettingsInformation = ({ export const FeatureSettingsInformation = ({
projectId, projectId,
featureId, featureId,
}: IFeatureSettingsInformationProps) => { }: IFeatureSettingsInformationProps) => {
const { classes: styles } = useStyles();
const { feature } = useFeature(projectId, featureId); const { feature } = useFeature(projectId, featureId);
const navigate = useNavigate(); const navigate = useNavigate();
@ -25,10 +32,8 @@ export const FeatureSettingsInformation = ({
return ( return (
<> <>
<div className={styles.container}> <StyledContainer>
<Typography className={styles.header}> <StyledTypography>Feature information</StyledTypography>
Feature information
</Typography>
<PermissionIconButton <PermissionIconButton
permission={UPDATE_FEATURE} permission={UPDATE_FEATURE}
projectId={projectId} projectId={projectId}
@ -38,7 +43,7 @@ export const FeatureSettingsInformation = ({
> >
<Edit /> <Edit />
</PermissionIconButton> </PermissionIconButton>
</div> </StyledContainer>
<Typography> <Typography>
Name: <strong>{feature.name}</strong> Name: <strong>{feature.name}</strong>
</Typography> </Typography>

8
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
View File

@ -1,8 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
display: 'grid',
gap: theme.spacing(2),
},
}));

15
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
View File

@ -3,13 +3,17 @@ import useProject from 'hooks/api/getters/useProject/useProject';
import { IFeatureToggle } from 'interfaces/featureToggle'; import { IFeatureToggle } from 'interfaces/featureToggle';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { Dialogue } from 'component/common/Dialogue/Dialogue';
import { useStyles } from './FeatureSettingsProjectConfirm.styles';
import { arraysHaveSameItems } from 'utils/arraysHaveSameItems'; import { arraysHaveSameItems } from 'utils/arraysHaveSameItems';
import { Alert, List, ListItem, styled } from '@mui/material'; import { Alert, List, ListItem, styled } from '@mui/material';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { IChangeRequest } from 'component/changeRequest/changeRequest.types'; import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
const StyledContainer = styled('div')(({ theme }) => ({
display: 'grid',
gap: theme.spacing(2),
}));
const StyledAlert = styled(Alert)(({ theme }) => ({ const StyledAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
})); }));
@ -37,7 +41,6 @@ const FeatureSettingsProjectConfirm = ({
}: IFeatureSettingsProjectConfirm) => { }: IFeatureSettingsProjectConfirm) => {
const currentProjectId = useRequiredPathParam('projectId'); const currentProjectId = useRequiredPathParam('projectId');
const { project } = useProject(projectId); const { project } = useProject(projectId);
const { classes: styles } = useStyles();
const hasSameEnvironments: boolean = useMemo(() => { const hasSameEnvironments: boolean = useMemo(() => {
return arraysHaveSameItems( return arraysHaveSameItems(
@ -62,7 +65,7 @@ const FeatureSettingsProjectConfirm = ({
primaryButtonText="Change project" primaryButtonText="Change project"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
> >
<div className={styles.container}> <StyledContainer>
<StyledAlert severity="success"> <StyledAlert severity="success">
This feature toggle is compatible with the new This feature toggle is compatible with the new
project. project.
@ -71,7 +74,7 @@ const FeatureSettingsProjectConfirm = ({
Are you sure you want to change the project for this Are you sure you want to change the project for this
toggle? toggle?
</p> </p>
</div> </StyledContainer>
</Dialogue> </Dialogue>
} }
elseShow={ elseShow={
@ -81,7 +84,7 @@ const FeatureSettingsProjectConfirm = ({
title="Confirm change project" title="Confirm change project"
primaryButtonText="OK" primaryButtonText="OK"
> >
<div className={styles.container}> <StyledContainer>
<StyledAlert severity="warning"> <StyledAlert severity="warning">
Incompatible project environments Incompatible project environments
</StyledAlert> </StyledAlert>
@ -119,7 +122,7 @@ const FeatureSettingsProjectConfirm = ({
</> </>
} }
/> />
</div> </StyledContainer>
</Dialogue> </Dialogue>
} }
/> />

16
frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
View File

@ -1,16 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
width: '42px',
height: '42px',
fontSize: '0.7em',
background: 'gray',
borderRadius: theme.shape.borderRadius,
textAlign: 'center',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '13px 10px',
},
}));

114
frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
View File

@ -1,114 +0,0 @@
import { useStyles } from './FeatureStatus.styles';
import TimeAgo from 'react-timeago';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Tooltip, TooltipProps } from '@mui/material';
import React from 'react';
function generateUnit(unit?: string): string {
switch (unit) {
case 'second':
return 's';
case 'minute':
return 'm';
case 'hour':
return 'h';
case 'day':
return 'D';
case 'week':
return 'W';
case 'month':
return 'M';
case 'year':
return 'Y';
default:
return '';
}
}
function getColor(unit?: string): string {
switch (unit) {
case 'second':
return '#98E3AF';
case 'minute':
return '#98E3AF';
case 'hour':
return '#98E3AF';
case 'day':
return '#98E3AF';
case 'week':
return '#ECD875';
case 'month':
return '#F5A69A';
case 'year':
return '#F5A69A';
default:
return '#EDF0F1';
}
}
interface IFeatureStatusProps {
lastSeenAt?: string | Date | null;
tooltipPlacement?: TooltipProps['placement'];
}
const FeatureStatus = ({
lastSeenAt,
tooltipPlacement,
}: IFeatureStatusProps) => {
const { classes: styles } = useStyles();
const Wrapper = (
props: React.PropsWithChildren<{ color: string; toolTip: string }>
) => {
return (
<Tooltip title={props.toolTip} arrow placement={tooltipPlacement}>
<div
className={styles.container}
style={{ background: props.color, fontSize: '0.8rem' }}
>
{props.children}
</div>
</Tooltip>
);
};
return (
<ConditionallyRender
condition={Boolean(lastSeenAt)}
show={() => (
<TimeAgo
date={lastSeenAt!}
title=""
live={false}
formatter={(
value: number,
unit: string,
suffix: string
) => {
return (
<Wrapper
toolTip={`Last usage reported ${value} ${unit}${
value !== 1 ? 's' : ''
} ${suffix}`}
color={getColor(unit)}
>
{value}
{generateUnit(unit)}
</Wrapper>
);
}}
/>
)}
elseShow={
<Wrapper
toolTip="No usage reported from connected applications"
color={getColor()}
>
<span style={{ fontSize: '1.4rem' }}>⊕</span>
</Wrapper>
}
/>
);
};
export default FeatureStatus;

7
frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
View File

@ -1,7 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
icon: {
color: theme.palette.inactiveIcon,
},
}));

25
frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
View File

@ -1,25 +0,0 @@
import { useStyles } from './FeatureType.styles';
import { Tooltip } from '@mui/material';
import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
interface IFeatureTypeProps {
type: string;
}
const FeatureStatus = ({ type }: IFeatureTypeProps) => {
const { classes: styles } = useStyles();
const { featureTypes } = useFeatureTypes();
const IconComponent = getFeatureTypeIcons(type);
const typeName = featureTypes.filter(t => t.id === type).map(t => t.name);
const title = `"${typeName || type}" toggle`;
return (
<Tooltip arrow title={title}>
<IconComponent data-loading className={styles.icon} />
</Tooltip>
);
};
export default FeatureStatus;

34
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
View File

@ -1,34 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
error: {
color: theme.palette.error.main,
fontSize: theme.fontSizes.smallBody,
position: 'relative',
},
input: {
maxWidth: 350,
width: '100%',
},
grid: {
marginBottom: '0.5rem',
},
weightInput: {
marginRight: '0.8rem',
},
label: {
display: 'flex',
alignItems: 'center',
gap: '1ch',
marginBottom: '1rem',
},
info: {
width: '18.5px',
height: '18.5px',
color: 'grey',
},
select: {
minWidth: '100px',
width: '100%',
},
}));

54
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
View File

@ -5,6 +5,7 @@ import {
FormControlLabel, FormControlLabel,
Grid, Grid,
InputAdornment, InputAdornment,
styled,
} from '@mui/material'; } from '@mui/material';
import { weightTypes } from './enums'; import { weightTypes } from './enums';
import { OverrideConfig } from './OverrideConfig/OverrideConfig'; import { OverrideConfig } from './OverrideConfig/OverrideConfig';
@ -18,7 +19,6 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { IFeatureVariant } from 'interfaces/featureToggle'; import { IFeatureVariant } from 'interfaces/featureToggle';
import cloneDeep from 'lodash.clonedeep'; import cloneDeep from 'lodash.clonedeep';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import { useStyles } from './AddFeatureVariant.styles';
import Input from 'component/common/Input/Input'; import Input from 'component/common/Input/Input';
import { formatUnknownError } from 'utils/formatUnknownError'; import { formatUnknownError } from 'utils/formatUnknownError';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
@ -34,6 +34,33 @@ const payloadOptions = [
const EMPTY_PAYLOAD = { type: 'string', value: '' }; const EMPTY_PAYLOAD = { type: 'string', value: '' };
const StyledError = styled('p')(({ theme }) => ({
color: theme.palette.error.main,
fontSize: theme.fontSizes.smallBody,
position: 'relative',
}));
const StyledInput = styled(Input)({
maxWidth: 350,
width: '100%',
});
const StyledGrid = styled(Grid)(({ theme }) => ({
marginBottom: theme.spacing(1),
}));
const StyledLabel = styled('p')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: '1ch',
marginBottom: theme.spacing(2),
}));
const StyledGeneralSelect = styled(GeneralSelect)({
minWidth: '100px',
width: '100%',
});
interface IAddVariantProps { interface IAddVariantProps {
showDialog: boolean; showDialog: boolean;
closeDialog: () => void; closeDialog: () => void;
@ -55,7 +82,6 @@ export const AddVariant = ({
title, title,
editing, editing,
}: IAddVariantProps) => { }: IAddVariantProps) => {
const { classes: styles } = useStyles();
const [data, setData] = useState<Record<string, string>>({}); const [data, setData] = useState<Record<string, string>>({});
const [payload, setPayload] = useState(EMPTY_PAYLOAD); const [payload, setPayload] = useState(EMPTY_PAYLOAD);
const [overrides, overridesDispatch] = useOverrides([]); const [overrides, overridesDispatch] = useOverrides([]);
@ -232,13 +258,12 @@ export const AddVariant = ({
onSubmit={submit} onSubmit={submit}
className={themeStyles.contentSpacingY} className={themeStyles.contentSpacingY}
> >
<p className={styles.error}>{error.general}</p> <StyledError>{error.general}</StyledError>
<Input <StyledInput
label="Variant name" label="Variant name"
autoFocus autoFocus
name="name" name="name"
id="variant-name" id="variant-name"
className={styles.input}
errorText={error.name} errorText={error.name}
value={data.name || ''} value={data.name || ''}
error={Boolean(error.name)} error={Boolean(error.name)}
@ -249,7 +274,7 @@ export const AddVariant = ({
data-testid={'VARIANT_NAME_INPUT'} data-testid={'VARIANT_NAME_INPUT'}
/> />
<br /> <br />
<Grid container> <StyledGrid container>
{/* If we're editing, we need to have at least 2 existing variants, since we require at least 1 variable. If adding, we could be adding nr 2, and as such should be allowed to set weightType to variable */} {/* If we're editing, we need to have at least 2 existing variants, since we require at least 1 variable. If adding, we could be adding nr 2, and as such should be allowed to set weightType to variable */}
<ConditionallyRender <ConditionallyRender
condition={ condition={
@ -257,7 +282,7 @@ export const AddVariant = ({
(!editing && variants.length > 0) (!editing && variants.length > 0)
} }
show={ show={
<Grid item md={12} className={styles.grid}> <Grid item md={12}>
<FormControl> <FormControl>
<FormControlLabel <FormControlLabel
control={ control={
@ -297,7 +322,7 @@ export const AddVariant = ({
</InputAdornment> </InputAdornment>
), ),
}} }}
className={styles.weightInput} sx={{ marginRight: '0.8rem' }}
value={data.weight} value={data.weight}
error={Boolean(error.weight)} error={Boolean(error.weight)}
errorText={error.weight} errorText={error.weight}
@ -312,18 +337,17 @@ export const AddVariant = ({
</Grid> </Grid>
} }
/> />
</Grid> </StyledGrid>
<p className={styles.label}> <StyledLabel>
<strong>Payload </strong> <strong>Payload </strong>
<HelpIcon tooltip="Passed along with the the variant object." /> <HelpIcon tooltip="Passed along with the the variant object." />
</p> </StyledLabel>
<Grid container> <Grid container>
<Grid item md={2} sm={2} xs={4}> <Grid item md={2} sm={2} xs={4}>
<GeneralSelect <StyledGeneralSelect
id="variant-payload-type" id="variant-payload-type"
name="type" name="type"
label="Type" label="Type"
className={styles.select}
value={payload.type} value={payload.type}
options={payloadOptions} options={payloadOptions}
onChange={onPayload('type')} onChange={onPayload('type')}
@ -353,10 +377,10 @@ export const AddVariant = ({
<ConditionallyRender <ConditionallyRender
condition={overrides.length > 0} condition={overrides.length > 0}
show={ show={
<p className={styles.label}> <StyledLabel>
<strong>Overrides </strong> <strong>Overrides </strong>
<HelpIcon tooltip="Here you can specify which users should get this variant." /> <HelpIcon tooltip="Here you can specify which users should get this variant." />
</p> </StyledLabel>
} }
/> />
<OverrideConfig <OverrideConfig

7
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
View File

@ -1,7 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
contextFieldSelect: {
marginRight: '8px',
},
}));

4
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
View File

@ -2,7 +2,6 @@ import { ChangeEvent, VFC } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import { Grid, IconButton, TextField, Tooltip } from '@mui/material'; import { Grid, IconButton, TextField, Tooltip } from '@mui/material';
import { Delete } from '@mui/icons-material'; import { Delete } from '@mui/icons-material';
import { useStyles } from './OverrideConfig.styles';
import { Autocomplete } from '@mui/material'; import { Autocomplete } from '@mui/material';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import { useThemeStyles } from 'themes/themeStyles'; import { useThemeStyles } from 'themes/themeStyles';
@ -21,7 +20,6 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
overrides, overrides,
overridesDispatch, overridesDispatch,
}) => { }) => {
const { classes: styles } = useStyles();
const { classes: themeStyles } = useThemeStyles(); const { classes: themeStyles } = useThemeStyles();
const { context } = useUnleashContext(); const { context } = useUnleashContext();
@ -69,7 +67,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
md={3} md={3}
sm={3} sm={3}
xs={3} xs={3}
className={styles.contextFieldSelect} sx={theme => ({ marginRight: theme.spacing(1) })}
> >
<GeneralSelect <GeneralSelect
name="contextName" name="contextName"

35
frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
View File

@ -1,35 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
overlay: {
pointerEvents: 'none',
display: 'grid',
padding: '1rem',
overflowY: 'auto',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
},
modal: {
pointerEvents: 'auto',
position: 'relative',
padding: '4rem',
background: theme.palette.background.paper,
boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
borderRadius: '1rem',
[theme.breakpoints.down('md')]: {
padding: '2rem',
},
},
close: {
all: 'unset',
position: 'absolute',
top: 0,
right: 0,
},
closeIcon: {
fontSize: '1.5rem',
color: theme.palette.inactiveIcon,
},
}));

56
frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
View File

@ -1,20 +1,53 @@
import { IconButton, Modal } from '@mui/material'; import { IconButton, Modal, styled } from '@mui/material';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { import {
feedbackCESContext, feedbackCESContext,
IFeedbackCESState, IFeedbackCESState,
} from 'component/feedback/FeedbackCESContext/FeedbackCESContext'; } from 'component/feedback/FeedbackCESContext/FeedbackCESContext';
import { FeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm'; import { FeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm';
import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCES.styles';
import { CloseOutlined } from '@mui/icons-material'; import { CloseOutlined } from '@mui/icons-material';
export interface IFeedbackCESProps { export interface IFeedbackCESProps {
state?: IFeedbackCESState; state?: IFeedbackCESState;
} }
const StyledOverlay = styled('div')(({ theme }) => ({
pointerEvents: 'none',
display: 'grid',
padding: theme.spacing(2),
overflowY: 'auto',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
}));
const StyledModal = styled('div')(({ theme }) => ({
pointerEvents: 'auto',
position: 'relative',
padding: theme.spacing(8),
background: theme.palette.background.paper,
boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
borderRadius: theme.spacing(2),
[theme.breakpoints.down('md')]: {
padding: theme.spacing(4),
},
}));
const StyledClose = styled('div')({
all: 'unset',
position: 'absolute',
top: 0,
right: 0,
});
const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
fontSize: '1.5rem',
color: theme.palette.inactiveIcon,
}));
export const FeedbackCES = ({ state }: IFeedbackCESProps) => { export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
const { hideFeedbackCES } = useContext(feedbackCESContext); const { hideFeedbackCES } = useContext(feedbackCESContext);
const { classes: styles } = useStyles();
const modalContent = state && ( const modalContent = state && (
<FeedbackCESForm state={state} onClose={hideFeedbackCES} /> <FeedbackCESForm state={state} onClose={hideFeedbackCES} />
@ -26,19 +59,16 @@ export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
onClose={hideFeedbackCES} onClose={hideFeedbackCES}
aria-label={state?.title} aria-label={state?.title}
> >
<div className={styles.overlay}> <StyledOverlay>
<div className={styles.modal}> <StyledModal>
<div className={styles.close}> <StyledClose>
<IconButton onClick={hideFeedbackCES} size="large"> <IconButton onClick={hideFeedbackCES} size="large">
<CloseOutlined <StyledCloseIcon titleAccess="Close" />
titleAccess="Close"
className={styles.closeIcon}
/>
</IconButton> </IconButton>
</div> </StyledClose>
{modalContent} {modalContent}
</div> </StyledModal>
</div> </StyledOverlay>
</Modal> </Modal>
); );
}; };

36
frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
View File

@ -1,36 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
fontWeight: theme.fontWeight.thin,
},
form: {
display: 'grid',
gap: '3rem',
gridTemplateColumns: 'minmax(auto, 40rem)',
justifyContent: 'center',
},
title: {
all: 'unset',
display: 'block',
textAlign: 'center',
color: theme.palette.text.secondary,
},
subtitle: {
all: 'unset',
display: 'block',
marginTop: '2.5rem',
fontSize: '1.5rem',
textAlign: 'center',
},
textLabel: {
display: 'block',
marginBottom: '0.5rem',
},
buttons: {
textAlign: 'center',
},
button: {
minWidth: '15rem',
},
}));

61
frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
View File

@ -1,5 +1,4 @@
import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESForm.styles'; import { Box, Button, styled, TextField } from '@mui/material';
import { Button, TextField } from '@mui/material';
import React, { useState } from 'react'; import React, { useState } from 'react';
import produce from 'immer'; import produce from 'immer';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
@ -18,10 +17,40 @@ export interface IFeedbackCESForm {
path: string; path: string;
} }
const StyledContainer = styled('div')(({ theme }) => ({
fontWeight: theme.fontWeight.thin,
}));
const StyledTitle = styled('h1')(({ theme }) => ({
all: 'unset',
display: 'block',
textAlign: 'center',
color: theme.palette.text.secondary,
}));
const StyledForm = styled('form')(({ theme }) => ({
display: 'grid',
gap: theme.spacing(6),
gridTemplateColumns: 'minmax(auto, 40rem)',
justifyContent: 'center',
}));
const StyledSubtitle = styled('p')(({ theme }) => ({
all: 'unset',
display: 'block',
marginTop: theme.spacing(5),
fontSize: theme.spacing(3),
textAlign: 'center',
}));
const StyledTextLabel = styled('label')(({ theme }) => ({
display: 'block',
marginBottom: theme.spacing(1),
}));
export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => { export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const { setToastData } = useToast(); const { setToastData } = useToast();
const { classes: styles } = useStyles();
const [form, setForm] = useState<Partial<IFeedbackCESForm>>({ const [form, setForm] = useState<Partial<IFeedbackCESForm>>({
path: state.path, path: state.path,
@ -57,19 +86,15 @@ export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
}; };
return ( return (
<div className={styles.container}> <StyledContainer>
<h1 className={styles.title}>Please help us improve</h1> <StyledTitle>Please help us improve</StyledTitle>
<form <StyledForm onSubmit={onSubmit} aria-live="polite">
className={styles.form} <StyledSubtitle>{state.title}</StyledSubtitle>
onSubmit={onSubmit}
aria-live="polite"
>
<p className={styles.subtitle}>{state.title}</p>
<FeedbackCESScore form={form} setForm={setForm} /> <FeedbackCESScore form={form} setForm={setForm} />
<div hidden={!form.score}> <div hidden={!form.score}>
<label htmlFor="comment" className={styles.textLabel}> <StyledTextLabel htmlFor="comment">
{state.text} {state.text}
</label> </StyledTextLabel>
<TextField <TextField
value={form.comment ?? ''} value={form.comment ?? ''}
onChange={onCommentChange} onChange={onCommentChange}
@ -79,18 +104,18 @@ export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
fullWidth fullWidth
/> />
</div> </div>
<div className={styles.buttons} hidden={!form.score}> <Box hidden={!form.score} sx={{ textAlign: 'center' }}>
<Button <Button
type="submit" type="submit"
color="primary" color="primary"
variant="contained" variant="contained"
className={styles.button} sx={{ minWidth: '15rem' }}
disabled={!form.score || loading} disabled={!form.score || loading}
> >
Send feedback Send feedback
</Button> </Button>
</div> </Box>
</form> </StyledForm>
</div> </StyledContainer>
); );
}; };

55
frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
View File

@ -1,55 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
scoreInput: {
display: 'flex',
gap: '1rem',
alignItems: 'center',
margin: '0 auto',
},
scoreHelp: {
width: '6.25rem',
whiteSpace: 'nowrap',
color: theme.palette.text.secondary,
'&:first-of-type': {
textAlign: 'right',
},
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
scoreValue: {
'& input': {
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
overflow: 'hidden',
position: 'absolute',
whiteSpace: 'nowrap',
width: 1,
height: 1,
},
'& span': {
display: 'grid',
justifyContent: 'center',
alignItems: 'center',
background: theme.palette.grey[300],
width: '3rem',
height: '3rem',
borderRadius: '10rem',
fontSize: '1.25rem',
paddingBottom: 2,
userSelect: 'none',
cursor: 'pointer',
},
'& input:checked + span': {
fontWeight: theme.fontWeight.bold,
background: theme.palette.primary.main,
color: 'white',
},
'& input:focus-visible + span': {
outline: '2px solid',
outlineOffset: 2,
outlineColor: theme.palette.primary.main,
},
},
}));

70
frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
View File

@ -1,16 +1,68 @@
import React from 'react'; import React from 'react';
import produce from 'immer'; import produce from 'immer';
import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESScore.styles';
import { IFeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm'; import { IFeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm';
import { styled } from '@mui/material';
interface IFeedbackCESScoreProps { interface IFeedbackCESScoreProps {
form: Partial<IFeedbackCESForm>; form: Partial<IFeedbackCESForm>;
setForm: React.Dispatch<React.SetStateAction<Partial<IFeedbackCESForm>>>; setForm: React.Dispatch<React.SetStateAction<Partial<IFeedbackCESForm>>>;
} }
export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => { const StyledScoreInput = styled('div')(({ theme }) => ({
const { classes: styles } = useStyles(); display: 'flex',
gap: theme.spacing(2),
alignItems: 'center',
margin: '0 auto',
}));
const StyledScoreHelp = styled('span')(({ theme }) => ({
width: '6.25rem',
whiteSpace: 'nowrap',
color: theme.palette.text.secondary,
'&:first-of-type': {
textAlign: 'right',
},
[theme.breakpoints.down('sm')]: {
display: 'none',
},
}));
const StyledScoreValue = styled('label')(({ theme }) => ({
'& input': {
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
overflow: 'hidden',
position: 'absolute',
whiteSpace: 'nowrap',
width: 1,
height: 1,
},
'& span': {
display: 'grid',
justifyContent: 'center',
alignItems: 'center',
background: theme.palette.grey[300],
width: '3rem',
height: '3rem',
borderRadius: '10rem',
fontSize: '1.25rem',
paddingBottom: 2,
userSelect: 'none',
cursor: 'pointer',
},
'& input:checked + span': {
fontWeight: theme.fontWeight.bold,
background: theme.palette.primary.main,
color: theme.palette.text.tertiaryContrast,
},
'& input:focus-visible + span': {
outline: '2px solid',
outlineOffset: 2,
outlineColor: theme.palette.primary.main,
},
}));
export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
const onScoreChange = (event: React.ChangeEvent<HTMLInputElement>) => { const onScoreChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setForm( setForm(
produce(draft => { produce(draft => {
@ -20,10 +72,10 @@ export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
}; };
return ( return (
<div className={styles.scoreInput}> <StyledScoreInput>
<span className={styles.scoreHelp}>Very difficult</span> <StyledScoreHelp>Very difficult</StyledScoreHelp>
{[1, 2, 3, 4, 5, 6, 7].map(score => ( {[1, 2, 3, 4, 5, 6, 7].map(score => (
<label key={score} className={styles.scoreValue}> <StyledScoreValue key={score}>
<input <input
type="radio" type="radio"
name="score" name="score"
@ -32,9 +84,9 @@ export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
onChange={onScoreChange} onChange={onScoreChange}
/> />
<span>{score}</span> <span>{score}</span>
</label> </StyledScoreValue>
))} ))}
<span className={styles.scoreHelp}>Very easy</span> <StyledScoreHelp>Very easy</StyledScoreHelp>
</div> </StyledScoreInput>
); );
}; };

34
frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
View File

@ -4,32 +4,32 @@ exports[`FeedbackCESForm 1`] = `
<body> <body>
<div> <div>
<div <div
class="css-fdcp7c-container" class="css-kaq1dv"
> >
<h1 <h1
class="css-iyd7t0-title" class="css-tb1je1"
> >
Please help us improve Please help us improve
</h1> </h1>
<form <form
aria-live="polite" aria-live="polite"
class="css-1rgjoiw-form" class="css-518ok6"
> >
<p <p
class="css-mhztvj-subtitle" class="css-114cem8"
> >
a a
</p> </p>
<div <div
class="css-io6e1g-scoreInput" class="css-1klv5bg"
> >
<span <span
class="css-16omcck-scoreHelp" class="css-9f5hh8"
> >
Very difficult Very difficult
</span> </span>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -41,7 +41,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -53,7 +53,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -65,7 +65,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -77,7 +77,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -89,7 +89,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -101,7 +101,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<label <label
class="css-pq8zjr-scoreValue" class="css-112g122"
> >
<input <input
name="score" name="score"
@ -113,7 +113,7 @@ exports[`FeedbackCESForm 1`] = `
</span> </span>
</label> </label>
<span <span
class="css-16omcck-scoreHelp" class="css-9f5hh8"
> >
Very easy Very easy
</span> </span>
@ -122,7 +122,7 @@ exports[`FeedbackCESForm 1`] = `
hidden="" hidden=""
> >
<label <label
class="css-13obo9p-textLabel" class="css-1lg26qb"
for="comment" for="comment"
> >
b b
@ -165,11 +165,11 @@ exports[`FeedbackCESForm 1`] = `
</div> </div>
</div> </div>
<div <div
class="css-n2ggaa-buttons" class="MuiBox-root css-xi606m"
hidden="" hidden=""
> >
<button <button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-9rpict-MuiButtonBase-root-MuiButton-root-button" class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-w5plom-MuiButtonBase-root-MuiButton-root"
disabled="" disabled=""
tabindex="-1" tabindex="-1"
type="submit" type="submit"

8
frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap
View File

@ -7,7 +7,7 @@ exports[`renders correctly with empty version 1`] = `
title="API details" title="API details"
> >
<h2 <h2
class="css-cxwipi-title" class="css-gtu1fw"
> >
Unleash Unleash
@ -41,7 +41,7 @@ exports[`renders correctly with ui-config 1`] = `
title="API details" title="API details"
> >
<h2 <h2
class="css-cxwipi-title" class="css-gtu1fw"
> >
Unleash 1.1.0 Unleash 1.1.0
@ -75,7 +75,7 @@ exports[`renders correctly with versionInfo 1`] = `
title="API details" title="API details"
> >
<h2 <h2
class="css-cxwipi-title" class="css-gtu1fw"
> >
Unleash 1.2.3 Unleash 1.2.3
@ -109,7 +109,7 @@ exports[`renders correctly without uiConfig 1`] = `
title="API details" title="API details"
> >
<h2 <h2
class="css-cxwipi-title" class="css-gtu1fw"
> >
Unleash 1.1.0 Unleash 1.1.0

23
frontend/src/component/menu/Footer/Footer.styles.ts
View File

@ -1,23 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
footer: {
padding: '2rem 4rem',
width: '100%',
flexGrow: 1,
zIndex: 100,
backgroundColor: theme.palette.footerBackground,
},
list: {
padding: 0,
margin: 0,
},
listItem: {
padding: 0,
margin: 0,
'& a': {
textDecoration: 'none',
color: theme.palette.text.primary,
},
},
}));

114
frontend/src/component/menu/Footer/Footer.tsx
View File

@ -1,18 +1,38 @@
/* eslint-disable react/jsx-no-target-blank */ /* eslint-disable react/jsx-no-target-blank */
import { VFC } from 'react'; import { VFC } from 'react';
import { List, ListItem, ListItemText, Grid } from '@mui/material'; import { List, ListItem, ListItemText, Grid, styled } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ApiDetails } from './ApiDetails/ApiDetails'; import { ApiDetails } from './ApiDetails/ApiDetails';
import { useStyles } from './Footer.styles';
import { FooterTitle } from './FooterTitle'; import { FooterTitle } from './FooterTitle';
const StyledFooter = styled('footer')(({ theme }) => ({
padding: theme.spacing(4, 8),
width: '100%',
flexGrow: 1,
zIndex: 100,
backgroundColor: theme.palette.footerBackground,
}));
const StyledList = styled(List)({
padding: 0,
margin: 0,
});
const StyledListItem = styled(ListItem)(({ theme }) => ({
padding: 0,
margin: 0,
'& a': {
textDecoration: 'none',
color: theme.palette.text.primary,
},
}));
export const Footer: VFC = () => { export const Footer: VFC = () => {
const { classes: styles } = useStyles();
const { uiConfig } = useUiConfig(); const { uiConfig } = useUiConfig();
return ( return (
<footer className={styles.footer}> <StyledFooter>
<Grid <Grid
container container
justifyContent="center" justifyContent="center"
@ -27,8 +47,8 @@ export const Footer: VFC = () => {
<Grid item> <Grid item>
<section title="Unleash SDK"> <section title="Unleash SDK">
<FooterTitle>Server SDKs</FooterTitle> <FooterTitle>Server SDKs</FooterTitle>
<List className={styles.list} dense> <StyledList dense>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -39,8 +59,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -51,8 +71,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -63,8 +83,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem>{' '} </StyledListItem>{' '}
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -75,8 +95,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem>{' '} </StyledListItem>{' '}
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -87,8 +107,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -99,8 +119,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -111,8 +131,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -123,15 +143,15 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
</List> </StyledList>
</section> </section>
</Grid> </Grid>
<Grid item> <Grid item>
<section title="Unleash SDK"> <section title="Unleash SDK">
<FooterTitle>Frontend SDKs</FooterTitle> <FooterTitle>Frontend SDKs</FooterTitle>
<List className={styles.list} dense> <StyledList dense>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -142,8 +162,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -154,8 +174,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -166,8 +186,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -178,8 +198,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -190,15 +210,15 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
</List> </StyledList>
</section> </section>
</Grid> </Grid>
<Grid item> <Grid item>
<section> <section>
<FooterTitle>About</FooterTitle> <FooterTitle>About</FooterTitle>
<List className={styles.list} dense> <StyledList dense>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -209,8 +229,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -221,8 +241,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -233,8 +253,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -245,8 +265,8 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
<ListItem className={styles.listItem}> <StyledListItem>
<ListItemText <ListItemText
primary={ primary={
<a <a
@ -257,14 +277,14 @@ export const Footer: VFC = () => {
</a> </a>
} }
/> />
</ListItem> </StyledListItem>
</List> </StyledList>
</section> </section>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</footer> </StyledFooter>
); );
}; };

11
frontend/src/component/menu/Footer/FooterTitle.styles.ts
View File

@ -1,11 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
title: {
all: 'unset',
display: 'block',
margin: '1rem 0',
fontSize: '1rem',
fontWeight: theme.fontWeight.bold,
},
}));

19
frontend/src/component/menu/Footer/FooterTitle.tsx
View File

@ -1,12 +1,9 @@
import { ReactNode } from 'react'; import { styled } from '@mui/material';
import { useStyles } from 'component/menu/Footer/FooterTitle.styles';
interface IFooterTitleProps { export const FooterTitle = styled('h2')(({ theme }) => ({
children: ReactNode; all: 'unset',
} display: 'block',
margin: theme.spacing(2, 0),
export const FooterTitle = ({ children }: IFooterTitleProps) => { fontSize: '1rem',
const { classes: styles } = useStyles(); fontWeight: theme.fontWeight.bold,
}));
return <h2 className={styles.title}>{children}</h2>;
};

104
frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`should render DrawerMenu 1`] = ` exports[`should render DrawerMenu 1`] = `
[ [
<footer <footer
className="css-16d7ppb-footer" className="css-10ce49z"
> >
<div <div
className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root" className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root"
@ -20,7 +20,7 @@ exports[`should render DrawerMenu 1`] = `
title="API details" title="API details"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Unleash 3.x Unleash 3.x
@ -45,15 +45,15 @@ exports[`should render DrawerMenu 1`] = `
title="Unleash SDK" title="Unleash SDK"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Server SDKs Server SDKs
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -216,15 +216,15 @@ exports[`should render DrawerMenu 1`] = `
title="Unleash SDK" title="Unleash SDK"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Frontend SDKs Frontend SDKs
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -326,15 +326,15 @@ exports[`should render DrawerMenu 1`] = `
> >
<section> <section>
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
About About
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -448,7 +448,7 @@ exports[`should render DrawerMenu 1`] = `
exports[`should render DrawerMenu with "features" selected 1`] = ` exports[`should render DrawerMenu with "features" selected 1`] = `
[ [
<footer <footer
className="css-16d7ppb-footer" className="css-10ce49z"
> >
<div <div
className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root" className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root"
@ -465,7 +465,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
title="API details" title="API details"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Unleash 3.x Unleash 3.x
@ -490,15 +490,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
title="Unleash SDK" title="Unleash SDK"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Server SDKs Server SDKs
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -661,15 +661,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
title="Unleash SDK" title="Unleash SDK"
> >
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
Frontend SDKs Frontend SDKs
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -771,15 +771,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
> >
<section> <section>
<h2 <h2
className="css-cxwipi-title" className="css-gtu1fw"
> >
About About
</h2> </h2>
<ul <ul
className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list" className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
> >
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div
@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div> </div>
</li> </li>
<li <li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem" className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
disabled={false} disabled={false}
> >
<div <div