Merge pull request #168 from microbiomedata/issue-166-dev-warning-banner

Add dev site warning banner; display it on GH Pages site

.github/workflows/deploy.yml

@@ -36,6 +36,8 @@ jobs:
 
       - name: Build project
         run: npm run build -- --mode staging
+        env:
+          VITE_SHOW_DEV_SITE_WARNING: "true"
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

src/components/DevelopmentSiteWarning/DevelopmentSiteWarning.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import config from "../../config";
+import Banner from "../Banner/Banner";
+import { IonLabel } from "@ionic/react";
+
+const { SHOW_DEV_SITE_WARNING } = config;
+
+const DevelopmentSiteWarning: React.FC = () => {
+  if (!SHOW_DEV_SITE_WARNING) {
+    return null;
+  }
+
+  return (
+    <Banner color="warning">
+      <IonLabel className="ion-no-margin ion-text-center">
+        <b>Development Site</b> Do not enter any real data here.
+      </IonLabel>
+    </Banner>
+  );
+};
+
+export default DevelopmentSiteWarning;

src/components/ThemedToolbar/ThemedToolbar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { IonIcon, IonProgressBar, IonToolbar } from "@ionic/react";
 import { cloudOfflineOutline } from "ionicons/icons";
+import { useIsFetching, useIsMutating } from "@tanstack/react-query";
 import { useNetworkStatus } from "../../NetworkStatus";
+import DevelopmentSiteWarning from "../DevelopmentSiteWarning/DevelopmentSiteWarning";
 
 import classes from "./ThemedToolbar.module.css";
-import { useIsFetching, useIsMutating } from "@tanstack/react-query";
 
 interface ThemedToolbarProps extends React.ComponentProps<typeof IonToolbar> {}
 
@@ -24,6 +25,7 @@ const ThemedToolbar: React.FC<ThemedToolbarProps> = (props) => {
           </div>
         </IonToolbar>
       )}
+      <DevelopmentSiteWarning />
       <IonToolbar {...rest} className={classes.themedBackground}>
         {children}
       </IonToolbar>

src/config.ts

@@ -16,6 +16,7 @@ interface Config {
   APP_VERSION: typeof env.FIELD_NOTES_VERSION_NUMBER;
   APP_BUILD: typeof env.FIELD_NOTES_BUILD_NUMBER;
   NMDC_SERVER_API_URL: string;
+  SHOW_DEV_SITE_WARNING: boolean;
   SUPPORT_EMAIL: string;
 }
 
@@ -46,6 +47,11 @@ const config: Config = {
   NMDC_SERVER_API_URL:
     env.VITE_NMDC_SERVER_API_URL || "https://data-dev.microbiomedata.org",
 
+  /**
+   * Whether to show a warning that the user is on a development site.
+   */
+  SHOW_DEV_SITE_WARNING: env.VITE_SHOW_DEV_SITE_WARNING === "true",
+
   /**
    * Support email address.
    */

src/pages/WelcomePage/WelcomePage.tsx

@@ -13,12 +13,14 @@ import {
   IonCardTitle,
   IonAlert,
   useIonRouter,
+  IonHeader,
 } from "@ionic/react";
 import { logIn } from "ionicons/icons";
 import Logo from "../../components/Logo/Logo";
 import paths from "../../paths";
 import classes from "./WelcomePage.module.css";
 import { initiateLogin } from "../../auth";
+import DevelopmentSiteWarning from "../../components/DevelopmentSiteWarning/DevelopmentSiteWarning";
 
 const WelcomePage: React.FC = () => {
   const router = useIonRouter();
@@ -29,6 +31,9 @@ const WelcomePage: React.FC = () => {
 
   return (
     <IonPage>
+      <IonHeader>
+        <DevelopmentSiteWarning />
+      </IonHeader>
       <IonContent
         fullscreen
         className={`ion-padding ${classes.themedBackground}`}