From e663dc096060adaf9d6402c87d230009b09d8b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 13 Oct 2023 14:30:50 +0100
Subject: [PATCH] fix: maintenance banner should show right away when toggled
 (#5021)

Makes the maintenance banner show right away when toggled. Includes some
misc cleaning up.

Co-authored-by: Nicolae <nicolae@getunleash.ai>
---
 .../src/component/admin/maintenance/MaintenanceToggle.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
index 4636cf350c84..a564a2052160 100644
--- a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
+++ b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
     Box,
     FormControlLabel,
@@ -10,6 +9,7 @@ import { useMaintenance } from 'hooks/api/getters/useMaintenance/useMaintenance'
 import { useMaintenanceApi } from 'hooks/api/actions/useMaintenanceApi/useMaintenanceApi';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useToast from 'hooks/useToast';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -19,12 +19,12 @@ const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 
-const CardTitleRow = styled(Box)(({ theme }) => ({
+const CardTitleRow = styled(Box)({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-}));
+});
 
 const CardDescription = styled(Box)(({ theme }) => ({
     color: theme.palette.text.secondary,
@@ -38,6 +38,7 @@ const SwitchLabel = styled(Typography)(({ theme }) => ({
 
 export const MaintenanceToggle = () => {
     const { enabled, refetchMaintenance } = useMaintenance();
+    const { refetch: refetchUiConfig } = useUiConfig();
     const { toggleMaintenance } = useMaintenanceApi();
     const { trackEvent } = usePlausibleTracker();
     const { setToastData } = useToast();
@@ -55,6 +56,7 @@ export const MaintenanceToggle = () => {
         });
         await toggleMaintenance({ enabled: !enabled });
         refetchMaintenance();
+        refetchUiConfig();
     };
 
     return (