Maintenance banner - allow rotation (#3322)

Resolves #3313

Author: tom2drum

configs/app/ui.ts

@@ -42,6 +42,23 @@ const navigationPromoBanner = (() => {
   return envValue || undefined;
 })();
 
+const maintenanceAlertMessage = (() => {
+  const envValue = getEnvValue('NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE');
+  const parsedValue = envValue ? parseEnvJson<Array<string>>(envValue) : undefined;
+
+  if (!parsedValue || !Array.isArray(parsedValue)) {
+    return envValue;
+  }
+
+  if (parsedValue.length < 2) {
+    return parsedValue[0];
+  }
+
+  const index = Math.floor(Math.random() * parsedValue.length);
+
+  return parsedValue[index];
+})();
+
 const UI = Object.freeze({
   navigation: {
     logo: {
@@ -83,7 +100,7 @@ const UI = Object.freeze({
     },
   },
   maintenanceAlert: {
-    message: getEnvValue('NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE'),
+    message: maintenanceAlertMessage,
   },
   apiKeysAlert: {
     message: getEnvValue('NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE'),

configs/envs/.env.main

@@ -11,6 +11,7 @@ NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
 NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/homepage-highlights/test.json
 # NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER=dynamic
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=['<p>Launch your own fully functioning blockchain explorer in minutes. <a href=\\"https://deploy.blockscout.com/?utm_source=blockscout_ad\\">Deploy now</a></p>', '<p>The <b>super</b> duck!</p>']
 
 # Instance ENVs
 NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true

deploy/tools/envs-validator/schemas/ui.ts

@@ -211,7 +211,21 @@ export const miscSchema = yup.object({
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS: yup.boolean(),
     NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS: yup.boolean(),
     NEXT_PUBLIC_HIDE_NATIVE_COIN_PRICE: yup.boolean(),
-    NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup.string(),
+    NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE: yup
+    .mixed()
+    .test(
+      'shape',
+      'Invalid schema were provided for NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE, it should be either an array of strings or a string',
+      (data) => {
+        const isStringSchema = yup.string();
+        const isArrayOfStringsSchema = yup
+          .array()
+          .transform(replaceQuotes)
+          .json()
+          .of(yup.string());
+
+        return isStringSchema.isValidSync(data) || isArrayOfStringsSchema.isValidSync(data);
+      }),
     NEXT_PUBLIC_COLOR_THEME_DEFAULT: yup.string().oneOf(COLOR_THEME_IDS),
     NEXT_PUBLIC_COLOR_THEME_OVERRIDES: yup.object().transform(replaceQuotes).json(),
     NEXT_PUBLIC_FONT_FAMILY_HEADING: yup

deploy/tools/envs-validator/test/.env.alt

@@ -13,4 +13,5 @@ NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG={'img_url': {'small': 'https://exampl
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_ACCOUNT_API_KEYS_BUTTON=https://example.com
 NEXT_PUBLIC_ACCOUNT_AUTH_PROVIDER=dynamic
-NEXT_PUBLIC_ACCOUNT_DYNAMIC_ENVIRONMENT_ID=xxx
+NEXT_PUBLIC_ACCOUNT_DYNAMIC_ENVIRONMENT_ID=xxx
+NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE=['<a href=\"https://example.com\">Hello</a>','Duck me']

docs/ENVS.md

@@ -378,7 +378,7 @@ Settings for meta tags, OG tags and SEO
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS | `boolean` | Set to `true` to hide indexing alert in the page header about indexing chain's blocks | - | `false` | `true` | v1.17.0+ |
 | NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS | `boolean` | Set to `true` to hide indexing alert in the page footer about indexing block's internal transactions | - | `false` | `true` | v1.17.0+ |
 | NEXT_PUBLIC_HIDE_NATIVE_COIN_PRICE | `boolean` | Set to `true` to hide the native coin price in the top bar | - | `false` | `true` | v2.4.0+ |
-| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string` | Used for displaying custom announcements or alerts in the header of the site. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v1.13.0+ |
+| NEXT_PUBLIC_MAINTENANCE_ALERT_MESSAGE | `string \| Array<string>` | Used to display custom announcements or alerts in the site's header, this feature can handle a single instance or an array of regular strings or HTML code. If an array of instances is provided, the banners will rotate randomly each time the user reloads the page. In this case, please ensure that you properly escape the values of HTML attributes or other special symbols (for example, `<a href=\\"https://example.com\\">Link!</a>`). | - | - | `Hello world! 🤪` | v1.13.0+ |
 | NEXT_PUBLIC_API_KEYS_ALERT_MESSAGE | `string` | Used for displaying custom alerts on the API keys page. Could be a regular string or a HTML code. | - | - | `Hello world! 🤪` | v2.7.0+ |
 | NEXT_PUBLIC_COLOR_THEME_DEFAULT | `'light' \| 'dim' \| 'midnight' \| 'dark'` | Preferred color theme of the app | - | - | `midnight` | v1.30.0+ |
 | NEXT_PUBLIC_COLOR_THEME_OVERRIDES | `string` | Color overrides for the default theme; pass a JSON-like string that represents a subset of the `DEFAULT_THEME_COLORS` object (see `toolkit/theme/foundations/colors.ts`) to customize the app's main colors. See [here](https://www.figma.com/design/4In0X8UADoZaTfZ34HaZ3K/Blockscout-design-system?node-id=29124-23813&t=XOv4ahHUSsTDlNkN-4) the Figma worksheet with description of available color tokens. | - | - | `{'text':{'primary':{'_light':{'value':'rgba(16,17,18,0.80)'},'_dark':{'value':'rgba(222,217,217)'}}}}` | v2.3.0+ |