Maintenance mode UI (#2704)

frontend/src/component/App.tsx

@@ -19,6 +19,7 @@ import { useStyles } from './App.styles';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import useProjects from '../hooks/api/getters/useProjects/useProjects';
 import { useLastViewedProject } from '../hooks/useLastViewedProject';
+import Maintenance from './maintenance/Maintenance';
 
 const InitialRedirect = () => {
     const { lastViewed } = useLastViewedProject();
@@ -57,7 +58,7 @@ export const App = () => {
     const hasFetchedAuth = Boolean(authDetails || user);
 
     const { classes: styles } = useStyles();
-    const { isOss } = useUiConfig();
+    const { isOss, uiConfig } = useUiConfig();
 
     const availableRoutes = isOss()
         ? routes.filter(route => !route.enterprise)
@@ -73,6 +74,12 @@ export const App = () => {
                             show={<Loader />}
                             elseShow={
                                 <>
+                                    <ConditionallyRender
+                                        condition={Boolean(
+                                            uiConfig?.flags?.maintenance
+                                        )}
+                                        show={<Maintenance />}
+                                    />
                                     <div className={styles.container}>
                                         <ToastRenderer />
                                         <Routes>

frontend/src/component/maintenance/Maintenance.tsx

@@ -0,0 +1,35 @@
+import { styled } from '@mui/material';
+import { ErrorOutlineRounded } from '@mui/icons-material';
+
+const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
+    height: '20px',
+    width: '20px',
+    marginRight: theme.spacing(1),
+}));
+
+const StyledDiv = styled('div')(({ theme }) => ({
+    display: 'flex',
+    fontSize: theme.fontSizes.smallBody,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: theme.palette.error.main,
+    backgroundColor: theme.palette.error.light,
+    height: '65px',
+    borderBottom: `1px solid ${theme.palette.error.border}`,
+    whiteSpace: 'pre-wrap',
+}));
+
+const Maintenance = () => {
+    return (
+        <StyledDiv>
+            <StyledErrorRoundedIcon />
+            <b>Maintenance Mode! </b>
+            <p>
+                Any changes you make during maintenance mode will not be saved.
+                We apologize for any inconvenience this may cause.
+            </p>
+        </StyledDiv>
+    );
+};
+
+export default Maintenance;

frontend/src/hooks/api/getters/useAuth/useAuthEndpoint.ts

@@ -42,7 +42,7 @@ export interface IAuthSplash {
     [key: string]: boolean;
 }
 
-interface IUseAuthEndpointOutput {
+export interface IUseAuthEndpointOutput {
     data?: AuthEndpointResponse;
     refetchAuth: () => void;
     loading: boolean;

frontend/src/hooks/api/getters/useAuth/useAuthPermissions.ts

@@ -1,5 +1,7 @@
 import { IPermission } from 'interfaces/user';
-import { useAuthEndpoint } from './useAuthEndpoint';
+import { IUseAuthEndpointOutput, useAuthEndpoint } from './useAuthEndpoint';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { IUiConfig } from 'interfaces/uiConfig';
 
 interface IUseAuthPermissionsOutput {
     permissions?: IPermission[];
@@ -8,13 +10,23 @@ interface IUseAuthPermissionsOutput {
     error?: Error;
 }
 
-export const useAuthPermissions = (): IUseAuthPermissionsOutput => {
-    const auth = useAuthEndpoint();
-    const permissions =
-        auth.data && 'permissions' in auth.data
+const getPermissions = (
+    auth: IUseAuthEndpointOutput,
+    uiConfig: IUiConfig
+): IPermission[] | undefined => {
+    let permissions =
+        auth.data && 'permissions' in auth.data && !uiConfig?.flags?.maintenance
             ? auth.data.permissions
             : undefined;
 
+    return permissions;
+};
+
+export const useAuthPermissions = (): IUseAuthPermissionsOutput => {
+    const auth = useAuthEndpoint();
+    const { uiConfig } = useUiConfig();
+    const permissions = getPermissions(auth, uiConfig);
+
     return {
         permissions,
         refetchPermissions: auth.refetchAuth,

frontend/src/interfaces/uiConfig.ts

@@ -44,6 +44,7 @@ export interface IFlags {
     variantsPerEnvironment?: boolean;
     favorites?: boolean;
     networkView?: boolean;
+    maintenance?: boolean;
 }
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -74,6 +74,7 @@ exports[`should create default config 1`] = `
       "embedProxy": true,
       "embedProxyFrontend": true,
       "favorites": false,
+      "maintenance": false,
       "networkView": false,
       "proxyReturnAllToggles": false,
       "responseTimeWithAppName": false,
@@ -89,6 +90,7 @@ exports[`should create default config 1`] = `
       "embedProxy": true,
       "embedProxyFrontend": true,
       "favorites": false,
+      "maintenance": false,
       "networkView": false,
       "proxyReturnAllToggles": false,
       "responseTimeWithAppName": false,

src/lib/types/experimental.ts

@@ -38,6 +38,10 @@ export const defaultExperimentalOptions = {
             process.env.UNLEASH_EXPERIMENTAL_FAVORITES,
             false,
         ),
+        maintenance: parseEnvVarBoolean(
+            process.env.UNLEASH_EXPERIMENTAL_MAINTENANCE,
+            false,
+        ),
         networkView: parseEnvVarBoolean(
             process.env.UNLEASH_EXPERIMENTAL_NETWORK_VIEW,
             false,
@@ -59,6 +63,7 @@ export interface IExperimentalOptions {
         variantsPerEnvironment?: boolean;
         favorites?: boolean;
         networkView?: boolean;
+        maintenance?: boolean;
     };
     externalResolver: IExternalFlagResolver;
 }

src/server-dev.ts

@@ -42,6 +42,7 @@ process.nextTick(async () => {
                         changeRequests: true,
                         favorites: true,
                         variantsPerEnvironment: true,
+                        maintenance: false,
                     },
                 },
                 authentication: {