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

Maintenance UI fixes (#2849)

Browse Source 
Maintenance UI fixes
This commit is contained in:
sjaanus 2023-01-09 15:54:14 +02:00 committed by GitHub
parent d13401b6ed
commit 7b075954a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
View File

@ -1,8 +1,6 @@
import React from 'react';
import {
Box,
Card,
CardContent,
FormControlLabel,
styled,
Switch,
@ -12,24 +10,25 @@ import { useMaintenance } from 'hooks/api/getters/useMaintenance/useMaintenance'
import { useMaintenanceApi } from 'hooks/api/actions/useMaintenanceApi/useMaintenanceApi';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledCard = styled(Card)(({ theme }) => ({
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2.5),
padding: theme.spacing(3),
border: `1px solid ${theme.palette.dividerAlternative}`,
borderRadius: theme.shape.borderRadiusLarge,
boxShadow: theme.boxShadows.card,
fontSize: theme.fontSizes.smallBody,
}));
const CardTitleRow = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}));
const CardDescription = styled(Box)(({ theme }) => ({
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallBody,
marginTop: theme.spacing(2),
}));
const SwitchLabel = styled(Typography)(({ theme }) => ({
@ -51,34 +50,32 @@ export const MaintenanceToggle = () => {
};
return (
<StyledCard>
<CardContent>
<CardTitleRow>
<b>Maintenance Mode</b>
<FormControlLabel
sx={{ fontSize: '10px' }}
control={
<Switch
onChange={updateEnabled}
value={enabled}
name="enabled"
checked={enabled}
/>
}
label={
<SwitchLabel>
{enabled ? 'Enabled' : 'Disabled'}
</SwitchLabel>
}
/>
</CardTitleRow>
<CardDescription>
Maintenance Mode is useful when you want to freeze your
system so nobody can do any changes during this time. When
enabled it will show a banner at the top of the applications
and only an admin can enable it or disable it.
</CardDescription>
</CardContent>
</StyledCard>
<StyledContainer>
<CardTitleRow>
<b>Maintenance Mode</b>
<FormControlLabel
sx={{ margin: 0 }}
control={
<Switch
onChange={updateEnabled}
value={enabled}
name="enabled"
checked={enabled}
/>
}
label={
<SwitchLabel>
{enabled ? 'Enabled' : 'Disabled'}
</SwitchLabel>
}
/>
</CardTitleRow>
<CardDescription>
Maintenance Mode is useful when you want to freeze your system
so nobody can do any changes during this time. When enabled it
will show a banner at the top of the applications and only an
admin can enable it or disable it.
</CardDescription>
</StyledContainer>
);
};

8
frontend/src/component/admin/maintenance/index.tsx
View File

@ -7,9 +7,7 @@ import AccessContext from 'contexts/AccessContext';
import React, { useContext } from 'react';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { Box, CardContent, styled } from '@mui/material';
import { CorsHelpAlert } from 'component/admin/cors/CorsHelpAlert';
import { CorsForm } from 'component/admin/cors/CorsForm';
import { Box, styled } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { MaintenanceTooltip } from './MaintenanceTooltip';
import { MaintenanceToggle } from './MaintenanceToggle';
@ -36,10 +34,10 @@ export const MaintenanceAdmin = () => {
const StyledBox = styled(Box)(({ theme }) => ({
display: 'grid',
gap: theme.spacing(2),
gap: theme.spacing(4),
}));
const MaintenancePage = () => {
const { uiConfig, loading } = useUiConfig();
const { loading } = useUiConfig();
if (loading) {
return null;