feat(offline): Ensure offline UI displays for logged-in users

ie. replace the "Saved X secs ago" UI with the offline UI

Moved the OfflineBadge into a new component, so that it can be shared / used across both the SaveButton and the SaveStatus components

Author: grega

src/components/Mobile/MobileProjectBar/MobileProjectBar.jsx

@@ -1,17 +1,25 @@
 import "../../../assets/stylesheets/MobileProjectBar.scss";
 import SaveStatus from "../../SaveStatus/SaveStatus";
+import OfflineBadge from "../../OfflineBadge/OfflineBadge";
 import { useSelector } from "react-redux";
+import useIsOnline from "../../../hooks/useIsOnline";
 import React from "react";
 
 const MobileProjectBar = () => {
   const projectName = useSelector((state) => state.editor.project.name);
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
+  const offlineEnabled = useSelector((state) => state.editor.offlineEnabled);
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const isOnline = useIsOnline();
 
   return (
     <div className="mobile-project-bar">
       <p className="mobile-project-bar__name">{projectName}</p>
-      {lastSavedTime && !readOnly ? <SaveStatus isMobile={true} /> : null}
+      {!readOnly && (
+        offlineEnabled && !isOnline
+          ? <OfflineBadge />
+          : lastSavedTime && <SaveStatus isMobile={true} />
+      )}
     </div>
   );
 };

src/components/OfflineBadge/OfflineBadge.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import OfflineIcon from "../../assets/icons/offline.svg";
+
+const OfflineBadge = ({ className }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classNames(className, "offline-badge")}
+      tabIndex={0}
+      aria-describedby="offline-badge-tooltip"
+    >
+      <OfflineIcon />
+      <span>{t("header.offline")}</span>
+      <div
+        id="offline-badge-tooltip"
+        className="offline-badge__tooltip"
+        role="tooltip"
+      >
+        <p>{t("header.offlineTooltipDevice")}</p>
+        <p>{t("header.offlineTooltipContinue")}</p>
+      </div>
+    </div>
+  );
+};
+
+export default OfflineBadge;

src/components/ProjectBar/ProjectBar.jsx

@@ -2,10 +2,12 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import SaveStatus from "../SaveStatus/SaveStatus";
+import OfflineBadge from "../OfflineBadge/OfflineBadge";
 import DownloadIcon from "../../assets/icons/download.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
+import useIsOnline from "../../hooks/useIsOnline";
 
 import "../../assets/stylesheets/ProjectBar.scss";
 import { isOwner } from "../../utils/projectHelpers";
