Disable Lift export when Frontier is empty

src/components/ProjectExport/ExportButton.tsx

@@ -1,6 +1,6 @@
+import { Tooltip } from "@mui/material";
 import { ButtonProps } from "@mui/material/Button";
-import { enqueueSnackbar } from "notistack";
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { isFrontierNonempty } from "backend";
@@ -18,16 +18,11 @@ interface ExportButtonProps {
 /** A button for exporting project to Lift file */
 export default function ExportButton(props: ExportButtonProps): ReactElement {
   const dispatch = useAppDispatch();
+  const [exports, setExports] = useState(false);
   const { t } = useTranslation();
 
   async function exportProj(): Promise<void> {
-    await isFrontierNonempty(props.projectId).then(async (isNonempty) => {
-      if (isNonempty) {
-        await dispatch(asyncExportProject(props.projectId));
-      } else {
-        enqueueSnackbar(t("projectExport.cannotExportEmpty"));
-      }
-    });
+    await dispatch(asyncExportProject(props.projectId));
   }
 
   const exportResult = useAppSelector(
@@ -38,17 +33,28 @@ export default function ExportButton(props: ExportButtonProps): ReactElement {
     exportResult.status === ExportStatus.Success ||
     exportResult.status === ExportStatus.Downloading;
 
+  useEffect(() => {
+    const fetchNonempty = async (): Promise<void> => {
+      await isFrontierNonempty(props.projectId).then(setExports);
+    };
+    fetchNonempty().catch(console.error);
+  });
+
   return (
-    <LoadingButton
-      loading={loading}
-      disabled={loading}
-      buttonProps={{
-        ...props.buttonProps,
-        onClick: exportProj,
-        id: `project-${props.projectId}-export`,
-      }}
-    >
-      {t("buttons.export")}
-    </LoadingButton>
+    <Tooltip title={!exports ? t("projectExport.cannotExportEmpty") : ""}>
+      <span>
+        <LoadingButton
+          loading={loading}
+          disabled={loading || !exports}
+          buttonProps={{
+            ...props.buttonProps,
+            onClick: exportProj,
+            id: `project-${props.projectId}-export`,
+          }}
+        >
+          {t("buttons.export")}
+        </LoadingButton>
+      </span>
+    </Tooltip>
   );
 }

src/components/ProjectSettings/tests/index.test.tsx

@@ -34,6 +34,7 @@ jest.mock("backend", () => ({
   getAllUsers: () => Promise.resolve([]),
   getCurrentPermissions: () => mockGetCurrentPermissions(),
   getUserRoles: () => Promise.resolve([]),
+  isFrontierNonempty: () => Promise.resolve(false),
 }));
 jest.mock("components/Project/ProjectActions");
 // Mock "i18n", else `thrown: "Error: Error: connect ECONNREFUSED ::1:80 [...]`