feat(frontend): prepare api base url for submodule

web/src/App.tsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/react';
 import {HistoryRouter} from 'redux-first-history/rr6';
 
+import DashboardWrapper from 'components/DashboardWrapper/DashboardWrapper';
 import ErrorBoundary from 'components/ErrorBoundary';
 import {theme} from 'constants/Theme.constants';
 import {ReduxWrapperProvider} from 'redux/ReduxWrapperProvider';
@@ -12,18 +13,18 @@ import BaseApp from './BaseApp';
 
 const serverPathPrefix = Env.get('serverPathPrefix');
 
-const App = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
-        <ReduxWrapperProvider>
-          <HistoryRouter history={history} basename={serverPathPrefix}>
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
+      <ReduxWrapperProvider>
+        <HistoryRouter history={history} basename={serverPathPrefix}>
+          <DashboardWrapper>
             <BaseApp />
-          </HistoryRouter>
-        </ReduxWrapperProvider>
-      </Sentry.ErrorBoundary>
-    </ThemeProvider>
-  );
-};
+          </DashboardWrapper>
+        </HistoryRouter>
+      </ReduxWrapperProvider>
+    </Sentry.ErrorBoundary>
+  </ThemeProvider>
+);
 
 export default App;

web/src/components/AnalyzerResult/AnalyzerResult.tsx

@@ -1,5 +1,5 @@
-import {Link} from 'react-router-dom';
 import BetaBadge from 'components/BetaBadge/BetaBadge';
+import Link from 'components/Link';
 import {DISCORD_URL, OCTOLIINT_ISSUE_URL} from 'constants/Common.constants';
 import LinterResult from 'models/LinterResult.model';
 import Trace from 'models/Trace.model';

web/src/components/AnalyzerResult/Empty.tsx

