From 9c2ed377cce8357db86352145e8ad0f484989666 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Fri, 13 May 2022 13:04:16 +0200 Subject: [PATCH] Fix redirect when modal is opened from table (#2034) * Fix redirect when modal is opened on apps list * Update snapshots * Fix failing Cypress test * Fix issues with TableRowLink and buttons that have onClick * Fix CustomAppDetailsPage using wrong Backlink compponent * Remove custom click event handler from TableRowLink * Add TableButtonWrapper component * Refactor Buttons and Links in TableRowLink to use TableButtonWrapper * Refactor Buttons in SortableTableRowLink to use TableButtonWrapper * Add comments about reasoning behind TableButtonWrapper --- .../AppsInProgress/AppsInProgress.tsx | 44 +- .../AppsListPage/AppListPage.stories.tsx | 3 +- .../components/AppsListPage/AppsListPage.tsx | 3 - .../CustomAppDetailsPage.tsx | 7 +- src/apps/components/CustomApps/CustomApps.tsx | 19 +- .../InstalledApps/InstalledApps.tsx | 50 +- src/apps/views/AppsList/AppsList.tsx | 2 - .../ChannelsListPage/ChannelsListPage.tsx | 25 +- .../CollectionProducts/CollectionProducts.tsx | 19 +- .../TableButtonWrapper/TableButtonWrapper.tsx | 44 + src/components/TableButtonWrapper/index.tsx | 0 src/components/TableRowLink/TableRowLink.tsx | 8 +- .../DiscountCategories/DiscountCategories.tsx | 23 +- .../DiscountCollections.tsx | 23 +- .../DiscountProducts/DiscountProducts.tsx | 23 +- .../DiscountVariants/DiscountVariants.tsx | 23 +- .../GiftCardsListTable/GiftCardsListTable.tsx | 25 +- src/misc.ts | 20 +- .../components/MenuList/MenuList.tsx | 17 +- .../PageTypeAttributes/PageTypeAttributes.tsx | 19 +- .../PermissionGroupList.tsx | 23 +- .../ProductTypeAttributes.tsx | 23 +- .../ProductTypeVariantAttributes.tsx | 19 +- .../ProductVariantNavigation.tsx | 5 +- .../ProductVariants/ProductVariants.tsx | 26 +- .../ShippingZoneRates/ShippingZoneRates.tsx | 33 +- .../ShippingZonesList/ShippingZonesList.tsx | 25 +- .../__snapshots__/Stories.test.ts.snap | 969 +++++++++--------- .../WarehouseList/WarehouseList.tsx | 17 +- .../components/WebhooksList/WebhooksList.tsx | 25 +- 30 files changed, 840 insertions(+), 722 deletions(-) create mode 100644 src/components/TableButtonWrapper/TableButtonWrapper.tsx create mode 100644 src/components/TableButtonWrapper/index.tsx diff --git a/src/apps/components/AppsInProgress/AppsInProgress.tsx b/src/apps/components/AppsInProgress/AppsInProgress.tsx index de1bc4dc5..eca023e02 100644 --- a/src/apps/components/AppsInProgress/AppsInProgress.tsx +++ b/src/apps/components/AppsInProgress/AppsInProgress.tsx @@ -8,15 +8,13 @@ import { Typography } from "@material-ui/core"; import ErrorIcon from "@material-ui/icons/Error"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; +import { IconButton } from "@saleor/components/IconButton"; +import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import { AppsInstallationsQuery, JobStatusEnum } from "@saleor/graphql"; -import { - Button, - DeleteIcon, - IconButton, - ResponsiveTable -} from "@saleor/macaw-ui"; -import { renderCollection, stopPropagation } from "@saleor/misc"; +import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui"; +import { renderCollection } from "@saleor/misc"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -97,20 +95,24 @@ const AppsInProgress: React.FC = ({ - - onRemove(id))} - > - - + + + + + onRemove(id)} + > + + + )} diff --git a/src/apps/components/AppsListPage/AppListPage.stories.tsx b/src/apps/components/AppsListPage/AppListPage.stories.tsx index 8f3518b94..25dbda797 100644 --- a/src/apps/components/AppsListPage/AppListPage.stories.tsx +++ b/src/apps/components/AppsListPage/AppListPage.stories.tsx @@ -32,8 +32,7 @@ const props: AppsListPageProps = { onCustomAppRemove: () => undefined, onInstalledAppRemove: () => undefined, onNextPage: () => undefined, - onPreviousPage: () => undefined, - onRowAboutClick: () => undefined + onPreviousPage: () => undefined }; storiesOf("Views / Apps / Apps list", module) diff --git a/src/apps/components/AppsListPage/AppsListPage.tsx b/src/apps/components/AppsListPage/AppsListPage.tsx index e41883de3..ac11b9990 100644 --- a/src/apps/components/AppsListPage/AppsListPage.tsx +++ b/src/apps/components/AppsListPage/AppsListPage.tsx @@ -22,7 +22,6 @@ export interface AppsListPageProps extends ListProps { onCustomAppRemove: (id: string) => void; onAppInProgressRemove: (id: string) => void; onAppInstallRetry: (id: string) => void; - onRowAboutClick: (id: string) => () => void; } const AppsListPage: React.FC = ({ @@ -35,7 +34,6 @@ const AppsListPage: React.FC = ({ onCustomAppRemove, onAppInProgressRemove, onAppInstallRetry, - onRowAboutClick, ...listProps }) => { const intl = useIntl(); @@ -59,7 +57,6 @@ const AppsListPage: React.FC = ({ diff --git a/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx b/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx index b8029d8ab..49c25f6f7 100644 --- a/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx +++ b/src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx @@ -1,5 +1,6 @@ import { appsListUrl } from "@saleor/apps/urls"; import AccountPermissions from "@saleor/components/AccountPermissions"; +import { Backlink } from "@saleor/components/Backlink"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; @@ -15,11 +16,7 @@ import { import { SubmitPromise } from "@saleor/hooks/useForm"; import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; -import { - Backlink, - Button, - ConfirmButtonTransitionState -} from "@saleor/macaw-ui"; +import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getAppErrorMessage from "@saleor/utils/errors/app"; import WebhooksList from "@saleor/webhooks/components/WebhooksList"; diff --git a/src/apps/components/CustomApps/CustomApps.tsx b/src/apps/components/CustomApps/CustomApps.tsx index 222340190..f80af32b5 100644 --- a/src/apps/components/CustomApps/CustomApps.tsx +++ b/src/apps/components/CustomApps/CustomApps.tsx @@ -8,11 +8,12 @@ import { import { customAppAddUrl } from "@saleor/apps/urls"; import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; +import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import TableRowLink from "@saleor/components/TableRowLink"; import { AppsListQuery } from "@saleor/graphql"; import { commonMessages } from "@saleor/intl"; import { DeleteIcon, IconButton, ResponsiveTable } from "@saleor/macaw-ui"; -import { renderCollection, stopPropagation } from "@saleor/misc"; +import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -74,13 +75,15 @@ const CustomApps: React.FC = ({ )} - onRemove(app.node.id))} - > - - + + onRemove(app.node.id)} + > + + + ) : ( diff --git a/src/apps/components/InstalledApps/InstalledApps.tsx b/src/apps/components/InstalledApps/InstalledApps.tsx index d6f8eb899..0a9ba8226 100644 --- a/src/apps/components/InstalledApps/InstalledApps.tsx +++ b/src/apps/components/InstalledApps/InstalledApps.tsx @@ -6,18 +6,16 @@ import { TableRow, Typography } from "@material-ui/core"; -import { appUrl } from "@saleor/apps/urls"; +import { appDetailsUrl, appUrl } from "@saleor/apps/urls"; +import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; +import { IconButton } from "@saleor/components/IconButton"; +import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import TablePagination from "@saleor/components/TablePagination"; import TableRowLink from "@saleor/components/TableRowLink"; import { AppsListQuery } from "@saleor/graphql"; -import { - Button, - DeleteIcon, - IconButton, - ResponsiveTable -} from "@saleor/macaw-ui"; -import { renderCollection, stopPropagation } from "@saleor/misc"; +import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui"; +import { renderCollection } from "@saleor/misc"; import { ListProps } from "@saleor/types"; import clsx from "clsx"; import React from "react"; @@ -30,7 +28,6 @@ import DeactivatedText from "../DeactivatedText"; export interface InstalledAppsProps extends ListProps { appsList: AppsListQuery["apps"]["edges"]; onRemove: (id: string) => void; - onRowAboutClick: (id: string) => () => void; } const numberOfColumns = 2; @@ -41,7 +38,6 @@ const InstalledApps: React.FC = ({ disabled, onNextPage, onPreviousPage, - onRowAboutClick, onUpdateListSettings, pageInfo, ...props @@ -103,22 +99,24 @@ const InstalledApps: React.FC = ({ {app.node.appUrl} )} - - onRemove(app.node.id))} - > - - + + + + + onRemove(app.node.id)} + > + + + ) : ( diff --git a/src/apps/views/AppsList/AppsList.tsx b/src/apps/views/AppsList/AppsList.tsx index 262449711..f1640aa44 100644 --- a/src/apps/views/AppsList/AppsList.tsx +++ b/src/apps/views/AppsList/AppsList.tsx @@ -32,7 +32,6 @@ import AppInProgressDeleteDialog from "../../components/AppInProgressDeleteDialo import AppsListPage from "../../components/AppsListPage"; import { EXTENSION_LIST_QUERY } from "../../queries"; import { - appDetailsUrl, AppListUrlDialog, AppListUrlQueryParams, appsListUrl, @@ -312,7 +311,6 @@ export const AppsList: React.FC = ({ params }) => { onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} - onRowAboutClick={id => () => navigate(appDetailsUrl(id))} onAppInstallRetry={onAppInstallRetry} getCustomAppHref={id => customAppUrl(id)} onInstalledAppRemove={id => diff --git a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx index cf1a2dc63..213b18501 100644 --- a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx +++ b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx @@ -13,6 +13,7 @@ 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 { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TableRowLink from "@saleor/components/TableRowLink"; import { configurationMenuUrl } from "@saleor/configuration"; @@ -130,17 +131,19 @@ export const ChannelsListPage: React.FC = ({ {channelsList?.length > 1 && ( - onRemove(channel.id)) - : undefined - } - > - - + + onRemove(channel.id)) + : undefined + } + > + + + )} diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index 7c6fb2e0e..b7ae5aaba 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -11,6 +11,7 @@ import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailab import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; +import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar"; import TableHead from "@saleor/components/TableHead"; @@ -208,14 +209,16 @@ const CollectionProducts: React.FC = props => { )} - onProductUnassign(product.id, event)} - > - - + + onProductUnassign(product.id, event)} + > + + + ); diff --git a/src/components/TableButtonWrapper/TableButtonWrapper.tsx b/src/components/TableButtonWrapper/TableButtonWrapper.tsx new file mode 100644 index 000000000..41e0b3149 --- /dev/null +++ b/src/components/TableButtonWrapper/TableButtonWrapper.tsx @@ -0,0 +1,44 @@ +import React from "react"; + +interface TableButtonWrapper { + children: React.ReactElement<{ + onClick?: (e: React.MouseEvent) => void; + href?: string; + }>; +} + +/** + * Wraps any `Button` or `Link` used inside `TableRowLink` to handle events properly + * + * @example + * ```jsx + * + *