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

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