@@ -1,5 +1,5 @@
 import {Button} from 'antd';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import * as S from './AnalyzerResult.styled';
 
 const Empty = () => {

web/src/components/DashboardWrapper/DashboardWrapper.tsx

@@ -0,0 +1,16 @@
+import {useMemo} from 'react';
+import {useNavigate} from 'react-router-dom';
+import DashboardProvider from 'providers/Dashboard';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const DashboardWrapper = ({children}: IProps) => {
+  const navigate = useNavigate();
+  const dashboardProviderValue = useMemo(() => ({baseUrl: '', navigate}), [navigate]);
+
+  return <DashboardProvider value={dashboardProviderValue}>{children}</DashboardProvider>;
+};
+
+export default DashboardWrapper;

web/src/components/DashboardWrapper/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './DashboardWrapper';

web/src/components/Editor/hooks/useTooltip.ts

@@ -1,6 +1,6 @@
 import {useCallback, useState} from 'react';
 import {TResolveExpressionContext, TResolveRequestInfo} from 'types/Expression.types';
-import {useParseExpressionMutation} from 'redux/apis/TraceTest.api';
+import {useParseExpressionMutation} from 'redux/apis/Tracetest';
 
 const useTooltip = (context: TResolveExpressionContext = {}) => {
   const [parseExpressionMutation, {isLoading}] = useParseExpressionMutation();

web/src/components/Header/Header.tsx

@@ -1,8 +1,8 @@
 import {Space} from 'antd';
-import {Link} from 'react-router-dom';
 
 import Logo from 'assets/Logo.svg';
 import EnvironmentSelector from 'components/EnvironmentSelector';
+import Link from 'components/Link';
 import NoTracingPopover from 'components/NoTracingPopover';
 import * as S from './Header.styled';
 import HelpMenu from './HelpMenu';

web/src/components/Layout/Layout.tsx

@@ -1,11 +1,12 @@
 import {ClusterOutlined, GlobalOutlined, SettingOutlined} from '@ant-design/icons';
 import {Menu} from 'antd';
 import React from 'react';
-import {Link, useLocation} from 'react-router-dom';
+import {useLocation} from 'react-router-dom';
 
 import logoAsset from 'assets/logo-white.svg';
 import FileViewerModalProvider from 'components/FileViewerModal/FileViewerModal.provider';
 import Header from 'components/Header';
+import Link from 'components/Link';
 import useRouterSync from 'hooks/useRouterSync';
 import ConfirmationModalProvider from 'providers/ConfirmationModal';
 import EnvironmentProvider from 'providers/Environment';

web/src/components/Link/Link.tsx

@@ -0,0 +1,23 @@
+import {Link as RRLink, LinkProps} from 'react-router-dom';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
+
+export interface IProps extends LinkProps {}
+
+const Link = ({to, className, children, ...rest}: IProps) => {
+  const {baseUrl} = useDashboard();
+
+  let prefixedTo = to;
+  if (typeof to === 'string') {
+    prefixedTo = `${baseUrl}${to}`;
+  } else if (typeof to === 'object') {
+    prefixedTo = {...to, pathname: `${baseUrl}${to.pathname}`};
+  }
+
+  return (
+    <RRLink to={prefixedTo} className={className} {...rest}>
+      {children}
+    </RRLink>
+  );
+};
+
+export default Link;

web/src/components/Link/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Link';

web/src/components/MissingVariablesModal/TestVariablesInput/TestVariableEntry.tsx

@@ -1,6 +1,6 @@
 import {Input, Popover} from 'antd';
 import {useMemo} from 'react';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import {TTestVariablesMap} from 'types/Variables.types';
 import VariablesService from 'services/Variables.service';
 import * as S from '../MissingVariablesModal.styled';

web/src/components/NoTracingPopover/NoTracingPopover.tsx

@@ -1,6 +1,6 @@
 import {Button, Popover} from 'antd';
 import {useMemo} from 'react';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import * as S from './NoTracingPopover.styled';
 
 const NoTracingPopover = () => {

web/src/components/Pagination/Pagination.tsx

@@ -1,8 +1,7 @@
 import {Pagination as PG} from 'antd';
-import {useNavigate} from 'react-router-dom';
 import {ReactNode, useCallback, useEffect} from 'react';
 import {IPagination} from 'hooks/usePagination';
-
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import * as S from './Pagination.styled';
 
 interface IProps<T> extends IPagination<T> {
@@ -26,7 +25,7 @@ const Pagination = <T extends any>({
   take,
   loadPage,
 }: IProps<T>) => {
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const handleNextPage = useCallback(() => {
     if (isLoading || !hasNext) return;
     loadNext();

web/src/components/ResourceCard/TestCard.tsx

@@ -1,7 +1,7 @@
 import {DownOutlined, RightOutlined} from '@ant-design/icons';
 import {useMemo} from 'react';
 import TestRunCard from 'components/RunCard/TestRunCard';
-import {useLazyGetRunListQuery} from 'redux/apis/TraceTest.api';
+import {useLazyGetRunListQuery} from 'redux/apis/Tracetest';
 import {ResourceType} from 'types/Resource.type';
 import Test from 'models/Test.model';
 import TestRun from 'models/TestRun.model';

web/src/components/ResourceCard/TransactionCard.tsx

@@ -2,7 +2,7 @@ import {DownOutlined, RightOutlined} from '@ant-design/icons';
 import {useMemo} from 'react';
 
 import TransactionRunCard from 'components/RunCard/TransactionRunCard';
-import {useLazyGetTransactionRunsQuery} from 'redux/apis/TraceTest.api';
+import {useLazyGetTransactionRunsQuery} from 'redux/apis/Tracetest';
 import {ResourceType} from 'types/Resource.type';
 import Transaction from 'models/Transaction.model';
 import TransactionRun from 'models/TransactionRun.model';

web/src/components/RunActionsMenu/RunActionsMenu.tsx

@@ -1,8 +1,8 @@
 import {Dropdown, Menu} from 'antd';
-import {useNavigate} from 'react-router-dom';
 
 import {useFileViewerModal} from 'components/FileViewerModal/FileViewerModal.provider';
 import useDeleteResourceRun from 'hooks/useDeleteResourceRun';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import {ResourceType} from 'types/Resource.type';
 import * as S from './RunActionsMenu.styled';
@@ -17,7 +17,7 @@ interface IProps {
 
 const RunActionsMenu = ({resultId, testId, transactionId, transactionRunId, isRunView = false}: IProps) => {
   const {onJUnit} = useFileViewerModal();
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const onDelete = useDeleteResourceRun({id: testId, isRunView, type: ResourceType.Test});
 
   return (

web/src/components/RunCard/TestRunCard.tsx

@@ -1,9 +1,10 @@
 import {Tooltip} from 'antd';
-import {Link, useNavigate} from 'react-router-dom';
 import AnalyzerScore from 'components/AnalyzerScore';
+import Link from 'components/Link';
 import RunActionsMenu from 'components/RunActionsMenu';
 import TestState from 'components/TestState';
 import TestRun, {isRunStateFinished} from 'models/TestRun.model';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import Date from 'utils/Date';
 import * as S from './RunCard.styled';
 import RunStatusIcon from '../RunStatusIcon';
@@ -35,7 +36,7 @@ const TestRunCard = ({
   testId,
   linkTo,
 }: IProps) => {
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const metadataName = metadata?.name;
   const metadataBuildNumber = metadata?.buildNumber;
   const metadataBranch = metadata?.branch;

web/src/components/RunCard/TransactionRunCard.tsx

@@ -1,5 +1,5 @@
 import {Tooltip} from 'antd';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import TestState from 'components/TestState';
 import TransactionRunActionsMenu from 'components/TransactionRunActionsMenu';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';

web/src/components/RunDetailLayout/HeaderLeft.tsx

@@ -1,7 +1,6 @@
-import {useNavigate} from 'react-router-dom';
-import {useMemo} from 'react';
 import {LinkOutlined} from '@ant-design/icons';
-
+import {useMemo} from 'react';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import Date from 'utils/Date';
 import Info from './Info';
@@ -16,7 +15,7 @@ const HeaderLeft = ({name, triggerType}: IProps) => {
   const {run: {createdAt, transactionId, transactionRunId, executionTime, trace, traceId, testVersion} = {}, run} =
     useTestRun();
   const createdTimeAgo = Date.getTimeAgo(createdAt ?? '');
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
 
   const description = useMemo(() => {
     return (

web/src/components/RunDetailLayout/RunDetailLayout.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import {Typography} from 'antd';
 import {LeftOutlined} from '@ant-design/icons';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 
 export const BackIcon = styled(LeftOutlined)`
   cursor: pointer;

web/src/components/RunDetailTrace/Search.tsx

@@ -6,7 +6,7 @@ import {useCallback, useMemo, useState} from 'react';
 import Editor from 'components/Editor';
 import {SupportedEditors} from 'constants/Editor.constants';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
-import {useLazyGetSelectedSpansQuery} from 'redux/apis/TraceTest.api';
+import {useLazyGetSelectedSpansQuery} from 'redux/apis/Tracetest';
 import {useAppDispatch, useAppSelector} from 'redux/hooks';
 import {matchSpans, selectSpan, setSearchText} from 'redux/slices/Trace.slice';
 import TraceSelectors from 'selectors/Trace.selectors';

web/src/components/RunDetailTrace/SpanDetailsPanel.tsx

@@ -1,8 +1,8 @@
-import {useNavigate} from 'react-router-dom';
 import {useCallback} from 'react';
 import {useAppSelector} from 'redux/hooks';
 import SpanDetail, {TraceAttributeRow, TraceSubHeader} from 'components/SpanDetail';
 import TestRun from 'models/TestRun.model';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import SpanSelectors from 'selectors/Span.selectors';
 import TraceSelectors from 'selectors/Trace.selectors';
 import {LeftPanel, PanelContainer} from '../ResizablePanels';
@@ -21,7 +21,7 @@ const panel = {
 const SpanDetailsPanel = ({run, testId}: IProps) => {
   const searchText = useAppSelector(TraceSelectors.selectSearchText);
   const selectedSpan = useAppSelector(TraceSelectors.selectSelectedSpan);
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const span = useAppSelector(state => SpanSelectors.selectSpanById(state, selectedSpan, testId, run.id));
 
   const handleOnCreateSpec = useCallback(() => {

web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx

@@ -1,14 +1,14 @@
 import {Divider, Space, Tabs} from 'antd';
 import {useCallback} from 'react';
-import {useNavigate, useSearchParams} from 'react-router-dom';
-
+import {useSearchParams} from 'react-router-dom';
 import AttributeActions from 'components/AttributeActions';
 import {StepsID} from 'components/GuidedTour/testRunSteps';
 import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider';
 import {CompareOperatorSymbolMap} from 'constants/Operator.constants';
 import {TriggerTypes} from 'constants/Test.constants';
 import {TestState} from 'constants/TestRun.constants';
 import TestOutput from 'models/TestOutput.model';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {useTestOutput} from 'providers/TestOutput/TestOutput.provider';
 import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import AssertionService from 'services/Assertion.service';
@@ -39,7 +39,7 @@ const RunDetailTriggerResponse = ({
     bodyMimeType: '',
   },
 }: IPropsComponent) => {
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const [query, updateQuery] = useSearchParams();
   const {onNavigateAndOpen} = useTestOutput();
   const {open} = useTestSpecForm();

web/src/components/RunEvents/RunEventDataStore.tsx

@@ -1,5 +1,5 @@
 import {Typography} from 'antd';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import TestConnectionNotification from 'components/TestConnectionNotification/TestConnectionNotification';
 import {IPropsEvent} from './RunEvent';
 import * as S from './RunEvents.styled';

web/src/components/SetupAlert/SetupAlert.tsx

@@ -1,6 +1,6 @@
 import {Button} from 'antd';
+import Link from 'components/Link';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
-import {Link} from 'react-router-dom';
 import * as S from './SetupAlert.styled';
 
 const SetupAlert = () => {

web/src/components/TestHeader/TestHeader.tsx

@@ -1,5 +1,5 @@
 import ResourceCardActions from 'components/ResourceCard/ResourceCardActions';
-import {useNavigate} from 'react-router-dom';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import * as S from './TestHeader.styled';
 
 interface IProps {
@@ -13,7 +13,7 @@ interface IProps {
 }
 
 const TestHeader = ({description, id, shouldEdit, onEdit, onDelete, title, runButton}: IProps) => {
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
 
   return (
     <S.Container $isWhite>

web/src/components/TestSpecForm/hooks/useGetOTELSemanticConventionAttributesInfo.tsx

@@ -1,5 +1,5 @@
 import TraceTestAttributes from 'constants/TracetestAttributes.constants';
-import {useGetConventionsQuery} from 'redux/apis/OtelRepo.api';
+import {useGetConventionsQuery} from 'redux/apis/OtelRepo';
 
 export type OtelReference = Record<string, OtelReferenceModel>;
 

web/src/components/TransactionHeader/TransactionHeader.tsx

@@ -1,9 +1,10 @@
 import {Button} from 'antd';
-import {useLocation, useNavigate} from 'react-router-dom';
+import {useLocation} from 'react-router-dom';
 import {TransactionRunStatusIcon} from 'components/RunStatusIcon';
 import TestState from 'components/TestState';
 import TransactionRunActionsMenu from 'components/TransactionRunActionsMenu';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';
+import {useDashboard} from 'providers/Dashboard/Dashboard.provider';
 import {useTransaction} from 'providers/Transaction/Transaction.provider';
 import {useTransactionRun} from 'providers/TransactionRun/TransactionRun.provider';
 import * as S from './TransactionHeader.styled';
@@ -27,7 +28,7 @@ const LINKS = [
 const TransactionHeader = () => {
   const {transaction, onRun} = useTransaction();
   const {transactionRun} = useTransactionRun();
-  const navigate = useNavigate();
+  const {navigate} = useDashboard();
   const {pathname} = useLocation();
   const {id: transactionId, name, version, description} = transaction;
   const {state, id: runId, allStepsRequiredGatesPassed} = transactionRun;

web/src/components/TransactionPlugin/steps/TestsSelection/TestsSelectionForm.tsx

@@ -1,5 +1,5 @@
 import {Col, Form, Row} from 'antd';
-import {useGetTestListQuery} from 'redux/apis/TraceTest.api';
+import {useGetTestListQuery} from 'redux/apis/Tracetest';
 import TestsSelectionInput from './TestsSelectionInput/TestsSelectionInput';
 
 const TestsSelectionForm = () => {

web/src/components/TransactionPlugin/steps/TestsSelection/TestsSelectionInput/TestsSelectionInput.styled.ts

@@ -1,6 +1,6 @@
 import {HolderOutlined, DeleteOutlined} from '@ant-design/icons';
-import {Link} from 'react-router-dom';
 import styled from 'styled-components';
+import Link from 'components/Link';
 
 export const TestItemContainer = styled.li`
   padding: 0px 10px;