@@ -15,10 +17,11 @@ const ProjectBar = ({ nameEditable = true }) => {
   const project = useSelector((state) => state.editor.project);
   const user = useSelector((state) => state.auth.user);
   const loading = useSelector((state) => state.editor.loading);
-  const saving = useSelector((state) => state.editor.saving);
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
+  const offlineEnabled = useSelector((state) => state.editor.offlineEnabled);
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const isOnline = useIsOnline();
 
   if (loading !== "success") {
     return null;
@@ -41,8 +44,14 @@ const ProjectBar = ({ nameEditable = true }) => {
             <SaveButton className="project-bar__btn btn--save" />
           </div>
         )}
-        {lastSavedTime && user && !readOnly && (
-          <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
+        {user && !readOnly && (
+          offlineEnabled && !isOnline
+            ? projectOwner && (
+                <div className="project-bar__btn-wrapper">
+                  <OfflineBadge className="project-bar__btn" />
+                </div>
+              )
+            : lastSavedTime && <SaveStatus />
         )}
       </div>
     </div>

src/components/ProjectBar/ProjectBar.test.js

@@ -4,8 +4,10 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { MemoryRouter } from "react-router-dom";
 import ProjectBar from "./ProjectBar";
+import useIsOnline from "../../hooks/useIsOnline";
 
 jest.mock("axios");
+jest.mock("../../hooks/useIsOnline");
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
@@ -27,6 +29,10 @@ const user = {
   },
 };
 
+beforeEach(() => {
+  useIsOnline.mockReturnValue(true);
+});
+
 const renderProjectBar = (state) => {
   const middlewares = [];
   const mockStore = configureStore(middlewares);
@@ -184,6 +190,45 @@ describe("When no project loaded", () => {
   });
 });
 
+describe("offline badge", () => {
+  beforeEach(() => {
+    useIsOnline.mockReturnValue(false);
+  });
+
+  test("shows offline badge for project owner when offline", () => {
+    renderProjectBar({
+      editor: { project, offlineEnabled: true, lastSavedTime: Date.now() },
+      auth: { user },
+    });
+    expect(screen.queryByText("header.offline")).toBeInTheDocument();
+  });
+
+  test("shows offline badge for project owner on fresh load with no save history", () => {
+    renderProjectBar({
+      editor: { project, offlineEnabled: true },
+      auth: { user },
+    });
+    expect(screen.queryByText("header.offline")).toBeInTheDocument();
+  });
+
+  test("does not show a second offline badge for non-owners (SaveButton handles it)", () => {
+    const nonOwner = { ...user, profile: { user: "someone-else" } };
+    renderProjectBar({
+      editor: { project, offlineEnabled: true, lastSavedTime: Date.now() },
+      auth: { user: nonOwner },
+    });
+    expect(screen.queryAllByText("header.offline")).toHaveLength(1);
+  });
+
+  test("does not show offline badge when offlineEnabled is false", () => {
+    renderProjectBar({
+      editor: { project, offlineEnabled: false },
+      auth: { user },
+    });
+    expect(screen.queryByText("header.offline")).not.toBeInTheDocument();
+  });
+});
+
 describe("When read only", () => {
   beforeEach(() => {
     renderProjectBar({

src/components/SaveButton/SaveButton.jsx

@@ -7,8 +7,8 @@ import { logInEvent } from "../../events/WebComponentCustomEvents";
 import { isOwner } from "../../utils/projectHelpers";
 
 import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import OfflineBadge from "../OfflineBadge/OfflineBadge";
 import SaveIcon from "../../assets/icons/save.svg";
-import OfflineIcon from "../../assets/icons/offline.svg";
 import { triggerSave } from "../../redux/EditorSlice";
 import useIsOnline from "../../hooks/useIsOnline";
 
@@ -43,24 +43,7 @@ const SaveButton = ({ className, type, fill = false }) => {
   if (loading !== "success" || projectOwner || !buttonType) return null;
 
   if (offlineEnabled && !isOnline) {
-    return (
-      <div
-        className={classNames(className, "offline-badge")}
-        tabIndex={0}
-        aria-describedby="offline-badge-tooltip"
-      >
-        <OfflineIcon />
-        <span>{t("header.offline")}</span>
-        <div
-          id="offline-badge-tooltip"
-          className="offline-badge__tooltip"
-          role="tooltip"
-        >
-          <p>{t("header.offlineTooltipDevice")}</p>
-          <p>{t("header.offlineTooltipContinue")}</p>
-        </div>
-      </div>
-    );
+    return <OfflineBadge className={className} />;
   }
 
   return (

src/components/SaveStatus/SaveStatus.test.js

@@ -11,29 +11,24 @@ const project = {
 };
 
 let store;
-let saveStatus;
 
 describe("With a save button", () => {
   beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
+    store = configureStore([])({
       editor: {
         project: project,
         loading: "success",
         lastSavedTime: Date.now(),
       },
-    };
-    store = mockStore(initialState);
+    });
     render(
       <Provider store={store}>
         <SaveStatus />
       </Provider>,
     );
-    saveStatus = screen.queryByText("saveStatus.saved now");
   });
 
-  test("Renders save button", () => {
-    expect(saveStatus).toBeInTheDocument();
+  test("Renders save status", () => {
+    expect(screen.queryByText("saveStatus.saved now")).toBeInTheDocument();
   });
 });