Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02: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

27
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,12 +50,11 @@ export const MaintenanceToggle = () => {
}; };
return ( return (
<StyledCard> <StyledContainer>
<CardContent>
<CardTitleRow> <CardTitleRow>
<b>Maintenance Mode</b> <b>Maintenance Mode</b>
<FormControlLabel <FormControlLabel
sx={{ fontSize: '10px' }} sx={{ margin: 0 }}
control={ control={
<Switch <Switch
onChange={updateEnabled} onChange={updateEnabled}
@ -73,12 +71,11 @@ export const MaintenanceToggle = () => {
/> />
</CardTitleRow> </CardTitleRow>
<CardDescription> <CardDescription>
Maintenance Mode is useful when you want to freeze your Maintenance Mode is useful when you want to freeze your system
system so nobody can do any changes during this time. When so nobody can do any changes during this time. When enabled it
enabled it will show a banner at the top of the applications will show a banner at the top of the applications and only an
and only an admin can enable it or disable it. admin can enable it or disable it.
</CardDescription> </CardDescription>
</CardContent> </StyledContainer>
</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;