OS-7719: Add RoutePathContext to access current route path in components

ngui/ui/src/components/App/App.tsx

@@ -3,6 +3,7 @@ import { GET_TOKEN } from "api/auth/actionTypes";
 import ErrorBoundary from "components/ErrorBoundary";
 import LayoutWrapper from "components/LayoutWrapper";
 import CommunityDocsContextProvider from "contexts/CommunityDocsContext/CommunityDocsContextProvider";
+import RoutePathContextProvider from "contexts/RoutePathContext/RoutePathContextProvider";
 import { useApiData } from "hooks/useApiData";
 import { useOrganizationIdQueryParameterListener } from "hooks/useOrganizationIdQueryParameterListener";
 import { LOGIN, USER_EMAIL_QUERY_PARAMETER_NAME } from "urls";
@@ -63,7 +64,11 @@ const App = () => (
         <Route
           key={key}
           path={link}
-          element={<RouteRender isTokenRequired={isTokenRequired} component={component} context={context} layout={layout} />}
+          element={
+            <RoutePathContextProvider path={link}>
+              <RouteRender isTokenRequired={isTokenRequired} component={component} context={context} layout={layout} />
+            </RoutePathContextProvider>
+          }
         />
       ))}
     </Routes>

ngui/ui/src/components/DocsPanel/DocsPanel.tsx

@@ -2,12 +2,12 @@ import { useContext, useEffect, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import { AppBar, Box, CircularProgress, Link, Paper, Toolbar } from "@mui/material";
 import { FormattedMessage } from "react-intl";
-import { matchPath, useLocation } from "react-router-dom";
 import IconButton from "components/IconButton";
 import InlineSeverityAlert from "components/InlineSeverityAlert";
 import Markdown from "components/Markdown";
 import SideModalTitle from "components/SideModalTitle";
 import CommunityDocsContext from "contexts/CommunityDocsContext/CommunityDocsContext";
+import { useRoutePath } from "hooks/useRoutePath";
 import { intl } from "translations/react-intl-config";
 import { GITHUB_HYSTAX_OPTSCALE_REPO, getDocsFileUrl } from "urls";
 import { SPACING_2 } from "utils/layouts";
@@ -30,16 +30,15 @@ const DocumentationUrl = ({ url }: { url: string }) => <strong>ngui/ui/public{ur
 
 const DocsPanel = () => {
   const { classes } = useStyles();
-  const { isCommunityDocsOpened, setIsCommunityDocsOpened, allRoutesPatterns } = useContext(CommunityDocsContext);
+  const { isCommunityDocsOpened, setIsCommunityDocsOpened } = useContext(CommunityDocsContext);
 
   const [status, setStatus] = useState(STATUSES.LOADING);
 
   const [markdown, setMarkdown] = useState("");
 
-  const { pathname } = useLocation();
-  const [currentMatch] = allRoutesPatterns.filter((pattern) => matchPath(pattern, pathname));
+  const path = useRoutePath();
 
-  const documentationUrl = getDocsFileUrl(currentMatch);
+  const documentationUrl = getDocsFileUrl(path);
 
   useEffect(() => {
     if (!isCommunityDocsOpened) {

ngui/ui/src/contexts/CommunityDocsContext/CommunityDocsContext.tsx

@@ -3,11 +3,9 @@ import { createContext } from "react";
 type CommunityDocsContextType = {
   isCommunityDocsOpened: boolean;
   setIsCommunityDocsOpened: () => void;
-  allRoutesPatterns: readonly string[];
 };
 export default createContext({
   isCommunityDocsOpened: false,
   setIsCommunityDocsOpened: () => {},
-  closeTips: () => {},
-  allRoutesPatterns: []
+  closeTips: () => {}
 } as CommunityDocsContextType);

ngui/ui/src/contexts/CommunityDocsContext/CommunityDocsContextProvider.tsx

@@ -1,15 +1,12 @@
 import { ReactNode } from "react";
 import { useToggle } from "hooks/useToggle";
-import { ALL_ROUTES_PATTERNS } from "utils/routes";
 import CommunityDocsContext from "./CommunityDocsContext";
 
 const CommunityDocsContextProvider = ({ children }: { children: ReactNode }) => {
   const [isCommunityDocsOpened, setIsCommunityDocsOpened] = useToggle(false);
 
   return (
-    <CommunityDocsContext.Provider
-      value={{ isCommunityDocsOpened, setIsCommunityDocsOpened, allRoutesPatterns: ALL_ROUTES_PATTERNS }}
-    >
+    <CommunityDocsContext.Provider value={{ isCommunityDocsOpened, setIsCommunityDocsOpened }}>
       {children}
     </CommunityDocsContext.Provider>
   );

ngui/ui/src/contexts/RoutePathContext/RoutePathContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext("");

ngui/ui/src/contexts/RoutePathContext/RoutePathContextProvider.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import CurrentPathTemplateContext from "./RoutePathContext";
+
+type RoutePathContextProviderProps = {
+  children: ReactNode;
+  path: string;
+};
+
+const RoutePathContextProvider = ({ children, path }: RoutePathContextProviderProps) => (
+  <CurrentPathTemplateContext.Provider value={path}>{children}</CurrentPathTemplateContext.Provider>
+);
+
+export default RoutePathContextProvider;

ngui/ui/src/contexts/RoutePathContext/index.ts

@@ -0,0 +1,4 @@
+import RoutePathContext from "./RoutePathContext";
+import ChartsTooltipContextProvider from "./RoutePathContextProvider";
+
+export { RoutePathContext, ChartsTooltipContextProvider };

ngui/ui/src/hooks/useRoutePath.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { RoutePathContext } from "contexts/RoutePathContext";
+
+export const useRoutePath = () => {
+  const path = useContext(RoutePathContext);
+
+  return path;
+};

ngui/ui/src/utils/routes/index.ts

@@ -197,6 +197,4 @@ export const routes = [
   notFoundRoute
 ];
 
-export const ALL_ROUTES_PATTERNS = Object.freeze(routes.map(({ link }) => link));
-
 export default BaseRoute;