🪟 🔧Remove useRouter hook (#16598)

* Removes useRouter hook

* Removes params from useRouterQuery; Removes useRouterReplace hook

* Fix comments

* Fixes from comments

* Fixes linter error

airbyte-webapp/src/components/ConnectorBlocks/ItemTabs.tsx

@@ -9,7 +9,7 @@ export enum StepsTypes {
 }
 
 interface IProps {
-  currentStep: string;
+  currentStep?: string;
   setCurrentStep: (step: string) => void;
 }
 

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 import { Button, H5 } from "components";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import useRouter from "hooks/useRouter";
 
 import { Card } from "../base/Card";
 
@@ -32,7 +32,7 @@ const Text = styled.div`
 
 const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
-  const { push } = useRouter();
+  const navigate = useNavigate();
 
   const onDeleteButtonClick = useCallback(() => {
     openConfirmationModal({
@@ -42,11 +42,11 @@ const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
       onSubmit: async () => {
         await onDelete();
         closeConfirmationModal();
-        push("../..");
+        navigate("../..");
       },
       submitButtonDataId: "delete",
     });
-  }, [closeConfirmationModal, onDelete, openConfirmationModal, push, type]);
+  }, [closeConfirmationModal, onDelete, openConfirmationModal, navigate, type]);
 
   return (
     <DeleteBlockComponent>

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -1,14 +1,15 @@
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 import styled from "styled-components";
 
 import Table from "components/Table";
 
 import { ConnectionScheduleType } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 
 import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
 import ConnectorCell from "./components/ConnectorCell";
@@ -32,7 +33,8 @@ interface IProps {
 }
 
 const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeStatus, onSync }) => {
-  const { query, push } = useRouter();
+  const navigate = useNavigate();
+  const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
   const allowSync = useFeature(FeatureItem.AllowSync);
 
   const sortBy = query.sortBy || "entityName";
@@ -42,7 +44,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
     (field: string) => {
       const order =
         sortBy !== field ? SortOrderEnum.ASC : sortOrder === SortOrderEnum.ASC ? SortOrderEnum.DESC : SortOrderEnum.ASC;
-      push({
+      navigate({
         search: queryString.stringify(
           {
             sortBy: field,
@@ -52,7 +54,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeS
         ),
       });
     },
-    [push, sortBy, sortOrder]
+    [navigate, sortBy, sortOrder]
   );
 
   const sortData = useCallback(

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -1,11 +1,12 @@
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 
 import Table from "components/Table";
 
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 
 import AllConnectionsStatusCell from "./components/AllConnectionsStatusCell";
 import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
@@ -23,15 +24,16 @@ interface IProps {
 }
 
 const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
-  const { query, push } = useRouter();
+  const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
+  const navigate = useNavigate();
   const sortBy = query.sortBy || "entity";
   const sortOrder = query.order || SortOrderEnum.ASC;
 
   const onSortClick = useCallback(
     (field: string) => {
       const order =
         sortBy !== field ? SortOrderEnum.ASC : sortOrder === SortOrderEnum.ASC ? SortOrderEnum.DESC : SortOrderEnum.ASC;
-      push({
+      navigate({
         search: queryString.stringify(
           {
             sortBy: field,
@@ -41,7 +43,7 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
         ),
       });
     },
-    [push, sortBy, sortOrder]
+    [navigate, sortBy, sortOrder]
   );
 
   const sortData = useCallback(

airbyte-webapp/src/hooks/services/useConnectorAuth.tsx

@@ -9,7 +9,7 @@ import { SourceAuthService } from "core/domain/connector/SourceAuthService";
 import { DestinationOauthConsentRequest, SourceOauthConsentRequest } from "core/request/AirbyteClient";
 
 import { useDefaultRequestMiddlewares } from "../../services/useDefaultRequestMiddlewares";
-import useRouter from "../useRouter";
+import { useQuery } from "../useQuery";
 import { useCurrentWorkspace } from "./useWorkspace";
 
 let windowObjectReference: Window | null = null; // global variable
@@ -167,7 +167,7 @@ export function useRunOauthFlow(
 }
 
 export function useResolveNavigate(): void {
-  const { query } = useRouter();
+  const query = useQuery();
 
   useEffectOnce(() => {
     window.opener.postMessage(query);

airbyte-webapp/src/hooks/useQuery.ts

@@ -0,0 +1,8 @@
+import queryString from "query-string";
+import { useMemo } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useQuery = <T>(): Partial<T> => {
+  const location = useLocation();
+  return useMemo(() => queryString.parse(location.search), [location.search]) as Partial<T>;
+};

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -9,7 +9,7 @@ import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/serv
 import { FeatureItem, FeatureSet, useFeatureService } from "hooks/services/Feature";
 import { useApiHealthPoll } from "hooks/services/Health";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { useIntercom } from "packages/cloud/services/thirdParty/intercom/useIntercom";
 import { Auth } from "packages/cloud/views/auth";
@@ -110,7 +110,7 @@ const MainRoutes: React.FC = () => {
 const MainViewRoutes = () => {
   useApiHealthPoll();
   useIntercom();
-  const { query } = useRouter();
+  const query = useQuery<{ from: string }>();
 
   return (
     <Routes>

airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx

@@ -7,7 +7,7 @@ import LoadingPage from "components/LoadingPage";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useNotificationService } from "hooks/services/Notification";
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
 import { CloudRoutes } from "../cloudRoutes";
@@ -21,7 +21,7 @@ export enum FirebaseActionMode {
 }
 
 export const VerifyEmailAction: React.FC = () => {
-  const { query } = useRouter<{ oobCode: string; mode: string }>();
+  const query = useQuery<{ mode?: FirebaseActionMode; oobCode?: string }>();
   const { verifyEmail } = useAuthService();
   const navigate = useNavigate();
   const { formatMessage } = useIntl();
@@ -30,6 +30,9 @@ export const VerifyEmailAction: React.FC = () => {
   useTrackPage(PageTrackingCodes.VERIFY_EMAIL);
   useAsync(async () => {
     if (query.mode === FirebaseActionMode.VERIFY_EMAIL) {
+      if (!query.oobCode) {
+        return;
+      }
       // Send verification code to authentication service
       await verifyEmail(query.oobCode);
       // Show a notification that the mail got verified successfully
@@ -49,7 +52,7 @@ export const VerifyEmailAction: React.FC = () => {
 };
 
 export const FirebaseActionRoute: React.FC = () => {
-  const { query: { mode } = {} } = useRouter<{ mode: string }>();
+  const { mode } = useQuery();
 
   switch (mode) {
     case FirebaseActionMode.VERIFY_EMAIL:

airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx

@@ -1,11 +1,10 @@
 import React, { Suspense } from "react";
 import { useIntl } from "react-intl";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 
 import { LoadingPage } from "components";
 
 import { useExperiment } from "hooks/services/Experiment";
-import useRouter from "hooks/useRouter";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { FirebaseActionRoute } from "packages/cloud/views/FirebaseActionRoute";
@@ -35,7 +34,7 @@ const hasValidRightSideUrl = (url?: string): boolean => {
 };
 
 const Auth: React.FC = () => {
-  const { pathname, location } = useRouter();
+  const { pathname } = useLocation();
   const { formatMessage } = useIntl();
   const { loggedOut } = useAuthService();
   const rightSideUrl = useExperiment("authPage.rightSideUrl", undefined);
@@ -54,7 +53,7 @@ const Auth: React.FC = () => {
               <Route path={CloudRoutes.FirebaseAction} element={<FirebaseActionRoute />} />
               <Route
                 path="*"
-                element={<Navigate to={`${CloudRoutes.Login}${loggedOut ? "" : `?from=${location.pathname}`}`} />}
+                element={<Navigate to={`${CloudRoutes.Login}${loggedOut ? "" : `?from=${pathname}`}`} />}
               />
             </Routes>
           </Suspense>

airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx

@@ -2,12 +2,13 @@ import { AuthErrorCodes } from "firebase/auth";
 import { Field, FieldProps, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import * as yup from "yup";
 
 import { LabeledInput, Link, LoadingButton } from "components";
 
 import { useNotificationService } from "hooks/services/Notification/NotificationService";
-import useRouterHook from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
@@ -21,7 +22,8 @@ const ResetPasswordPageValidationSchema = yup.object().shape({
 const ResetPasswordConfirmPage: React.FC = () => {
   const { confirmPasswordReset } = useAuthService();
   const { registerNotification } = useNotificationService();
-  const { push, query } = useRouterHook<{ oobCode: string }>();
+  const navigate = useNavigate();
+  const query = useQuery<{ oobCode?: string }>();
   const { formatMessage } = useIntl();
 
   return (
@@ -37,13 +39,16 @@ const ResetPasswordConfirmPage: React.FC = () => {
         validationSchema={ResetPasswordPageValidationSchema}
         onSubmit={async ({ newPassword }) => {
           try {
+            if (!query.oobCode) {
+              return;
+            }
             await confirmPasswordReset(query.oobCode, newPassword);
             registerNotification({
               id: "confirmResetPassword.success",
               title: formatMessage({ id: "confirmResetPassword.success" }),
               isError: false,
             });
-            push(CloudRoutes.Login);
+            navigate(CloudRoutes.Login);
           } catch (err) {
             // Error code reference:
             // https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#confirmpasswordreset

airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx

@@ -1,13 +1,14 @@
 import { Field, FieldProps, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { NavigateOptions, To, useNavigate } from "react-router-dom";
 import * as yup from "yup";
 
 import { LabeledInput, Link, LoadingButton } from "components";
 import HeadTitle from "components/HeadTitle";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { FieldError } from "packages/cloud/lib/errors/FieldError";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
@@ -26,7 +27,9 @@ const LoginPageValidationSchema = yup.object().shape({
 const LoginPage: React.FC = () => {
   const { formatMessage } = useIntl();
   const { login } = useAuthService();
-  const { query, replace } = useRouter();
+  const query = useQuery<{ from?: string }>();
+  const navigate = useNavigate();
+  const replace = (path: To, state?: NavigateOptions) => navigate(path, { ...state, replace: true });
   useTrackPage(PageTrackingCodes.LOGIN);
 
   return (

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx

@@ -1,14 +1,15 @@
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 import styled from "styled-components";
 
 import SortButton from "components/EntityTable/components/SortButton";
 import { SortOrderEnum } from "components/EntityTable/types";
 import Table from "components/Table";
 
-import useRouter from "hooks/useRouter";
+import { useQuery } from "hooks/useQuery";
 import { CreditConsumptionByConnector } from "packages/cloud/lib/domain/cloudWorkspaces/types";
 import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinitionList } from "services/connector/SourceDefinitionService";
@@ -39,7 +40,8 @@ type FullTableProps = CreditConsumptionByConnector & {
 };
 
 const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ creditConsumption }) => {
-  const { query, push } = useRouter();
+  const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
+  const navigate = useNavigate();
   const { sourceDefinitions } = useSourceDefinitionList();
   const { destinationDefinitions } = useDestinationDefinitionList();
 
@@ -69,7 +71,7 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ credi
     (field: string) => {
       const order =
         sortBy !== field ? SortOrderEnum.ASC : sortOrder === SortOrderEnum.ASC ? SortOrderEnum.DESC : SortOrderEnum.ASC;
-      push({
+      navigate({
         search: queryString.stringify(
           {
             sortBy: field,
@@ -79,7 +81,7 @@ const UsagePerConnectionTable: React.FC<UsagePerConnectionTableProps> = ({ credi
         ),
       });
     },
-    [push, sortBy, sortOrder]
+    [navigate, sortBy, sortOrder]
   );
 
   const sortData = useCallback(