Update maintenance mode message (#1669)

* Files changes * update Files markup * update storage login screen * lingui extract * lingui extract * fix lint * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * removed unnecessary copy * lingui extract * lingui extract * update examples Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Oct 27, 2021 · 02f3e17 · 02f3e17
1 parent 995513e
commit 02f3e17
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 31 deletions.
diff --git a/packages/files-ui/.env.example b/packages/files-ui/.env.example
@@ -16,4 +16,6 @@ REACT_APP_FILES_UUID_VERIFIER_NAME=chainsafe-uuid-testnet
 # Set to `mainnet` if required
 REACT_APP_DIRECT_AUTH_NETWORK=testnet
 SENTRY_AUTH_TOKEN=
-REACT_APP_TEST=true
+REACT_APP_TEST=true
+REACT_APP_MAINTENANCE_MODE=false
+REACT_APP_MAINTENANCE_TIMESTAMP=
diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -23,6 +23,7 @@ import { IdentityProvider } from "@chainsafe/files-api-client"
 import PasswordlessEmail from "./PasswordlessEmail"
 import { Form, FormikProvider, useFormik } from "formik"
 import { emailValidation } from "../../../Utils/validationSchema"
+import dayjs from "dayjs"
 
 const useStyles = makeStyles(
   ({ constants, palette, breakpoints, typography }: CSFTheme) =>
@@ -153,6 +154,14 @@ const useStyles = makeStyles(
       },
       secondaryLoginText: {
         paddingTop: constants.generalUnit * 2
+      },
+      maintenanceMessage: {
+        display: "block",
+        textAlign: "justify",
+        width: 240
+      },
+      maintenanceActiveMessage: {
+        color: palette.error.main
       }
     })
 )
