replay tour changes

Author: PrasanKumar93

src/app/common/css/theme-redis.scss

@@ -72,6 +72,7 @@
   --pg-sidebar-item-active-bg-clr: var(--gray-02);
 
   --pg-walkthrough-txt-clr: var(--midnight-base);
+  --pg-walkthrough-step-count-txt-clr: var(--gray-05);
 
   --pg-container-bg-clr: var(--white-base);
   --pg-container-txt-clr: var(--midnight-base);

src/app/page-components/PgCardPanel/PgCardHeader.scss

@@ -26,6 +26,7 @@
   i {
     cursor: pointer;
     color: var(--pg-card-header-icon-clr);
-    width: 16px;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 }

src/app/page-components/PgWalkthrough/index.scss

@@ -44,14 +44,8 @@
   opacity: 0.9;
 }
 
-.pg-joyride-content {
-  color: var(--pg-walkthrough-txt-clr);
-}
-
-.pg-joyride-footer {
-  margin-top: var(--space-16);
-  font-size: var(--font-size-12);
-  color: var(--color-gray);
+.react-joyride__tooltip button[data-action="close"] {
+  display: none;
 }
 
 .__floater[x-placement="top"] {
@@ -63,3 +57,33 @@
   /*to keep arrow closer to element*/
   margin-top: -15px;
 }
+
+/*--------------------------------*/
+
+.pg-joyride-tooltip {
+  .pg-joyride-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-16);
+
+    .pg-joyride-title {
+      font-size: var(--font-size-14);
+    }
+
+    .pg-joyride-step-count {
+      color: var(--pg-walkthrough-step-count-txt-clr);
+    }
+  }
+
+  .pg-joyride-content {
+    color: var(--pg-walkthrough-txt-clr);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: var(--space-8);
+  }
+  .pg-joyride-footer {
+    color: var(--pg-walkthrough-step-count-txt-clr);
+  }
+}

src/app/page-components/PgWalkthrough/index.tsx

@@ -32,6 +32,7 @@ const bottomCardConfig = {
     }
 };
 
+const keyboardHint = '(Use ← → arrow keys to navigate steps)';
 
 let steps: Step[] = [
     {
@@ -40,69 +41,118 @@ let steps: Step[] = [
         disableBeacon: true, //direct step open instead of beacon (dot)
         data: {
             //custom props
-            performClick: true
+            performClick: true,
+            title: 'Select query',
+            footer: keyboardHint
         }
     },
     {
         target: '.query-item:nth-child(1)',
         content: 'Click on any query to load it',
         data: {
-            performClick: true
+            performClick: true,
+            title: 'Select query'
         }
     },
     {
         target: '.pg-query-card',
         content: 'View and edit your Redis query here',
-        ...topCardConfig
+        ...topCardConfig,
+        data: {
+            title: 'Query editor'
+        }
     },
     {
         target: '.pg-db-index-card',
         content: 'View the corresponding index for your Redis query',
-        ...topCardConfig
+        ...topCardConfig,
+        data: {
+            title: 'DB Index view'
+        }
     },
     {
         target: '.pg-data-source-card',
         content: 'View the sample source data used by your Redis query',
-        ...bottomCardConfig
+        ...bottomCardConfig,
+        data: {
+            title: 'Data source view'
+        }
     },
     {
         target: '.header-run-btn',
         content: 'Execute your Redis query',
         data: {
-            performClick: true
+            performClick: true,
+            title: 'Run'
         }
     },
     {
         target: '.pg-result-card',
         content: 'View the query results here',
-        ...bottomCardConfig
+        ...bottomCardConfig,
+        data: {
+            title: 'Results view'
+        }
     },
     {
         target: '.header-share-btn',
         content: 'Share your Redis query using a generated URL',
+        data: {
+            title: 'Share'
+        }
     },
     {
         target: '.header-reset-btn',
         content: 'Reset your modified Redis query back to its default state',
+        data: {
+            title: 'Reset'
+        }
     },
     {
         target: '.pg-query-category .pg-list-item:last-child',
         content: 'Click on other related queries in the category to view them',
+        data: {
+            title: 'Related queries'
+        }
     },
     {
         target: '.pg-replay-tour-lbl',
         content: 'Replay this tour anytime to review the steps',
+        data: {
+            title: 'Replay tour'
+        }
     },
 
 ];
 
-const keyboardHint = '(Use ← → arrow keys to navigate steps)';
+const CustomTooltip = ({ title, content, footer, index, total }: { title: string, content: string, footer?: string, index: number, total: number }) => (
+    <div className='pg-joyride-tooltip'>
+        <div className='pg-joyride-header'>
+            <span className='pg-joyride-title font-medium'>{title}</span>
+
+            <span className='pg-joyride-step-count'>(Step {index} of {total})</span>
+
+        </div>
+        <div className='pg-joyride-content'>
+            {content}
+        </div>
+        <div className='pg-joyride-footer'>
+            {footer}
+        </div>
+    </div>
+);
+
 steps = steps.map((step, index) => ({
     ...step,
-    content: (<div className='pg-joyride-content'>
-        {step.content}
-        {index === 0 && <div className='pg-joyride-footer' dangerouslySetInnerHTML={{ __html: keyboardHint }} />}
-    </div>)
+    content: (
+        <CustomTooltip
+            title={step.data?.title || ''}
+            content={step.content as string}
+            footer={step.data?.footer || ""}
+            index={index + 1}
+            total={steps.length}
+        />
+    )
 }));
 
 const PgWalkthrough = () => {
@@ -182,7 +232,7 @@ const PgWalkthrough = () => {
             steps={steps}
             run={runTour}
             continuous={true}
-            showProgress={true}
+            showProgress={false}
             showSkipButton={true}
             stepIndex={stepIndex}
             callback={handleJoyrideCallback}