[Feature] Guide users to download artifacts to target base

js/src/components/lineage/PreviewChangeView.tsx

@@ -37,6 +37,8 @@ import {
   trackPreviewChange,
   trackPreviewChangeFeedback,
 } from "@/lib/api/track";
+import { useGuideToast } from "@/lib/hooks/useGuideToast";
+import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag";
 
 interface PreviewChangeViewProps {
   isOpen: boolean;
@@ -52,15 +54,13 @@ function PreviewChangeTopBar({
   onRunResultOpen,
   runQuery,
   isPending,
-  feedbackToast,
 }: {
   current?: NodeData;
   primaryKeys: string[];
   setPrimaryKeys: (primaryKeys: string[]) => void;
   onRunResultOpen: () => void;
   runQuery: () => void;
   isPending: boolean;
-  feedbackToast: () => void;
 }) {
   return (
     <Flex
@@ -95,7 +95,6 @@ function PreviewChangeTopBar({
           onClick={() => {
             onRunResultOpen();
             runQuery();
-            setTimeout(() => feedbackToast(), 3000);
           }}
           colorScheme="blue"
           isLoading={isPending}
@@ -148,6 +147,7 @@ export function PreviewChangeView({
   );
   const { showRunId, clearRunResult } = useRecceActionContext();
   const { primaryKeys, setPrimaryKeys } = useRecceQueryContext();
+  const { data: flags, isLoading } = useRecceServerFlag();
 
   const queryFn = async () => {
     const sqlTemplate = modifiedCode;
@@ -165,6 +165,7 @@ export function PreviewChangeView({
 
     return await waitRun(run_id);
   };
+
   const { mutate: runQuery, isPending } = useMutation({
     mutationFn: queryFn,
     onSuccess(data, variables) {
@@ -180,9 +181,16 @@ export function PreviewChangeView({
           node: current?.name,
           status: "success",
         });
+        setTimeout(() => feedbackToast(), 1000);
+        setTimeout(() => {
+          if (!isLoading && flags?.single_env_onboarding) {
+            prepareEnvToast();
+          }
+        }, 2000);
       }
     },
   });
+
   const { feedbackToast, closeToast } = useFeedbackCollectionToast({
     feedbackId: localStorageKeys.previewChangeFeedbackID,
     description: "Enjoy preview change?",
@@ -210,6 +218,13 @@ export function PreviewChangeView({
     externalLinkText: "Give us feedback",
   });
 
+  const { guideToast: prepareEnvToast, closeGuideToast } = useGuideToast({
+    guideId: localStorageKeys.prepareEnvGuideID,
+    description: "Want to compare data changes with production data?",
+    externalLink: "https://datarecce.io/docs",
+    externalLinkText: "Learn how.",
+  });
+
   useEffect(() => {
     if (isOpen) {
       setModifiedCode(current?.raw_code || "");
@@ -225,6 +240,7 @@ export function PreviewChangeView({
         onRunResultClose();
         clearRunResult();
         closeToast();
+        closeGuideToast();
         trackPreviewChange({ action: "close", node: current?.name });
       }}
     >
@@ -276,7 +292,6 @@ export function PreviewChangeView({
                 onRunResultOpen={onRunResultOpen}
                 runQuery={runQuery}
                 isPending={isPending}
-                feedbackToast={feedbackToast}
               />
               <PreviewChangeEditorLabels height="32pxs" flex="0 0 auto" />
               <SqlPreview current={current} onChange={setModifiedCode} />
@@ -296,7 +311,9 @@ export function PreviewChangeView({
               icon={<VscFeedback />}
               variant={"ghost"}
               size={"md"}
-              onClick={() => feedbackToast(true)}
+              onClick={() => {
+                feedbackToast(true);
+              }}
             />
           </Tooltip>
         </Box>

js/src/lib/api/localStorageKeys.ts

@@ -3,4 +3,5 @@ const prefix = "recce-";
 export const localStorageKeys = {
   bypassSaveOverwrite: `${prefix}-bypass-save-overwrite`,
   previewChangeFeedbackID: `${prefix}-preview-change-feedback`,
+  prepareEnvGuideID: `${prefix}-prepare-env`,
 };

js/src/lib/hooks/useFeedbackCollectionToast.tsx

@@ -110,12 +110,12 @@ export function useFeedbackCollectionToast(options: {
                 description={description}
                 onLike={() => {
                   onFeedbackSubmit("like");
-                  toast.closeAll();
+                  onClose();
                   localStorage.setItem(feedbackId, "true");
                 }}
                 onDislike={() => {
                   onFeedbackSubmit("dislike");
-                  toast.closeAll();
+                  onClose();
                   localStorage.setItem(feedbackId, "true");
                 }}
                 externalLink={externalLink}
@@ -124,7 +124,11 @@ export function useFeedbackCollectionToast(options: {
                   onFeedbackSubmit("link");
                 }}
               />
-              <CloseButton onClick={onClose} />
+              <CloseButton
+                onClick={() => {
+                  onClose();
+                }}
+              />
             </HStack>
           </AlertDescription>
         </Alert>

js/src/lib/hooks/useGuideToast.tsx

@@ -0,0 +1,73 @@
+import {
+  useToast,
+  Alert,
+  AlertDescription,
+  Link,
+  HStack,
+  CloseButton,
+  Text,
+} from "@chakra-ui/react";
+
+export function useGuideToast(options: {
+  guideId: string;
+  description: string;
+  externalLink?: string;
+  externalLinkText?: string;
+}) {
+  const toast = useToast();
+  const { guideId, description, externalLink, externalLinkText } = options;
+
+  function guideToast() {
+    if (toast.isActive(guideId)) {
+      // Don't show the toast again if it's already active
+      return;
+    }
+
+    toast({
+      id: guideId,
+      position: "bottom-right",
+      duration: 3000,
+      description: "some text",
+      render: ({ id, onClose }) => (
+        <Alert
+          status="success"
+          variant="subtle"
+          zIndex={"toast"}
+          borderColor={"gray.200"}
+          borderWidth={3}
+          borderRadius={"md"}
+          backgroundColor={"white"}
+          opacity={1}
+        >
+          <AlertDescription fontSize="md">
+            <HStack>
+              <Text>
+                {description}{" "}
+                <Link
+                  textDecor="underline"
+                  isExternal
+                  href={externalLink}
+                  onClick={() => {
+                    onClose();
+                  }}
+                >
+                  {externalLinkText}
+                </Link>
+              </Text>
+              <CloseButton
+                onClick={() => {
+                  onClose();
+                }}
+              />
+            </HStack>
+          </AlertDescription>
+        </Alert>
+      ),
+    });
+  }
+
+  return {
+    guideToast: guideToast,
+    closeGuideToast: () => toast.closeAll(),
+  };
+}