add basePath for image assets

brbcoding · brbcoding · commit 2ea65ae2e12c · 2025-04-22T11:24:52.000-05:00
diff --git a/src/app/components/ModalPopup/index.tsx b/src/app/components/ModalPopup/index.tsx
@@ -1,59 +1,60 @@
-import './index.scss';
+import "./index.scss";
 
-import { ReactNode, useEffect } from 'react';
-import ReactModal from 'react-modal';
+import { ReactNode, useEffect } from "react";
+import ReactModal from "react-modal";
 import Image from "next/image";
 
-
+import { useBasePath } from "@/app/utils/useBasePath";
 
 interface ModalPopupProps {
-    isOpen: boolean;
-    onClose: () => void;
-    children: ReactNode;
-    styles?: {
-        width?: string;
-        height?: string;
-    };
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  styles?: {
+    width?: string;
+    height?: string;
+  };
 }
 
 const ModalPopup = ({ isOpen, onClose, children, styles }: ModalPopupProps) => {
-    const parentId = "main-app";
-
-    const customStyles = {
-        overlay: {
-            backgroundColor: 'rgba(0, 0, 0, 0.6)',
-            zIndex: 1000,
-        },
-        content: {
-            padding: 0,
-            width: styles?.width || '80%',
-            height: styles?.height || '80%',
-            //to center the modal
-            inset: '0px',
-            margin: 'auto',
-        },
-    };
-
-    useEffect(() => {
-        ReactModal.setAppElement(`#${parentId}`);
-    }, []);
-
-    return (
-        <ReactModal
-            isOpen={isOpen}
-            onRequestClose={onClose}
-            style={customStyles}
-            parentSelector={() => document.getElementById(parentId) || document.body}
-        >
-            <div className="comp-modal-popup">
-                <div className="icon-close" onClick={onClose}>
-                    {/* <i className="fa fa-times"></i> */}
-                    <Image src="/icons/close.svg" alt="close" width={20} height={20} />
-                </div>
-                {children}
-            </div>
-        </ReactModal>
-    );
+  const parentId = "main-app";
+
+  const customStyles = {
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+      zIndex: 1000,
+    },
+    content: {
+      padding: 0,
+      width: styles?.width || "80%",
+      height: styles?.height || "80%",
+      //to center the modal
+      inset: "0px",
+      margin: "auto",
+    },
+  };
+
+  const closeSvg = useBasePath("/icons/close.svg");
+
+  useEffect(() => {
+    ReactModal.setAppElement(`#${parentId}`);
+  }, []);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      style={customStyles}
+      parentSelector={() => document.getElementById(parentId) || document.body}
+    >
+      <div className="comp-modal-popup">
+        <div className="icon-close" onClick={onClose}>
+          <Image src={closeSvg} alt="close" width={20} height={20} />
+        </div>
+        {children}
+      </div>
+    </ReactModal>
+  );
 };
 
-export default ModalPopup;
+export default ModalPopup;
diff --git a/src/app/page-components/PgCardPanel/PgCardHeader.tsx b/src/app/page-components/PgCardPanel/PgCardHeader.tsx
@@ -1,6 +1,7 @@
 import './PgCardHeader.scss';
 
 import { useState } from 'react';
+import { useBasePath } from "@/app/utils/useBasePath";
 
 import TooltipIcon from '../../components/TooltipIcon';
 import { TooltipIconType } from '../../components/TooltipIcon';
