diff --git a/airbyte-webapp/src/components/ConnectorBlocks/ItemTabs.tsx b/airbyte-webapp/src/components/ConnectorBlocks/ItemTabs.tsx index 11049091ba7b..89274d2927ed 100644 --- a/airbyte-webapp/src/components/ConnectorBlocks/ItemTabs.tsx +++ b/airbyte-webapp/src/components/ConnectorBlocks/ItemTabs.tsx @@ -9,7 +9,7 @@ export enum StepsTypes { } interface IProps { - currentStep: string; + currentStep?: string; setCurrentStep: (step: string) => void; } diff --git a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx index 1e317a370ca8..866a76e2fd7e 100644 --- a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx +++ b/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 = ({ type, onDelete }) => { const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService(); - const { push } = useRouter(); + const navigate = useNavigate(); const onDeleteButtonClick = useCallback(() => { openConfirmationModal({ @@ -42,11 +42,11 @@ const DeleteBlock: React.FC = ({ type, onDelete }) => { onSubmit: async () => { await onDelete(); closeConfirmationModal(); - push("../.."); + navigate("../.."); }, submitButtonDataId: "delete", }); - }, [closeConfirmationModal, onDelete, openConfirmationModal, push, type]); + }, [closeConfirmationModal, onDelete, openConfirmationModal, navigate, type]); return ( diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx index aec730b7e12b..f694923a0434 100644 --- a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx +++ b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx @@ -1,6 +1,7 @@ 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"; @@ -8,7 +9,7 @@ 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 = ({ 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 = ({ 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 = ({ data, entity, onClickRow, onChangeS ), }); }, - [push, sortBy, sortOrder] + [navigate, sortBy, sortOrder] ); const sortData = useCallback( diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx b/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx index 6530daad5768..50c8dda42de8 100644 --- a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx +++ b/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,7 +24,8 @@ interface IProps { } const ImplementationTable: React.FC = ({ 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; @@ -31,7 +33,7 @@ const ImplementationTable: React.FC = ({ data, entity, onClickRow }) => (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 = ({ data, entity, onClickRow }) => ), }); }, - [push, sortBy, sortOrder] + [navigate, sortBy, sortOrder] ); const sortData = useCallback( diff --git a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx b/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx index 239dcef4516b..cc3d17eaf60a 100644 --- a/airbyte-webapp/src/hooks/services/useConnectorAuth.tsx +++ b/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); diff --git a/airbyte-webapp/src/hooks/useQuery.ts b/airbyte-webapp/src/hooks/useQuery.ts new file mode 100644 index 000000000000..0c1dd757eee3 --- /dev/null +++ b/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 = (): Partial => { + const location = useLocation(); + return useMemo(() => queryString.parse(location.search), [location.search]) as Partial; +}; diff --git a/airbyte-webapp/src/hooks/useRouter.tsx b/airbyte-webapp/src/hooks/useRouter.tsx deleted file mode 100644 index 99cb83205c59..000000000000 --- a/airbyte-webapp/src/hooks/useRouter.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import queryString from "query-string"; -import { useMemo } from "react"; -import { useLocation, useNavigate, useParams, Location, To, NavigateOptions } from "react-router-dom"; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -function useRouter(): { - query: T; - params: P; - pathname: string; - location: Location; - push(path: To, state?: NavigateOptions): void; - replace(path: To, state?: NavigateOptions): void; -} { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const params: any = useParams(); - const location = useLocation(); - const navigate = useNavigate(); - const query = useMemo( - () => - ({ - ...queryString.parse(location.search), // Convert string to object - ...params, - } as T), - [params, location.search] - ); - - return useMemo(() => { - return { - params, - push: navigate, - replace: (path, state) => navigate(path, { ...state, replace: true }), - pathname: location.pathname, - query, - location, - }; - }, [navigate, location, query, params]); -} - -export default useRouter; diff --git a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx index f1c85db4d459..14a49bcda8bc 100644 --- a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx +++ b/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 ( diff --git a/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx b/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx index de44efa7d0e2..244d7ea78c3f 100644 --- a/airbyte-webapp/src/packages/cloud/views/FirebaseActionRoute.tsx +++ b/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: diff --git a/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx b/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx index 4aee2884cb16..e366a2d531d5 100644 --- a/airbyte-webapp/src/packages/cloud/views/auth/Auth.tsx +++ b/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 = () => { } /> } + element={} /> diff --git a/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx index a4abb147ecdc..acfa4f66324c 100644 --- a/airbyte-webapp/src/packages/cloud/views/auth/ConfirmPasswordResetPage/ConfirmPasswordResetPage.tsx +++ b/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 diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx index 654645e82ed2..869fdfe6b277 100644 --- a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx +++ b/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 ( diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx index 6948103aa0f3..40abfdf9f52a 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx @@ -1,6 +1,7 @@ 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"; @@ -8,7 +9,7 @@ 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 = ({ 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 = ({ 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 = ({ credi ), }); }, - [push, sortBy, sortOrder] + [navigate, sortBy, sortOrder] ); const sortData = useCallback( diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx index 042fe7473e25..32b293ddc77a 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx @@ -1,5 +1,6 @@ import React, { Suspense } from "react"; import { FormattedMessage } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { Button, LoadingPage, MainPageWithScroll, PageTitle } from "components"; import { EmptyResourceListView } from "components/EmptyResourceListView"; @@ -8,19 +9,18 @@ import HeadTitle from "components/HeadTitle"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { FeatureItem, useFeature } from "hooks/services/Feature"; import { useConnectionList } from "hooks/services/useConnectionHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../routePaths"; import ConnectionsTable from "./components/ConnectionsTable"; const AllConnectionsPage: React.FC = () => { - const { push } = useRouter(); + const navigate = useNavigate(); useTrackPage(PageTrackingCodes.CONNECTIONS_LIST); const { connections } = useConnectionList(); const allowCreateConnection = useFeature(FeatureItem.AllowCreateConnection); - const onCreateClick = () => push(`${RoutePaths.ConnectionNew}`); + const onCreateClick = () => navigate(`${RoutePaths.ConnectionNew}`); return ( }> diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx index 006bd8b9768e..922d94407f83 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx @@ -1,5 +1,6 @@ import React, { useCallback } from "react"; import { useQueryClient } from "react-query"; +import { useNavigate } from "react-router-dom"; import { ConnectionTable } from "components/EntityTable"; import useSyncActions from "components/EntityTable/hooks"; @@ -7,7 +8,6 @@ import { ITableDataItem } from "components/EntityTable/types"; import { getConnectionTableData } from "components/EntityTable/utils"; import { invalidateConnectionsList } from "hooks/services/useConnectionHook"; -import useRouter from "hooks/useRouter"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; @@ -18,7 +18,7 @@ interface IProps { } const ConnectionsTable: React.FC = ({ connections }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const { changeStatus, syncManualConnection } = useSyncActions(); const queryClient = useQueryClient(); @@ -50,7 +50,7 @@ const ConnectionsTable: React.FC = ({ connections }) => { [connections, syncManualConnection] ); - const clickRow = (source: ITableDataItem) => push(`${source.connectionId}`); + const clickRow = (source: ITableDataItem) => navigate(`${source.connectionId}`); return ( = ({ currentStep, onStatusUpdating, }) => { - const { push } = useRouter<{ id: string }>(); + const navigate = useNavigate(); const steps = useMemo(() => { const steps = [ @@ -59,12 +59,12 @@ const ConnectionPageTitle: React.FC = ({ const onSelectStep = useCallback( (id: string) => { if (id === ConnectionSettingsRoutes.STATUS) { - push(""); + navigate(""); } else { - push(id); + navigate(id); } }, - [push] + [navigate] ); return ( diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx index 5ac60770b562..51bf00eda353 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; +import { useLocation, useNavigate } from "react-router-dom"; import { LoadingPage, PageTitle } from "components"; import ConnectionBlock from "components/ConnectionBlock"; @@ -12,7 +13,6 @@ import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker"; import { useGetDestination } from "hooks/services/useDestinationHook"; import { useGetSource } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; import { useSourceDefinition } from "services/connector/SourceDefinitionService"; import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout"; @@ -58,7 +58,7 @@ function usePreloadData(): { source?: SourceRead; destinationDefinition?: DestinationDefinitionRead; } { - const { location } = useRouter(); + const location = useLocation(); const source = useGetSource(hasSourceId(location.state) ? location.state.sourceId : null); @@ -72,7 +72,8 @@ function usePreloadData(): { export const CreationFormPage: React.FC = () => { useTrackPage(PageTrackingCodes.CONNECTIONS_NEW); - const { location, push } = useRouter(); + const location = useLocation(); + const navigate = useNavigate(); const { clearAllFormChanges } = useFormChangeTrackerService(); // TODO: Probably there is a better way to figure it out instead of just checking third elem @@ -101,7 +102,7 @@ export const CreationFormPage: React.FC = () => { const onSelectExistingSource = (id: string) => { clearAllFormChanges(); - push("", { + navigate("", { state: { ...(location.state as Record), sourceId: id, @@ -113,7 +114,7 @@ export const CreationFormPage: React.FC = () => { const onSelectExistingDestination = (id: string) => { clearAllFormChanges(); - push("", { + navigate("", { state: { ...(location.state as Record), destinationId: id, @@ -165,13 +166,13 @@ export const CreationFormPage: React.FC = () => { const afterSubmitConnection = (connection: WebBackendConnectionRead) => { switch (type) { case EntityStepsTypes.DESTINATION: - push(`../${source?.sourceId}`); + navigate(`../${source?.sourceId}`); break; case EntityStepsTypes.SOURCE: - push(`../${destination?.destinationId}`); + navigate(`../${destination?.destinationId}`); break; default: - push(`../${connection.connectionId}`); + navigate(`../${connection.connectionId}`); break; } }; diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx index e6d5569ecf97..d1952a280847 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from "react"; - // TODO: create separate component for source and destinations forms +import { useLocation, useNavigate } from "react-router-dom"; + import { ConnectionConfiguration } from "core/domain/connection"; import { useCreateDestination } from "hooks/services/useDestinationHook"; -import useRouter from "hooks/useRouter"; import { DestinationForm } from "pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; @@ -13,7 +13,8 @@ interface ConnectionCreateDestinationFormProps { } export const ConnectionCreateDestinationForm: React.FC = ({ afterSubmit }) => { - const { push, location } = useRouter(); + const navigate = useNavigate(); + const location = useLocation(); const [successRequest, setSuccessRequest] = useState(false); const { destinationDefinitions } = useDestinationDefinitionList(); @@ -32,7 +33,7 @@ export const ConnectionCreateDestinationForm: React.FC { setSuccessRequest(false); - push( + navigate( {}, { state: { diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx index 50a3043087f5..db6a8de8ee89 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import { ConnectionConfiguration } from "core/domain/connection"; import { useCreateSource } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { SourceForm } from "pages/SourcesPage/pages/CreateSourcePage/components/SourceForm"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext"; @@ -12,7 +12,8 @@ interface ConnectionCreateSourceFormProps { } export const ConnectionCreateSourceForm: React.FC = ({ afterSubmit }) => { - const { push, location } = useRouter(); + const location = useLocation(); + const navigate = useNavigate(); const [successRequest, setSuccessRequest] = useState(false); const { sourceDefinitions } = useSourceDefinitionList(); const { mutateAsync: createSource } = useCreateSource(); @@ -31,7 +32,7 @@ export const ConnectionCreateSourceForm: React.FC { setSuccessRequest(false); - push( + navigate( {}, { state: { diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx index f83304301a3a..153ee827d63b 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx @@ -1,5 +1,6 @@ import React from "react"; import { FormattedMessage } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { Button, MainPageWithScroll } from "components"; import { EmptyResourceListView } from "components/EmptyResourceListView"; @@ -8,17 +9,16 @@ import PageTitle from "components/PageTitle"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useDestinationList } from "hooks/services/useDestinationHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../routePaths"; import DestinationsTable from "./components/DestinationsTable"; const AllDestinationsPage: React.FC = () => { - const { push } = useRouter(); + const navigate = useNavigate(); const { destinations } = useDestinationList(); useTrackPage(PageTrackingCodes.DESTINATION_LIST); - const onCreateDestination = () => push(`${RoutePaths.DestinationNew}`); + const onCreateDestination = () => navigate(`${RoutePaths.DestinationNew}`); return destinations.length ? ( = ({ destinations }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const { connections } = useConnectionList(); const { destinationDefinitions } = useDestinationDefinitionList(); const data = getEntityTableData(destinations, connections, destinationDefinitions, "destination"); - const clickRow = (destination: EntityTableDataItem) => push(`${destination.entityId}`); + const clickRow = (destination: EntityTableDataItem) => navigate(`${destination.entityId}`); return ; }; diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx index 9bf79734eece..cd1605a13768 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { FormPageContent } from "components/ConnectorBlocks"; import HeadTitle from "components/HeadTitle"; @@ -8,7 +9,6 @@ import PageTitle from "components/PageTitle"; import { ConnectionConfiguration } from "core/domain/connection"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useCreateDestination } from "hooks/services/useDestinationHook"; -import useRouter from "hooks/useRouter"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout"; @@ -17,7 +17,7 @@ import { DestinationForm } from "./components/DestinationForm"; export const CreateDestinationPage: React.FC = () => { useTrackPage(PageTrackingCodes.DESTINATION_NEW); - const { push } = useRouter(); + const navigate = useNavigate(); const [successRequest, setSuccessRequest] = useState(false); const { destinationDefinitions } = useDestinationDefinitionList(); const { mutateAsync: createDestination } = useCreateDestination(); @@ -35,7 +35,7 @@ export const CreateDestinationPage: React.FC = () => { setSuccessRequest(true); setTimeout(() => { setSuccessRequest(false); - push(`../${result.destinationId}`); + navigate(`../${result.destinationId}`); }, 2000); }; diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx index 1b38901f4c46..fce89f9ee2df 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx @@ -1,12 +1,12 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; +import { useLocation } from "react-router-dom"; import { Action, Namespace } from "core/analytics"; import { ConnectionConfiguration } from "core/domain/connection"; import { DestinationDefinitionRead } from "core/request/AirbyteClient"; import { LogsRequestError } from "core/request/LogsRequestError"; import { useAnalyticsService } from "hooks/services/Analytics"; -import useRouter from "hooks/useRouter"; import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService"; import { generateMessageFromError, FormError } from "utils/errorStatusMessage"; import { ConnectorCard } from "views/Connector/ConnectorCard"; @@ -39,7 +39,7 @@ export const DestinationForm: React.FC = ({ hasSuccess, afterSelectConnector, }) => { - const { location } = useRouter(); + const location = useLocation(); const analyticsService = useAnalyticsService(); const [destinationDefinitionId, setDestinationDefinitionId] = useState( diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx index 2bb7c4720e12..f07538e98083 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx @@ -1,6 +1,6 @@ import React, { Suspense, useMemo } from "react"; import { FormattedMessage } from "react-intl"; -import { Route, Routes } from "react-router-dom"; +import { Route, Routes, useNavigate, useParams } from "react-router-dom"; import { DropDownRow, LoadingPage, PageTitle } from "components"; import ApiErrorBoundary from "components/ApiErrorBoundary"; @@ -13,7 +13,6 @@ import Placeholder, { ResourceTypes } from "components/Placeholder"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useConnectionList } from "hooks/services/useConnectionHook"; import { useSourceList } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useDestinationDefinition } from "services/connector/DestinationDefinitionService"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; @@ -26,7 +25,8 @@ import DestinationSettings from "./components/DestinationSettings"; const DestinationItemPage: React.FC = () => { useTrackPage(PageTrackingCodes.DESTINATION_ITEM); - const { params, push } = useRouter(); + const params = useParams() as { "*": StepsTypes | ""; id: string }; + const navigate = useNavigate(); const currentStep = useMemo(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]); const { sources } = useSourceList(); @@ -39,11 +39,11 @@ const DestinationItemPage: React.FC = () => { const { connections } = useConnectionList(); - const onClickBack = () => push(".."); + const onClickBack = () => navigate(".."); const onSelectStep = (id: string) => { const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase(); - push(path); + navigate(path); }; const breadcrumbsData = [ @@ -81,7 +81,7 @@ const DestinationItemPage: React.FC = () => { destinationId: destination.destinationId, }; - push(path, { state }); + navigate(path, { state }); }; return ( diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx index b8b2a5973eb1..02c5963f75f0 100644 --- a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx +++ b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationConnectionTable.tsx @@ -1,5 +1,6 @@ import React, { useCallback } from "react"; import { useQueryClient } from "react-query"; +import { useNavigate } from "react-router-dom"; import { ConnectionTable } from "components/EntityTable"; import useSyncActions from "components/EntityTable/hooks"; @@ -7,7 +8,6 @@ import { ITableDataItem } from "components/EntityTable/types"; import { getConnectionTableData } from "components/EntityTable/utils"; import { invalidateConnectionsList } from "hooks/services/useConnectionHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; @@ -19,7 +19,7 @@ interface IProps { } const DestinationConnectionTable: React.FC = ({ connections }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const queryClient = useQueryClient(); const { changeStatus, syncManualConnection } = useSyncActions(); @@ -50,7 +50,7 @@ const DestinationConnectionTable: React.FC = ({ connections }) => { [connections, syncManualConnection] ); - const clickRow = (source: ITableDataItem) => push(`../../../${RoutePaths.Connections}/${source.connectionId}`); + const clickRow = (source: ITableDataItem) => navigate(`../../../${RoutePaths.Connections}/${source.connectionId}`); return ( { const analyticsService = useAnalyticsService(); useTrackPage(PageTrackingCodes.ONBOARDING); - const { push } = useRouterHook(); + const navigate = useNavigate(); useEffectOnce(() => { analyticsService.page("Onboarding Page"); @@ -89,7 +89,7 @@ const OnboardingPage: React.FC = () => { const handleFinishOnboarding = () => { finishOnboarding(currentStep); - push(RoutePaths.Connections); + navigate(RoutePaths.Connections); }; return ( diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx index 9a310ee1d231..c77194d80ac7 100644 --- a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx @@ -1,6 +1,6 @@ import React, { Suspense } from "react"; import { FormattedMessage } from "react-intl"; -import { Navigate, Route, Routes } from "react-router-dom"; +import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; import HeadTitle from "components/HeadTitle"; @@ -11,7 +11,6 @@ import SideMenu from "components/SideMenu"; import { CategoryItem } from "components/SideMenu/SideMenu"; import useConnector from "hooks/services/useConnector"; -import useRouter from "hooks/useRouter"; import AccountPage from "./pages/AccountPage"; import ConfigurationsPage from "./pages/ConfigurationsPage"; @@ -48,7 +47,8 @@ export const SettingsRoute = { } as const; const SettingsPage: React.FC = ({ pageConfig }) => { - const { push, pathname } = useRouter(); + const push = useNavigate(); + const { pathname } = useLocation(); const { countNewSourceVersion, countNewDestinationVersion } = useConnector(); const menuItems: CategoryItem[] = pageConfig?.menuConfig || [ diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnector.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnector.tsx index 73a47e16be81..d30ec526afda 100644 --- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnector.tsx +++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnector.tsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { Button } from "components"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useCreateDestinationDefinition } from "services/connector/DestinationDefinitionService"; import { useCreateSourceDefinition } from "services/connector/SourceDefinitionService"; @@ -22,7 +22,7 @@ interface ICreateProps { } const CreateConnector: React.FC = ({ type }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const [isModalOpen, setIsModalOpen] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const onChangeModalState = () => { @@ -41,7 +41,7 @@ const CreateConnector: React.FC = ({ type }) => { try { const result = await createSourceDefinition(sourceDefinition); - push( + navigate( { pathname: `${RoutePaths.Source}${RoutePaths.SourceNew}`, }, @@ -57,7 +57,7 @@ const CreateConnector: React.FC = ({ type }) => { try { const result = await createDestinationDefinition(destinationDefinition); - push( + navigate( { pathname: `${RoutePaths.Destination}${RoutePaths.DestinationNew}`, }, diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx index 9872aaad7eab..9540841f002c 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx @@ -1,5 +1,6 @@ import React from "react"; import { FormattedMessage } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { Button, MainPageWithScroll } from "components"; import { EmptyResourceListView } from "components/EmptyResourceListView"; @@ -8,16 +9,15 @@ import PageTitle from "components/PageTitle"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useSourceList } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../routePaths"; import SourcesTable from "./components/SourcesTable"; const AllSourcesPage: React.FC = () => { - const { push } = useRouter(); + const navigate = useNavigate(); const { sources } = useSourceList(); useTrackPage(PageTrackingCodes.SOURCE_LIST); - const onCreateSource = () => push(`${RoutePaths.SourceNew}`); + const onCreateSource = () => navigate(`${RoutePaths.SourceNew}`); return sources.length ? ( } diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx index 1f5ab7d38edb..dc8e53bfea83 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; import { ImplementationTable } from "components/EntityTable"; import { EntityTableDataItem } from "components/EntityTable/types"; @@ -6,7 +7,6 @@ import { getEntityTableData } from "components/EntityTable/utils"; import { SourceRead } from "core/request/AirbyteClient"; import { useConnectionList } from "hooks/services/useConnectionHook"; -import useRouter from "hooks/useRouter"; import { useSourceDefinitionList } from "../../../../../services/connector/SourceDefinitionService"; @@ -15,14 +15,14 @@ interface SourcesTableProps { } const SourcesTable: React.FC = ({ sources }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const { connections } = useConnectionList(); const { sourceDefinitions } = useSourceDefinitionList(); const data = getEntityTableData(sources, connections, sourceDefinitions, "source"); - const clickRow = (source: EntityTableDataItem) => push(`${source.entityId}`); + const clickRow = (source: EntityTableDataItem) => navigate(`${source.entityId}`); return ; }; diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx index 9abeb7ab4b6d..8c9b64053bf2 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; +import { useNavigate } from "react-router-dom"; import { FormPageContent } from "components/ConnectorBlocks"; import HeadTitle from "components/HeadTitle"; @@ -8,7 +9,6 @@ import PageTitle from "components/PageTitle"; import { ConnectionConfiguration } from "core/domain/connection"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useCreateSource } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper"; @@ -16,7 +16,7 @@ import { SourceForm } from "./components/SourceForm"; const CreateSourcePage: React.FC = () => { useTrackPage(PageTrackingCodes.SOURCE_NEW); - const { push } = useRouter(); + const navigate = useNavigate(); const [successRequest, setSuccessRequest] = useState(false); const { sourceDefinitions } = useSourceDefinitionList(); @@ -36,7 +36,7 @@ const CreateSourcePage: React.FC = () => { setSuccessRequest(true); setTimeout(() => { setSuccessRequest(false); - push(`../${result.sourceId}`); + navigate(`../${result.sourceId}`); }, 2000); }; diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx index 1e1051542a57..83005ce12988 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx @@ -1,11 +1,11 @@ import React, { useState } from "react"; import { FormattedMessage } from "react-intl"; +import { useLocation } from "react-router-dom"; import { Action, Namespace } from "core/analytics"; import { ConnectionConfiguration } from "core/domain/connection"; import { LogsRequestError } from "core/request/LogsRequestError"; import { useAnalyticsService } from "hooks/services/Analytics"; -import useRouter from "hooks/useRouter"; import { SourceDefinitionReadWithLatestTag } from "services/connector/SourceDefinitionService"; import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService"; import { generateMessageFromError, FormError } from "utils/errorStatusMessage"; @@ -40,7 +40,7 @@ export const SourceForm: React.FC = ({ hasSuccess, afterSelectConnector, }) => { - const { location } = useRouter(); + const location = useLocation(); const analyticsService = useAnalyticsService(); const [sourceDefinitionId, setSourceDefinitionId] = useState( diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx index 00fbdf1ad9fe..4aa0646c6597 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx @@ -1,6 +1,6 @@ import React, { Suspense, useMemo } from "react"; import { FormattedMessage } from "react-intl"; -import { Route, Routes } from "react-router-dom"; +import { Route, Routes, useNavigate, useParams } from "react-router-dom"; import { DropDownRow } from "components"; import ApiErrorBoundary from "components/ApiErrorBoundary"; @@ -15,7 +15,6 @@ import Placeholder, { ResourceTypes } from "components/Placeholder"; import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useConnectionList } from "hooks/services/useConnectionHook"; import { useGetSource } from "hooks/services/useSourceHook"; -import useRouter from "hooks/useRouter"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useSourceDefinition } from "services/connector/SourceDefinitionService"; import { getIcon } from "utils/imageUtils"; @@ -28,14 +27,18 @@ import SourceSettings from "./components/SourceSettings"; const SourceItemPage: React.FC = () => { useTrackPage(PageTrackingCodes.SOURCE_ITEM); - const { query, params, push } = useRouter<{ id: string }, { id: string; "*": string }>(); - const currentStep = useMemo(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]); + const params = useParams<{ "*": StepsTypes | "" | undefined; id: string }>(); + const navigate = useNavigate(); + const currentStep = useMemo( + () => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), + [params] + ); const { destinations } = useDestinationList(); const { destinationDefinitions } = useDestinationDefinitionList(); - const source = useGetSource(query.id); + const source = useGetSource(params.id || ""); const sourceDefinition = useSourceDefinition(source?.sourceDefinitionId); const { connections } = useConnectionList(); @@ -43,7 +46,7 @@ const SourceItemPage: React.FC = () => { const breadcrumbsData = [ { name: , - onClick: () => push(".."), + onClick: () => navigate(".."), }, { name: source.name }, ]; @@ -67,7 +70,7 @@ const SourceItemPage: React.FC = () => { const onSelectStep = (id: string) => { const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase(); - push(path); + navigate(path); }; const onSelect = (data: DropDownRow.IDataItem) => { @@ -80,7 +83,7 @@ const SourceItemPage: React.FC = () => { sourceId: source.sourceId, }; - push(path, { state }); + navigate(path, { state }); }; return ( diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx index cb8a15fe48a7..04806a5e7738 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx @@ -1,5 +1,6 @@ import React, { useCallback } from "react"; import { useQueryClient } from "react-query"; +import { useNavigate } from "react-router-dom"; import { ConnectionTable } from "components/EntityTable"; import useSyncActions from "components/EntityTable/hooks"; @@ -7,7 +8,6 @@ import { ITableDataItem } from "components/EntityTable/types"; import { getConnectionTableData } from "components/EntityTable/utils"; import { invalidateConnectionsList } from "hooks/services/useConnectionHook"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "pages/routePaths"; import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService"; import { useSourceDefinitionList } from "services/connector/SourceDefinitionService"; @@ -19,7 +19,7 @@ interface IProps { } const SourceConnectionTable: React.FC = ({ connections }) => { - const { push } = useRouter(); + const navigate = useNavigate(); const queryClient = useQueryClient(); const { changeStatus, syncManualConnection } = useSyncActions(); @@ -51,7 +51,7 @@ const SourceConnectionTable: React.FC = ({ connections }) => { [connections, syncManualConnection] ); - const clickRow = (source: ITableDataItem) => push(`../../../${RoutePaths.Connections}/${source.connectionId}`); + const clickRow = (source: ITableDataItem) => navigate(`../../../${RoutePaths.Connections}/${source.connectionId}`); return ( (null) const useSelectWorkspace = (): ((workspace?: string | null | Workspace) => void) => { const queryClient = useQueryClient(); - const { push } = useRouter(); + const navigate = useNavigate(); return useCallback( async (workspace) => { if (typeof workspace === "object") { - push(`/${RoutePaths.Workspaces}/${workspace?.workspaceId}`); + navigate(`/${RoutePaths.Workspaces}/${workspace?.workspaceId}`); } else { - push(`/${RoutePaths.Workspaces}/${workspace}`); + navigate(`/${RoutePaths.Workspaces}/${workspace}`); } await queryClient.removeQueries(SCOPE_WORKSPACE); }, - [push, queryClient] + [navigate, queryClient] ); }; @@ -76,9 +76,9 @@ function useWorkspaceApiService() { } export const useCurrentWorkspaceId = () => { - const { params } = useRouter(); + const params = useParams<{ workspaceId: string }>(); - return params.workspaceId; + return params.workspaceId as string; }; export const useCurrentWorkspace = () => { diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx index e3705c227c33..b9e5dce9a963 100644 --- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classnames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; -import { NavLink } from "react-router-dom"; +import { NavLink, useLocation } from "react-router-dom"; import styled from "styled-components"; import { Link } from "components"; @@ -11,7 +11,6 @@ import Version from "components/Version"; import { useConfig } from "config"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; -import useRouter from "hooks/useRouter"; import { RoutePaths } from "../../../pages/routePaths"; import ConnectionsIcon from "./components/ConnectionsIcon"; @@ -54,7 +53,7 @@ const HelpIcon = styled(FontAwesomeIcon)` `; export const useCalculateSidebarStyles = () => { - const { location } = useRouter(); + const location = useLocation(); const menuItemStyle = (isActive: boolean) => { const isChild = location.pathname.split("/").length > 4 && location.pathname.split("/")[3] !== "settings";