Add global alert bar, dynamic webapp version warning

Author: SteveMicroNova

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 * Web App
   * Changed caching rules to ensure that users don't get stuck with old versions of the webapp post update
-
+  * Add warning for older versions of the webapp running on newer backends
 
 ## 0.4.10
 

NEW_RELEASE.md

@@ -31,7 +31,8 @@ This project follows [Semantic Versioning](https://semver.org/). Here are some e
 - [ ] Update the API by running `scripts/create_spec` script.
 - [ ] Create & merge a branch/PR off `main` to bump the version in the CHANGELOG and also using `poetry version ${VERSION}`
 - [ ] Checkout main & create a detached HEAD: `git checkout main; git pull; git checkout --detach`
-- [ ] Build the webapp in `web` with `npm run build` and force add the changes with `git add -f web/dist; git commit -m "Build web app for release"`
+- [ ] CD into `web`, Run `echo "VITE_BACKEND_VERSION=$(poetry version -s)" > .env`
+- [ ] Still in `web`, build the webapp with `npm run build` and force add the changes with `git add -f web/dist; git commit -m "Build web app for release"`
 - [ ] Tag the changes so we can make a release on GitHub: `git tag -as ${VERSION} -m '' && git push origin ${VERSION}`
 - [ ] Make a release using the GitHub interface
 - [ ] Use the AmpliPi updater to update to the release

scripts/deploy

@@ -159,6 +159,7 @@ poetry version ${git_info}
 echo "Building web app"
 pushd ../web            # Change to web directory
 npm install             # Install nodejs dependencies
+echo "VITE_BACKEND_VERSION=$(poetry version -s)" > .env # Collect the version number and bake it into the frontend
 npm run build           # Build the web app
 popd
 

web/src/App.jsx

@@ -13,6 +13,7 @@ import DisconnectedIcon from "./components/DisconnectedIcon/DisconnectedIcon";
 import Browse from "@/pages/Browse/Browse";
 
 import PropTypes from "prop-types";
+import AlertBar from "./components/StatusBars/AlertBar";
 
 // holds onto the selectedSource state so that it persists between refreshes
 export const usePersistentStore = create(
@@ -40,6 +41,7 @@ export const useStatusStore = create((set, get) => ({
     skipUpdate: false,
     loaded: false, // using this instead of (status === null) because it fixes the re-rendering issue
     disconnected: true,
+    alert: {"open": false, "text": ""},
     skipNextUpdate: () => {
         set({ skipUpdate: true });
     },
@@ -122,6 +124,9 @@ export const useStatusStore = create((set, get) => ({
             }
         });
     },
+    setAlert: (text) => {
+        set({alert: {"open": true, "text": text}});
+    },
 
     getSystemState: () => {
         fetch("/api")
@@ -133,6 +138,9 @@ export const useStatusStore = create((set, get) => ({
                             set({ skipUpdate: false });
                         } else {
                             set({ status: s, loaded: true, disconnected: false });
+                            if(s.info.version != import.meta.env.VITE_BACKEND_VERSION){
+                                set({alert: {"open": true, "text": "Frontend/backend version mismatch, please restart your app or refresh your browser cache or face potentially unpredictable consequences"}});
+                            }
                         }
                     });
                 } else if (res.status == 401) {
@@ -225,15 +233,19 @@ Page.propTypes = {
 };
 
 const App = ({ selectedPage }) => {
+    const alert = useStatusStore((s) => s.alert);
     return (
-            <div className="app">
+        <div className="app">
+            <div className="alert">
+                <AlertBar open={alert["open"]} text={alert["text"]} onClose={() => {alert["open"] == false;}}/>
+            </div>
             <DisconnectedIcon />
-            <div className="background-gradient"></div>  {/* Used to make sure the background doesn't stretch or stop prematurely on scrollable pages */}
-                <div className="app-body">
-                    <Page selectedPage={selectedPage} />
-                </div>
-                <MenuBar pageNumber={selectedPage} />
+            <div className="background-gradient">{/* Used to make sure the background doesn't stretch or stop prematurely on scrollable pages */}</div>
+            <div className="app-body">
+                <Page selectedPage={selectedPage} />
             </div>
+            <MenuBar pageNumber={selectedPage} />
+        </div>
     );
 };
 App.propTypes = {

web/src/App.scss

@@ -20,6 +20,14 @@
 }
 
 // unused
+.alert{
+  z-index: 2;
+  position: fixed;
+  // bottom: 5vh;
+  top: 0;
+  left: 0;
+}
+
 .app-container {
   display: flex;
   width: 100%;

web/src/components/CreateStreamModal/StreamModal/StreamModal.jsx

@@ -251,7 +251,6 @@ const StreamModal = ({ stream, onClose, apply, del }) => {
                     renderAnimationState={renderAlertAnimation}
                     open={hasError}
                     onClose={() => {setHasError(false);}}
-                    status={false}
                     text={errorMessage}
                 />
             }

web/src/components/StatusBars/AlertBar.jsx

@@ -7,7 +7,7 @@ import Alert from "@mui/material/Alert";
 export default function AlertBar(props) {
     const {
         open,
-        status,
+        success,
         text,
         onClose,
         renderAnimationState,
@@ -19,34 +19,37 @@ export default function AlertBar(props) {
         if(alertRef.current != null){
             const alertComp = alertRef.current;
             alertComp.classList.remove("error");
-            if(status == false){
+            if(!success){
                 alertComp.offsetWidth;
                 alertComp.classList.add("error");
             }
         }
-    }, [status, renderAnimationState]);
+    }, [success, renderAnimationState]);
 
-    if(open){
+    const [closedText, setClosedText] = React.useState(""); // If a user has closed a given message, don't show it again until another message tries to appear
+
+    if(open && text != closedText){
         return(
             <Alert
                 ref={alertRef}
-                onClose={onClose}
-                severity={status ? "success" : "error"}
+                onClose={() => {onClose(); setClosedText(text);}}
+                severity={success ? "success" : "error"}
                 variant="filled"
                 style={{width: "100%",}}
             >
                 {text}
             </Alert>
-        )
+        );
     }
-};
+}
 AlertBar.propTypes = {
     open: PropTypes.bool.isRequired,
-    status: PropTypes.bool.isRequired,
+    success: PropTypes.bool,
     text: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     renderAnimationState: PropTypes.number,
 };
 AlertBar.defaultProps = {
+    success: false,
     renderAnimationState: 1,
-}
+};

web/src/components/StatusBars/ResponseBar.jsx

@@ -41,7 +41,7 @@ export default function ResponseBar(props) {
     return(
         <StatusBar
             open={open}
-            status={success}
+            success={success}
             text={text.current}
             onClose={() => {setOpen(false);}}
         />

web/src/components/StatusBars/StatusBar.jsx

@@ -3,38 +3,50 @@ import PropTypes from "prop-types";
 import "./StatusBars.scss";
 import Snackbar from "@mui/material/Snackbar";
 
-import Alert from "@mui/material/Alert"
+import Alert from "@mui/material/Alert";
 
 export default function StatusBar(props) {
     const {
         open,
-        status,
+        success,
         text,
         onClose,
+        anchorOrigin,
+        autoHideDuration,
     } = props;
 
+    const [closedText, setClosedText] = React.useState(""); // If a user has closed a given message, don't show it again until another message tries to appear
+
     return(
         <Snackbar
             className="snackbar"
-            autoHideDuration={3000}
-            anchorOrigin={{vertical: "bottom", horizontal: "left"}}
-            open={open}
-            onClose={onClose}
+            autoHideDuration={autoHideDuration != 0 ? autoHideDuration : 999999999999999}
+            anchorOrigin={anchorOrigin}
+            open={open && closedText != text}
+            onClose={() => {onClose(); setClosedText(text);}}
         >
             <Alert // Cannot be AlertBar due to React rendering throwing errors despite it being the same thing
-                onClose={onClose}
-                severity={status ? "success" : "error"}
+                onClose={() => {onClose(); setClosedText(text);}}
+                severity={success ? "success" : "error"}
                 variant="filled"
                 style={{width: "100%"}}
             >
                 {text}
             </Alert>
         </Snackbar>
-    )
-};
+    );
+}
 StatusBar.propTypes = {
     open: PropTypes.bool.isRequired,
-    status: PropTypes.bool.isRequired,
+    success: PropTypes.bool,
     text: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
+    autoHideDuration: PropTypes.number,
+    anchorOrigin: PropTypes.object,
 };
+StatusBar.defaultProps = {
+    success: false,
+    autoHideDuration: 3000,
+    anchorOrigin: {vertical: "bottom", horizontal: "left"},
+};
+

web/src/pages/Browse/Browse.jsx

@@ -113,7 +113,6 @@ const Browse = () => {
             </List>
             <StatusBar
                 open={errorOpen}
-                status={false}
                 text={errorText.current}
                 onClose={()=>{setErrorOpen(false);}}
             />