Use links instead of onClick navigate function (#1969)

Add links instead of navigate + onClick in:
* Lists - ex. product list (except Plugins, see below)
* SortableTables - ex. product variants
* Sidebar
* Buttons that open new page - ex. "Create product"
* Backlinks
* Menus - ex. "Account Settings"
* Links that actually used onClick - ex. warehouse shipping zone, reset password

CHANGELOG.md

@@ -3,6 +3,7 @@
 All notable, unreleased changes to this project will be documented in this file. For the released changes, please visit the [Releases](https://github.com/saleor/saleor-dashboard/releases) page.
 
 ## [Unreleased]
+- Added links instead of imperative navigation with onClick - #1969 by @taniotanio7
 
 ## 3.1
 ### PREVIEW FEATURES

locale/defaultMessages.json

@@ -368,6 +368,10 @@
     "context": "dialog header",
     "string": "Change customer shipping address"
   },
+  "142MJn": {
+    "context": "select visible columns button",
+    "string": "Columns"
+  },
   "15PiOX": {
     "context": "button title",
     "string": "Unassign"

src/apps/components/AppDetailsPage/AppDetailsPage.stories.tsx

@@ -11,8 +11,7 @@ const props: AppDetailsPageProps = {
   navigateToApp: () => undefined,
   navigateToAppSettings: () => undefined,
   onAppActivateOpen: () => undefined,
-  onAppDeactivateOpen: () => undefined,
+  onAppDeactivateOpen: () => undefined
-  onBack: () => undefined
 };
 
 storiesOf("Views / Apps / App details", module)

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -1,4 +1,7 @@
 import { ButtonBase, Card, CardContent, Typography } from "@material-ui/core";
+import { appsListPath } from "@saleor/apps/urls";
+import { Backlink } from "@saleor/components/Backlink";
+import { Button } from "@saleor/components/Button";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -7,7 +10,6 @@ import PageHeader from "@saleor/components/PageHeader";
 import Skeleton from "@saleor/components/Skeleton";
 import { AppQuery } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, Button } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -26,7 +28,6 @@ export interface AppDetailsPageProps {
   navigateToAppSettings: () => void;
   onAppActivateOpen: () => void;
   onAppDeactivateOpen: () => void;
-  onBack: () => void;
 }
 
 export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
@@ -35,15 +36,14 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
   navigateToApp,
   navigateToAppSettings,
   onAppActivateOpen,
-  onAppDeactivateOpen,
+  onAppDeactivateOpen
-  onBack
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
 
   return (
     <Container>
-      <Backlink onClick={onBack}>
+      <Backlink href={appsListPath}>
         {intl.formatMessage(sectionNames.apps)}
       </Backlink>
       <PageHeader

src/apps/components/AppInstallErrorPage/AppInstallErrorPage.tsx

@@ -1,7 +1,7 @@
 import errorImg from "@assets/images/app-install-error.svg";
 import { Grid, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import Container from "@saleor/components/Container";
-import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -1,6 +1,7 @@
 import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
 import plusIcon from "@assets/images/plus-icon.svg";
 import { Card, CardContent, Grid, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -9,7 +10,6 @@ import Skeleton from "@saleor/components/Skeleton";
 import { AppFetchMutation, AppInstallMutation } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { buttonMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/apps/components/AppPage/AppPage.stories.tsx

@@ -8,8 +8,7 @@ import AppPage, { AppPageProps } from "./AppPage";
 const props: AppPageProps = {
   data: appDetails,
   url: appDetails.appUrl,
-  navigateToAbout: () => undefined,
+  aboutHref: "",
-  onBack: () => undefined,
   onError: () => undefined
 };
 

src/apps/components/AppPage/AppPage.tsx

@@ -1,11 +1,13 @@
 import { Typography } from "@material-ui/core";
+import { appsListPath } from "@saleor/apps/urls";
+import { Backlink } from "@saleor/components/Backlink";
+import { Button } from "@saleor/components/Button";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { AppQuery } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, Button } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -17,16 +19,14 @@ import useSettingsBreadcrumbs from "./useSettingsBreadcrumbs";
 export interface AppPageProps {
   data: AppQuery["app"];
   url: string;
-  navigateToAbout: () => void;
-  onBack: () => void;
   onError: () => void;
+  aboutHref: string;
 }
 
 export const AppPage: React.FC<AppPageProps> = ({
   data,
   url,
-  navigateToAbout,
+  aboutHref,
-  onBack,
   onError
 }) => {
   const intl = useIntl();
@@ -35,7 +35,7 @@ export const AppPage: React.FC<AppPageProps> = ({
 
   return (
     <Container>
-      <Backlink onClick={onBack}>
+      <Backlink href={appsListPath}>
         {intl.formatMessage(sectionNames.apps)}
       </Backlink>
       <Grid variant="uniform">
@@ -63,7 +63,7 @@ export const AppPage: React.FC<AppPageProps> = ({
           </div>
         </div>
         <div className={classes.appSettingsHeader}>
-          <Button onClick={navigateToAbout} variant="primary">
+          <Button href={aboutHref} variant="primary">
             <FormattedMessage
               id="UCHtG6"
               defaultMessage="About"

src/apps/components/AppsListPage/AppListPage.stories.tsx

@@ -26,15 +26,13 @@ const props: AppsListPageProps = {
   disabled: false,
   installedAppsList: appsList,
   loadingAppsInProgress: false,
-  navigateToCustomApp: () => undefined,
+  getCustomAppHref: () => "",
-  navigateToCustomAppCreate: () => undefined,
   onAppInProgressRemove: () => undefined,
   onAppInstallRetry: () => undefined,
   onCustomAppRemove: () => undefined,
   onInstalledAppRemove: () => undefined,
   onNextPage: () => undefined,
   onPreviousPage: () => undefined,
-  onRowClick: () => undefined,
   onRowAboutClick: () => undefined
 };
 

src/apps/components/AppsListPage/AppsListPage.tsx

@@ -17,8 +17,7 @@ export interface AppsListPageProps extends ListProps {
   customAppsList: AppsListQuery["apps"]["edges"];
   appsInProgressList?: AppsInstallationsQuery;
   loadingAppsInProgress: boolean;
-  navigateToCustomApp: (id: string) => () => void;
+  getCustomAppHref: (id: string) => string;
-  navigateToCustomAppCreate: () => void;
   onInstalledAppRemove: (id: string) => void;
   onCustomAppRemove: (id: string) => void;
   onAppInProgressRemove: (id: string) => void;
@@ -31,8 +30,7 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
   customAppsList,
   installedAppsList,
   loadingAppsInProgress,
-  navigateToCustomApp,
+  getCustomAppHref,
-  navigateToCustomAppCreate,
   onInstalledAppRemove,
   onCustomAppRemove,
   onAppInProgressRemove,
@@ -67,8 +65,7 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
       <CardSpacer />
       <CustomApps
         appsList={customAppsList}
-        navigateToCustomApp={navigateToCustomApp}
+        getCustomAppHref={getCustomAppHref}
-        navigateToCustomAppCreate={navigateToCustomAppCreate}
         onRemove={onCustomAppRemove}
       />
       <CardSpacer />

src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx

@@ -1,4 +1,6 @@
+import { appsListUrl } from "@saleor/apps/urls";
 import AccountPermissions from "@saleor/components/AccountPermissions";
+import { Backlink } from "@saleor/components/Backlink";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
@@ -10,8 +12,9 @@ import {
   PermissionFragment
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { getFormErrors } from "@saleor/utils/errors";
 import getAppErrorMessage from "@saleor/utils/errors/app";
 import React from "react";
@@ -29,22 +32,15 @@ export interface CustomAppCreatePageProps {
   errors: AppErrorFragment[];
   permissions: PermissionFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
-  onBack: () => void;
   onSubmit: (
     data: CustomAppCreatePageFormData
   ) => SubmitPromise<AppErrorFragment[]>;
 }
 
 const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
-  const {
+  const { disabled, errors, permissions, saveButtonBarState, onSubmit } = props;
-    disabled,
-    errors,
-    permissions,
-    saveButtonBarState,
-    onBack,
-    onSubmit
-  } = props;
   const intl = useIntl();
+  const navigate = useNavigator();
 
   const initialForm: CustomAppCreatePageFormData = {
     hasFullAccess: false,
@@ -64,7 +60,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
     >
       {({ data, change, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={appsListUrl()}>
             {intl.formatMessage(sectionNames.apps)}
           </Backlink>
           <PageHeader
@@ -106,7 +102,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
           <Savebar
             disabled={isSaveDisabled}
             state={saveButtonBarState}
-            onCancel={onBack}
+            onCancel={() => navigate(appsListUrl())}
             onSubmit={submit}
           />
         </Container>

src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx

@@ -1,8 +1,9 @@
 import { Card, CardContent, Paper, Typography } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
+import { Button } from "@saleor/components/Button";
 import Link from "@saleor/components/Link";
 import useClipboard from "@saleor/hooks/useClipboard";
-import { Button, IconButton } from "@saleor/macaw-ui";
+import { IconButton } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx

@@ -1,3 +1,4 @@
+import { appsListUrl } from "@saleor/apps/urls";
 import AccountPermissions from "@saleor/components/AccountPermissions";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
@@ -12,6 +13,7 @@ import {
   ShopInfoQuery
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
 import {
   Backlink,
@@ -45,16 +47,14 @@ export interface CustomAppDetailsPageProps {
   app: AppUpdateMutation["appUpdate"]["app"];
   token: string;
   onApiUriClick: () => void;
-  onBack: () => void;
   onTokenDelete: (id: string) => void;
   onTokenClose: () => void;
   onTokenCreate: () => void;
   onSubmit: (
     data: CustomAppDetailsPageFormData
   ) => SubmitPromise<AppErrorFragment[]>;
-  onWebhookCreate: () => void;
+  webhookCreateHref: string;
   onWebhookRemove: (id: string) => void;
-  navigateToWebhookDetails: (id: string) => () => void;
   onAppActivateOpen: () => void;
   onAppDeactivateOpen: () => void;
 }
@@ -67,21 +67,20 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
     permissions,
     saveButtonBarState,
     app,
-    navigateToWebhookDetails,
     token,
     onApiUriClick,
-    onBack,
     onTokenClose,
     onTokenCreate,
     onTokenDelete,
     onSubmit,
-    onWebhookCreate,
+    webhookCreateHref,
     onWebhookRemove,
     onAppActivateOpen,
     onAppDeactivateOpen
   } = props;
   const intl = useIntl();
   const classes = useStyles({});
+  const navigate = useNavigator();
 
   const webhooks = app?.webhooks;
 
@@ -109,7 +108,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
     >
       {({ data, change, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={appsListUrl()}>
             {intl.formatMessage(sectionNames.apps)}
           </Backlink>
           <PageHeader title={app?.name}>
@@ -164,8 +163,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
               <WebhooksList
                 webhooks={webhooks}
                 onRemove={onWebhookRemove}
-                onRowClick={navigateToWebhookDetails}
+                createHref={app?.isActive && webhookCreateHref}
-                onCreate={app?.isActive && onWebhookCreate}
               />
             </div>
             <div>
@@ -193,7 +191,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
           <Savebar
             disabled={isSaveDisabled}
             state={saveButtonBarState}
-            onCancel={onBack}
+            onCancel={() => navigate(appsListUrl())}
             onSubmit={submit}
           />
         </Container>

src/apps/components/CustomAppTokens/CustomAppTokens.tsx

@@ -5,11 +5,12 @@ import {
   TableHead,
   TableRow
 } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { AppUpdateMutation } from "@saleor/graphql";
-import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/apps/components/CustomApps/CustomApps.tsx

@@ -5,15 +5,13 @@ import {
   TableRow,
   Typography
 } from "@material-ui/core";
+import { customAppAddUrl } from "@saleor/apps/urls";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { AppsListQuery } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
-import {
+import { DeleteIcon, IconButton, ResponsiveTable } from "@saleor/macaw-ui";
-  Button,
-  DeleteIcon,
-  IconButton,
-  ResponsiveTable
-} from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -24,16 +22,14 @@ import DeactivatedText from "../DeactivatedText";
 
 export interface CustomAppsProps {
   appsList: AppsListQuery["apps"]["edges"];
-  navigateToCustomApp: (id: string) => () => void;
+  getCustomAppHref: (id: string) => string;
-  navigateToCustomAppCreate?: () => void;
   onRemove: (id: string) => void;
 }
 
 const CustomApps: React.FC<CustomAppsProps> = ({
   appsList,
-  navigateToCustomAppCreate,
   onRemove,
-  navigateToCustomApp
+  getCustomAppHref
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -42,19 +38,17 @@ const CustomApps: React.FC<CustomAppsProps> = ({
     <Card className={classes.customApps}>
       <CardTitle
         toolbar={
-          !!navigateToCustomAppCreate && (
+          <Button
-            <Button
+            variant="secondary"
-              variant="secondary"
+            href={customAppAddUrl}
-              onClick={navigateToCustomAppCreate}
+            data-test-id="create-app"
-              data-test-id="create-app"
+          >
-            >
+            <FormattedMessage
-              <FormattedMessage
+              id="XB2Jj9"
-                id="XB2Jj9"
+              defaultMessage="Create App"
-                defaultMessage="Create App"
+              description="create app button"
-                description="create app button"
+            />
-              />
+          </Button>
-            </Button>
-          )
         }
         title={intl.formatMessage(commonMessages.customApps)}
       />
@@ -64,10 +58,10 @@ const CustomApps: React.FC<CustomAppsProps> = ({
             appsList,
             (app, index) =>
               app ? (
-                <TableRow
+                <TableRowLink
                   key={app.node.id}
                   className={classes.tableRow}
-                  onClick={navigateToCustomApp(app.node.id)}
+                  href={getCustomAppHref(app.node.id)}
                 >
                   <TableCell className={classes.colName}>
                     <span data-tc="name" className={classes.appName}>
@@ -88,7 +82,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
                       <DeleteIcon />
                     </IconButton>
                   </TableCell>
-                </TableRow>
+                </TableRowLink>
               ) : (
                 <AppsSkeleton key={index} />
               ),

src/apps/components/InstalledApps/InstalledApps.tsx

@@ -6,8 +6,10 @@ import {
   TableRow,
   Typography
 } from "@material-ui/core";
+import { appUrl } from "@saleor/apps/urls";
 import CardTitle from "@saleor/components/CardTitle";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { AppsListQuery } from "@saleor/graphql";
 import {
   Button,
@@ -39,7 +41,6 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
   disabled,
   onNextPage,
   onPreviousPage,
-  onRowClick,
   onRowAboutClick,
   onUpdateListSettings,
   pageInfo,
@@ -78,10 +79,10 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
             appsList,
             (app, index) =>
               app ? (
-                <TableRow
+                <TableRowLink
                   key={app.node.id}
                   className={classes.tableRow}
-                  onClick={onRowClick(app.node.id)}
+                  href={appUrl(app.node.id)}
                 >
                   <TableCell className={classes.colName}>
                     <span data-tc="name" className={classes.appName}>
@@ -119,7 +120,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                       <DeleteIcon />
                     </IconButton>
                   </TableCell>
-                </TableRow>
+                </TableRowLink>
               ) : (
                 <AppsSkeleton key={index} />
               ),

src/apps/components/Marketplace/Marketplace.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
-import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -8,6 +8,7 @@ import {
   Typography
 } from "@material-ui/core";
 import BackButton from "@saleor/components/BackButton";
+import { Button } from "@saleor/components/Button";
 import CardSpacer from "@saleor/components/CardSpacer";
 import ConfirmButton from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
@@ -15,7 +16,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/apps/views/App/App.tsx

@@ -45,8 +45,7 @@ export const App: React.FC<AppProps> = ({ id }) => {
     <AppPage
       data={data?.app}
       url={appCompleteUrl}
-      navigateToAbout={() => navigate(appDetailsUrl(id))}
+      aboutHref={appDetailsUrl(id)}
-      onBack={() => navigate(appsListPath)}
       onError={() =>
         notify({
           status: "error",

src/apps/views/AppDetails/AppDetails.tsx

@@ -98,7 +98,7 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
   };
 
   if (!appExists) {
-    return <NotFoundPage onBack={() => navigate(appsListPath)} />;
+    return <NotFoundPage backHref={appsListPath} />;
   }
 
   return (
@@ -124,7 +124,6 @@ export const AppDetails: React.FC<AppDetailsProps> = ({ id, params }) => {
         navigateToAppSettings={() => navigate(appSettingsUrl(id))}
         onAppActivateOpen={() => openModal("app-activate")}
         onAppDeactivateOpen={() => openModal("app-deactivate")}
-        onBack={() => navigate(appsListPath)}
       />
     </>
   );

src/apps/views/AppSettings/AppSettings.tsx

@@ -1,7 +1,6 @@
 import { appMessages } from "@saleor/apps/messages";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { useAppQuery } from "@saleor/graphql";
-import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -21,20 +20,18 @@ export const AppSettings: React.FC<AppSettingsProps> = ({ id }) => {
 
   const appExists = data?.app !== null;
 
-  const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
 
   if (!appExists) {
-    return <NotFoundPage onBack={() => navigate(appsListPath)} />;
+    return <NotFoundPage backHref={appsListPath} />;
   }
 
   return (
     <AppPage
       data={data?.app}
       url={data?.app.configurationUrl}
-      navigateToAbout={() => navigate(appDetailsUrl(id))}
+      aboutHref={appDetailsUrl(id)}
-      onBack={() => navigate(appsListPath)}
       onError={() =>
         notify({
           status: "error",

src/apps/views/AppsList/AppsList.tsx

@@ -36,8 +36,6 @@ import {
   AppListUrlDialog,
   AppListUrlQueryParams,
   appsListUrl,
-  appUrl,
-  customAppAddUrl,
   customAppUrl
 } from "../../urls";
 import { messages } from "./messages";
@@ -314,11 +312,9 @@ export const AppsList: React.FC<AppsListProps> = ({ params }) => {
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
         onUpdateListSettings={updateListSettings}
-        onRowClick={id => () => navigate(appUrl(id))}
         onRowAboutClick={id => () => navigate(appDetailsUrl(id))}
         onAppInstallRetry={onAppInstallRetry}
-        navigateToCustomApp={id => () => navigate(customAppUrl(id))}
+        getCustomAppHref={id => customAppUrl(id)}
-        navigateToCustomAppCreate={() => navigate(customAppAddUrl)}
         onInstalledAppRemove={id =>
           openModal("remove-app", {
             id

src/apps/views/CustomAppCreate/CustomAppCreate.tsx

@@ -11,7 +11,7 @@ import { useIntl } from "react-intl";
 import CustomAppCreatePage, {
   CustomAppCreatePageFormData
 } from "../../components/CustomAppCreatePage";
-import { appsListUrl, customAppUrl } from "../../urls";
+import { customAppUrl } from "../../urls";
 import { messages } from "./messages";
 
 interface CustomAppCreateProps {
@@ -36,8 +36,6 @@ export const CustomAppCreate: React.FC<CustomAppCreateProps> = ({
     }
   };
 
-  const handleBack = () => navigate(appsListUrl());
-
   const [createApp, createAppOpts] = useAppCreateMutation({
     onCompleted: onSubmit
   });
@@ -62,7 +60,6 @@ export const CustomAppCreate: React.FC<CustomAppCreateProps> = ({
       <CustomAppCreatePage
         disabled={false}
         errors={createAppOpts.data?.appCreate.errors || []}
-        onBack={handleBack}
         onSubmit={handleSubmit}
         permissions={shop?.permissions}
         saveButtonBarState={createAppOpts.status}

src/apps/views/CustomAppDetails/CustomAppDetails.tsx

@@ -27,7 +27,7 @@ import { extractMutationErrors, getStringOrPlaceholder } from "@saleor/misc";
 import getAppErrorMessage from "@saleor/utils/errors/app";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
-import { webhookAddPath, webhookPath } from "@saleor/webhooks/urls";
+import { webhookAddPath } from "@saleor/webhooks/urls";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -143,11 +143,10 @@ export const CustomAppDetails: React.FC<OrderListProps> = ({
       });
     }
   };
-  const handleBack = () => navigate(appsListUrl());
   const customApp = data?.app;
 
   if (customApp === null) {
-    return <NotFoundPage onBack={handleBack} />;
+    return <NotFoundPage backHref={appsListUrl()} />;
   }
 
   const onTokenCreate = (data: AppTokenCreateMutation) => {
@@ -225,9 +224,7 @@ export const CustomAppDetails: React.FC<OrderListProps> = ({
         disabled={loading}
         errors={updateAppOpts.data?.appUpdate?.errors || []}
         token={token}
-        navigateToWebhookDetails={id => () => navigate(webhookPath(id))}
         onApiUriClick={() => open(API_URI, "blank")}
-        onBack={handleBack}
         onSubmit={handleSubmit}
         onTokenClose={onTokenClose}
         onTokenCreate={() => openModal("create-token")}
@@ -236,7 +233,7 @@ export const CustomAppDetails: React.FC<OrderListProps> = ({
             id
           })
         }
-        onWebhookCreate={() => navigate(webhookAddPath(id))}
+        webhookCreateHref={webhookAddPath(id)}
         onWebhookRemove={id =>
           openModal("remove-webhook", {
             id

src/attributes/components/AttributeList/AttributeList.tsx

@@ -1,11 +1,15 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
-import { AttributeListUrlSortField } from "@saleor/attributes/urls";
+import {
+  AttributeListUrlSortField,
+  attributeUrl
+} from "@saleor/attributes/urls";
 import Checkbox from "@saleor/components/Checkbox";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { AttributeFragment } from "@saleor/graphql";
 import { translateBoolean } from "@saleor/intl";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -69,7 +73,6 @@ const AttributeList: React.FC<AttributeListProps> = ({
   isChecked,
   onNextPage,
   onPreviousPage,
-  onRowClick,
   pageInfo,
   selected,
   sort,
@@ -187,11 +190,11 @@ const AttributeList: React.FC<AttributeListProps> = ({
             const isSelected = attribute ? isChecked(attribute.id) : false;
 
             return (
-              <TableRow
+              <TableRowLink
                 selected={isSelected}
                 hover={!!attribute}
                 key={attribute ? attribute.id : "skeleton"}
-                onClick={attribute && onRowClick(attribute.id)}
+                href={attribute && attributeUrl(attribute.id)}
                 className={classes.link}
                 data-test-id={"id-" + maybe(() => attribute.id)}
               >
@@ -246,7 +249,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
                     <Skeleton />
                   )}
                 </TableCell>
-              </TableRow>
+              </TableRowLink>
             );
           },
           () => (

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -1,9 +1,14 @@
 import { Card } from "@material-ui/core";
-import { AttributeListUrlSortField } from "@saleor/attributes/urls";
+import {
+  attributeAddUrl,
+  AttributeListUrlSortField
+} from "@saleor/attributes/urls";
+import { Backlink } from "@saleor/components/Backlink";
+import { Button } from "@saleor/components/Button";
 import FilterBar from "@saleor/components/FilterBar";
+import { configurationMenuUrl } from "@saleor/configuration";
 import { AttributeFragment } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -30,14 +35,11 @@ export interface AttributeListPageProps
     SortPage<AttributeListUrlSortField>,
     TabPageProps {
   attributes: AttributeFragment[];
-  onBack: () => void;
 }
 
 const AttributeListPage: React.FC<AttributeListPageProps> = ({
   filterOpts,
   initialSearch,
-  onAdd,
-  onBack,
   onFilterChange,
   onSearchChange,
   currentTab,
@@ -54,12 +56,12 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
 
   return (
     <Container>
-      <Backlink onClick={onBack}>
+      <Backlink href={configurationMenuUrl}>
         <FormattedMessage {...sectionNames.configuration} />
       </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.attributes)}>
         <Button
-          onClick={onAdd}
+          href={attributeAddUrl()}
           variant="primary"
           data-test-id="create-attribute-button"
         >

src/attributes/components/AttributePage/AttributePage.tsx

@@ -1,4 +1,6 @@
+import { attributeListUrl } from "@saleor/attributes/urls";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@saleor/attributes/utils/data";
+import { Backlink } from "@saleor/components/Backlink";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
@@ -18,8 +20,9 @@ import {
   MeasurementUnitsEnum
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { maybe } from "@saleor/misc";
 import { ListSettings, ReorderAction } from "@saleor/types";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@saleor/utils/maps";
@@ -39,7 +42,6 @@ export interface AttributePageProps {
   errors: AttributeErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
   values: AttributeDetailsQuery["attribute"]["choices"];
-  onBack: () => void;
   onDelete: () => void;
   onSubmit: (data: AttributePageFormData) => SubmitPromise;
   onValueAdd: () => void;
@@ -78,7 +80,6 @@ const AttributePage: React.FC<AttributePageProps> = ({
   errors: apiErrors,
   saveButtonBarState,
   values,
-  onBack,
   onDelete,
   onSubmit,
   onValueAdd,
@@ -93,6 +94,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
   children
 }) => {
   const intl = useIntl();
+  const navigate = useNavigator();
+
   const {
     isMetadataModified,
     isPrivateMetadataModified,
@@ -177,7 +180,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
         return (
           <>
             <Container>
-              <Backlink onClick={onBack}>
+              <Backlink href={attributeListUrl()}>
                 {intl.formatMessage(sectionNames.attributes)}
               </Backlink>
               <PageHeader
@@ -247,7 +250,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
               <Savebar
                 disabled={isSaveDisabled}
                 state={saveButtonBarState}
-                onCancel={onBack}
+                onCancel={() => navigate(attributeListUrl())}
                 onSubmit={submit}
                 onDelete={attribute === null ? undefined : onDelete}
               />

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -5,6 +5,7 @@ import {
   TableHead,
   TableRow
 } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
@@ -17,14 +18,14 @@ import {
   AttributeInputTypeEnum,
   AttributeValueListFragment
 } from "@saleor/graphql";
-import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { ListProps, RelayToFlat, ReorderAction } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 export interface AttributeValuesProps
-  extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">> {
+  extends Pick<ListProps, Exclude<keyof ListProps, "getRowHref">> {
   disabled: boolean;
   values: RelayToFlat<AttributeValueListFragment>;
   onValueAdd: () => void;
@@ -160,7 +161,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
           {renderCollection(
             values,
             (value, valueIndex) => (
-              <SortableTableRow
+              <SortableTableRow<"row">
                 className={!!value ? classes.link : undefined}
                 hover={!!value}
                 onClick={!!value ? () => onValueUpdate(value.id) : undefined}

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -33,7 +33,6 @@ import {
   attributeAddUrl,
   AttributeAddUrlDialog,
   AttributeAddUrlQueryParams,
-  attributeListUrl,
   attributeUrl
 } from "../../urls";
 import {
@@ -179,7 +178,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
       attribute={null}
       disabled={attributeCreateOpts.loading}
       errors={attributeCreateOpts.data?.attributeCreate.errors || []}
-      onBack={() => navigate(attributeListUrl())}
       onDelete={undefined}
       onSubmit={handleSubmit}
       onValueAdd={() => openModal("add-value")}

src/attributes/views/AttributeDetails/AttributeDetails.tsx

@@ -248,7 +248,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
       attribute={data?.attribute}
       disabled={loading}
       errors={attributeUpdateOpts.data?.attributeUpdate.errors || []}
-      onBack={() => navigate(attributeListUrl())}
       onDelete={() => openModal("remove")}
       onSubmit={handleSubmit}
       onValueAdd={() => openModal("add-value")}

src/attributes/views/AttributeList/AttributeList.tsx

@@ -11,7 +11,6 @@ import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog, {
   SaveFilterTabDialogFormData
 } from "@saleor/components/SaveFilterTabDialog";
-import { configurationMenuUrl } from "@saleor/configuration";
 import {
   useAttributeBulkDeleteMutation,
   useAttributeListQuery
@@ -36,11 +35,9 @@ import { maybe } from "../../../misc";
 import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog";
 import AttributeListPage from "../../components/AttributeListPage";
 import {
-  attributeAddUrl,
   attributeListUrl,
   AttributeListUrlDialog,
-  AttributeListUrlQueryParams,
+  AttributeListUrlQueryParams
-  attributeUrl
 } from "../../urls";
 import { getFilterQueryParam } from "./filters";
 import { getSortQueryVariables } from "./sort";
@@ -151,13 +148,10 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
         filterOpts={getFilterOpts(params)}
         initialSearch={params.query || ""}
         isChecked={isSelected}
-        onAdd={() => navigate(attributeAddUrl())}
         onAll={resetFilters}
-        onBack={() => navigate(configurationMenuUrl)}
         onFilterChange={changeFilters}
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
-        onRowClick={id => () => navigate(attributeUrl(id))}
         onSearchChange={handleSearchChange}
         onSort={handleSort}
         onTabChange={handleTabChange}

src/auth/components/LoginPage/LoginPage.stories.tsx

@@ -16,7 +16,6 @@ const props: Omit<LoginCardProps, "classes"> = {
   ],
   loading: false,
   onExternalAuthentication: () => undefined,
-  onPasswordRecovery: undefined,
   onSubmit: () => undefined
 };
 

src/auth/components/LoginPage/LoginPage.tsx

@@ -5,13 +5,16 @@ import {
   Typography
 } from "@material-ui/core";
 import { UserContextError } from "@saleor/auth/types";
+import { passwordResetUrl } from "@saleor/auth/urls";
+import { Button } from "@saleor/components/Button";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import { AvailableExternalAuthenticationsQuery } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { Button, EyeIcon, IconButton } from "@saleor/macaw-ui";
+import { EyeIcon, IconButton } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 import useStyles from "../styles";
 import LoginForm, { LoginFormData } from "./form";
@@ -23,7 +26,6 @@ export interface LoginCardProps {
   loading: boolean;
   externalAuthentications?: AvailableExternalAuthenticationsQuery["shop"]["availableExternalAuthentications"];
   onExternalAuthentication: (pluginId: string) => void;
-  onPasswordRecovery: () => void;
   onSubmit?: (event: LoginFormData) => SubmitPromise;
 }
 
@@ -34,7 +36,6 @@ const LoginCard: React.FC<LoginCardProps> = props => {
     loading,
     externalAuthentications = [],
     onExternalAuthentication,
-    onPasswordRecovery,
     onSubmit
   } = props;
 
@@ -109,9 +110,9 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             </IconButton>
           </div>
           <Typography
-            component="a"
+            component={Link}
             className={classes.link}
-            onClick={onPasswordRecovery}
+            to={passwordResetUrl}
             variant="body2"
             data-test-id="reset-password-link"
           >

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -1,8 +1,8 @@
 import { TextField, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import { SubmitPromise } from "@saleor/hooks/useForm";
-import { Button } from "@saleor/macaw-ui";
 import { SetPasswordData } from "@saleor/sdk";
 import getAccountErrorMessage from "@saleor/utils/errors/account";
 import React from "react";

src/auth/components/ResetPasswordPage/ResetPasswordPage.stories.tsx

@@ -9,7 +9,6 @@ import ResetPasswordPage, { ResetPasswordPageProps } from "./ResetPasswordPage";
 const props: ResetPasswordPageProps = {
   disabled: false,
   error: undefined,
-  onBack: () => undefined,
   onSubmit: () => undefined
 };
 storiesOf("Views / Authentication / Reset password", module)

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,10 +1,13 @@
 import { TextField, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
+import { IconButton } from "@saleor/components/IconButton";
+import { APP_MOUNT_URI } from "@saleor/config";
 import { RequestPasswordResetMutation } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
-import { ArrowRightIcon, Button, IconButton } from "@saleor/macaw-ui";
+import { ArrowRightIcon } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -16,7 +19,6 @@ export interface ResetPasswordPageFormData {
 export interface ResetPasswordPageProps {
   disabled: boolean;
   error: string;
-  onBack: () => void;
   onSubmit: (
     data: ResetPasswordPageFormData
   ) => SubmitPromise<
@@ -25,7 +27,7 @@ export interface ResetPasswordPageProps {
 }
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
-  const { disabled, error, onBack, onSubmit } = props;
+  const { disabled, error, onSubmit } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -34,7 +36,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
     <Form initial={{ email: "" }} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <>
-          <IconButton className={classes.backBtn} onClick={onBack}>
+          <IconButton className={classes.backBtn} href={APP_MOUNT_URI}>
             <ArrowRightIcon className={classes.arrow} />
           </IconButton>
           <Typography variant="h3" className={classes.header}>

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import FormSpacer from "@saleor/components/FormSpacer";
-import { Button } from "@saleor/macaw-ui";
+import {} from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/auth/views/Login.tsx

@@ -9,11 +9,7 @@ import useRouter from "use-react-router";
 import { useUser } from "..";
 import LoginPage from "../components/LoginPage";
 import { LoginFormData } from "../components/LoginPage/types";
-import {
+import { loginCallbackPath, LoginUrlQueryParams } from "../urls";
-  loginCallbackPath,
-  LoginUrlQueryParams,
-  passwordResetUrl
-} from "../urls";
 
 interface LoginViewProps {
   params: LoginUrlQueryParams;
@@ -97,7 +93,6 @@ const LoginView: React.FC<LoginViewProps> = ({ params }) => {
       }
       loading={externalAuthenticationsLoading || authenticating}
       onExternalAuthentication={handleRequestExternalAuthentication}
-      onPasswordRecovery={() => navigate(passwordResetUrl)}
       onSubmit={handleSubmit}
     />
   );

src/auth/views/ResetPassword.tsx

@@ -60,7 +60,6 @@ const ResetPasswordView: React.FC = () => {
     <ResetPasswordPage
       disabled={requestPasswordResetOpts.loading}
       error={error}
-      onBack={() => navigate(APP_MOUNT_URI)}
       onSubmit={handleSubmit}
     />
   );

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, TextField } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
 import ImageUpload from "@saleor/components/ImageUpload";
@@ -6,7 +7,7 @@ import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { CategoryDetailsFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -1,3 +1,4 @@
+import { Backlink } from "@saleor/components/Backlink";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import Container from "@saleor/components/Container";
 import Metadata from "@saleor/components/Metadata";
@@ -5,8 +6,9 @@ import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import SeoForm from "@saleor/components/SeoForm";
 import { ProductErrorFragment } from "@saleor/graphql";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -17,24 +19,25 @@ export interface CategoryCreatePageProps {
   errors: ProductErrorFragment[];
   disabled: boolean;
   saveButtonBarState: ConfirmButtonTransitionState;
+  backUrl: string;
   onSubmit(data: CategoryCreateData);
-  onBack();
 }
 
 export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   disabled,
   onSubmit,
-  onBack,
   errors,
-  saveButtonBarState
+  saveButtonBarState,
+  backUrl
 }) => {
   const intl = useIntl();
+  const navigate = useNavigator();
 
   return (
     <CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
       {({ data, change, handlers, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={backUrl}>
             {intl.formatMessage(sectionNames.categories)}
           </Backlink>
           <PageHeader
@@ -73,7 +76,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
             <CardSpacer />
             <Metadata data={data} onChange={handlers.changeMetadata} />
             <Savebar
-              onCancel={onBack}
+              onCancel={() => navigate(backUrl)}
               onSubmit={submit}
               state={saveButtonBarState}
               disabled={isSaveDisabled}

src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx

@@ -6,8 +6,9 @@ import {
   DialogTitle
 } from "@material-ui/core";
 import BackButton from "@saleor/components/BackButton";
+import { Button } from "@saleor/components/Button";
 import { buttonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/categories/components/CategoryList/CategoryList.tsx

@@ -1,11 +1,12 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
-import { CategoryListUrlSortField } from "@saleor/categories/urls";
+import { CategoryListUrlSortField, categoryUrl } from "@saleor/categories/urls";
 import Checkbox from "@saleor/components/Checkbox";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { CategoryFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
@@ -49,7 +50,6 @@ interface CategoryListProps
     SortPage<CategoryListUrlSortField> {
   categories?: CategoryFragment[];
   isRoot: boolean;
-  onAdd?();
 }
 
 const CategoryList: React.FC<CategoryListProps> = props => {
@@ -68,7 +68,6 @@ const CategoryList: React.FC<CategoryListProps> = props => {
     onNextPage,
     onPreviousPage,
     onUpdateListSettings,
-    onRowClick,
     onSort
   } = props;
 
@@ -157,10 +156,10 @@ const CategoryList: React.FC<CategoryListProps> = props => {
             const isSelected = category ? isChecked(category.id) : false;
 
             return (
-              <TableRow
+              <TableRowLink
                 className={classes.tableRow}
                 hover={!!category}
-                onClick={category ? onRowClick(category.id) : undefined}
+                href={category && categoryUrl(category.id)}
                 key={category ? category.id : "skeleton"}
                 selected={isSelected}
                 data-test-id={"id-" + maybe(() => category.id)}
@@ -194,7 +193,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
                     <Skeleton />
                   )}
                 </TableCell>
-              </TableRow>
+              </TableRowLink>
             );
           },
           () => (

src/categories/components/CategoryListPage/CategoryListPage.tsx

@@ -1,11 +1,14 @@
 import { Card } from "@material-ui/core";
-import { CategoryListUrlSortField } from "@saleor/categories/urls";
+import {
+  categoryAddUrl,
+  CategoryListUrlSortField
+} from "@saleor/categories/urls";
+import { Button } from "@saleor/components/Button";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import SearchBar from "@saleor/components/SearchBar";
 import { CategoryFragment } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
 import {
   ListActions,
   PageListProps,
@@ -40,11 +43,9 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   toggle,
   toggleAll,
   toolbar,
-  onAdd,
   onAll,
   onNextPage,
   onPreviousPage,
-  onRowClick,
   onSearchChange,
   onTabChange,
   onTabDelete,
@@ -59,7 +60,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
       <PageHeader title={intl.formatMessage(sectionNames.categories)}>
         <Button
           variant="primary"
-          onClick={onAdd}
+          href={categoryAddUrl()}
           data-test-id="create-category"
         >
           <FormattedMessage
@@ -100,10 +101,8 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
           toggle={toggle}
           toggleAll={toggleAll}
           toolbar={toolbar}
-          onAdd={onAdd}
           onNextPage={onNextPage}
           onPreviousPage={onPreviousPage}
-          onRowClick={onRowClick}
           onUpdateListSettings={onUpdateListSettings}
           {...listProps}
         />

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -6,9 +6,11 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { CategoryDetailsQuery } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
+import { productUrl } from "@saleor/products/urls";
 import { ListActions, ListProps, RelayToFlat } from "@saleor/types";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -64,8 +66,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
     toggleAll,
     toolbar,
     onNextPage,
-    onPreviousPage,
+    onPreviousPage
-    onRowClick
   } = props;
 
   const classes = useStyles(props);
@@ -117,12 +118,12 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
               const isSelected = product ? isChecked(product.id) : false;
 
               return (
-                <TableRow
+                <TableRowLink
                   data-test-id="product-row"
                   selected={isSelected}
                   hover={!!product}
                   key={product ? product.id : "skeleton"}
-                  onClick={product && onRowClick(product.id)}
+                  href={product && productUrl(product.id)}
                   className={classes.link}
                 >
                   <TableCell padding="checkbox">
@@ -139,7 +140,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
                   >
                     {product ? product.name : <Skeleton />}
                   </TableCellAvatar>
-                </TableRow>
+                </TableRowLink>
               );
             },
             () => (

src/categories/components/CategoryProducts/CategoryProducts.tsx

@@ -1,10 +1,10 @@
 import { Card } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import { InternalLink } from "@saleor/components/InternalLink";
 import { CategoryDetailsQuery } from "@saleor/graphql";
-import { Button } from "@saleor/macaw-ui";
+import { productAddUrl, productListUrl } from "@saleor/products/urls";
-import { productListUrl } from "@saleor/products/urls";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -22,10 +22,8 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
   products,
   disabled,
   pageInfo,
-  onAdd,
   onNextPage,
   onPreviousPage,
-  onRowClick,
   categoryId,
   categoryName,
   isChecked,
@@ -66,7 +64,7 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
             <HorizontalSpacer />
             <Button
               variant="tertiary"
-              onClick={onAdd}
+              href={productAddUrl()}
               data-test-id="add-products"
             >
               <FormattedMessage
@@ -84,7 +82,6 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
         pageInfo={pageInfo}
         onNextPage={onNextPage}
         onPreviousPage={onPreviousPage}
-        onRowClick={onRowClick}
         selected={selected}
         isChecked={isChecked}
         toggle={toggle}

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -1,4 +1,6 @@
 import { Card } from "@material-ui/core";
+import { categoryListUrl, categoryUrl } from "@saleor/categories/urls";
+import { Backlink } from "@saleor/components/Backlink";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import Container from "@saleor/components/Container";
@@ -9,12 +11,9 @@ import SeoForm from "@saleor/components/SeoForm";
 import { Tab, TabContainer } from "@saleor/components/Tab";
 import { CategoryDetailsQuery, ProductErrorFragment } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import {
+import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
-  Backlink,
-  Button,
-  ConfirmButtonTransitionState
-} from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -45,17 +44,14 @@ export interface CategoryUpdatePageProps
     hasPreviousPage: boolean;
   };
   saveButtonBarState: ConfirmButtonTransitionState;
+  addProductHref: string;
+  addCategoryHref: string;
   onImageDelete: () => void;
   onSubmit: (data: CategoryUpdateData) => SubmitPromise;
   onImageUpload(file: File);
   onNextPage();
   onPreviousPage();
-  onProductClick(id: string): () => void;
-  onAddProduct();
-  onBack();
   onDelete();
-  onAddCategory();
-  onCategoryClick(id: string): () => void;
 }
 
 const CategoriesTab = Tab(CategoryPageTab.categories);
@@ -71,14 +67,10 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
   products,
   saveButtonBarState,
   subcategories,
-  onAddCategory,
+  addCategoryHref,
-  onAddProduct,
-  onBack,
-  onCategoryClick,
   onDelete,
   onNextPage,
   onPreviousPage,
-  onProductClick,
   onSubmit,
   onImageDelete,
   onImageUpload,
@@ -90,6 +82,11 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
   toggleAll
 }: CategoryUpdatePageProps) => {
   const intl = useIntl();
+  const navigate = useNavigator();
+
+  const backHref = category?.parent?.id
+    ? categoryUrl(category?.parent?.id)
+    : categoryListUrl();
 
   return (
     <CategoryUpdateForm
@@ -99,7 +96,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
     >
       {({ data, change, handlers, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={backHref}>
             {intl.formatMessage(sectionNames.categories)}
           </Backlink>
           <PageHeader title={category?.name} />
@@ -174,7 +171,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                 toolbar={
                   <Button
                     variant="tertiary"
-                    onClick={onAddCategory}
+                    href={addCategoryHref}
                     data-test-id="create-subcategory"
                   >
                     <FormattedMessage
@@ -198,7 +195,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                 toolbar={subcategoryListToolbar}
                 onNextPage={onNextPage}
                 onPreviousPage={onPreviousPage}
-                onRowClick={onCategoryClick}
                 onSort={() => undefined}
               />
             </Card>
@@ -212,8 +208,6 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               pageInfo={pageInfo}
               onNextPage={onNextPage}
               onPreviousPage={onPreviousPage}
-              onRowClick={onProductClick}
-              onAdd={onAddProduct}
               toggle={toggle}
               toggleAll={toggleAll}
               selected={selected}
@@ -222,7 +216,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
             />
           )}
           <Savebar
-            onCancel={onBack}
+            onCancel={() => navigate(backHref)}
             onDelete={onDelete}
             onSubmit={submit}
             state={saveButtonBarState}

src/categories/views/CategoryCreate.tsx

@@ -88,9 +88,7 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
         saveButtonBarState={createCategoryResult.status}
         errors={createCategoryResult.data?.categoryCreate.errors || []}
         disabled={createCategoryResult.loading}
-        onBack={() =>
+        backUrl={parentId ? categoryUrl(parentId) : categoryListUrl()}
-          navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
-        }
         onSubmit={handleSubmit}
       />
     </>

src/categories/views/CategoryDetails.tsx

@@ -32,7 +32,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { PAGINATE_BY } from "../../config";
 import { extractMutationErrors, maybe } from "../../misc";
-import { productAddUrl, productUrl } from "../../products/urls";
+import { productAddUrl } from "../../products/urls";
 import {
   CategoryPageTab,
   CategoryUpdatePage
@@ -217,14 +217,8 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
         category={maybe(() => data.category)}
         disabled={loading}
         errors={updateResult.data?.categoryUpdate.errors || []}
-        onAddCategory={() => navigate(categoryAddUrl(id))}
+        addCategoryHref={categoryAddUrl(id)}
-        onAddProduct={() => navigate(productAddUrl())}
+        addProductHref={productAddUrl()}
-        onBack={() =>
-          navigate(
-            maybe(() => categoryUrl(data.category.parent.id), categoryListUrl())
-          )
-        }
-        onCategoryClick={id => () => navigate(categoryUrl(id))}
         onDelete={() => openModal("delete")}
         onImageDelete={() =>
           updateCategory({
@@ -249,7 +243,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
         onNextPage={loadNextPage}
         onPreviousPage={loadPreviousPage}
         pageInfo={pageInfo}
-        onProductClick={id => () => navigate(productUrl(id))}
         onSubmit={handleSubmit}
         products={mapEdgesToItems(data?.category?.products)}
         saveButtonBarState={updateResult.status}

src/categories/views/CategoryList/CategoryList.tsx

@@ -28,12 +28,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
 import {
-  categoryAddUrl,
   categoryListUrl,
   CategoryListUrlDialog,
   CategoryListUrlFilters,
-  CategoryListUrlQueryParams,
+  CategoryListUrlQueryParams
-  categoryUrl
 } from "../../urls";
 import {
   deleteFilterTab,
@@ -156,8 +154,6 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
         tabs={tabs.map(tab => tab.name)}
         settings={settings}
         sort={getSortParams(params)}
-        onAdd={() => navigate(categoryAddUrl())}
-        onRowClick={id => () => navigate(categoryUrl(id))}
         onSort={handleSort}
         disabled={loading}
         onNextPage={loadNextPage}

src/channels/components/ChannelStatus/ChannelStatus.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
-import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx

@@ -17,7 +17,6 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
   disabled: false,
   disabledStatus: false,
   errors: [],
-  onBack: () => undefined,
   onSubmit: () => undefined,
   saveButtonBarState: "default",
   updateChannelStatus: () => undefined,

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -1,4 +1,5 @@
 import ShippingZonesCard from "@saleor/channels/components/ShippingZonesCard/ShippingZonesCard";
+import { channelsListUrl } from "@saleor/channels/urls";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
@@ -14,6 +15,7 @@ import {
 import { SearchData } from "@saleor/hooks/makeTopLevelSearch";
 import { getParsedSearchData } from "@saleor/hooks/makeTopLevelSearch/utils";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import {
@@ -41,7 +43,6 @@ export interface ChannelDetailsPageProps<TErrors> {
   fetchMoreShippingZones: FetchMoreProps;
   channelShippingZones?: ChannelShippingZones;
   countries: CountryFragment[];
-  onBack?: () => void;
   onDelete?: () => void;
   onSubmit: (data: FormData) => SubmitPromise<TErrors[]>;
   updateChannelStatus?: () => void;
@@ -55,7 +56,6 @@ const ChannelDetailsPage = function<TErrors>({
   disabledStatus,
   onSubmit,
   errors,
-  onBack,
   onDelete,
   saveButtonBarState,
   updateChannelStatus,
@@ -65,6 +65,8 @@ const ChannelDetailsPage = function<TErrors>({
   countries,
   channelShippingZones = []
 }: ChannelDetailsPageProps<TErrors>) {
+  const navigate = useNavigator();
+
   const [selectedCurrencyCode, setSelectedCurrencyCode] = useState("");
   const [
     selectedCountryDisplayName,
@@ -202,7 +204,7 @@ const ChannelDetailsPage = function<TErrors>({
               </div>
             </Grid>
             <Savebar
-              onCancel={onBack}
+              onCancel={() => navigate(channelsListUrl())}
               onSubmit={submit}
               onDelete={onDelete}
               state={saveButtonBarState}

src/channels/pages/ChannelsListPage/ChannelsListPage.stories.tsx

@@ -9,10 +9,7 @@ import ChannelsListPage, { ChannelsListPageProps } from "./ChannelsListPage";
 const props: ChannelsListPageProps = {
   channelsList,
   limits,
-  navigateToChannelCreate: () => undefined,
+  onRemove: () => undefined
-  onBack: () => undefined,
-  onRemove: () => undefined,
-  onRowClick: () => undefined
 };
 
 storiesOf("Views / Channels / Channels list", module)

src/channels/pages/ChannelsListPage/ChannelsListPage.tsx

@@ -5,15 +5,20 @@ import {
   TableHead,
   TableRow
 } from "@material-ui/core";
+import { channelAddUrl, channelUrl } from "@saleor/channels/urls";
+import { Backlink } from "@saleor/components/Backlink";
+import { Button } from "@saleor/components/Button";
 import Container from "@saleor/components/Container";
 import LimitReachedAlert from "@saleor/components/LimitReachedAlert";
 import PageHeader from "@saleor/components/PageHeader";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
+import TableRowLink from "@saleor/components/TableRowLink";
+import { configurationMenuUrl } from "@saleor/configuration";
 import { ChannelDetailsFragment, RefreshLimitsQuery } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, Button, DeleteIcon, IconButton } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { hasLimits, isLimitReached } from "@saleor/utils/limits";
 import React from "react";
@@ -24,9 +29,6 @@ import { useStyles } from "./styles";
 export interface ChannelsListPageProps {
   channelsList: ChannelDetailsFragment[] | undefined;
   limits: RefreshLimitsQuery["shop"]["limits"];
-  navigateToChannelCreate: () => void;
-  onBack: () => void;
-  onRowClick: (id: string) => () => void;
   onRemove: (id: string) => void;
 }
 
@@ -35,10 +37,7 @@ const numberOfColumns = 2;
 export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
   channelsList,
   limits,
-  navigateToChannelCreate,
+  onRemove
-  onBack,
-  onRemove,
-  onRowClick
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -47,7 +46,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
 
   return (
     <Container>
-      <Backlink onClick={onBack}>
+      <Backlink href={configurationMenuUrl}>
         {intl.formatMessage(sectionNames.configuration)}
       </Backlink>
       <PageHeader
@@ -69,7 +68,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
       >
         <Button
           disabled={limitReached}
-          onClick={navigateToChannelCreate}
+          href={channelAddUrl}
           variant="primary"
           data-test-id="add-channel"
         >
@@ -118,11 +117,11 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
             {renderCollection(
               channelsList,
               channel => (
-                <TableRow
+                <TableRowLink
                   hover={!!channel}
                   key={channel ? channel.id : "skeleton"}
                   className={classes.tableRow}
-                  onClick={!!channel ? onRowClick(channel.id) : undefined}
+                  href={channel && channelUrl(channel.id)}
                 >
                   <TableCell className={classes.colName}>
                     <span data-test-id="name">
@@ -144,7 +143,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
                       </IconButton>
                     )}
                   </TableCell>
-                </TableRow>
+                </TableRowLink>
               ),
               () => (
                 <TableRow>

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -1,4 +1,5 @@
 import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
+import { Backlink } from "@saleor/components/Backlink";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -13,7 +14,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
 import useShop from "@saleor/hooks/useShop";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
 import { extractMutationErrors } from "@saleor/misc";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
 import currencyCodes from "currency-codes";
@@ -29,8 +29,6 @@ export const ChannelCreateView = ({}) => {
   const intl = useIntl();
   const shop = useShop();
 
-  const handleBack = () => navigate(channelsListUrl());
-
   const [createChannel, createChannelOpts] = useChannelCreateMutation({
     onCompleted: ({
       channelCreate: { errors, channel }
@@ -94,7 +92,7 @@ export const ChannelCreateView = ({}) => {
         })}
       />
       <Container>
-        <Backlink onClick={handleBack}>
+        <Backlink href={channelsListUrl()}>
           {intl.formatMessage(sectionNames.channels)}
         </Backlink>
         <PageHeader
@@ -115,7 +113,6 @@ export const ChannelCreateView = ({}) => {
           errors={createChannelOpts?.data?.channelCreate?.errors || []}
           currencyCodes={currencyCodeChoices}
           onSubmit={handleSubmit}
-          onBack={handleBack}
           saveButtonBarState={createChannelOpts.status}
           countries={shop?.countries || []}
         />

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -1,6 +1,7 @@
 import ChannelDeleteDialog from "@saleor/channels/components/ChannelDeleteDialog";
 import { FormData } from "@saleor/channels/components/ChannelForm/ChannelForm";
 import { getChannelsCurrencyChoices } from "@saleor/channels/utils";
+import { Backlink } from "@saleor/components/Backlink";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -23,7 +24,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@saleor/hooks/useNotifier/utils";
 import useShop from "@saleor/hooks/useShop";
 import { sectionNames } from "@saleor/intl";
-import { Backlink } from "@saleor/macaw-ui";
 import { extractMutationErrors } from "@saleor/misc";
 import useShippingZonesSearch from "@saleor/searches/useShippingZonesSearch";
 import getChannelsErrorMessage from "@saleor/utils/errors/channels";
@@ -53,8 +53,6 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
-  const handleBack = () => navigate(channelsListUrl());
-
   const channelsListData = useChannelsQuery({ displayLoader: true });
 
   const [openModal, closeModal] = createDialogActionHandlers<
@@ -188,7 +186,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
         })}
       />
       <Container>
-        <Backlink onClick={handleBack}>
+        <Backlink href={channelsListUrl()}>
           {intl.formatMessage(sectionNames.channels)}
         </Backlink>
         <PageHeader title={data?.channel?.name} />
@@ -210,7 +208,6 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
             activateChannelOpts.loading || deactivateChannelOpts.loading
           }
           errors={updateChannelOpts?.data?.channelUpdate?.errors || []}
-          onBack={handleBack}
           onDelete={() => openModal("remove")}
           onSubmit={handleSubmit}
           updateChannelStatus={() =>

src/channels/views/ChannelsList/ChannelsList.tsx

@@ -1,6 +1,5 @@
 import { getChannelsCurrencyChoices } from "@saleor/channels/utils";
 import { useShopLimitsQuery } from "@saleor/components/Shop/queries";
-import { configurationMenuUrl } from "@saleor/configuration";
 import {
   ChannelDeleteMutation,
   useChannelDeleteMutation,
@@ -16,11 +15,9 @@ import { useIntl } from "react-intl";
 import ChannelDeleteDialog from "../../components/ChannelDeleteDialog";
 import ChannelsListPage from "../../pages/ChannelsListPage";
 import {
-  channelAddUrl,
   channelsListUrl,
   ChannelsListUrlDialog,
-  ChannelsListUrlQueryParams,
+  ChannelsListUrlQueryParams
-  channelUrl
 } from "../../urls";
 
 interface ChannelsListProps {
@@ -81,8 +78,6 @@ export const ChannelsList: React.FC<ChannelsListProps> = ({ params }) => {
     data?.channels
   );
 
-  const navigateToChannelCreate = () => navigate(channelAddUrl);
-
   const handleRemoveConfirm = (channelId?: string) => {
     const inputVariables = channelId ? { input: { channelId } } : {};
 
@@ -99,9 +94,6 @@ export const ChannelsList: React.FC<ChannelsListProps> = ({ params }) => {
       <ChannelsListPage
         channelsList={data?.channels}
         limits={limitOpts.data?.shop.limits}
-        navigateToChannelCreate={navigateToChannelCreate}
-        onBack={() => navigate(configurationMenuUrl)}
-        onRowClick={id => () => navigate(channelUrl(id))}
         onRemove={id =>
           openModal("remove", {
             id

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -1,4 +1,6 @@
 import { ChannelCollectionData } from "@saleor/channels/utils";
+import { collectionListUrl } from "@saleor/collections/urls";
+import { Backlink } from "@saleor/components/Backlink";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
 import { Container } from "@saleor/components/Container";
@@ -13,8 +15,9 @@ import {
   PermissionEnum
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -29,7 +32,6 @@ export interface CollectionCreatePageProps {
   disabled: boolean;
   errors: CollectionErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
-  onBack: () => void;
   onSubmit: (data: CollectionCreateData) => SubmitPromise;
   onChannelsChange: (data: ChannelCollectionData[]) => void;
   openChannelsModal: () => void;
@@ -42,12 +44,12 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
   disabled,
   errors,
   saveButtonBarState,
-  onBack,
   onChannelsChange,
   openChannelsModal,
   onSubmit
 }: CollectionCreatePageProps) => {
   const intl = useIntl();
+  const navigate = useNavigator();
 
   return (
     <CollectionCreateForm
@@ -58,7 +60,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
     >
       {({ change, data, handlers, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={collectionListUrl()}>
             {intl.formatMessage(sectionNames.collections)}
           </Backlink>
           <PageHeader
@@ -162,7 +164,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
           <Savebar
             state={saveButtonBarState}
             disabled={isSaveDisabled}
-            onCancel={onBack}
+            onCancel={() => navigate(collectionListUrl())}
             onSubmit={submit}
           />
         </Container>

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -1,4 +1,6 @@
 import { ChannelCollectionData } from "@saleor/channels/utils";
+import { collectionListUrl } from "@saleor/collections/urls";
+import { Backlink } from "@saleor/components/Backlink";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard";
 import { Container } from "@saleor/components/Container";
@@ -14,8 +16,9 @@ import {
   PermissionEnum
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
+import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
-import { Backlink, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -29,13 +32,13 @@ export interface CollectionDetailsPageProps
   extends PageListProps,
     ListActions,
     ChannelProps {
+  onAdd: () => void;
   channelsCount: number;
   channelsErrors: CollectionChannelListingErrorFragment[];
   collection: CollectionDetailsQuery["collection"];
   currentChannels: ChannelCollectionData[];
   errors: CollectionErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
-  onBack: () => void;
   onCollectionRemove: () => void;
   onImageDelete: () => void;
   onImageUpload: (file: File) => void;
@@ -53,8 +56,6 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
   disabled,
   errors,
   saveButtonBarState,
-  selectedChannelId,
-  onBack,
   onCollectionRemove,
   onImageDelete,
   onImageUpload,
@@ -64,6 +65,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
   ...collectionProductsProps
 }: CollectionDetailsPageProps) => {
   const intl = useIntl();
+  const navigate = useNavigator();
 
   return (
     <CollectionUpdateForm
@@ -75,7 +77,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
     >
       {({ change, data, handlers, submit, isSaveDisabled }) => (
         <Container>
-          <Backlink onClick={onBack}>
+          <Backlink href={collectionListUrl()}>
             {intl.formatMessage(sectionNames.collections)}
           </Backlink>
           <PageHeader title={collection?.name} />
@@ -153,7 +155,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
           <Savebar
             state={saveButtonBarState}
             disabled={isSaveDisabled}
-            onCancel={onBack}
+            onCancel={() => navigate(collectionListUrl())}
             onDelete={onCollectionRemove}
             onSubmit={submit}
           />

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, TextField } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
 import ImageUpload from "@saleor/components/ImageUpload";
@@ -6,7 +7,7 @@ import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { CollectionDetailsFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/collections/components/CollectionList/CollectionList.tsx

@@ -1,5 +1,8 @@
 import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core";
-import { CollectionListUrlSortField } from "@saleor/collections/urls";
+import {
+  CollectionListUrlSortField,
+  collectionUrl
+} from "@saleor/collections/urls";
 import { canBeSorted } from "@saleor/collections/views/CollectionList/sort";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
 import {
@@ -12,6 +15,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableCellHeader from "@saleor/components/TableCellHeader";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import TooltipTableCellHeader from "@saleor/components/TooltipTableCellHeader";
 import { commonTooltipMessages } from "@saleor/components/TooltipTableCellHeader/messages";
 import { CollectionListQuery } from "@saleor/graphql";
@@ -72,7 +76,6 @@ const CollectionList: React.FC<CollectionListProps> = props => {
     onNextPage,
     onPreviousPage,
     onUpdateListSettings,
-    onRowClick,
     onSort,
     pageInfo,
     isChecked,
@@ -169,10 +172,10 @@ const CollectionList: React.FC<CollectionListProps> = props => {
               listing => listing?.channel?.id === selectedChannelId
             );
             return (
-              <TableRow
+              <TableRowLink
                 className={classes.tableRow}
                 hover={!!collection}
-                onClick={collection ? onRowClick(collection.id) : undefined}
+                href={collection && collectionUrl(collection.id)}
                 key={collection ? collection.id : "skeleton"}
                 selected={isSelected}
                 data-test-id={"id-" + maybe(() => collection.id)}
@@ -213,7 +216,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                       />
                     ))}
                 </TableCell>
-              </TableRow>
+              </TableRowLink>
             );
           },
           () => (

src/collections/components/CollectionListPage/CollectionListPage.tsx

@@ -1,10 +1,11 @@
 import { Card } from "@material-ui/core";
+import { collectionAddUrl } from "@saleor/collections/urls";
+import { Button } from "@saleor/components/Button";
 import { Container } from "@saleor/components/Container";
 import { getByName } from "@saleor/components/Filter/utils";
 import FilterBar from "@saleor/components/FilterBar";
 import PageHeader from "@saleor/components/PageHeader";
 import { sectionNames } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
 import {
   FilterPageProps,
   PageListProps,
@@ -27,16 +28,12 @@ export interface CollectionListPageProps
     SearchPageProps,
     TabPageProps,
     FilterPageProps<CollectionFilterKeys, CollectionListFilterOpts>,
-    CollectionListProps {
+    CollectionListProps {}
-  channelsCount: number;
-}
 
 const CollectionListPage: React.FC<CollectionListPageProps> = ({
-  channelsCount,
   currentTab,
   disabled,
   initialSearch,
-  onAdd,
   onAll,
   onSearchChange,
   onTabChange,
@@ -60,7 +57,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
         <Button
           disabled={disabled}
           variant="primary"
-          onClick={onAdd}
+          href={collectionAddUrl()}
           data-test-id="create-collection"
         >
           <FormattedMessage

src/collections/components/CollectionProducts/CollectionProducts.tsx

@@ -5,6 +5,7 @@ import {
   TableFooter,
   TableRow
 } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
 import Checkbox from "@saleor/components/Checkbox";
@@ -14,8 +15,10 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
+import TableRowLink from "@saleor/components/TableRowLink";
 import { CollectionDetailsQuery } from "@saleor/graphql";
-import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { productUrl } from "@saleor/products/urls";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -55,6 +58,7 @@ const useStyles = makeStyles(
 export interface CollectionProductsProps extends PageListProps, ListActions {
   collection: CollectionDetailsQuery["collection"];
   onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
+  onAdd: () => void;
 }
 
 const CollectionProducts: React.FC<CollectionProductsProps> = props => {
@@ -65,7 +69,6 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
     onNextPage,
     onPreviousPage,
     onProductUnassign,
-    onRowClick,
     pageInfo,
     isChecked,
     selected,
@@ -166,10 +169,10 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
               const isSelected = product ? isChecked(product.id) : false;
 
               return (
-                <TableRow
+                <TableRowLink
                   className={classes.tableRow}
                   hover={!!product}
-                  onClick={!!product ? onRowClick(product.id) : undefined}
+                  href={product && productUrl(product.id)}
                   key={product ? product.id : "skeleton"}
                   selected={isSelected}
                 >
@@ -214,7 +217,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
                       <DeleteIcon />
                     </IconButton>
                   </TableCell>
-                </TableRow>
+                </TableRowLink>
               );
             },
             () => (

src/collections/views/CollectionCreate.tsx

@@ -26,7 +26,6 @@ import { CollectionCreateData } from "../components/CollectionCreatePage/form";
 import {
   collectionAddUrl,
   CollectionCreateUrlQueryParams,
-  collectionListUrl,
   collectionUrl
 } from "../urls";
 import { COLLECTION_CREATE_FORM_ID } from "./consts";
@@ -180,7 +179,6 @@ export const CollectionCreate: React.FC<CollectionCreateProps> = ({
         channelsCount={availableChannels.length}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
-        onBack={() => navigate(collectionListUrl())}
         disabled={createCollectionOpts.loading || updateChannelsOpts.loading}
         onSubmit={handleSubmit}
         saveButtonBarState={createCollectionOpts.status}

src/collections/views/CollectionDetails.tsx

@@ -6,6 +6,7 @@ import {
 import ActionDialog from "@saleor/components/ActionDialog";
 import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import AssignProductDialog from "@saleor/components/AssignProductDialog";
+import { Button } from "@saleor/components/Button";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { WindowTitle } from "@saleor/components/WindowTitle";
@@ -31,7 +32,6 @@ import useLocalStorage from "@saleor/hooks/useLocalStorage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages, errorMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
 import useProductSearch from "@saleor/searches/useProductSearch";
 import { arrayDiff } from "@saleor/utils/arrays";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -42,7 +42,6 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { getMutationErrors, getMutationState, maybe } from "../../misc";
-import { productUrl } from "../../products/urls";
 import CollectionDetailsPage from "../components/CollectionDetailsPage/CollectionDetailsPage";
 import { CollectionUpdateData } from "../components/CollectionDetailsPage/form";
 import {
@@ -165,8 +164,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   );
   const paginate = useLocalPaginator(setPaginationState);
 
-  const handleBack = () => navigate(collectionListUrl());
-
   const [selectedChannel] = useLocalStorage("collectionListChannel", "");
 
   const { data, loading } = useCollectionDetailsQuery({
@@ -176,7 +173,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
 
   const collection = data?.collection;
   if (collection === null) {
-    return <NotFoundPage onBack={handleBack} />;
+    return <NotFoundPage backHref={collectionListUrl()} />;
   }
   const allChannels = createCollectionChannels(
     availableChannels
@@ -286,7 +283,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
       )}
       <CollectionDetailsPage
         onAdd={() => openModal("assign")}
-        onBack={handleBack}
         disabled={loading || updateChannelsOpts.loading}
         collection={data?.collection}
         channelsErrors={
@@ -319,7 +315,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
             }
           });
         }}
-        onRowClick={id => () => navigate(productUrl(id))}
         saveButtonBarState={formTransitionState}
         toolbar={
           <Button

src/collections/views/CollectionList/CollectionList.tsx

@@ -31,11 +31,9 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CollectionListPage from "../../components/CollectionListPage/CollectionListPage";
 import {
-  collectionAddUrl,
   collectionListUrl,
   CollectionListUrlDialog,
-  CollectionListUrlQueryParams,
+  CollectionListUrlQueryParams
-  collectionUrl
 } from "../../urls";
 import {
   deleteFilterTab,
@@ -175,7 +173,6 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         currentTab={currentTab}
         initialSearch={params.query || ""}
         onSearchChange={handleSearchChange}
-        onAdd={() => navigate(collectionAddUrl())}
         onAll={resetFilters}
         onTabChange={handleTabChange}
         onTabDelete={() => openModal("delete-search")}
@@ -190,7 +187,6 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         onUpdateListSettings={updateListSettings}
         pageInfo={pageInfo}
         sort={getSortParams(params)}
-        onRowClick={id => () => navigate(collectionUrl(id))}
         toolbar={
           <IconButton
             variant="secondary"
@@ -209,7 +205,6 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
         selected={listElements.length}
         toggle={toggle}
         toggleAll={toggleAll}
-        channelsCount={availableChannels?.length}
         selectedChannelId={selectedChannel?.id}
         filterOpts={filterOpts}
         onFilterChange={changeFilters}

src/components/AppLayout/AppLayout.tsx

@@ -12,7 +12,6 @@ import {
   useTheme
 } from "@saleor/macaw-ui";
 import { isDarkTheme } from "@saleor/misc";
-import { staffMemberDetailsUrl } from "@saleor/staff/urls";
 import React from "react";
 import { useIntl } from "react-intl";
 import useRouter from "use-react-router";
@@ -26,6 +25,7 @@ import useAppChannel from "./AppChannelContext";
 import AppChannelSelect from "./AppChannelSelect";
 import { appLoaderHeight } from "./consts";
 import useMenuStructure from "./menuStructure";
+import { SidebarLink } from "./SidebarLink";
 import { isMenuActive } from "./utils";
 
 const useStyles = makeStyles(
@@ -171,6 +171,8 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             activeId={activeMenu}
             menuItems={menuStructure}
             onMenuItemClick={handleMenuItemClick}
+            logoHref="/"
+            linkComponent={SidebarLink}
           />
         )}
         <div className={classes.content}>
@@ -188,7 +190,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     {!isMdUp && (
                       <SidebarDrawer
                         menuItems={menuStructure}
+                        logoHref="/"
                         onMenuItemClick={handleMenuItemClick}
+                        linkComponent={SidebarLink}
                       />
                     )}
                     <div className={classes.spacer} />
@@ -208,9 +212,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                         isDarkThemeEnabled={isDarkTheme(themeType)}
                         user={user}
                         onLogout={logout}
-                        onProfileClick={() =>
-                          navigate(staffMemberDetailsUrl(user?.id))
-                        }
                         onThemeToggle={toggleTheme}
                       />
                     </div>

src/components/AppLayout/SidebarLink.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link, LinkProps } from "react-router-dom";
+
+interface SidebarLinkProps extends Omit<LinkProps, "to"> {
+  href?: string;
+}
+
+export const SidebarLink = React.forwardRef<
+  HTMLAnchorElement,
+  SidebarLinkProps
+>(({ href, ...props }, ref) => <Link to={href} {...props} innerRef={ref} />);
+
+SidebarLink.displayName = "SidebarLink";

src/components/AppLayout/menuStructure.ts

@@ -15,7 +15,6 @@ import { configurationMenuUrl } from "@saleor/configuration";
 import { getConfigMenuItemsPermissions } from "@saleor/configuration/utils";
 import { giftCardListUrl } from "@saleor/giftCards/urls";
 import { PermissionEnum, UserFragment } from "@saleor/graphql";
-import useNavigator from "@saleor/hooks/useNavigator";
 import { commonMessages, sectionNames } from "@saleor/intl";
 import { SidebarMenuItem } from "@saleor/macaw-ui";
 import { pageListPath } from "@saleor/pages/urls";
@@ -40,7 +39,6 @@ function useMenuStructure(
   intl: IntlShape,
   user: UserFragment
 ): [SidebarMenuItem[], (menuItem: SidebarMenuItem) => void] {
-  const navigate = useNavigator();
   const extensions = useExtensions(extensionMountPoints.NAVIGATION_SIDEBAR);
 
   const handleMenuItemClick = (menuItem: SidebarMenuItem) => {
@@ -49,7 +47,6 @@ function useMenuStructure(
       extension.open();
       return;
     }
-    navigate(menuItem.url, { resetScroll: true });
   };
 
   const appExtensionsHeaderItem = {

src/components/Attributes/ExtendedAttributeRow.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import Grid from "@saleor/components/Grid";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 
 const useStyles = makeStyles(

src/components/BackButton.tsx

@@ -1,5 +1,6 @@
+import { Button } from "@saleor/components/Button";
 import { buttonMessages } from "@saleor/intl";
-import { Button, ButtonProps } from "@saleor/macaw-ui";
+import { ButtonProps } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/components/Backlink/Backlink.tsx

@@ -0,0 +1,27 @@
+import { Backlink as MacawBacklink, BacklinkProps } from "@saleor/macaw-ui";
+import { isExternalURL } from "@saleor/utils/urls";
+import React from "react";
+import { Link, LinkProps } from "react-router-dom";
+
+type LinkType = React.FunctionComponent<LinkProps>;
+
+export const Backlink = ({
+  href,
+  ...props
+}: BacklinkProps<"a"> & BacklinkProps<"button">) => {
+  if (href && !isExternalURL(href)) {
+    return (
+      <MacawBacklink<LinkType>
+        {...props}
+        component={(Link as unknown) as LinkType}
+        to={href}
+      />
+    );
+  }
+
+  if (href) {
+    return <MacawBacklink<"a"> href={href} {...props} />;
+  }
+
+  return <MacawBacklink<"button"> {...props} />;
+};

src/components/Backlink/index.ts

@@ -0,0 +1 @@
+export * from "./Backlink";

src/components/Button/Button.tsx

@@ -0,0 +1,16 @@
+import { OverridableComponent } from "@material-ui/core/OverridableComponent";
+import { Button as MacawButton, ButtonTypeMap } from "@saleor/macaw-ui";
+import { isExternalURL } from "@saleor/utils/urls";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const _Button: React.FC<any> = React.forwardRef(({ href, ...props }, ref) => {
+  if (href && !isExternalURL(href)) {
+    return <MacawButton {...props} to={href} component={Link} ref={ref} />;
+  }
+
+  return <MacawButton href={href} {...props} ref={ref} />;
+});
+_Button.displayName = "Button";
+
+export const Button = _Button as OverridableComponent<ButtonTypeMap>;

src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

src/components/ButtonWithSelect/ButtonWithSelect.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   ButtonGroup,
   ButtonGroupProps,
   ClickAwayListener,
@@ -10,6 +9,7 @@ import {
   Popper
 } from "@material-ui/core";
 import { ArrowDropDown as ArrowDropDownIcon } from "@material-ui/icons";
+import { Button } from "@saleor/components/Button";
 import React from "react";
 
 import { useStyles } from "./styles";
@@ -23,13 +23,13 @@ interface Option {
 export interface ButtonWithSelectProps
   extends Omit<ButtonGroupProps, "onClick"> {
   options: Option[];
-  onClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+  href: string;
 }
 
 export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
   options,
   children,
-  onClick,
+  href,
   ...props
 }) => {
   const [open, setOpen] = React.useState(false);
@@ -68,7 +68,7 @@ export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
         aria-label="button with select"
         {...props}
       >
-        <Button onClick={onClick} style={{ width: "100%" }}>
+        <Button variant="primary" href={href} style={{ width: "100%" }}>
           {children}
         </Button>
         {options.length > 0 && (

src/components/CardMenu/CardMenu.tsx

@@ -8,11 +8,12 @@ import {
   Popper,
   Typography
 } from "@material-ui/core";
-import { IconButton, makeStyles, MoreIcon } from "@saleor/macaw-ui";
+import { makeStyles, MoreIcon } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { IconButton } from "../IconButton";
 import { cardMenuMessages as messages } from "./messages";
 
 const ITEM_HEIGHT = 48;

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx

@@ -1,9 +1,9 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
 import RequirePermissions from "@saleor/components/RequirePermissions";
 import { PermissionEnum } from "@saleor/graphql";
-import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/ColumnPicker/ColumnPickerButton.tsx

@@ -0,0 +1,65 @@
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import { Button } from "@saleor/components/Button";
+import { makeStyles } from "@saleor/macaw-ui";
+import classNames from "classnames";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+interface ColumnPickerButtonProps {
+  active: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+const useStyles = makeStyles(
+  theme => ({
+    icon: {
+      marginLeft: theme.spacing(2),
+      transition: theme.transitions.duration.short + "ms"
+    },
+    root: {
+      "& span": {
+        color: theme.palette.primary.main
+      },
+      paddingRight: theme.spacing(1)
+    },
+    rootActive: {
+      background: fade(theme.palette.primary.main, 0.1)
+    },
+    rotate: {
+      transform: "rotate(180deg)"
+    }
+  }),
+  {
+    name: "ColumnPickerButton"
+  }
+);
+
+const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
+  const { active, className, onClick } = props;
+  const classes = useStyles(props);
+
+  return (
+    <Button
+      className={classNames(classes.root, className, {
+        [classes.rootActive]: active
+      })}
+      onClick={onClick}
+      variant="secondary"
+    >
+      <FormattedMessage
+        id="142MJn"
+        defaultMessage="Columns"
+        description="select visible columns button"
+      />
+      <ArrowDropDownIcon
+        className={classNames(classes.icon, {
+          [classes.rotate]: active
+        })}
+      />
+    </Button>
+  );
+};
+
+export default ColumnPickerButton;

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -6,10 +6,10 @@ import {
   MenuItem,
   Typography
 } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import { FormChange } from "@saleor/hooks/useForm";
 import { buttonMessages } from "@saleor/intl";
 import {
-  Button,
   Choice,
   CloseIcon,
   IconButton,

src/components/CountryList/CountryList.tsx

@@ -1,10 +1,11 @@
 import { Card, TableBody, TableCell, TableRow } from "@material-ui/core";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import { Button } from "@saleor/components/Button";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import { CountryFragment } from "@saleor/graphql";
-import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/components/DeleteButton/DeleteButton.tsx

@@ -1,5 +1,5 @@
+import { Button } from "@saleor/components/Button";
 import { buttonMessages } from "@saleor/intl";
-import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/FileUploadField/FileUploadField.tsx

@@ -1,7 +1,8 @@
 import { Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import { FileFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
-import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/Filter/FilterContent/FilterContentHeader.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import { buttonMessages } from "@saleor/intl";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,5 @@
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button } from "@saleor/components/Button";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/IconButton/IconButton.tsx

@@ -0,0 +1,25 @@
+import {
+  IconButton as MacawIconButton,
+  IconButtonProps
+} from "@saleor/macaw-ui";
+import { isExternalURL } from "@saleor/utils/urls";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const _IconButton: React.FC<any> = React.forwardRef(
+  ({ href, ...props }, ref) => {
+    if (href && !isExternalURL(href)) {
+      return (
+        <MacawIconButton {...props} to={href} component={Link} ref={ref} />
+      );
+    }
+
+    return <MacawIconButton href={href} {...props} ref={ref} />;
+  }
+);
+
+export const IconButton = _IconButton as <
+  T extends React.ElementType = "button"
+>(
+  props: IconButtonProps<T>
+) => ReturnType<typeof _IconButton>;

src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export * from "./IconButton";

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -14,11 +14,12 @@ import { makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
 
 export interface LanguageSwitchProps {
   currentLanguage: LanguageCodeEnum;
   languages: LanguageFragment[];
-  onLanguageChange: (lang: LanguageCodeEnum) => void;
+  getLanguageUrl: (lang: LanguageCodeEnum) => string;
 }
 
 const useStyles = makeStyles(
@@ -54,8 +55,9 @@ const useStyles = makeStyles(
   }),
   { name: "LanguageSwitch" }
 );
+
 const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
-  const { currentLanguage, languages, onLanguageChange } = props;
+  const { currentLanguage, languages, getLanguageUrl } = props;
   const classes = useStyles(props);
 
   const [isExpanded, setExpandedState] = React.useState(false);
@@ -101,18 +103,19 @@ const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
                       className={classes.menuItem}
                       onClick={() => {
                         setExpandedState(false);
-                        onLanguageChange(lang.code);
                       }}
                     >
-                      <FormattedMessage
+                      <Link to={getLanguageUrl(lang.code)}>
-                        id="62T585"
+                        <FormattedMessage
-                        defaultMessage="{languageName} - {languageCode}"
+                          id="62T585"
-                        description="button"
+                          defaultMessage="{languageName} - {languageCode}"
-                        values={{
+                          description="button"
-                          languageCode: lang.code,
+                          values={{
-                          languageName: lang.language
+                            languageCode: lang.code,
-                        }}
+                            languageName: lang.language
-                      />
+                          }}
+                        />
+                      </Link>
                     </MenuItem>
                   ))}
                 </Menu>

src/components/Link.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@material-ui/core";
 import { TypographyProps } from "@material-ui/core/Typography";
 import { makeStyles } from "@saleor/macaw-ui";
+import { isExternalURL } from "@saleor/utils/urls";
 import classNames from "classnames";
 import React from "react";
 import { Link as RouterLink } from "react-router-dom";
@@ -31,8 +32,6 @@ const useStyles = makeStyles(
   { name: "Link" }
 );
 
-const isExternalURL = url => /^https?:\/\//.test(url);
-
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   color?: "primary" | "secondary";

src/components/MediaTile/MediaTile.tsx

@@ -1,4 +1,5 @@
 import { CircularProgress } from "@material-ui/core";
+import { IconButton } from "@saleor/components/IconButton";
 import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
@@ -67,7 +68,7 @@ const useStyles = makeStyles(
   { name: "MediaTile" }
 );
 
-interface MediaTileProps {
+interface MediaTileBaseProps {
   media: {
     alt: string;
     url: string;
@@ -79,8 +80,20 @@ interface MediaTileProps {
   onEdit?: (event: React.ChangeEvent<any>) => void;
 }
 
+export type MediaTileProps = MediaTileBaseProps &
+  (
+    | {
+        onEdit?: React.MouseEventHandler<HTMLButtonElement>;
+        editHref?: never;
+      }
+    | {
+        onEdit?: never;
+        editHref?: string;
+      }
+  );
+
 const MediaTile: React.FC<MediaTileProps> = props => {
-  const { loading, onDelete, onEdit, media } = props;
+  const { loading, onDelete, onEdit, editHref, media } = props;
   const classes = useStyles(props);
   const parsedMediaOembedData = media?.oembedData
     ? JSON.parse(media.oembedData)
@@ -98,15 +111,26 @@ const MediaTile: React.FC<MediaTileProps> = props => {
           <CircularProgress size={32} />
         ) : (
           <div className={classes.mediaOverlayToolbar}>
-            {onEdit && (
+            {(onEdit || editHref) && (
-              <button className={classes.controlButton} onClick={onEdit}>
+              <IconButton
+                href={editHref}
+                hoverOutline={false}
+                variant="secondary"
+                className={classes.controlButton}
+                onClick={onEdit}
+              >
                 <EditIcon />
-              </button>
+              </IconButton>
             )}
             {onDelete && (
-              <button className={classes.controlButton} onClick={onDelete}>
+              <IconButton
+                variant="secondary"
+                hoverOutline={false}
+                className={classes.controlButton}
+                onClick={onDelete}
+              >
                 <DeleteIcon />
-              </button>
+              </IconButton>
             )}
           </div>
         )}

src/components/Metadata/MetadataCard.tsx

@@ -10,9 +10,10 @@ import {
   TextField,
   Typography
 } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import { MetadataInput } from "@saleor/graphql";
 import { FormChange } from "@saleor/hooks/useForm";
-import { Button, DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
+import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/NotFoundPage/NotFoundPage.tsx

@@ -1,6 +1,7 @@
 import notFoundImage from "@assets/images/not-found-404.svg";
 import { Typography } from "@material-ui/core";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button } from "@saleor/components/Button";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage } from "react-intl";
@@ -48,12 +49,18 @@ const useStyles = makeStyles(
   { name: "NotFoundPage" }
 );
 
-interface NotFoundPageProps {
+type NotFoundPageProps =
-  onBack: () => void;
+  | {
-}
+      onBack: () => void;
+      backHref?: never;
+    }
+  | {
+      onBack?: never;
+      backHref: string;
+    };
 
 const NotFoundPage: React.FC<NotFoundPageProps> = props => {
-  const { onBack } = props;
+  const { onBack, backHref } = props;
 
   const classes = useStyles(props);
 
@@ -83,6 +90,7 @@ const NotFoundPage: React.FC<NotFoundPageProps> = props => {
               className={classes.button}
               variant="primary"
               onClick={onBack}
+              href={backHref}
             >
               <FormattedMessage
                 id="95oJ5d"

src/components/SearchBar/SearchBar.tsx

@@ -1,4 +1,5 @@
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button } from "@saleor/components/Button";
+import { makeStyles } from "@saleor/macaw-ui";
 import { SearchPageProps, TabPageProps } from "@saleor/types";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/SeoForm/SeoForm.tsx

@@ -1,10 +1,11 @@
 import { Card, CardContent, TextField, Typography } from "@material-ui/core";
+import { Button } from "@saleor/components/Button";
 import {
   CollectionErrorFragment,
   PageErrorFragment,
   ProductErrorFragment
 } from "@saleor/graphql";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors";
 import getPageErrorMessage from "@saleor/utils/errors/page";
 import classNames from "classnames";

src/components/SortableTable/SortableTableRow.tsx

@@ -1,17 +1,23 @@
-import { TableRow } from "@material-ui/core";
+import { TableRowProps } from "@material-ui/core";
-import { TableRowProps } from "@material-ui/core/TableRow";
 import React from "react";
-import { SortableElement } from "react-sortable-hoc";
+import { SortableElement, SortableElementProps } from "react-sortable-hoc";
 
+import TableRowLink, { TableRowLinkProps } from "../TableRowLink";
 import SortableHandle from "./SortableHandle";
 
-const SortableTableRow = SortableElement<TableRowProps>(
+type SortableTableRowTypesUnion = "link" | "row";
-  ({ children, ...props }) => (
+
-    <TableRow {...props}>
+type SortableTableRowProps<
-      <SortableHandle />
+  T extends SortableTableRowTypesUnion
-      {children}
+> = T extends "link" ? TableRowLinkProps : TableRowProps;
-    </TableRow>
+
-  )
+const SortableTableRow = (SortableElement<any>(({ children, ...props }) => (
-);
+  <TableRowLink {...props}>
+    <SortableHandle />
+    {children}
+  </TableRowLink>
+)) as unknown) as <T extends SortableTableRowTypesUnion = "link">(
+  props: SortableElementProps & SortableTableRowProps<T>
+) => JSX.Element;
 
 export default SortableTableRow;

src/components/TableRowLink/TableRowLink.tsx

@@ -0,0 +1,50 @@
+import { TableRow, TableRowTypeMap } from "@material-ui/core";
+import { makeStyles } from "@saleor/macaw-ui";
+import clsx from "classnames";
+import React from "react";
+
+import Link from "../Link";
+
+type MaterialTableRowPropsType = TableRowTypeMap["props"];
+
+export interface TableRowLinkProps
+  extends Omit<MaterialTableRowPropsType, "onClick"> {
+  children: React.ReactNode;
+  href?: string;
+  className?: string;
+  linkClassName?: string;
+}
+
+const useStyles = makeStyles(
+  {
+    link: {
+      all: "inherit",
+      display: "contents"
+    }
+  },
+  { name: "TableRowLink" }
+);
+
+const TableRowLink = ({
+  href,
+  children,
+  linkClassName,
+  ...props
+}: TableRowLinkProps) => {
+  const classes = useStyles();
+
+  if (!href) {
+    return <TableRow {...props}>{children}</TableRow>;
+  }
+
+  return (
+    <TableRow {...props}>
+      <Link className={clsx(classes.link, linkClassName)} href={href}>
+        {children}
+      </Link>
+    </TableRow>
+  );
+};
+
+TableRowLink.displayName = "TableRowLink";
+export default TableRowLink;

src/components/TableRowLink/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableRowLink";
+export * from "./TableRowLink";

src/components/Timeline/Timeline.tsx

@@ -1,7 +1,8 @@
 import { Avatar, CardContent, TextField } from "@material-ui/core";
 import deepPurple from "@material-ui/core/colors/deepPurple";
 import PersonIcon from "@material-ui/icons/Person";
-import { Button, makeStyles } from "@saleor/macaw-ui";
+import { Button } from "@saleor/components/Button";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/UserChip/UserChip.tsx

@@ -2,8 +2,10 @@ import { FormControlLabel, Switch } from "@material-ui/core";
 import { UserFragment } from "@saleor/graphql";
 import { makeStyles, UserChipMenu, UserChipMenuItem } from "@saleor/macaw-ui";
 import { getUserInitials, getUserName } from "@saleor/misc";
+import { staffMemberDetailsUrl } from "@saleor/staff/urls";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 const useStyles = makeStyles(
   () => ({
@@ -22,7 +24,6 @@ export interface UserChipProps {
   isDarkThemeEnabled: boolean;
   user: UserFragment;
   onLogout: () => void;
-  onProfileClick: () => void;
   onThemeToggle: () => void;
 }
 
@@ -30,7 +31,6 @@ const UserChip: React.FC<UserChipProps> = ({
   isDarkThemeEnabled,
   user,
   onLogout,
-  onProfileClick,
   onThemeToggle
 }) => {
   const classes = useStyles({});
@@ -42,15 +42,14 @@ const UserChip: React.FC<UserChipProps> = ({
       name={getUserName(user, true)}
       avatar={user?.avatar?.url}
     >
-      <UserChipMenuItem
+      <UserChipMenuItem data-test-id="account-settings-button">
-        onClick={onProfileClick}
+        <Link to={staffMemberDetailsUrl(user?.id)}>
-        data-test-id="account-settings-button"
+          <FormattedMessage
-      >
+            id="X8+Lpa"
-        <FormattedMessage
+            defaultMessage="Account Settings"
-          id="X8+Lpa"
+            description="button"
-          defaultMessage="Account Settings"
+          />
-          description="button"
+        </Link>
-        />
       </UserChipMenuItem>
       <UserChipMenuItem onClick={onLogout} data-test-id="log-out-button">
         <FormattedMessage