(gravitino) branch main updated: [#9996] web(UI): Add global tips to use web v2 (#9997)

[jshao]

This is an automated email from the ASF dual-hosted git repository.

jshao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/gravitino.git


The following commit(s) were added to refs/heads/main by this push:
     new dc8ea87c75 [#9996] web(UI): Add global tips to use web v2 (#9997)
dc8ea87c75 is described below

commit dc8ea87c75027878346750802a9cac458b136166
Author: Qian Xia <q...@datastrato.com>
AuthorDate: Thu Feb 26 13:49:19 2026 +0800

    [#9996] web(UI): Add global tips to use web v2 (#9997)
    
    ### What changes were proposed in this pull request?
    <img width="2808" height="1874" alt="image"
    
src="https://github.com/user-attachments/assets/fe323b7d-c12c-492f-80ca-f5c4fffcafeb";
    />
    
    
    ### Why are the changes needed?
    Add global tips to use web v2
    
    Fix: #9996
    
    ### Does this PR introduce _any_ user-facing change?
    N/A
    
    ### How was this patch tested?
    manually
    
    ---------
    
    Co-authored-by: Copilot <175728472+copi...@users.noreply.github.com>
---
 web/web/src/app/rootLayout/Layout.js | 62 +++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/web/web/src/app/rootLayout/Layout.js 
b/web/web/src/app/rootLayout/Layout.js
index a3a73155c2..c7dce2e5c4 100644
--- a/web/web/src/app/rootLayout/Layout.js
+++ b/web/web/src/app/rootLayout/Layout.js
@@ -19,7 +19,9 @@
 
 'use client'
 
-import { Box, Fab } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { Box, Fab, IconButton, Paper, Stack, Typography } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
 
 import Icon from '@/components/Icon'
 
@@ -34,10 +36,68 @@ const DynamicMainContent = dynamic(() => 
import('./MainContent'), {
   ssr: false
 })
 
+const WEB_V2_NOTICE_DISMISSED_KEY = 'gravitino:webV2NoticeDismissed'
+
 const Layout = ({ children, scrollToTop }) => {
+  const [showNotice, setShowNotice] = useState(true)
+
+  useEffect(() => {
+    try {
+      const dismissed = sessionStorage.getItem(WEB_V2_NOTICE_DISMISSED_KEY)
+      if (dismissed === 'true') {
+        setShowNotice(false)
+      }
+    } catch (error) {
+      // Ignore storage errors and keep default behavior.
+    }
+  }, [])
+
+  const handleDismissNotice = () => {
+    setShowNotice(false)
+    try {
+      sessionStorage.setItem(WEB_V2_NOTICE_DISMISSED_KEY, 'true')
+    } catch (error) {
+      // Ignore storage errors.
+    }
+  }
+
   return (
     <div className={'layout-wrapper twc-h-full twc-flex twc-overflow-clip'}>
       <Box className={'layout-content-wrapper twc-flex twc-grow 
twc-min-h-[100vh] twc-min-w-0 twc-flex-col'}>
+        {showNotice && (
+          <Box
+            sx={{
+              position: 'fixed',
+              top: 16,
+              right: 16,
+              zIndex: 1200,
+              maxWidth: 520
+            }}
+          >
+            <Paper variant='outlined' sx={{ p: 4, bgcolor: '#fff', boxShadow: 
'0 4px 12px rgba(0, 0, 0, 0.12)' }}>
+              <Stack direction='row' spacing={1.5} alignItems='flex-start'>
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant='body2' component='div'>
+                    <Box component='span' sx={{ fontWeight: 600 }}>
+                      Try the new V2 Web UI.
+                    </Box>
+                    <Box component='div' sx={{ fontFamily: 'monospace', mt: 1 
}}>
+                      # In &lt;path-to-gravitino&gt;/conf/gravitino-env.sh
+                      <br />
+                      GRAVITINO_USE_WEB_V2=true
+                    </Box>
+                    <Box component='div' sx={{ fontFamily: 'monospace', mt: 1 
}}>
+                      &lt;path-to-gravitino&gt;/bin/gravitino.sh restart
+                    </Box>
+                  </Typography>
+                </Box>
+                <IconButton aria-label='close notice' size='small' 
onClick={handleDismissNotice}>
+                  <CloseIcon fontSize='small' />
+                </IconButton>
+              </Stack>
+            </Paper>
+          </Box>
+        )}
         <Box
           className={
             'app-bar-bg-blur twc-top-0 twc-z-10 twc-w-full twc-fixed 
twc-backdrop-saturate-200 twc-backdrop-blur-[10px] twc-bg-customs-lightBg 
twc-h-[0.8125rem]'