Open a welcome dialog after user signed up (#11029)

Closes: enso-org/cloud-v2#1475

(cherry picked from commit ea0f5a1)

app/dashboard/src/components/AriaComponents/Dialog/DialogTrigger.tsx

@@ -5,6 +5,7 @@ import * as modalProvider from '#/providers/ModalProvider'
 
 import * as aria from '#/components/aria'
 
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { AnimatePresence, motion } from 'framer-motion'
 
 const PLACEHOLDER = <div />
@@ -26,30 +27,41 @@ export interface DialogTriggerProps extends Omit<aria.DialogTriggerProps, 'child
     React.ReactElement,
     React.ReactElement | ((props: DialogTriggerRenderProps) => React.ReactElement),
   ]
+  readonly onOpen?: () => void
+  readonly onClose?: () => void
 }
 
 /** A DialogTrigger opens a dialog when a trigger element is pressed. */
 export function DialogTrigger(props: DialogTriggerProps) {
-  const { children, onOpenChange, ...triggerProps } = props
+  const { children, onOpenChange, onOpen = () => {}, onClose = () => {}, ...triggerProps } = props
 
-  const [isOpened, setIsOpened] = React.useState(false)
+  const [isOpened, setIsOpened] = React.useState(
+    triggerProps.isOpen ?? triggerProps.defaultOpen ?? false,
+  )
   const { setModal, unsetModal } = modalProvider.useSetModal()
 
-  const onOpenChangeInternal = React.useCallback(
-    (opened: boolean) => {
-      if (opened) {
-        // We're using a placeholder here just to let the rest of the code know that the modal
-        // is open.
-        setModal(PLACEHOLDER)
-      } else {
-        unsetModal()
-      }
+  const onOpenStableCallback = useEventCallback(onOpen)
+  const onCloseStableCallback = useEventCallback(onClose)
 
-      setIsOpened(opened)
-      onOpenChange?.(opened)
-    },
-    [setModal, unsetModal, onOpenChange],
-  )
+  const onOpenChangeInternal = useEventCallback((opened: boolean) => {
+    if (opened) {
+      // We're using a placeholder here just to let the rest of the code know that the modal
+      // is open.
+      setModal(PLACEHOLDER)
+    } else {
+      unsetModal()
+      onCloseStableCallback()
+    }
+
+    setIsOpened(opened)
+    onOpenChange?.(opened)
+  })
+
+  React.useEffect(() => {
+    if (isOpened) {
+      onOpenStableCallback()
+    }
+  }, [isOpened, onOpenStableCallback])
 
   const renderProps = {
     isOpened,

app/dashboard/src/hooks/searchParamsStateHooks.ts

@@ -22,9 +22,20 @@ import * as safeJsonParse from '#/utilities/safeJsonParse'
  * The return type of the `useSearchParamsState` hook.
  */
 type SearchParamsStateReturnType<T> = Readonly<
-  [value: T, setValue: (nextValue: React.SetStateAction<T>) => void, clear: () => void]
+  [
+    value: T,
+    setValue: (nextValue: React.SetStateAction<T>, params?: SearchParamsSetOptions) => void,
+    clear: (replace?: boolean) => void,
+  ]
 >
 
+/**
+ * Set options for the `set` function.
+ */
+export interface SearchParamsSetOptions {
+  readonly replace?: boolean
+}
+
 // ============================
 // === useSearchParamsState ===
 // ============================
@@ -82,18 +93,22 @@ export function useSearchParamsState<T = unknown>(
    * @param nextValue - The next value to set.
    * @returns void
    */
-  const setValue = eventCallback.useEventCallback((nextValue: React.SetStateAction<T>) => {
-    if (nextValue instanceof Function) {
-      nextValue = nextValue(value)
-    }
-
-    if (nextValue === lazyDefaultValueInitializer()) {
-      clear()
-    } else {
-      searchParams.set(prefixedKey, JSON.stringify(nextValue))
-      setSearchParams(searchParams)
-    }
-  })
+  const setValue = eventCallback.useEventCallback(
+    (nextValue: React.SetStateAction<T>, params: SearchParamsSetOptions = {}) => {
+      const { replace = false } = params
+
+      if (nextValue instanceof Function) {
+        nextValue = nextValue(value)
+      }
+
+      if (nextValue === lazyDefaultValueInitializer()) {
+        clear()
+      } else {
+        searchParams.set(prefixedKey, JSON.stringify(nextValue))
+        setSearchParams(searchParams, { replace, preventScrollReset: true })
+      }
+    },
+  )
 
   return [value, setValue, clear]
 }

app/dashboard/src/layouts/DriveBar.tsx

@@ -16,6 +16,7 @@ import { Button, ButtonGroup, DialogTrigger, useVisualTooltip } from '#/componen
 import AssetEventType from '#/events/AssetEventType'
 import { useOffline } from '#/hooks/offlineHooks'
 import { createGetProjectDetailsQuery } from '#/hooks/projectHooks'
+import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
 import AssetSearchBar from '#/layouts/AssetSearchBar'
 import { useDispatchAssetEvent } from '#/layouts/AssetsTable/EventListProvider'
 import { isCloudCategory, type Category } from '#/layouts/CategorySwitcher/Category'
@@ -66,6 +67,12 @@ export default function DriveBar(props: DriveBarProps) {
   const { backend, query, setQuery, category } = props
   const { doEmptyTrash, doCreateProject, doCreateDirectory } = props
   const { doCreateSecret, doCreateDatalink, doUploadFiles } = props
+
+  const [startModalDefaultOpen, , resetStartModalDefaultOpen] = useSearchParamsState(
+    'startModalDefaultOpen',
+    false,
+  )
+
   const { unsetModal } = useSetModal()
   const { getText } = useText()
   const inputBindings = useInputBindings()
@@ -202,7 +209,12 @@ export default function DriveBar(props: DriveBarProps) {
             className="grow-0"
             {...createAssetsVisualTooltip.targetProps}
           >
-            <DialogTrigger>
+            <DialogTrigger
+              defaultOpen={startModalDefaultOpen}
+              onClose={() => {
+                resetStartModalDefaultOpen(true)
+              }}
+            >
               <Button
                 size="medium"
                 variant="accent"

app/dashboard/src/pages/authentication/Setup/Setup.tsx

@@ -354,7 +354,11 @@ const BASE_STEPS: Step[] = [
             iconPosition="end"
             onPress={() =>
               queryClient.invalidateQueries().then(() => {
-                navigate(DASHBOARD_PATH)
+                navigate(
+                  DASHBOARD_PATH +
+                    '?' +
+                    new URLSearchParams({ startModalDefaultOpen: 'true' }).toString(),
+                )
               })
             }
           >