@@ -23,6 +24,7 @@ enum HeaderIcon {
 const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showCopyIcon, showSwitchViewIcon, handleIconClick }: PgCardHeaderProps) => {
 
     const [copied, setCopied] = useState(false);
+    const basePath = useBasePath;
 
     const handleClick = (icon: HeaderIcon) => {
         if (handleIconClick) {
@@ -45,21 +47,21 @@ const PgCardHeader = ({ headerTitle, infoIconContent, infoIconContentType, showC
                 {headerTitle}
 
                 {infoIconContent && (
-                    <TooltipIcon imgSrc="/icons/info.svg" imgWidth="0.875rem" imgHeight="0.875rem"
+                    <TooltipIcon imgSrc={basePath("/icons/info.svg")} imgWidth="0.875rem" imgHeight="0.875rem"
                         title={infoIconContent} titleType={infoIconContentType} />
                 )}
 
 
             </div>
             <div className="header-buttons">
-                {showSwitchViewIcon && <TooltipIcon imgSrc="/icons/columns.svg" imgWidth="1.25rem" imgHeight="1.25rem"
+                {showSwitchViewIcon && <TooltipIcon imgSrc={basePath("/icons/columns.svg")} imgWidth="1.25rem" imgHeight="1.25rem"
                     title="Switch View"
                     onClick={() => handleClick(HeaderIcon.switchView)}
                 />
                 }
 
                 {showCopyIcon &&
-                    (copied ? <TooltipIcon imgSrc="/icons/check.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc="/icons/copy.svg" imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
+                    (copied ? <TooltipIcon imgSrc={basePath("/icons/check.svg")} imgWidth="1.25rem" imgHeight="1.25rem" title="Copied" /> : <TooltipIcon imgSrc={basePath("/icons/copy.svg")} imgWidth="1.25rem" imgHeight="1.25rem" title="Copy" onClick={() => handleClick(HeaderIcon.copy)} />)}
 
             </div>
         </div>
diff --git a/src/app/page-components/PgMainHeader/index.tsx b/src/app/page-components/PgMainHeader/index.tsx
@@ -14,6 +14,7 @@ import { QueryResultFormat } from '@/app/constants';
 import { IconButtonType } from '@/app/components/IconButton';
 import Loader from "@/app/components/Loader";
 import { infoToast } from '@/app/utils/toast-util';
+import { useBasePath } from "@/app/utils/useBasePath";
 
 const logoImgPath = '/redis.png';
 const labels = {
@@ -97,7 +98,7 @@ const PgMainHeader = () => {
     } = usePlaygroundContext();
 
     const [isRunButtonDisabled, setIsRunButtonDisabled] = useState(false);
-
+    const basePath = useBasePath;
 
     const handleRunQuery = async () => {
         setQueryResponse(null);
@@ -197,7 +198,7 @@ const PgMainHeader = () => {
     return (
         <div className="pg-main-header-container">
             <div className="header-logo">
-                <Image src={logoImgPath} alt="logo" width={84} height={28} />
+                <Image src={basePath(logoImgPath)} alt="logo" width={84} height={28} />
             </div>
             <div className="header-right-container">
                 <div className="header-right-top">
@@ -206,15 +207,15 @@ const PgMainHeader = () => {
                     </div>
                     <div className="header-buttons">
                         <IconButton buttonLbl={labels.buttonRun}
-                            imgSrc='/icons/play.svg' imgWidth="1.5rem" imgHeight="1.5rem"
+                            imgSrc={basePath('/icons/play.svg')} imgWidth="1.5rem" imgHeight="1.5rem"
                             buttonCls="header-run-btn" onClick={handleRunQuery} buttonType={IconButtonType.SUCCESS} isDisabled={isRunButtonDisabled} />
                         <IconButton buttonLbl={labels.buttonReset}
-                            imgSrc='/icons/redo.svg' imgWidth="1.25rem" imgHeight="1.25rem"
-                            imgHoverSrc='/icons/redo-hover.svg'
+                            imgSrc={basePath('/icons/redo.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
+                            imgHoverSrc={basePath('/icons/redo-hover.svg')}
                             buttonCls="header-reset-btn" onClick={handleResetQuery} />
                         <IconButton buttonLbl={labels.buttonShare}
-                            imgSrc='/icons/arrow-up-right.svg' imgWidth="1.25rem" imgHeight="1.25rem"
-                            imgHoverSrc='/icons/arrow-up-right-hover.svg'
+                            imgSrc={basePath('/icons/arrow-up-right.svg')} imgWidth="1.25rem" imgHeight="1.25rem"
+                            imgHoverSrc={basePath('/icons/arrow-up-right-hover.svg')}
                             buttonCls="header-share-btn" onClick={handleShareQuery} />
                     </div>
                 </div>
diff --git a/src/app/page-components/PgQueryTemplate/index.tsx b/src/app/page-components/PgQueryTemplate/index.tsx
@@ -9,6 +9,7 @@ import { usePlaygroundContext } from "../PlaygroundContext";
 import Loader from "@/app/components/Loader";
 import ImageIcon from "@/app/components/ImageIcon";
 import TooltipIcon from '@/app/components/TooltipIcon';
+import { useBasePath } from "@/app/utils/useBasePath";
 
 interface IQueryTemplateProps {
     onClose?: () => void;
@@ -22,6 +23,7 @@ const highlightClassName = "pg-highlighted-text";
 
 const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
     const { setSelectedQuery, queryTemplateData, setQueryTemplateData, fnLoadQueryTemplateData } = usePlaygroundContext();
+    const basePath = useBasePath;
 
     const [filteredTemplateData, setFilteredTemplateData] = useState<IQueryTemplateData[]>(queryTemplateData);
     const [isShowLoader, setIsShowLoader] = useState(false);
@@ -105,10 +107,10 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
                 <div className="query-search-bar-container">
                     <div className="query-search-bar">
                         {/* <i className="fa fa-search"></i> */}
-                        <ImageIcon imgSrc="/icons/search.svg" alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
+                        <ImageIcon imgSrc={basePath("/icons/search.svg")} alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
                         <input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
                         {/* {searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>} */}
-                        {searchValue && <TooltipIcon imgSrc="/icons/close.svg" className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
+                        {searchValue && <TooltipIcon imgSrc={basePath("/icons/close.svg")} className='clear-icon' imgWidth="1rem" imgHeight="1rem" title="Clear" onClick={handleClearSearch} />}
                     </div>
                 </div>
                 <div className="query-sidebar-content">
@@ -117,7 +119,7 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
                             <div className="query-sidebar-item-label">
                                 {queryTmpl.category}
                             </div>
-                            <ImageIcon imgSrc="/icons/arrow-right-slim-red.svg" alt={queryTmpl.category} />
+                            <ImageIcon imgSrc={basePath("/icons/arrow-right-slim-red.svg")} alt={queryTmpl.category} />
                         </div>
 
                     ))}
diff --git a/src/app/page-components/PgSidebar/index.tsx b/src/app/page-components/PgSidebar/index.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { usePlaygroundContext } from "../PlaygroundContext";
 import ModalPopup from '@/app/components/ModalPopup';
 import ImageIcon from "@/app/components/ImageIcon";
+import { useBasePath } from "@/app/utils/useBasePath";
 
 import PgQueryTemplate from '../PgQueryTemplate';
 
@@ -17,32 +18,13 @@ const labels = {
     replayTour: "Replay Tour"
 }
 
-const linkItems = [
-    {
-        label: "Docs",
-        //icon: "fa fa-book", 
-        url: "https://redis.io/docs/latest/",
-        image: "/icons/profiler.svg"
-    },
-    {
-        label: "Redis University",
-        //icon: "fa fa-user-graduate",
-        url: "https://university.redis.io/",
-        image: "/icons/university.svg"
-    },
-    {
-        label: "Redis Cloud",
-        //icon: "fa fa-cloud",
-        url: "https://cloud.redis.io/",
-        image: "/icons/cloud-midnight.svg"
-    },
-]
-
 const PgSidebar = () => {
     const { selectedQuery, setSelectedQuery, fnGetSelectedQueryTemplate, runTour, setRunTour, fnSetTourCompleted } = usePlaygroundContext();
     const [selectedCategory, setSelectedCategory] = useState<IQueryTemplateData | null>(null);
     const [modalIsOpen, setModalIsOpen] = useState(false);
 
+    const basePath = useBasePath;
+
     useEffect(() => {
         if (selectedQuery) {
             const result = fnGetSelectedQueryTemplate();
@@ -60,6 +42,23 @@ const PgSidebar = () => {
         setRunTour(true);
     }
 
+    const linkItems = [
+        {
+            label: "Docs",
+            url: "https://redis.io/docs/latest/",
+            image: basePath("/icons/profiler.svg")
+        },
+        {
+            label: "Redis University",
+            url: "https://university.redis.io/",
+            image: basePath("/icons/university.svg")
+        },
+        {
+            label: "Redis Cloud",
+            url: "https://cloud.redis.io/",
+            image: basePath("/icons/cloud-midnight.svg")
+        },
+    ]
 
     return <div className="pg-sidebar">
 
@@ -69,8 +68,7 @@ const PgSidebar = () => {
             </div>
             <div className="pg-list-item anime-line-hover" onClick={() => setModalIsOpen(true)}>
                 <div className="pg-list-item-icon">
-                    {/* <i className="fa fa-arrows-up-down-left-right"></i> */}
-                    <ImageIcon imgSrc="/icons/move.svg" alt="move" imgWidth="1rem" imgHeight="1rem" />
+                    <ImageIcon imgSrc={basePath("/icons/move.svg")} alt="move" imgWidth="1rem" imgHeight="1rem" />
                 </div>
                 <div className="pg-list-item-label select-query-label">
                     {labels.selectQuery}
@@ -91,8 +89,7 @@ const PgSidebar = () => {
                                 onClick={() => handleQueryItemClick(item.queryId, selectedCategory?.categoryId)}>
 
                                 <div className="pg-list-item-icon">
-                                    {/* <i className="fa fa-arrow-right"></i> */}
-                                    <ImageIcon imgSrc="/icons/arrow-right-slim.svg" alt={item.label} imgWidth="1rem" imgHeight="1rem" />
+                                    <ImageIcon imgSrc={basePath("/icons/arrow-right-slim.svg")} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
                                 </div>
                                 <div className="pg-list-item-label">
                                     {item.label}
@@ -113,7 +110,6 @@ const PgSidebar = () => {
             {linkItems.map(item => (
                 <div className="pg-list-item anime-line-hover" key={item.label} onClick={() => window.open(item.url, '_blank', 'noopener,noreferrer')}>
                     <div className="pg-list-item-icon">
-                        {/* <i className={item.icon}></i> */}
                         <ImageIcon imgSrc={item.image} alt={item.label} imgWidth="1rem" imgHeight="1rem" />
                     </div>
                     <div className="pg-list-item-label" >
@@ -124,8 +120,7 @@ const PgSidebar = () => {
 
             <div className="pg-list-item anime-line-hover" key="replay-tour" onClick={handleReplayTourClick}>
                 <div className="pg-list-item-icon">
-                    {/* <i className="fa fa-rotate"></i> */}
-                    <ImageIcon imgSrc="/icons/refresh.svg" alt="rotate" imgWidth="1rem" imgHeight="1rem" />
+                    <ImageIcon imgSrc={basePath("/icons/refresh.svg")} alt="rotate" imgWidth="1rem" imgHeight="1rem" />
                 </div>
                 <div className="pg-list-item-label pg-replay-tour-lbl">
                     {labels.replayTour}
diff --git a/src/app/utils/useBasePath.ts b/src/app/utils/useBasePath.ts
@@ -0,0 +1,4 @@
+export function useBasePath(path: string) {
+  const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
+  return `${base}${path}`;
+}
