From 2875071752c44d5a9773b2f28b5c552ea12b2ec3 Mon Sep 17 00:00:00 2001
From: CamronStaley <camron_staley@live.com>
Date: Wed, 30 Oct 2024 14:47:22 -0500
Subject: [PATCH] refactor qp toast to be used in teams

---
 .../app/src/pages/datasets/DatasetPage.tsx    |   3 +-
 .../src/components/QueryPerformanceToast.tsx  | 128 ++++++++++++++++++
 app/packages/core/src/components/index.ts     |   1 +
 3 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 app/packages/core/src/components/QueryPerformanceToast.tsx

diff --git a/app/packages/app/src/pages/datasets/DatasetPage.tsx b/app/packages/app/src/pages/datasets/DatasetPage.tsx
index 0632e90948..15bcdd5cd7 100644
--- a/app/packages/app/src/pages/datasets/DatasetPage.tsx
+++ b/app/packages/app/src/pages/datasets/DatasetPage.tsx
@@ -1,4 +1,4 @@
-import { Dataset, Snackbar, Starter } from "@fiftyone/core";
+import { Dataset, Snackbar, Starter, QueryPerformanceToast } from "@fiftyone/core";
 import "@fiftyone/embeddings";
 import "@fiftyone/map";
 import { OperatorCore } from "@fiftyone/operators";
@@ -10,7 +10,6 @@ import { usePreloadedQuery } from "react-relay";
 import { useRecoilValue } from "recoil";
 import { graphql } from "relay-runtime";
 import Nav from "../../components/Nav";
-import QueryPerformanceToast from "../../components/QueryPerformanceToast";
 import type { Route } from "../../routing";
 import style from "../index.module.css";
 import type { DatasetPageQuery } from "./__generated__/DatasetPageQuery.graphql";
diff --git a/app/packages/core/src/components/QueryPerformanceToast.tsx b/app/packages/core/src/components/QueryPerformanceToast.tsx
new file mode 100644
index 0000000000..71ccb54044
--- /dev/null
+++ b/app/packages/core/src/components/QueryPerformanceToast.tsx
@@ -0,0 +1,128 @@
+import { Toast } from "@fiftyone/components";
+import { QP_MODE } from "@fiftyone/core";
+import { getBrowserStorageEffectForKey } from "@fiftyone/state";
+import { Box, Button, Typography } from "@mui/material";
+import { Bolt } from "@mui/icons-material";
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { atom, useRecoilState } from "recoil";
+import { useTheme } from "@fiftyone/components";
+
+const SHOWN_FOR = 5000;
+
+const hideQueryPerformanceToast = atom({
+  key: "hideQueryPerformanceToast",
+  default: false,
+  effects: [
+    getBrowserStorageEffectForKey("hideQueryPerformanceToast", {
+      valueClass: "boolean",
+    }),
+  ],
+});
+
+const QueryPerformanceToast = () => {
+  const [shown, setShown] = useState(false);
+  const [disabled, setDisabled] = useRecoilState(hideQueryPerformanceToast);
+  const element = document.getElementById("queryPerformance");
+  const theme = useTheme();
+  useEffect(() => {
+    const listen = () => {
+      setShown(true);
+    };
+    window.addEventListener("queryperformance", listen);
+    return () => window.removeEventListener("queryperformance", listen);
+  }, []);
+
+  if (!element) {
+    throw new Error("no query performance element");
+  }
+
+  if (!shown || disabled) {
+    return null;
+  }
+
+  return createPortal(
+    <Toast
+      duration={SHOWN_FOR}
+      layout={{
+        bottom: "100px",
+        vertical: "bottom",
+        horizontal: "center",
+        backgroundColor: theme.custom.toastBackgroundColor,
+      }}
+      primary={(setOpen) => {
+        return (
+          <Button
+            variant="contained"
+            size="small"
+            onClick={() => {
+              open(QP_MODE, "_blank")?.focus();
+              setOpen(false);
+            }}
+            sx={{
+              marginLeft: "auto",
+              backgroundColor: theme.primary.main,
+              color: theme.text.primary,
+              boxShadow: 0,
+            }} // Right align the button
+          >
+            View Documentation
+          </Button>
+        );
+      }}
+      secondary={(setOpen) => {
+        return (
+          <div>
+            <Button
+              variant="text"
+              color="secondary"
+              size="small"
+              onClick={() => {
+                setDisabled(true);
+                setOpen(false);
+              }}
+              style={{ marginLeft: "auto", color: theme.text.secondary }} // Right align the button
+            >
+              Dismiss
+            </Button>
+          </div>
+        );
+      }}
+      message={
+        <>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <Bolt sx={{ color: theme.custom.lightning, marginRight: "8px" }} />
+            <Typography
+              variant="subtitle1"
+              sx={{
+                fontWeight: 500,
+                marginRight: "8px",
+                color: theme.text.primary,
+              }}
+            >
+              Query Performance is Available!
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: theme.custom.lightning,
+                borderRadius: "2px",
+                padding: "2px 4px",
+                fontSize: "1rem",
+              }}
+            >
+              NEW
+            </Typography>
+          </Box>
+          <Typography variant="body2" sx={{ color: theme.text.secondary }}>
+            Index the most critical fields for faster data loading and query
+            performance.
+          </Typography>
+        </>
+      }
+    />,
+    element
+  );
+};
+
+export default QueryPerformanceToast;
diff --git a/app/packages/core/src/components/index.ts b/app/packages/core/src/components/index.ts
index 8fa3f57525..d2d2d914e8 100644
--- a/app/packages/core/src/components/index.ts
+++ b/app/packages/core/src/components/index.ts
@@ -9,3 +9,4 @@ export * from "./Sidebar";
 export { default as Snackbar } from "./Snackbar";
 export { default as ViewBar, rollbackViewBar } from "./ViewBar/ViewBar";
 export * from "./Starter";
+export { default as QueryPerformanceToast } from "./QueryPerformanceToast";