From d944eff34c72a4bad3ee6b1a0dc727f6084bf284 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 11 Oct 2024 09:19:29 +0200
Subject: [PATCH] refactor: use splash api to store splash state (#8422)

To avoid showing the key concepts screen to users every time they log
back in to Unleash (after logging out), store the state in the DB splash
table.

The reason we need to do this is that we clear localstorage on logging
out, so things like splash screens and certain other settings don't get
stored.
---
 .../personalDashboard/PersonalDashboard.tsx     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 7487d08794..9d70acadce 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -36,6 +36,8 @@ import {
 import { ContentGridNoProjects } from './ContentGridNoProjects';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi';
+import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash';
 
 export const StyledCardTitle = styled('div')<{ lines?: number }>(
     ({ theme, lines = 2 }) => ({
@@ -265,6 +267,8 @@ const NoActiveFlagsInfo = styled('div')(({ theme }) => ({
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
     const { trackEvent } = usePlausibleTracker();
+    const { setSplashSeen } = useSplashApi();
+    const { splash } = useAuthSplash();
 
     const name = user?.name;
 
@@ -285,7 +289,10 @@ export const PersonalDashboard = () => {
 
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'open' | 'closed'
-    >('welcome-dialog:v1', 'open');
+    >(
+        'welcome-dialog:v1',
+        splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
+    );
 
     const { personalDashboardProjectDetails, error: detailsError } =
         usePersonalDashboardProjectDetails(activeProject);
@@ -299,9 +306,6 @@ export const PersonalDashboard = () => {
         !detailsError && activeProjectStage === 'loading',
     );
 
-    const [createFlagDialogOpen, setCreateFlagDialogOpen] =
-        React.useState(false);
-
     return (
         <MainContent>
             <WelcomeSection>
@@ -449,7 +453,10 @@ export const PersonalDashboard = () => {
             </SectionAccordion>
             <WelcomeDialog
                 open={welcomeDialog === 'open'}
-                onClose={() => setWelcomeDialog('closed')}
+                onClose={() => {
+                    setSplashSeen('personalDashboardKeyConcepts');
+                    setWelcomeDialog('closed');
+                }}
             />
         </MainContent>
     );