@@ -171,6 +180,7 @@ const InitialScreen = ({ className }: IInitialScreen) => {
   const [error, setError] = useState<string | undefined>()
   const [errorEmail, setErrorEmail] = useState("")
   const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true"
+  const maintenanceWindowTimestamp = Number(process.env.REACT_APP_MAINTENANCE_TIMESTAMP)
   const [isConnecting, setIsConnecting] = useState(false)
   const { filesApiClient } = useFilesApi()
   const [email, setEmail] = useState("")
@@ -388,11 +398,6 @@ const InitialScreen = ({ className }: IInitialScreen) => {
         loginMode !== "web3" && loginMode !== "email"
           ? <>
             <section className={classes.buttonSection}>
-              {maintenanceMode && (
-                <Typography>
-                  <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
-                </Typography>
-              )}
               <FormikProvider value={formik}>
                 <Form>
                   <FormikTextInput
@@ -461,6 +466,25 @@ const InitialScreen = ({ className }: IInitialScreen) => {
                 <GoogleLogoIcon className="icon"/>
                 <Trans>Continue with Google</Trans>
               </Button>
+              {maintenanceMode && (
+                <Typography className={clsx(classes.maintenanceMessage, classes.maintenanceActiveMessage)}>
+                  <Trans>We are performing routine maintenance of the system. Service status updates will be posted on the{" "}
+                    <a href={ROUTE_LINKS.DiscordInvite}
+                      target="_blank"
+                      rel='noreferrer noopener'>Files Support Channel</a>{" "}
+                      on Discord
+                  </Trans>
+                </Typography>
+              )}
+              {!maintenanceMode && !!maintenanceWindowTimestamp && dayjs.unix(maintenanceWindowTimestamp).isAfter(dayjs()) && (
+                <Typography className={classes.maintenanceMessage}>
+                  <Trans>
+                    System maintenance is scheduled to start at{" "}
+                    {dayjs.unix(maintenanceWindowTimestamp).format("YYYY-MM-DD HH:mm")}.{" "}
+                    The system will be unavailable.
+                  </Trans>
+                </Typography>
+              )}
             </section>
             <footer className={classes.footer}>
               <a

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -703,6 +703,9 @@ msgstr "Speicherplan"
 msgid "Stored by miner"
 msgstr ""
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr ""
+
 msgid "Teams"
 msgstr ""
 
@@ -718,9 +721,6 @@ msgstr ""
 msgid "The files are already in this folder"
 msgstr ""
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr "Das System wird gerade gewartet, wir danken Ihnen für Ihre Geduld."
-
 msgid "The username is too long"
 msgstr ""
 
@@ -826,6 +826,9 @@ msgstr ""
 msgid "Want to help shape this product?"
 msgstr ""
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr ""
+
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -706,6 +706,9 @@ msgstr "Storage Plan"
 msgid "Stored by miner"
 msgstr "Stored by miner"
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr "System maintenance is scheduled to start at {0}. The system will be unavailable."
+
 msgid "Teams"
 msgstr "Teams"
 
@@ -721,9 +724,6 @@ msgstr "The authentication popup was closed"
 msgid "The files are already in this folder"
 msgstr "The files are already in this folder"
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr "The system is undergoing maintenance, thank you for being patient."
-
 msgid "The username is too long"
 msgstr "The username is too long"
 
@@ -829,6 +829,9 @@ msgstr "Wallet address"
 msgid "Want to help shape this product?"
 msgstr "Want to help shape this product?"
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -707,6 +707,9 @@ msgstr "Plan de almacenamiento"
 msgid "Stored by miner"
 msgstr "Almacenado por el minero"
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr ""
+
 msgid "Teams"
 msgstr ""
 
@@ -722,9 +725,6 @@ msgstr "Se cerró la ventana emergente de autenticación"
 msgid "The files are already in this folder"
 msgstr ""
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr "El sistema está en mantenimiento, gracias por su paciencia."
-
 msgid "The username is too long"
 msgstr ""
 
@@ -830,6 +830,9 @@ msgstr "Utilice un navegador guardado"
 msgid "Want to help shape this product?"
 msgstr ""
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr ""
+
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr ""
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -707,6 +707,9 @@ msgstr "Plan de stockage"
 msgid "Stored by miner"
 msgstr "Sauvegardé par le mineur"
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr ""
+
 msgid "Teams"
 msgstr "Équipes"
 
@@ -722,9 +725,6 @@ msgstr "Le popup d’authentification a été fermé"
 msgid "The files are already in this folder"
 msgstr "Les fichiers sont déjà dans ce dossier"
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr "Le système est en cours de maintenance, merci d’être patient."
-
 msgid "The username is too long"
 msgstr "Le nom d'utilisateur est trop long"
 
@@ -830,6 +830,9 @@ msgstr "Addresse du wallet"
 msgid "Want to help shape this product?"
 msgstr "Vous voulez participer à l'élaboration de ce produit ?"
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr ""
+
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -703,6 +703,9 @@ msgstr ""
 msgid "Stored by miner"
 msgstr ""
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr ""
+
 msgid "Teams"
 msgstr ""
 
@@ -718,9 +721,6 @@ msgstr ""
 msgid "The files are already in this folder"
 msgstr ""
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr ""
-
 msgid "The username is too long"
 msgstr ""
 
@@ -826,6 +826,9 @@ msgstr ""
 msgid "Want to help shape this product?"
 msgstr ""
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr ""
+
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr ""
 

diff --git a/packages/storage-ui/.env.example b/packages/storage-ui/.env.example
@@ -10,3 +10,5 @@ REACT_APP_SENTRY_ENV=development
 REACT_APP_HOTJAR_ID=
 # Get your ID on Blocknative: https://explorer.blocknative.com/account
 REACT_APP_BLOCKNATIVE_ID=
+REACT_APP_MAINTENANCE_MODE=false
+REACT_APP_MAINTENANCE_TIMESTAMP=
diff --git a/packages/storage-ui/src/Components/Modules/LoginModule.tsx b/packages/storage-ui/src/Components/Modules/LoginModule.tsx
@@ -20,6 +20,7 @@ import { IdentityProvider } from "@chainsafe/files-api-client"
 import PasswordlessEmail from "./LoginModule/PasswordlessEmail"
 import { Form, FormikProvider, useFormik } from "formik"
 import { emailValidation } from "../../Utils/validationSchema"
+import dayjs from "dayjs"
 
 const useStyles = makeStyles(
   ({ constants, palette, breakpoints, typography }: CSSTheme) =>
@@ -150,6 +151,14 @@ const useStyles = makeStyles(
       },
       secondaryLoginText: {
         paddingTop: constants.generalUnit * 2
+      },
+      maintenanceMessage: {
+        display: "block",
+        textAlign: "justify",
+        width: 240
+      },
+      maintenanceActiveMessage: {
+        color: palette.error.main
       }
     })
 )
@@ -170,7 +179,7 @@ const LoginModule = ({ className }: IInitialScreen) => {
   const { storageApiClient } = useStorageApi()
   const [email, setEmail] = useState("")
   const [errorEmail, setErrorEmail] = useState("")
-
+  const maintenanceWindowTimestamp = Number(process.env.REACT_APP_MAINTENANCE_TIMESTAMP)
 
   const handleSelectWalletAndConnect = async () => {
     setError(undefined)
@@ -384,11 +393,6 @@ const LoginModule = ({ className }: IInitialScreen) => {
         loginMode !== "web3" && loginMode !== "email"
           ? <>
             <section className={classes.buttonSection}>
-              {maintenanceMode && (
-                <Typography>
-                  <Trans>The system is undergoing maintenance, thank you for being patient.</Trans>
-                </Typography>
-              )}
               <FormikProvider value={formik}>
                 <Form>
                   <FormikTextInput
@@ -457,6 +461,25 @@ const LoginModule = ({ className }: IInitialScreen) => {
                 <GoogleLogoIcon className="icon"/>
                 <Trans>Continue with Google</Trans>
               </Button>
+              {maintenanceMode && (
+                <Typography className={clsx(classes.maintenanceMessage, classes.maintenanceActiveMessage)}>
+                  <Trans>We are performing routine maintenance of the system. Service status updates will be posted on the{" "}
+                    <a href={ROUTE_LINKS.DiscordInvite}
+                      target="_blank"
+                      rel='noreferrer noopener'>Files Support Channel</a>{" "}
+                      on Discord
+                  </Trans>
+                </Typography>
+              )}
+              {!maintenanceMode && !!maintenanceWindowTimestamp && dayjs.unix(maintenanceWindowTimestamp).isAfter(dayjs()) && (
+                <Typography className={classes.maintenanceMessage}>
+                  <Trans>
+                    System maintenance is scheduled to start at{" "}
+                    {dayjs.unix(maintenanceWindowTimestamp).format("YYYY-MM-DD HH:mm")}.{" "}
+                    The system will be unavailable.
+                  </Trans>
+                </Typography>
+              )}
             </section>
             <footer className={classes.footer}>
               <a

diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx
@@ -21,7 +21,8 @@ export const ROUTE_LINKS = {
   Terms: "https://storage.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/",
   BucketRoot: "/bucket",
-  Bucket: (id: string, bucketPath: string) => `/bucket/${id}${bucketPath}`
+  Bucket: (id: string, bucketPath: string) => `/bucket/${id}${bucketPath}`,
+  DiscordInvite: "https://discord.gg/YYFqgHp4Tu"
 }
 
 const StorageRoutes = () => {

diff --git a/packages/storage-ui/src/locales/en/messages.po b/packages/storage-ui/src/locales/en/messages.po
@@ -337,6 +337,9 @@ msgstr "Start Upload"
 msgid "Status"
 msgstr "Status"
 
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr "System maintenance is scheduled to start at {0}. The system will be unavailable."
+
 msgid "Terms and Conditions"
 msgstr "Terms and Conditions"
 
@@ -349,9 +352,6 @@ msgstr "The files are already in this folder"
 msgid "The name cannot contain '/' character"
 msgstr "The name cannot contain '/' character"
 
-msgid "The system is undergoing maintenance, thank you for being patient."
-msgstr "The system is undergoing maintenance, thank you for being patient."
-
 msgid "There was an error authenticating"
 msgstr "There was an error authenticating"
 
@@ -406,6 +406,9 @@ msgstr "Verification code sent!"
 msgid "View folder"
 msgstr "View folder"
 
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+
 msgid "Web3: {0}"
 msgstr "Web3: {0}"