feat(routing): 11991 - redirect to base url if faced 403 on bivariate…

… color manager page

- history added to have possiblity to interact with history in atoms
- tests for history
- 403 response is parsed in getProblemFromError (was unknown previously)

package.json

@@ -112,6 +112,7 @@
     "react-lazily": "^0.9.0",
     "react-markdown": "^7.1.0",
     "react-router": "^5.2.1",
+    "history": "^4.9.0",
     "react-router-cache-route": "^1.11.1",
     "react-router-dom": "^5.3.0",
     "react-transition-group": "^4.4.2",

src/RoutePaths.ts

@@ -0,0 +1,8 @@
+import config from '~core/app_config';
+
+export const ROUTE_PATHS = {
+  base: config.baseUrl,
+  reports: config.baseUrl + 'reports',
+  reportPage: config.baseUrl + 'reports/:reportId',
+  bivariateManager: config.baseUrl + 'bivariate-manager',
+};

src/Routes.tsx

@@ -4,15 +4,10 @@ import { matchPath } from 'react-router';
 import { lazily } from 'react-lazily';
 import { useHistory } from 'react-router';
 import { CacheRoute, CacheSwitch } from 'react-router-cache-route';
-import {
-  BrowserRouter as Router,
-  Route,
-  useLocation,
-  Redirect,
-} from 'react-router-dom';
+import { Router, Route, useLocation, Redirect } from 'react-router-dom';
 import { useAtom } from '@reatom/react';
 import { i18n } from '~core/localization';
-import config from '~core/app_config';
+import history from '~core/history';
 import { OriginalLogo } from '~components/KonturLogo/KonturLogo';
 import { VisibleLogo } from '~components/KonturLogo/KonturLogo';
 import { userResourceAtom } from '~core/auth/atoms/userResource';
@@ -21,6 +16,7 @@ import { AppFeature } from '~core/auth/types';
 import { currentApplicationAtom } from '~core/shared_state';
 import { initUrlStore } from '~core/url_store';
 import s from './views/Main/Main.module.css';
+import { ROUTE_PATHS as ROUTES } from './RoutePaths';
 import type { UserDataModel } from '~core/auth';
 const { MainView } = lazily(() => import('~views/Main/Main'));
 const { Reports } = lazily(() => import('~views/Reports/Reports'));
@@ -29,20 +25,13 @@ const { BivariateManagerPage } = lazily(
   () => import('~views/BivariateManager/BivariateManager'),
 );
 
-const ROUTES = {
-  base: config.baseUrl,
-  reports: config.baseUrl + 'reports',
-  reportPage: config.baseUrl + 'reports/:reportId',
-  bivariateManager: config.baseUrl + 'bivariate-manager',
-};
-
 export function RoutedApp() {
   const [{ data: userModel, loading }] = useAtom(userResourceAtom);
   return (
     <StrictMode>
       <OriginalLogo />
 
-      <Router>
+      <Router history={history}>
         <CommonRoutesFeatures userModel={userModel} />
         {userModel && !loading && (
           <CacheSwitch>
@@ -184,7 +173,7 @@ const getHeaderTitle = (pathname: string): JSX.Element | string => {
 
 const LinkableTitle = ({ title }: { title: string }) => {
   const history = useHistory();
-  const goBase = () => history.push(config.baseUrl);
+  const goBase = () => history.push(ROUTES.base);
 
   return (
     <Text type="short-l">

src/core/apiClientInstance.ts

@@ -1,5 +1,8 @@
+import { matchPath } from 'react-router';
 import { enableMocking } from '~utils/axios/axiosMockUtils';
+import history from '~core/history';
 import { setupDefaultLayersMocking } from '~utils/axios/setupTemporaryMocking';
+import { ROUTE_PATHS } from '../RoutePaths';
 import { ApiClient } from './api_client';
 import config from './app_config';
 import { i18n } from './localization';
@@ -12,6 +15,7 @@ ApiClient.init({
   loginApiPath: `${config.keycloakUrl}/auth/realms/${config.keycloakRealm}/protocol/openid-connect/token`,
   refreshTokenApiPath: `${config.keycloakUrl}/auth/realms/${config.keycloakRealm}/protocol/openid-connect/token`,
   translationService: i18n,
+  unauthorizedCallback: apiClientUnauthorizedCallback,
 });
 const apiClientInstance = ApiClient.getInstance();
 
@@ -38,4 +42,15 @@ ApiClient.init({
   translationService: i18n,
 });
 
+export function apiClientUnauthorizedCallback() {
+  if (
+    matchPath(history.location.pathname, {
+      path: ROUTE_PATHS.bivariateManager,
+      exact: true,
+    })
+  ) {
+    history.push(config.baseUrl);
+  }
+}
+
 export const reportsClient = ApiClient.getInstance('reports');

src/core/api_client/apiClient.ts

@@ -66,6 +66,7 @@ export class ApiClient {
     this.refreshTokenApiPath = refreshTokenApiPath;
     this.disableAuth = disableAuth;
     this.storage = storage;
+    this.unauthorizedCallback = unauthorizedCallback;
 
     // Will deleted by terser
     if (import.meta?.env?.DEV) {

src/core/history.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import * as React from 'react';
+import { test, expect } from 'vitest';
+import sinon from 'sinon';
+import history from './history';
+import { Router } from 'react-router-dom';
+import { useHistory } from 'react-router';
+import { fireEvent, render } from '@testing-library/react';
+
+const TestRoute = () => {
+  const history = useHistory();
+  return (
+    <div>
+      <button onClick={() => history.push('/test')} />
+    </div>
+  );
+};
+
+test('~core/history obj is used inside <Router> correctly', async () => {
+  const spy = sinon.spy(history, 'push');
+
+  const { getByRole } = render(
+    <Router history={history}>
+      <TestRoute />
+    </Router>,
+  );
+
+  fireEvent.click(getByRole('button'));
+  expect(spy.callCount).toBe(1);
+  expect(history.location.pathname).toBe('/test');
+  spy.restore();
+});

src/core/history.ts

@@ -0,0 +1,2 @@
+import { createBrowserHistory } from 'history';
+export default createBrowserHistory();

src/utils/axios/apisauce/apisauce.ts

@@ -86,6 +86,7 @@ export type PROBLEM_CODE =
   | typeof UNKNOWN_ERROR
   | typeof CANCEL_ERROR;
 
+const BAD_REQUEST_ERROR_CODES = ['ERR_BAD_REQUEST'];
 const TIMEOUT_ERROR_CODES = ['ECONNABORTED'];
 const NODEJS_CONNECTION_ERROR_CODES = [
   'ENOTFOUND',
@@ -140,6 +141,7 @@ export const getProblemFromError = (error) => {
 
   // then check the specific error code
   if (!error.code) return getProblemFromStatus(error.response.status);
+  if (BAD_REQUEST_ERROR_CODES.includes(error.code)) return CLIENT_ERROR;
   if (TIMEOUT_ERROR_CODES.includes(error.code)) return TIMEOUT_ERROR;
   if (NODEJS_CONNECTION_ERROR_CODES.includes(error.code))
     return CONNECTION_ERROR;