Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

feat: warning mode app env styling (#6305)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-22 08:41:50 +01:00 committed by GitHub
parent 3c4457af00
commit c64a780a13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 86 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/src/component/application/ApplicationOverview.tsx
View File

@ -11,8 +11,9 @@ import {
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import Check from '@mui/icons-material/CheckCircle'; import Check from '@mui/icons-material/CheckCircle';
import Warning from '@mui/icons-material/Warning';
import { ArcherContainer, ArcherElement } from 'react-archer'; import { ArcherContainer, ArcherElement } from 'react-archer';
import { useLayoutEffect, useRef, useState } from 'react'; import { FC, useLayoutEffect, useRef, useState } from 'react';
const StyledTable = styled('table')(({ theme }) => ({ const StyledTable = styled('table')(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
@ -31,34 +32,41 @@ const StyleApplicationContainer = styled(Box)(({ theme }) => ({
justifyContent: 'center', justifyContent: 'center',
})); }));
const StyledApplicationBox = styled(Box)(({ theme }) => ({ const StyledApplicationBox = styled(Box)<{ mode: 'success' | 'warning' }>(
borderRadius: theme.shape.borderRadiusMedium, ({ theme, mode }) => ({
border: '1px solid', borderRadius: theme.shape.borderRadiusMedium,
borderColor: theme.palette.success.border, border: '1px solid',
backgroundColor: theme.palette.success.light, borderColor: theme.palette[mode].border,
display: 'flex', backgroundColor: theme.palette[mode].light,
flexDirection: 'column', display: 'flex',
alignItems: 'center', flexDirection: 'column',
padding: theme.spacing(1.5, 3, 2, 3), alignItems: 'center',
})); padding: theme.spacing(1.5, 3, 2, 3),
}),
);
const StyledOkStatus = styled(Typography)(({ theme }) => ({ const StyledStatus = styled(Typography)<{ mode: 'success' | 'warning' }>(
gap: theme.spacing(0.5), ({ theme, mode }) => ({
fontSize: theme.fontSizes.smallBody, gap: theme.spacing(1),
color: theme.palette.success.dark, fontSize: theme.fontSizes.smallBody,
display: 'flex', color: theme.palette[mode].dark,
alignItems: 'center', display: 'flex',
})); alignItems: 'center',
}),
);
const StyledEnvironmentBox = styled(Box)(({ theme }) => ({ const StyledEnvironmentBox = styled(Box)<{ mode: 'success' | 'warning' }>(
borderRadius: theme.shape.borderRadiusMedium, ({ theme, mode }) => ({
border: '1px solid', borderRadius: theme.shape.borderRadiusMedium,
borderColor: theme.palette.secondary.border, border: '1px solid',
backgroundColor: theme.palette.secondary.light, borderColor:
display: 'inline-block', theme.palette[mode === 'success' ? 'secondary' : 'warning'].border,
padding: theme.spacing(1.5, 0, 1.5, 1), backgroundColor:
minWidth: '270px', theme.palette[mode === 'success' ? 'secondary' : 'warning'].light,
})); display: 'inline-block',
padding: theme.spacing(1.5, 0, 1.5, 1.5),
}),
);
const StyledDivider = styled(Divider)(({ theme }) => ({ const StyledDivider = styled(Divider)(({ theme }) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
@ -72,6 +80,33 @@ const StyledEnvironmentsContainer = styled(Box)({
gap: '20px', gap: '20px',
}); });
const EnvironmentHeader = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
fontWeight: theme.fontWeight.bold,
}));
const SuccessStatus = () => (
<StyledStatus mode='success'>
<Check
sx={(theme) => ({
color: theme.palette.success.main,
})}
/>{' '}
Everything looks good!
</StyledStatus>
);
const WarningStatus: FC = ({ children }) => (
<StyledStatus mode='warning'>
<Warning
sx={(theme) => ({
color: theme.palette.warning.main,
})}
/>{' '}
{children}
</StyledStatus>
);
const useElementWidth = () => { const useElementWidth = () => {
const elementRef = useRef<HTMLDivElement>(null); const elementRef = useRef<HTMLDivElement>(null);
const [width, setWidth] = useState('100%'); const [width, setWidth] = useState('100%');
@ -120,6 +155,8 @@ export const ApplicationOverview = () => {
const { elementRef, width } = useElementWidth(); const { elementRef, width } = useElementWidth();
const mode: 'success' | 'warning' = 'success';
return ( return (
<ConditionallyRender <ConditionallyRender
condition={1 === 2 + 1} condition={1 === 2 + 1}
@ -138,10 +175,18 @@ export const ApplicationOverview = () => {
targetId: environment.name, targetId: environment.name,
targetAnchor: 'top', targetAnchor: 'top',
sourceAnchor: 'bottom', sourceAnchor: 'bottom',
style: {
strokeColor:
mode === 'success'
? theme.palette.secondary
.border
: theme.palette.warning
.border,
},
}), }),
)} )}
> >
<StyledApplicationBox> <StyledApplicationBox mode={mode}>
<Typography <Typography
sx={(theme) => ({ sx={(theme) => ({
fontSize: fontSize:
@ -162,35 +207,29 @@ export const ApplicationOverview = () => {
<StyledDivider /> <StyledDivider />
<StyledOkStatus> <ConditionallyRender
<Check condition={mode === 'success'}
sx={(theme) => ({ show={<SuccessStatus />}
color: theme.palette.success elseShow={
.main, <WarningStatus>
})} 3 issues detected
/>{' '} </WarningStatus>
Everything looks good! }
</StyledOkStatus> />
</StyledApplicationBox> </StyledApplicationBox>
</ArcherElement> </ArcherElement>
</StyleApplicationContainer> </StyleApplicationContainer>
<StyledEnvironmentsContainer ref={elementRef}> <StyledEnvironmentsContainer ref={elementRef}>
{app.environments.map((environment, index) => ( {app.environments.map((environment) => (
<ArcherElement id={environment.name}> <ArcherElement id={environment.name}>
<StyledEnvironmentBox <StyledEnvironmentBox
mode={mode}
key={environment.name} key={environment.name}
> >
<Typography <EnvironmentHeader>
sx={(theme) => ({
fontSize:
theme.fontSizes.smallerBody,
fontWeight:
theme.fontWeight.bold,
})}
>
{environment.name} environment {environment.name} environment
</Typography> </EnvironmentHeader>
<StyledTable> <StyledTable>
<tr> <tr>