feat: added explain new tab toast. (#135) (#1555)

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

frontend/src/common/hooks/useExplainNewTab.ts

@@ -0,0 +1,27 @@
+// Core dependencies
+import { Intent } from "@blueprintjs/core";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+// App dependencies
+import Toast from "src/views/Collection/components/Toast";
+
+/**
+ * Pop toast with given message if user has come from Explorer with work in progress.
+ * @param message - Text to display in toast.
+ */
+export function useExplainNewTab(message: string): void {
+  const router = useRouter();
+  const { explainNewTab } = router.query;
+  const { isReady } = router;
+
+  /* Check for explainNewTab query string param and pop toast if present. */
+  useEffect(() => {
+    // Query param with no value (e.g. explainNewTab in http://url.com/?explainNewTab) resolves to empty string.
+    if (isReady && explainNewTab === "") {
+      Toast.show({
+        intent: Intent.PRIMARY,
+        message,
+      });
+    }
+  }, [explainNewTab, isReady, message]);
+}

frontend/src/components/Collections/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { VISIBILITY_TYPE } from "src/common/entities";
+import { useExplainNewTab } from "src/common/hooks/useExplainNewTab";
 import { useCollections } from "src/common/queries/collections";
 import CreateCollection from "../CreateCollectionModal";
 import CollectionsGrid from "./components/Grid/components/CollectionsGrid";
@@ -8,6 +9,11 @@ import { TitleAndDescription, TitleWrapper } from "./style";
 const Collections: FC = () => {
   const { isFetching, data: collections } = useCollections();
 
+  /* Pop toast if user has come from Explorer with work in progress */
+  useExplainNewTab(
+    "To maintain your in-progress work on the previous dataset, we opened a new tab."
+  );
+
   if (isFetching && !collections) return <div>Loading collections...</div>;
 
   if (!collections) return <div>Sorry, we could not find any collections</div>;

frontend/src/views/Collection/index.tsx

@@ -6,6 +6,7 @@ import { FC, useEffect, useState } from "react";
 import { ACCESS_TYPE, VISIBILITY_TYPE } from "src/common/entities";
 import { get } from "src/common/featureFlags";
 import { FEATURES } from "src/common/featureFlags/features";
+import { useExplainNewTab } from "src/common/hooks/useExplainNewTab";
 import { BOOLEAN } from "src/common/localStorage/set";
 import {
   useCollection,
@@ -93,6 +94,11 @@ const Collection: FC = () => {
     });
   }, [tombstoned_dataset_id, collectionContactName]);
 
+  /* Pop toast if user has come from Explorer with work in progress */
+  useExplainNewTab(
+    "To maintain your in-progress work on the previous dataset, we opened this collection in a new tab."
+  );
+
   if (!collection || isError) {
     return null;
   }