Product tour v1

frontend/src/App.css

@@ -415,4 +415,5 @@
 
 .enhancement-btn__wrapper{
   padding-right: 12px;
+  display: flex;
 }

frontend/src/Home.tsx

@@ -5,23 +5,27 @@ import QuickStarter from './components/QuickStarter';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { APP_SOURCES } from './utils/Constants';
 import ErrorBoundary from './components/UI/ErrroBoundary';
-import { Toaster } from '@neo4j-ndl/react';
+import { Toaster, SpotlightProvider } from '@neo4j-ndl/react';
 const Home: React.FC = () => {
   return (
     <>
       {APP_SOURCES != undefined && APP_SOURCES.includes('gcs') ? (
         <ErrorBoundary>
           <GoogleOAuthProvider clientId={process.env.VITE_GOOGLE_CLIENT_ID as string}>
             <ThemeWrapper>
-              <QuickStarter />
+              <SpotlightProvider>
+                <QuickStarter />
+              </SpotlightProvider>
               <Toaster />
             </ThemeWrapper>
           </GoogleOAuthProvider>
         </ErrorBoundary>
       ) : (
         <ErrorBoundary>
           <ThemeWrapper>
-            <QuickStarter />
+            <SpotlightProvider>
+              <QuickStarter />
+            </SpotlightProvider>
             <Toaster />
           </ThemeWrapper>
         </ErrorBoundary>

frontend/src/components/ChatBot/Chatbot.tsx

@@ -10,6 +10,7 @@ import {
   Flex,
   Box,
   TextLink,
+  SpotlightTarget,
 } from '@neo4j-ndl/react';
 import { ArrowDownTrayIconOutline, XMarkIconOutline } from '@neo4j-ndl/react/icons';
 import ChatBotAvatar from '../../assets/images/chatbot-ai.png';
@@ -560,17 +561,19 @@ const Chatbot: FC<ChatbotProps> = (props) => {
               name: 'chatbot-input',
             }}
           />
-          <ButtonWithToolTip
-            label='Q&A Button'
-            placement='top'
-            text={`Ask a question.`}
-            type='submit'
-            disabled={loading || !connectionStatus}
-            size='medium'
-          >
-            {buttonCaptions.ask}{' '}
-            {selectedFileNames != undefined && selectedFileNames.length > 0 && `(${selectedFileNames.length})`}
-          </ButtonWithToolTip>
+          <SpotlightTarget id='chatbtn' hasPulse={true} indicatorVariant='border'>
+            <ButtonWithToolTip
+              label='Q&A Button'
+              placement='top'
+              text={`Ask a question.`}
+              type='submit'
+              disabled={loading || !connectionStatus}
+              size='medium'
+            >
+              {buttonCaptions.ask}{' '}
+              {selectedFileNames != undefined && selectedFileNames.length > 0 && `(${selectedFileNames.length})`}
+            </ButtonWithToolTip>
+          </SpotlightTarget>
         </form>
       </div>
       <Suspense fallback={<FallBackDialog />}>

frontend/src/components/Content.tsx

@@ -1,6 +1,15 @@
 import { useEffect, useState, useMemo, useRef, Suspense, useReducer, useCallback, useContext } from 'react';
 import FileTable from './FileTable';
-import { Button, Typography, Flex, StatusIndicator, useMediaQuery, Menu } from '@neo4j-ndl/react';
+import {
+  Button,
+  Typography,
+  Flex,
+  StatusIndicator,
+  useMediaQuery,
+  Menu,
+  SpotlightTarget,
+  useSpotlightContext,
+} from '@neo4j-ndl/react';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import { extractAPI } from '../utils/FileAPI';
@@ -42,6 +51,7 @@ import { isExpired, isFileReadyToProcess } from '../utils/Utils';
 import { useHasSelections } from '../hooks/useHasSelections';
 import { ChevronUpIconOutline, ChevronDownIconOutline } from '@neo4j-ndl/react/icons';
 import { ThemeWrapperContext } from '../context/ThemeWrapper';
+import { useAuth0 } from '@auth0/auth0-react';
 
 const ConfirmationDialog = lazy(() => import('./Popups/LargeFilePopUp/ConfirmationDialog'));
 
@@ -75,7 +85,8 @@ const Content: React.FC<ContentProps> = ({
   const graphbtnRef = useRef<HTMLDivElement>(null);
   const chunksTextAbortController = useRef<AbortController>();
   const { colorMode } = useContext(ThemeWrapperContext);
-
+  const { isAuthenticated } = useAuth0();
+  const { setIsOpen } = useSpotlightContext();
   const [alertStateForRetry, setAlertStateForRetry] = useState<BannerAlertProps>({
     showAlert: false,
     alertType: 'neutral',
@@ -206,7 +217,14 @@ const Content: React.FC<ContentProps> = ({
     }
     afterFirstRender = true;
   }, [queue.items.length, userCredentials]);
-
+  const isFirstTimeUser = useMemo(() => {
+    return localStorage.getItem('neo4j.connection') === null;
+  }, []);
+  useEffect(() => {
+    if (!isAuthenticated && !connectionStatus && isFirstTimeUser) {
+      setIsOpen(true);
+    }
+  }, [connectionStatus, isAuthenticated, isFirstTimeUser]);
   const handleDropdownChange = (selectedOption: OptionType | null | void) => {
     if (selectedOption?.value) {
       setModel(selectedOption?.value);
@@ -919,13 +937,20 @@ const Content: React.FC<ContentProps> = ({
               Graph Enhancement
             </ButtonWithToolTip>
             {!connectionStatus ? (
-              <Button
-                size={isTablet ? 'small' : 'medium'}
-                className='mr-2!'
-                onClick={() => setOpenConnection((prev) => ({ ...prev, openPopUp: true }))}
+              <SpotlightTarget
+                id='connectbutton'
+                hasPulse={true}
+                indicatorVariant='border'
+                className='n-bg-palette-primary-bg-strong hover:n-bg-palette-primary-hover-strong'
               >
-                {buttonCaptions.connectToNeo4j}
-              </Button>
+                <Button
+                  size={isTablet ? 'small' : 'medium'}
+                  className='mr-2!'
+                  onClick={() => setOpenConnection((prev) => ({ ...prev, openPopUp: true }))}
+                >
+                  {buttonCaptions.connectToNeo4j}
+                </Button>
+              </SpotlightTarget>
             ) : (
               showDisconnectButton && (
                 <Button size={isTablet ? 'small' : 'medium'} className='mr-2.5' onClick={disconnect}>
@@ -975,18 +1000,21 @@ const Content: React.FC<ContentProps> = ({
             />
           </div>
           <Flex flexDirection='row' gap='4' className='self-end mb-2.5' flexWrap='wrap'>
-            <ButtonWithToolTip
-              text={tooltips.generateGraph}
-              placement='top'
-              label='generate graph'
-              onClick={onClickHandler}
-              disabled={disableCheck || isReadOnlyUser}
-              className='mr-0.5'
-              size={isTablet ? 'small' : 'medium'}
-            >
-              {buttonCaptions.generateGraph}{' '}
-              {selectedfileslength && !disableCheck && newFilecheck ? `(${newFilecheck})` : ''}
-            </ButtonWithToolTip>
+            <SpotlightTarget id='generategraphbtn'>
+              <ButtonWithToolTip
+                text={tooltips.generateGraph}
+                placement='top'
+                label='generate graph'
+                onClick={onClickHandler}
+                disabled={disableCheck || isReadOnlyUser}
+                className='mr-0.5'
+                size={isTablet ? 'small' : 'medium'}
+              >
+                {buttonCaptions.generateGraph}{' '}
+                {selectedfileslength && !disableCheck && newFilecheck ? `(${newFilecheck})` : ''}
+              </ButtonWithToolTip>
+            </SpotlightTarget>
+
             <ButtonWithToolTip
               text={
                 !selectedfileslength ? tooltips.deleteFile : `${selectedfileslength} ${tooltips.deleteSelectedFiles}`
@@ -1001,35 +1029,37 @@ const Content: React.FC<ContentProps> = ({
               {buttonCaptions.deleteFiles}
               {selectedfileslength != undefined && selectedfileslength > 0 && `(${selectedfileslength})`}
             </ButtonWithToolTip>
-            <Flex flexDirection='row' gap='0'>
-              <Button
-                onClick={handleGraphView}
-                isDisabled={showGraphCheck}
-                className='px-0! flex! items-center justify-between gap-4 graphbtn'
-                size={isTablet ? 'small' : 'medium'}
-              >
-                <span className='mx-2'>
-                  {buttonCaptions.showPreviewGraph}{' '}
-                  {selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
-                </span>
-              </Button>
-              <div
-                className={`ndl-icon-btn ndl-clean dropdownbtn ${colorMode === 'dark' ? 'darktheme' : ''} ${
-                  isTablet ? 'small' : 'medium'
-                }`}
-                onClick={(e) => {
-                  setIsGraphBtnMenuOpen((old) => !old);
-                  e.stopPropagation();
-                }}
-                ref={graphbtnRef}
-              >
-                {!isGraphBtnMenuOpen ? (
-                  <ChevronUpIconOutline className='n-size-token-5' />
-                ) : (
-                  <ChevronDownIconOutline className='n-size-token-' />
-                )}
-              </div>
-            </Flex>
+            <SpotlightTarget id='visualizegraphbtn'>
+              <Flex flexDirection='row' gap='0'>
+                <Button
+                  onClick={handleGraphView}
+                  isDisabled={showGraphCheck}
+                  className='px-0! flex! items-center justify-between gap-4 graphbtn'
+                  size={isTablet ? 'small' : 'medium'}
+                >
+                  <span className='mx-2'>
+                    {buttonCaptions.showPreviewGraph}{' '}
+                    {selectedfileslength && completedfileNo ? `(${completedfileNo})` : ''}
+                  </span>
+                </Button>
+                <div
+                  className={`ndl-icon-btn ndl-clean dropdownbtn ${colorMode === 'dark' ? 'darktheme' : ''} ${
+                    isTablet ? 'small' : 'medium'
+                  }`}
+                  onClick={(e) => {
+                    setIsGraphBtnMenuOpen((old) => !old);
+                    e.stopPropagation();
+                  }}
+                  ref={graphbtnRef}
+                >
+                  {!isGraphBtnMenuOpen ? (
+                    <ChevronUpIconOutline className='n-size-token-5' />
+                  ) : (
+                    <ChevronDownIconOutline className='n-size-token-' />
+                  )}
+                </div>
+              </Flex>
+            </SpotlightTarget>
 
             <Menu
               placement='top-end-bottom-end'

frontend/src/components/DataSources/AWS/S3Bucket.tsx

@@ -3,14 +3,15 @@ import s3logo from '../../../assets/images/s3logo.png';
 import CustomButton from '../../UI/CustomButton';
 import { buttonCaptions } from '../../../utils/Constants';
 
-const S3Component: React.FC<DataComponentProps> = ({ openModal, isLargeDesktop = true }) => {
+const S3Component: React.FC<DataComponentProps> = ({ openModal, isLargeDesktop = true, isDisabled = false }) => {
   return (
     <CustomButton
       title={isLargeDesktop ? buttonCaptions.amazon : ''}
       openModal={openModal}
       logo={s3logo}
       wrapperclassName=''
       className={!isLargeDesktop ? 'widthunset' : ''}
+      isDisabled={isDisabled}
     />
   );
 };

frontend/src/components/DataSources/GCS/GCSButton.tsx

@@ -2,14 +2,15 @@ import gcslogo from '../../../assets/images/gcs.webp';
 import { DataComponentProps } from '../../../types';
 import { buttonCaptions } from '../../../utils/Constants';
 import CustomButton from '../../UI/CustomButton';
-const GCSButton: React.FC<DataComponentProps> = ({ openModal, isLargeDesktop = true }) => {
+const GCSButton: React.FC<DataComponentProps> = ({ openModal, isLargeDesktop = true, isDisabled = false }) => {
   return (
     <CustomButton
       title={isLargeDesktop ? buttonCaptions.gcs : ''}
       openModal={openModal}
       logo={gcslogo}
       wrapperclassName=''
       className={!isLargeDesktop ? 'widthunset' : ''}
+      isDisabled={isDisabled}
     />
   );
 };