djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove hover from non-interactive table rows (#2358)

Browse source 
* Disable hover effect when TableRow is not clickable

* Replace TableRow with TableRowLink

* Update snapshots
This commit is contained in:
Jonatan Witoszek 2022-10-27 11:58:17 +01:00 committed by GitHub
parent b729a59fce
commit 11a990d197
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
86 changed files with 1140 additions and 1264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -10167,7 +10167,7 @@
"buffer-crc32": { "buffer-crc32": {
"version": "0.2.13", "version": "0.2.13",
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
"dev": true "dev": true
}, },
"buffer-equal-constant-time": { "buffer-equal-constant-time": {
@ -14989,7 +14989,7 @@
"pify": { "pify": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true "dev": true
} }
} }
@ -15470,7 +15470,7 @@
"fd-slicer": { "fd-slicer": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
"integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
"dev": true, "dev": true,
"requires": { "requires": {
"pend": "~1.2.0" "pend": "~1.2.0"
@ -23666,7 +23666,7 @@
"ospath": { "ospath": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz", "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
"integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==", "integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
"dev": true "dev": true
}, },
"p-cancelable": { "p-cancelable": {
@ -24219,7 +24219,7 @@
"pend": { "pend": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true "dev": true
}, },
"performance-now": { "performance-now": {

6
src/apps/components/AppsInProgress/AppsInProgress.tsx
View file

@ -3,13 +3,13 @@ import {
CircularProgress as Progress, CircularProgress as Progress,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import { IconButton } from "@saleor/components/IconButton"; import { IconButton } from "@saleor/components/IconButton";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableRowLink from "@saleor/components/TableRowLink";
import { AppsInstallationsQuery, JobStatusEnum } from "@saleor/graphql"; import { AppsInstallationsQuery, JobStatusEnum } from "@saleor/graphql";
import { import {
DeleteIcon, DeleteIcon,
@ -52,7 +52,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
<ResponsiveTable> <ResponsiveTable>
<TableBody> <TableBody>
{renderCollection(appsList, ({ status, appName, id, message }) => ( {renderCollection(appsList, ({ status, appName, id, message }) => (
<TableRow key={id} className={classes.tableRow}> <TableRowLink key={id} className={classes.tableRow}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<span data-tc="name">{appName}</span> <span data-tc="name">{appName}</span>
</TableCell> </TableCell>
@ -114,7 +114,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
</TableButtonWrapper> </TableButtonWrapper>
</TableCell> </TableCell>
)} )}
</TableRow> </TableRowLink>
))} ))}
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>

7
src/apps/components/AppsSkeleton/AppsSkeleton.tsx
View file

@ -1,5 +1,6 @@
import { TableCell, TableRow } from "@material-ui/core"; import { TableCell } from "@material-ui/core";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import React from "react"; import React from "react";
import { useStyles } from "../../styles"; import { useStyles } from "../../styles";
@ -8,11 +9,11 @@ export const AppsSkeleton = () => {
const classes = useStyles({}); const classes = useStyles({});
return ( return (
<TableRow className={classes.tableRow}> <TableRowLink className={classes.tableRow}>
<TableCell colSpan={2} className={classes.colName}> <TableCell colSpan={2} className={classes.colName}>
<Skeleton /> <Skeleton />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };

21
src/apps/components/CustomAppTokens/CustomAppTokens.tsx
View file

@ -1,14 +1,9 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { AppUpdateMutation } from "@saleor/graphql"; import { AppUpdateMutation } from "@saleor/graphql";
import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
@ -54,7 +49,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
/> />
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colNote}> <TableCell className={classes.colNote}>
<FormattedMessage id="0DRBjg" defaultMessage="Token Note" /> <FormattedMessage id="0DRBjg" defaultMessage="Token Note" />
</TableCell> </TableCell>
@ -72,13 +67,13 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
description="table actions" description="table actions"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
tokens, tokens,
token => ( token => (
<TableRow key={token ? token.id : "skeleton"}> <TableRowLink key={token ? token.id : "skeleton"}>
<TableCell className={classes.colNote}> <TableCell className={classes.colNote}>
{token?.name || <Skeleton />} {token?.name || <Skeleton />}
</TableCell> </TableCell>
@ -94,17 +89,17 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="bsP4f3" id="bsP4f3"
defaultMessage="No tokens found" defaultMessage="No tokens found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

12
src/apps/components/CustomApps/CustomApps.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, Typography } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import { customAppAddUrl } from "@saleor/apps/urls"; import { customAppAddUrl } from "@saleor/apps/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -90,7 +84,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
<AppsSkeleton key={index} /> <AppsSkeleton key={index} />
), ),
() => ( () => (
<TableRow className={classes.tableRow}> <TableRowLink className={classes.tableRow}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<Typography className={classes.text} variant="body2"> <Typography className={classes.text} variant="body2">
<FormattedMessage <FormattedMessage
@ -100,7 +94,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
/> />
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

5
src/apps/components/InstalledApps/InstalledApps.tsx
View file

@ -3,7 +3,6 @@ import {
Switch, Switch,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { AppManifestTableDisplay } from "@saleor/apps/components/AppManifestTableDisplay/AppManifestTableDisplay"; import { AppManifestTableDisplay } from "@saleor/apps/components/AppManifestTableDisplay/AppManifestTableDisplay";
@ -128,7 +127,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
<AppsSkeleton key={index} /> <AppsSkeleton key={index} />
), ),
() => ( () => (
<TableRow className={classes.tableRow}> <TableRowLink className={classes.tableRow}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<Typography className={classes.text} variant="body2"> <Typography className={classes.text} variant="body2">
<FormattedMessage <FormattedMessage
@ -138,7 +137,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
/> />
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import { import {
AttributeListUrlSortField, AttributeListUrlSortField,
attributeUrl, attributeUrl,
@ -168,9 +168,9 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -242,14 +242,14 @@ const AttributeList: React.FC<AttributeListProps> = ({
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="ztQgD8" id="ztQgD8"
defaultMessage="No attributes found" defaultMessage="No attributes found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

21
src/attributes/components/AttributeValues/AttributeValues.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableCell, TableFooter, TableHead } from "@material-ui/core";
Card,
TableCell,
TableFooter,
TableHead,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -14,6 +8,7 @@ import {
SortableTableRow, SortableTableRow,
} from "@saleor/components/SortableTable"; } from "@saleor/components/SortableTable";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
AttributeInputTypeEnum, AttributeInputTypeEnum,
AttributeValueFragment, AttributeValueFragment,
@ -130,7 +125,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
/> />
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.columnDrag} /> <TableCell className={classes.columnDrag} />
{isSwatch && ( {isSwatch && (
<TableCell className={classes.columnSwatch}> <TableCell className={classes.columnSwatch}>
@ -156,10 +151,10 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
/> />
</TableCell> </TableCell>
<TableCell className={classes.iconCell} /> <TableCell className={classes.iconCell} />
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePagination <TablePagination
colSpan={numberOfColumns} colSpan={numberOfColumns}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false} hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
@ -171,7 +166,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<SortableTableBody onSortEnd={onValueReorder}> <SortableTableBody onSortEnd={onValueReorder}>
{renderCollection( {renderCollection(
@ -211,7 +206,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
</SortableTableRow> </SortableTableRow>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="g5zIpS" id="g5zIpS"
@ -219,7 +214,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
description="No attribute values found" description="No attribute values found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</SortableTableBody> </SortableTableBody>

10
src/categories/components/CategoryList/CategoryList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import { CategoryListUrlSortField, categoryUrl } from "@saleor/categories/urls"; import { CategoryListUrlSortField, categoryUrl } from "@saleor/categories/urls";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -132,13 +132,13 @@ const CategoryList: React.FC<CategoryListProps> = props => {
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -188,7 +188,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
{isRoot ? ( {isRoot ? (
<FormattedMessage <FormattedMessage
@ -202,7 +202,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
/> />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
@ -96,9 +96,9 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
</TableCell> </TableCell>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -133,14 +133,14 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="Q1Uzbb" id="Q1Uzbb"
defaultMessage="No products found" defaultMessage="No products found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { channelAddUrl, channelUrl } from "@saleor/channels/urls"; import { channelAddUrl, channelUrl } from "@saleor/channels/urls";
import { Backlink } from "@saleor/components/Backlink"; import { Backlink } from "@saleor/components/Backlink";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -97,7 +91,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
<Card> <Card>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader> <TableCellHeader>
<FormattedMessage <FormattedMessage
id="j/vV0n" id="j/vV0n"
@ -112,7 +106,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
description="table actions" description="table actions"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -149,14 +143,14 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="/glQgs" id="/glQgs"
defaultMessage="No channels found" defaultMessage="No channels found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import { import {
CollectionListUrlSortField, CollectionListUrlSortField,
collectionUrl, collectionUrl,
@ -146,13 +146,13 @@ const CollectionList: React.FC<CollectionListProps> = props => {
</TooltipTableCellHeader> </TooltipTableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -211,14 +211,14 @@ const CollectionList: React.FC<CollectionListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="Yw+9F7" id="Yw+9F7"
defaultMessage="No collections found" defaultMessage="No collections found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown"; import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
@ -150,9 +144,9 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
<TableCell className={classes.colActions} /> <TableCell className={classes.colActions} />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -215,14 +209,14 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="Q1Uzbb" id="Q1Uzbb"
defaultMessage="No products found" defaultMessage="No products found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
View file

@ -7,13 +7,13 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import ConfirmButton from "@saleor/components/ConfirmButton"; import ConfirmButton from "@saleor/components/ConfirmButton";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { AvailableAttributeFragment } from "@saleor/graphql"; import { AvailableAttributeFragment } from "@saleor/graphql";
import useElementScroll, { import useElementScroll, {
isScrolledToBottom, isScrolledToBottom,
@ -170,7 +170,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
); );
return ( return (
<TableRow key={maybe(() => attribute.id)}> <TableRowLink key={maybe(() => attribute.id)}>
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.checkboxCell} className={classes.checkboxCell}
@ -186,16 +186,16 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
{attribute.slug} {attribute.slug}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => () =>
!loading && ( !loading && (
<TableRow> <TableRowLink>
<TableCell colSpan={2}> <TableCell colSpan={2}>
<FormattedMessage {...messages.noMembersFound} /> <FormattedMessage {...messages.noMembersFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

6
src/components/AssignContainerDialog/AssignContainerDialog.tsx
View file

@ -6,10 +6,10 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
} from "@material-ui/core"; } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import useSearchQuery from "@saleor/hooks/useSearchQuery"; import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle"; import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle";
@ -131,7 +131,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
); );
return ( return (
<TableRow key={container.id}> <TableRowLink key={container.id}>
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.checkboxCell} className={classes.checkboxCell}
@ -151,7 +151,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
<TableCell className={classes.wideCell}> <TableCell className={classes.wideCell}>
{container.name} {container.name}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

6
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -6,12 +6,12 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
} from "@material-ui/core"; } from "@material-ui/core";
import ConfirmButton from "@saleor/components/ConfirmButton"; import ConfirmButton from "@saleor/components/ConfirmButton";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { SearchProductsQuery } from "@saleor/graphql"; import { SearchProductsQuery } from "@saleor/graphql";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import useSearchQuery from "@saleor/hooks/useSearchQuery"; import useSearchQuery from "@saleor/hooks/useSearchQuery";
@ -148,7 +148,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
const isSelected = productsDict[product.id] || false; const isSelected = productsDict[product.id] || false;
return ( return (
<TableRow <TableRowLink
key={product.id} key={product.id}
data-test-id="assign-product-table-row" data-test-id="assign-product-table-row"
> >
@ -168,7 +168,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
onChange={() => handleChange(product.id)} onChange={() => handleChange(product.id)}
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

10
src/components/AssignVariantDialog/AssignVariantDialog.tsx
View file

@ -6,7 +6,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -14,6 +13,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { SearchProductsQuery } from "@saleor/graphql"; import { SearchProductsQuery } from "@saleor/graphql";
import useSearchQuery from "@saleor/hooks/useSearchQuery"; import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
@ -133,7 +133,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
productChoices, productChoices,
(product, productIndex) => ( (product, productIndex) => (
<React.Fragment key={product ? product.id : "skeleton"}> <React.Fragment key={product ? product.id : "skeleton"}>
<TableRow> <TableRowLink>
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.productCheckboxCell} className={classes.productCheckboxCell}
@ -161,10 +161,10 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
<TableCell className={classes.colName} colSpan={2}> <TableCell className={classes.colName} colSpan={2}>
{maybe(() => product.name)} {maybe(() => product.name)}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
{maybe(() => product.variants, []).map( {maybe(() => product.variants, []).map(
(variant, variantIndex) => ( (variant, variantIndex) => (
<TableRow <TableRowLink
key={variant.id} key={variant.id}
data-test-id="assign-variant-table-row" data-test-id="assign-variant-table-row"
> >
@ -206,7 +206,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
<Money money={variant.channelListings[0].price} /> <Money money={variant.channelListings[0].price} />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</React.Fragment> </React.Fragment>

15
src/components/CountryList/CountryList.tsx
View file

@ -1,9 +1,10 @@
import { Card, TableBody, TableCell, TableRow } from "@material-ui/core"; import { Card, TableBody, TableCell } from "@material-ui/core";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryFragment } from "@saleor/graphql"; import { CountryFragment } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames"; import classNames from "classnames";
@ -107,7 +108,7 @@ const CountryList: React.FC<CountryListProps> = props => {
/> />
<ResponsiveTable> <ResponsiveTable>
<TableBody> <TableBody>
<TableRow className={classes.pointer} onClick={toggleCollapse}> <TableRowLink className={classes.pointer} onClick={toggleCollapse}>
<TableCell <TableCell
className={classNames(classes.wideColumn, classes.toLeft)} className={classNames(classes.wideColumn, classes.toLeft)}
> >
@ -132,12 +133,12 @@ const CountryList: React.FC<CountryListProps> = props => {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
{!isCollapsed && {!isCollapsed &&
renderCollection( renderCollection(
sortCountries(countries), sortCountries(countries),
(country, countryIndex) => ( (country, countryIndex) => (
<TableRow key={country ? country.code : "skeleton"}> <TableRowLink key={country ? country.code : "skeleton"}>
<TableCell className={classes.offsetCell}> <TableCell className={classes.offsetCell}>
{maybe<React.ReactNode>( {maybe<React.ReactNode>(
() => ( () => (
@ -167,14 +168,14 @@ const CountryList: React.FC<CountryListProps> = props => {
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell className={classes.toLeft} colSpan={2}> <TableCell className={classes.toLeft} colSpan={2}>
{emptyText} {emptyText}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/components/Metadata/MetadataCard.tsx
View file

@ -6,11 +6,11 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import TableRowLink from "@saleor/components/TableRowLink";
import { MetadataInput } from "@saleor/graphql"; import { MetadataInput } from "@saleor/graphql";
import { FormChange } from "@saleor/hooks/useForm"; import { FormChange } from "@saleor/hooks/useForm";
import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui"; import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
@ -122,7 +122,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
) : ( ) : (
<Table className={classes.table}> <Table className={classes.table}>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colNameHeader}> <TableCell className={classes.colNameHeader}>
<FormattedMessage <FormattedMessage
id="nudPsY" id="nudPsY"
@ -144,11 +144,11 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
description="table action" description="table action"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{data.map((field, fieldIndex) => ( {data.map((field, fieldIndex) => (
<TableRow data-test-id="field" key={fieldIndex}> <TableRowLink data-test-id="field" key={fieldIndex}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<TextField <TextField
InputProps={{ InputProps={{
@ -192,7 +192,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
))} ))}
</TableBody> </TableBody>
</Table> </Table>

17
src/components/TableCellHeader/TableCellHeader.stories.tsx
View file

@ -1,11 +1,6 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { storiesOf } from "@storybook/react"; import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
@ -29,7 +24,7 @@ const Story: React.FC<StoryProps> = ({
<Card style={{ margin: "auto", width: 400 }}> <Card style={{ margin: "auto", width: 400 }}>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader <TableCellHeader
arrowPosition="right" arrowPosition="right"
direction={field === "name" ? direction : undefined} direction={field === "name" ? direction : undefined}
@ -43,13 +38,13 @@ const Story: React.FC<StoryProps> = ({
> >
Type Type
</TableCellHeader> </TableCellHeader>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRowLink>
<TableCell>Apple Juice</TableCell> <TableCell>Apple Juice</TableCell>
<TableCell>Juice</TableCell> <TableCell>Juice</TableCell>
</TableRow> </TableRowLink>
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
</Card> </Card>

6
src/components/TableHead/TableHead.tsx
View file

@ -1,10 +1,10 @@
import { import {
TableCell, TableCell,
TableHead as MuiTableHead, TableHead as MuiTableHead,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { TableHeadProps as MuiTableHeadProps } from "@material-ui/core/TableHead"; import { TableHeadProps as MuiTableHeadProps } from "@material-ui/core/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
@ -84,7 +84,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
return ( return (
<MuiTableHead {...muiTableHeadProps}> <MuiTableHead {...muiTableHeadProps}>
<TableRow> <TableRowLink>
{dragRows && (items === undefined || items.length > 0) && <TableCell />} {dragRows && (items === undefined || items.length > 0) && <TableCell />}
{(items === undefined || items.length > 0) && ( {(items === undefined || items.length > 0) && (
<TableCell <TableCell
@ -127,7 +127,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
) : ( ) : (
children children
)} )}
</TableRow> </TableRowLink>
</MuiTableHead> </MuiTableHead>
); );
}; };

13
src/components/TableRowLink/TableRowLink.tsx
View file

@ -7,12 +7,12 @@ import { Link } from "react-router-dom";
type MaterialTableRowPropsType = TableRowTypeMap["props"]; type MaterialTableRowPropsType = TableRowTypeMap["props"];
export interface TableRowLinkProps export interface TableRowLinkProps extends MaterialTableRowPropsType {
extends Omit<MaterialTableRowPropsType, "onClick"> {
children: React.ReactNode; children: React.ReactNode;
href?: string; href?: string;
className?: string; className?: string;
linkClassName?: string; linkClassName?: string;
onClick?: () => void;
} }
const useStyles = makeStyles( const useStyles = makeStyles(
@ -29,16 +29,21 @@ const TableRowLink = ({
href, href,
children, children,
linkClassName, linkClassName,
onClick,
...props ...props
}: TableRowLinkProps) => { }: TableRowLinkProps) => {
const classes = useStyles(); const classes = useStyles();
if (!href || isExternalURL(href)) { if (!href || isExternalURL(href)) {
return <TableRow {...props}>{children}</TableRow>; return (
<TableRow hover={!!onClick} onClick={onClick} {...props}>
{children}
</TableRow>
);
} }
return ( return (
<TableRow {...props}> <TableRow hover={true} onClick={onClick} {...props}>
<Link className={clsx(classes.link, linkClassName)} to={href}> <Link className={clsx(classes.link, linkClassName)} to={href}>
{children} {children}
</Link> </Link>

10
src/customers/components/CustomerList/CustomerList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import { useUserPermissions } from "@saleor/auth/hooks/useUserPermissions"; import { useUserPermissions } from "@saleor/auth/hooks/useUserPermissions";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import RequirePermissions, { import RequirePermissions, {
@ -125,13 +125,13 @@ const CustomerList: React.FC<CustomerListProps> = props => {
</RequirePermissions> </RequirePermissions>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -172,14 +172,14 @@ const CustomerList: React.FC<CustomerListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="FpIcp9" id="FpIcp9"
defaultMessage="No customers found" defaultMessage="No customers found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/customers/components/CustomerOrders/CustomerOrders.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import { DateTime } from "@saleor/components/Date"; import { DateTime } from "@saleor/components/Date";
@ -70,7 +64,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
/> />
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage <FormattedMessage
id="nTF6tG" id="nTF6tG"
@ -99,7 +93,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
description="order total amount" description="order total amount"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -147,14 +141,14 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={6}> <TableCell colSpan={6}>
<FormattedMessage <FormattedMessage
id="RlfqSV" id="RlfqSV"
defaultMessage="No orders found" defaultMessage="No orders found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/discounts/components/DiscountCategories/DiscountCategories.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { categoryUrl } from "@saleor/categories/urls"; import { categoryUrl } from "@saleor/categories/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -90,9 +84,9 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
</> </>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -143,11 +137,11 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.discountCategoriesNotFound} /> <FormattedMessage {...messages.discountCategoriesNotFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/discounts/components/DiscountCollections/DiscountCollections.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { collectionUrl } from "@saleor/collections/urls"; import { collectionUrl } from "@saleor/collections/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -88,9 +82,9 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
<TableCell /> <TableCell />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -143,11 +137,11 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.discountCollectionsNotFound} /> <FormattedMessage {...messages.discountCollectionsNotFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

6
src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
View file

@ -5,7 +5,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -16,6 +15,7 @@ import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryWithCodeFragment } from "@saleor/graphql"; import { CountryWithCodeFragment } from "@saleor/graphql";
import { SubmitPromise } from "@saleor/hooks/useForm"; import { SubmitPromise } from "@saleor/hooks/useForm";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
@ -130,7 +130,7 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
const isChecked = countrySelectionMap[country.code]; const isChecked = countrySelectionMap[country.code];
return ( return (
<TableRow key={country.code}> <TableRowLink key={country.code}>
<TableCell className={classes.wideCell}> <TableCell className={classes.wideCell}>
{country.country} {country.country}
</TableCell> </TableCell>
@ -163,7 +163,7 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
} }
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

16
src/discounts/components/DiscountProducts/DiscountProducts.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown"; import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
@ -97,9 +91,9 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
<TableCell className={classes.colActions} /> <TableCell className={classes.colActions} />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -164,11 +158,11 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.discountProductsNotFound} /> <FormattedMessage {...messages.discountProductsNotFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/discounts/components/DiscountVariants/DiscountVariants.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
@ -96,9 +90,9 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
<TableCell className={classes.colActions} /> <TableCell className={classes.colActions} />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -161,11 +155,11 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.discountVariantsNotFound} /> <FormattedMessage {...messages.discountVariantsNotFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/discounts/components/SaleList/SaleList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import Date from "@saleor/components/Date"; import Date from "@saleor/components/Date";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
@ -170,13 +170,13 @@ const SaleList: React.FC<SaleListProps> = props => {
</TooltipTableCellHeader> </TooltipTableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -247,11 +247,11 @@ const SaleList: React.FC<SaleListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage id="51HE+Q" defaultMessage="No sales found" /> <FormattedMessage id="51HE+Q" defaultMessage="No sales found" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/discounts/components/SaleValue/SaleValue.tsx
View file

@ -4,12 +4,12 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { DiscountErrorFragment } from "@saleor/graphql"; import { DiscountErrorFragment } from "@saleor/graphql";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
import { getFormErrors } from "@saleor/utils/errors"; import { getFormErrors } from "@saleor/utils/errors";
@ -94,7 +94,7 @@ const SaleValue: React.FC<SaleValueProps> = ({
); );
return ( return (
<TableRow <TableRowLink
key={listing?.id || `skeleton-${index}`} key={listing?.id || `skeleton-${index}`}
className={classes.row} className={classes.row}
> >
@ -119,18 +119,18 @@ const SaleValue: React.FC<SaleValueProps> = ({
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="/glQgs" id="/glQgs"
defaultMessage="No channels found" defaultMessage="No channels found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/discounts/components/VoucherList/VoucherList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import Date from "@saleor/components/Date"; import Date from "@saleor/components/Date";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
@ -224,13 +224,13 @@ const VoucherList: React.FC<VoucherListProps> = props => {
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -324,14 +324,14 @@ const VoucherList: React.FC<VoucherListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="U2mOqA" id="U2mOqA"
defaultMessage="No vouchers found" defaultMessage="No vouchers found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/discounts/components/VoucherRequirements/VoucherRequirements.tsx
View file

@ -3,7 +3,6 @@ import {
CardContent, CardContent,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -14,6 +13,7 @@ import RadioGroupField from "@saleor/components/RadioGroupField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { ChannelInput } from "@saleor/discounts/handlers"; import { ChannelInput } from "@saleor/discounts/handlers";
import { RequirementsPicker } from "@saleor/discounts/types"; import { RequirementsPicker } from "@saleor/discounts/types";
import { DiscountErrorFragment } from "@saleor/graphql"; import { DiscountErrorFragment } from "@saleor/graphql";
@ -142,7 +142,7 @@ const VoucherRequirements = ({
id => id === listing.id, id => id === listing.id,
); );
return ( return (
<TableRow key={listing?.id || `skeleton-${index}`}> <TableRowLink key={listing?.id || `skeleton-${index}`}>
<TableCell> <TableCell>
<Typography> <Typography>
{listing?.name || <Skeleton />} {listing?.name || <Skeleton />}
@ -174,18 +174,18 @@ const VoucherRequirements = ({
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="/glQgs" id="/glQgs"
defaultMessage="No channels found" defaultMessage="No channels found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/discounts/components/VoucherValue/VoucherValue.tsx
View file

@ -3,7 +3,6 @@ import {
CardContent, CardContent,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -13,6 +12,7 @@ import RadioGroupField from "@saleor/components/RadioGroupField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice"; import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice";
import { ChannelInput } from "@saleor/discounts/handlers"; import { ChannelInput } from "@saleor/discounts/handlers";
import { DiscountTypeEnum } from "@saleor/discounts/types"; import { DiscountTypeEnum } from "@saleor/discounts/types";
@ -103,7 +103,7 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
id => id === listing.id, id => id === listing.id,
); );
return ( return (
<TableRow key={listing?.id || `skeleton-${index}`}> <TableRowLink key={listing?.id || `skeleton-${index}`}>
<TableCell> <TableCell>
<Typography>{listing?.name || <Skeleton />}</Typography> <Typography>{listing?.name || <Skeleton />}</Typography>
</TableCell> </TableCell>
@ -150,18 +150,18 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="/glQgs" id="/glQgs"
defaultMessage="No channels found" defaultMessage="No channels found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

12
src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTable.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, Typography } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import DeleteIconButton from "@saleor/components/DeleteIconButton"; import DeleteIconButton from "@saleor/components/DeleteIconButton";
@ -180,11 +174,11 @@ const GiftCardsListTable: React.FC = () => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.noGiftCardsFound} /> <FormattedMessage {...messages.noGiftCardsFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

7
src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableFooter.tsx
View file

@ -1,5 +1,6 @@
import { TableFooter, TableRow } from "@material-ui/core"; import { TableFooter } from "@material-ui/core";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import usePaginator from "@saleor/hooks/usePaginator"; import usePaginator from "@saleor/hooks/usePaginator";
import React from "react"; import React from "react";
@ -23,14 +24,14 @@ const GiftCardsListTableFooter: React.FC = () => {
return ( return (
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePagination <TablePagination
{...paginationValues} {...paginationValues}
settings={settings} settings={settings}
colSpan={numberOfColumns} colSpan={numberOfColumns}
onUpdateListSettings={updateListSettings} onUpdateListSettings={updateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
); );
}; };

12
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, Typography } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -136,7 +130,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={3} className={classes.noProducts}> <TableCell colSpan={3} className={classes.noProducts}>
<Typography> <Typography>
<FormattedMessage <FormattedMessage
@ -145,7 +139,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
/> />
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/navigation/components/MenuList/MenuList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import IconButtonTableCell from "@saleor/components/IconButtonTableCell"; import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -117,13 +111,13 @@ const MenuList: React.FC<MenuListProps> = props => {
<TableCell className={classes.colAction} /> <TableCell className={classes.colAction} />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -169,14 +163,14 @@ const MenuList: React.FC<MenuListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="DWs4ba" id="DWs4ba"
defaultMessage="No menus found" defaultMessage="No menus found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

6
src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
View file

@ -7,12 +7,12 @@ import {
Radio, Radio,
RadioGroup, RadioGroup,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import Debounce from "@saleor/components/Debounce"; import Debounce from "@saleor/components/Debounce";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderFulfillLineFragment, WarehouseFragment } from "@saleor/graphql"; import { OrderFulfillLineFragment, WarehouseFragment } from "@saleor/graphql";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { import {
@ -160,7 +160,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
warehouse, warehouse,
); );
return ( return (
<TableRow key={warehouse.id}> <TableRowLink key={warehouse.id}>
<TableCell className={classes.tableCell}> <TableCell className={classes.tableCell}>
<FormControlLabel <FormControlLabel
value={warehouse.id} value={warehouse.id}
@ -187,7 +187,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
</Typography> </Typography>
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</RadioGroup> </RadioGroup>

17
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -1,12 +1,7 @@
import { import { TableBody, TableCell, TableHead, Typography } from "@material-ui/core";
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderDetailsFragment, OrderErrorFragment } from "@saleor/graphql"; import { OrderDetailsFragment, OrderErrorFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import { import {
@ -84,7 +79,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
{!!lines.length && ( {!!lines.length && (
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName} colSpan={2}> <TableCell className={classes.colName} colSpan={2}>
<span className={classes.colNameLabel}> <span className={classes.colNameLabel}>
<FormattedMessage id="x/ZVlU" defaultMessage="Product" /> <FormattedMessage id="x/ZVlU" defaultMessage="Product" />
@ -112,7 +107,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
/> />
</TableCell> </TableCell>
<TableCell className={classes.colAction} /> <TableCell className={classes.colAction} />
</TableRow> </TableRowLink>
</TableHead> </TableHead>
)} )}
<TableBody> <TableBody>
@ -136,7 +131,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
)) ))
) : ( ) : (
<> <>
<TableRow> <TableRowLink>
<TableCell colSpan={5}> <TableCell colSpan={5}>
<FormattedMessage <FormattedMessage
id="UD7/q8" id="UD7/q8"
@ -148,7 +143,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
</Typography> </Typography>
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</> </>
)} )}
</TableBody> </TableBody>

7
src/orders/components/OrderDraftDetailsProducts/TableLine.tsx
View file

@ -1,8 +1,9 @@
import { TableCell, TableRow, Typography } from "@material-ui/core"; import { TableCell, Typography } from "@material-ui/core";
import Link from "@saleor/components/Link"; import Link from "@saleor/components/Link";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar"; import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
OrderErrorFragment, OrderErrorFragment,
OrderLineFragment, OrderLineFragment,
@ -103,7 +104,7 @@ const TableLine: React.FC<TableLineProps> = ({
}; };
return ( return (
<TableRow key={id}> <TableRowLink key={id}>
<TableCell <TableCell
className={classNames({ className={classNames({
[classes.colStatusEmpty]: !alerts.length, [classes.colStatusEmpty]: !alerts.length,
@ -155,7 +156,7 @@ const TableLine: React.FC<TableLineProps> = ({
<DeleteIcon color="primary" /> <DeleteIcon color="primary" />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };

10
src/orders/components/OrderDraftList/OrderDraftList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import { DateTime } from "@saleor/components/Date"; import { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
@ -144,13 +144,13 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -213,14 +213,14 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="KIh25E" id="KIh25E"
defaultMessage="No draft orders found" defaultMessage="No draft orders found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

11
src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
View file

@ -1,6 +1,7 @@
import { TableCell, TableRow, TextField, Typography } from "@material-ui/core"; import { TableCell, TextField, Typography } from "@material-ui/core";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderFulfillLineFragment } from "@saleor/graphql"; import { OrderFulfillLineFragment } from "@saleor/graphql";
import { FormsetChange, FormsetData } from "@saleor/hooks/useFormset"; import { FormsetChange, FormsetData } from "@saleor/hooks/useFormset";
import { import {
@ -60,7 +61,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
if (!line) { if (!line) {
return ( return (
<TableRow key={lineIndex}> <TableRowLink key={lineIndex}>
<TableCellAvatar className={classes.colName}> <TableCellAvatar className={classes.colName}>
<Skeleton /> <Skeleton />
</TableCellAvatar> </TableCellAvatar>
@ -76,12 +77,12 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
<TableCell className={classes.colWarehouse}> <TableCell className={classes.colWarehouse}>
<Skeleton /> <Skeleton />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
} }
return ( return (
<TableRow key={line.id}> <TableRowLink key={line.id}>
<TableCellAvatar <TableCellAvatar
className={classes.colName} className={classes.colName}
thumbnail={line?.thumbnail?.url} thumbnail={line?.thumbnail?.url}
@ -180,7 +181,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
</div> </div>
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };
OrderFulfillLine.displayName = "OrderFulfillLine"; OrderFulfillLine.displayName = "OrderFulfillLine";

6
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -4,7 +4,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import { Backlink } from "@saleor/components/Backlink"; import { Backlink } from "@saleor/components/Backlink";
import CardSpacer from "@saleor/components/CardSpacer"; import CardSpacer from "@saleor/components/CardSpacer";
@ -16,6 +15,7 @@ import PageHeader from "@saleor/components/PageHeader";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Savebar from "@saleor/components/Savebar"; import Savebar from "@saleor/components/Savebar";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
FulfillOrderMutation, FulfillOrderMutation,
OrderErrorCode, OrderErrorCode,
@ -227,7 +227,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
{order ? ( {order ? (
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<FormattedMessage {...messages.productName} /> <FormattedMessage {...messages.productName} />
</TableCell> </TableCell>
@ -248,7 +248,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
<TableCell className={classes.colWarehouse}> <TableCell className={classes.colWarehouse}>
<FormattedMessage {...messages.warehouse} /> <FormattedMessage {...messages.warehouse} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(

13
src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx
View file

@ -1,13 +1,8 @@
import { import { TableBody, TableCell, TableHead, Typography } from "@material-ui/core";
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@material-ui/core";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import { CardSpacer } from "@saleor/components/CardSpacer"; import { CardSpacer } from "@saleor/components/CardSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql"; import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
@ -76,7 +71,7 @@ const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogP
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
{!!lines?.length && ( {!!lines?.length && (
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
{intl.formatMessage(messages.productLabel)} {intl.formatMessage(messages.productLabel)}
</TableCell> </TableCell>
@ -86,7 +81,7 @@ const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogP
<TableCell className={classes.colWarehouseStock}> <TableCell className={classes.colWarehouseStock}>
{intl.formatMessage(messages.warehouseStockLabel)} {intl.formatMessage(messages.warehouseStockLabel)}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
)} )}

7
src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx
View file

@ -1,5 +1,6 @@
import { TableCell, TableRow, Typography } from "@material-ui/core"; import { TableCell, Typography } from "@material-ui/core";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql"; import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql";
import { import {
getAttributesCaption, getAttributesCaption,
@ -33,7 +34,7 @@ const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDia
); );
return ( return (
<TableRow key={line?.id}> <TableRowLink key={line?.id}>
<TableCellAvatar <TableCellAvatar
className={classes.colName} className={classes.colName}
thumbnail={line?.thumbnail?.url} thumbnail={line?.thumbnail?.url}
@ -51,7 +52,7 @@ const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDia
<TableCell className={classes.colWarehouseStock}> <TableCell className={classes.colWarehouseStock}>
{getOrderLineAvailableQuantity(line, stock)} {getOrderLineAvailableQuantity(line, stock)}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };

7
src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
View file

@ -1,4 +1,5 @@
import { TableCell, TableRow, Typography } from "@material-ui/core"; import { TableCell, Typography } from "@material-ui/core";
import TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentStatus, OrderDetailsFragment } from "@saleor/graphql"; import { FulfillmentStatus, OrderDetailsFragment } from "@saleor/graphql";
import { getStringOrPlaceholder } from "@saleor/misc"; import { getStringOrPlaceholder } from "@saleor/misc";
import classNames from "classnames"; import classNames from "classnames";
@ -25,7 +26,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
const { warehouse, trackingNumber, status } = fulfillment; const { warehouse, trackingNumber, status } = fulfillment;
return ( return (
<TableRow> <TableRowLink>
<TableCell className={classes.infoRow} colSpan={NUMBER_OF_COLUMNS}> <TableCell className={classes.infoRow} colSpan={NUMBER_OF_COLUMNS}>
<Typography color="textSecondary" variant="body2"> <Typography color="textSecondary" variant="body2">
{warehouse && ( {warehouse && (
@ -66,7 +67,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
)} )}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };

6
src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
View file

@ -3,7 +3,6 @@ import {
CardContent, CardContent,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -11,6 +10,7 @@ import CardTitle from "@saleor/components/CardTitle";
import Date from "@saleor/components/Date"; import Date from "@saleor/components/Date";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { InvoiceFragment } from "@saleor/graphql"; import { InvoiceFragment } from "@saleor/graphql";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
@ -107,7 +107,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
<ResponsiveTable className={classes.invoicesTable}> <ResponsiveTable className={classes.invoicesTable}>
<TableBody className={classes.invoicesTableBody}> <TableBody className={classes.invoicesTableBody}>
{generatedInvoices.map(invoice => ( {generatedInvoices.map(invoice => (
<TableRow key={invoice.id} hover={!!invoice}> <TableRowLink key={invoice.id} hover={!!invoice}>
<TableCell <TableCell
className={ className={
onInvoiceClick onInvoiceClick
@ -141,7 +141,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
</Button> </Button>
</TableCell> </TableCell>
)} )}
</TableRow> </TableRowLink>
))} ))}
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>

13
src/orders/components/OrderList/OrderList.tsx
View file

@ -3,7 +3,6 @@ import {
TableCell, TableCell,
TableFooter, TableFooter,
TableHead, TableHead,
TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import { CSSProperties } from "@material-ui/styles"; import { CSSProperties } from "@material-ui/styles";
import { DateTime } from "@saleor/components/Date"; import { DateTime } from "@saleor/components/Date";
@ -100,7 +99,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
return ( return (
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader <TableCellHeader
direction={ direction={
sort.sort === OrderListUrlSortField.number sort.sort === OrderListUrlSortField.number
@ -176,17 +175,17 @@ export const OrderList: React.FC<OrderListProps> = props => {
description="total order price" description="total order price"
/> />
</TableCellHeader> </TableCellHeader>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
disabled={disabled} disabled={disabled}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -256,14 +255,14 @@ export const OrderList: React.FC<OrderListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="RlfqSV" id="RlfqSV"
defaultMessage="No orders found" defaultMessage="No orders found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -7,7 +7,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -17,6 +16,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderErrorFragment, SearchOrderVariantQuery } from "@saleor/graphql"; import { OrderErrorFragment, SearchOrderVariantQuery } from "@saleor/graphql";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
@ -158,7 +158,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
productChoicesWithValidVariants, productChoicesWithValidVariants,
(product, productIndex) => ( (product, productIndex) => (
<React.Fragment key={product ? product.id : "skeleton"}> <React.Fragment key={product ? product.id : "skeleton"}>
<TableRow> <TableRowLink>
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.productCheckboxCell} className={classes.productCheckboxCell}
@ -186,11 +186,11 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
<TableCell className={classes.colName} colSpan={2}> <TableCell className={classes.colName} colSpan={2}>
{maybe(() => product.name)} {maybe(() => product.name)}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
{maybe(() => product.variants, []) {maybe(() => product.variants, [])
.filter(isValidVariant) .filter(isValidVariant)
.map((variant, variantIndex) => ( .map((variant, variantIndex) => (
<TableRow key={variant.id}> <TableRowLink key={variant.id}>
<TableCell /> <TableCell />
<TableCell className={classes.colVariantCheckbox}> <TableCell className={classes.colVariantCheckbox}>
<Checkbox <Checkbox
@ -229,7 +229,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
<TableCell className={classes.textRight}> <TableCell className={classes.textRight}>
<OrderPriceLabel pricing={variant.pricing} /> <OrderPriceLabel pricing={variant.pricing} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
))} ))}
</React.Fragment> </React.Fragment>
), ),

7
src/orders/components/OrderProductsCardElements/OrderProductsCardHeader.tsx
View file

@ -1,4 +1,5 @@
import { TableCell, TableHead, TableRow } from "@material-ui/core"; import { TableCell, TableHead } from "@material-ui/core";
import TableRowLink from "@saleor/components/TableRowLink";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -65,7 +66,7 @@ const TableHeader = () => {
<col className={classes.colTotal} /> <col className={classes.colTotal} />
</colgroup> </colgroup>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<FormattedMessage <FormattedMessage
id="WE8IFE" id="WE8IFE"
@ -101,7 +102,7 @@ const TableHeader = () => {
description="order line total price" description="order line total price"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
</> </>
); );

7
src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx
View file

@ -1,8 +1,9 @@
import { TableCell, TableRow } from "@material-ui/core"; import { TableCell } from "@material-ui/core";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar"; import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderDetailsFragment, OrderLineFragment } from "@saleor/graphql"; import { OrderDetailsFragment, OrderLineFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
@ -73,7 +74,7 @@ const TableLine: React.FC<TableLineProps> = ({
const quantityToDisplay = isOrderLine ? quantityToFulfill : quantity; const quantityToDisplay = isOrderLine ? quantityToFulfill : quantity;
return ( return (
<TableRow key={line.id}> <TableRowLink key={line.id}>
<TableCellAvatar <TableCellAvatar
className={classes.colName} className={classes.colName}
thumbnail={maybe(() => line.orderLine.thumbnail.url)} thumbnail={maybe(() => line.orderLine.thumbnail.url)}
@ -101,7 +102,7 @@ const TableLine: React.FC<TableLineProps> = ({
}} }}
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}; };

14
src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx
View file

@ -5,7 +5,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -14,6 +13,7 @@ import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderRefundDataQuery } from "@saleor/graphql"; import { OrderRefundDataQuery } from "@saleor/graphql";
import { FormsetChange } from "@saleor/hooks/useFormset"; import { FormsetChange } from "@saleor/hooks/useFormset";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
@ -119,7 +119,7 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
</CardContent> </CardContent>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage <FormattedMessage
id="FNT4b+" id="FNT4b+"
@ -148,7 +148,7 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
description="tabel column header" description="tabel column header"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -162,7 +162,7 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
Number(selectedLineQuantity?.value) < 0; Number(selectedLineQuantity?.value) < 0;
return ( return (
<TableRow key={line?.id}> <TableRowLink key={line?.id}>
<TableCellAvatar thumbnail={line?.orderLine?.thumbnail?.url}> <TableCellAvatar thumbnail={line?.orderLine?.thumbnail?.url}>
{line?.orderLine?.productName ? ( {line?.orderLine?.productName ? (
line?.orderLine?.productName line?.orderLine?.productName
@ -230,18 +230,18 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
/> />
)) || <Skeleton />} )) || <Skeleton />}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<FormattedMessage <FormattedMessage
id="Q1Uzbb" id="Q1Uzbb"
defaultMessage="No products found" defaultMessage="No products found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

14
src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx
View file

@ -5,7 +5,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -14,6 +13,7 @@ import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderRefundDataQuery } from "@saleor/graphql"; import { OrderRefundDataQuery } from "@saleor/graphql";
import { FormsetChange } from "@saleor/hooks/useFormset"; import { FormsetChange } from "@saleor/hooks/useFormset";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
@ -116,7 +116,7 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
</CardContent> </CardContent>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage <FormattedMessage
id="FNT4b+" id="FNT4b+"
@ -145,7 +145,7 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
description="tabel column header" description="tabel column header"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -160,7 +160,7 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
Number(selectedLineQuantity?.value) < 0; Number(selectedLineQuantity?.value) < 0;
return ( return (
<TableRow key={line?.id}> <TableRowLink key={line?.id}>
<TableCellAvatar thumbnail={line?.thumbnail?.url}> <TableCellAvatar thumbnail={line?.thumbnail?.url}>
{line?.productName ? line?.productName : <Skeleton />} {line?.productName ? line?.productName : <Skeleton />}
</TableCellAvatar> </TableCellAvatar>
@ -224,18 +224,18 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
/> />
)) || <Skeleton />} )) || <Skeleton />}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<FormattedMessage <FormattedMessage
id="Q1Uzbb" id="Q1Uzbb"
defaultMessage="No products found" defaultMessage="No products found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

14
src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ReturnItemsCard.tsx
View file

@ -5,12 +5,12 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
TextField, TextField,
} from "@material-ui/core"; } from "@material-ui/core";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
OrderDetailsFragment, OrderDetailsFragment,
OrderErrorFragment, OrderErrorFragment,
@ -138,7 +138,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
</CardContent> </CardContent>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage <FormattedMessage
id="aAAxKp" id="aAAxKp"
@ -168,7 +168,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
description="table column header" description="table column header"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -204,7 +204,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
: "50%"; : "50%";
return ( return (
<TableRow key={id}> <TableRowLink key={id}>
<TableCellAvatar <TableCellAvatar
thumbnail={thumbnail?.url} thumbnail={thumbnail?.url}
style={{ width: productNameCellWidth }} style={{ width: productNameCellWidth }}
@ -259,15 +259,15 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
/> />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<Skeleton /> <Skeleton />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

7
src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx
View file

@ -1,4 +1,4 @@
import { Card, TableCell, TableRow } from "@material-ui/core"; import { Card, TableCell } from "@material-ui/core";
import { attributeUrl } from "@saleor/attributes/urls"; import { attributeUrl } from "@saleor/attributes/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -11,6 +11,7 @@ import {
} from "@saleor/components/SortableTable"; } from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { AttributeFragment, AttributeTypeEnum } from "@saleor/graphql"; import { AttributeFragment, AttributeTypeEnum } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
@ -169,14 +170,14 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="ztQgD8" id="ztQgD8"
defaultMessage="No attributes found" defaultMessage="No attributes found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</SortableTableBody> </SortableTableBody>

10
src/pageTypes/components/PageTypeList/PageTypeList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
@ -78,12 +78,12 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
disabled={disabled} disabled={disabled}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -118,14 +118,14 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="6fORLY" id="6fORLY"
defaultMessage="No page types found" defaultMessage="No page types found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/pages/components/PageList/PageList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
@ -132,14 +126,14 @@ const PageList: React.FC<PageListProps> = props => {
</TableCellHeader> </TableCellHeader>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
disabled={disabled} disabled={disabled}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -196,14 +190,14 @@ const PageList: React.FC<PageListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="iMJka8" id="iMJka8"
defaultMessage="No pages found" defaultMessage="No pages found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
View file

@ -7,7 +7,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -16,6 +15,7 @@ import CardSpacer from "@saleor/components/CardSpacer";
import ConfirmButton from "@saleor/components/ConfirmButton"; import ConfirmButton from "@saleor/components/ConfirmButton";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { SearchStaffMembersQuery } from "@saleor/graphql"; import { SearchStaffMembersQuery } from "@saleor/graphql";
import useElementScroll, { import useElementScroll, {
isScrolledToBottom, isScrolledToBottom,
@ -235,7 +235,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
); );
return ( return (
<TableRow key={member.id} data-test-id="user-row"> <TableRowLink key={member.id} data-test-id="user-row">
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.checkboxCell} className={classes.checkboxCell}
@ -286,16 +286,16 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
)} )}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => () =>
!loading && ( !loading && (
<TableRow> <TableRowLink>
<TableCell colSpan={2}> <TableCell colSpan={2}>
<FormattedMessage {...messages.noMembersFound} /> <FormattedMessage {...messages.noMembersFound} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

13
src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
View file

@ -3,7 +3,6 @@ import {
TableCell, TableCell,
TableFooter, TableFooter,
TableHead, TableHead,
TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
@ -71,7 +70,7 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
return ( return (
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader <TableCellHeader
direction={ direction={
sort.sort === PermissionGroupListUrlSortField.name sort.sort === PermissionGroupListUrlSortField.name
@ -94,15 +93,15 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
<TableCell className={classes.colActionsHeader}> <TableCell className={classes.colActionsHeader}>
<FormattedMessage id="wL7VAE" defaultMessage="Actions" /> <FormattedMessage id="wL7VAE" defaultMessage="Actions" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
disabled={disabled} disabled={disabled}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -158,14 +157,14 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="CXn88q" id="CXn88q"
defaultMessage="No permission groups found" defaultMessage="No permission groups found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
View file

@ -3,7 +3,6 @@ import {
CardContent, CardContent,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -13,6 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellHeader from "@saleor/components/TableCellHeader"; import TableCellHeader from "@saleor/components/TableCellHeader";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { PermissionGroupMemberFragment } from "@saleor/graphql"; import { PermissionGroupMemberFragment } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { import {
@ -201,7 +201,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
const isSelected = user ? isChecked(user.id) : false; const isSelected = user ? isChecked(user.id) : false;
return ( return (
<TableRow <TableRowLink
className={classNames({ className={classNames({
[classes.tableRow]: !!user, [classes.tableRow]: !!user,
})} })}
@ -276,18 +276,18 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="qrWOxx" id="qrWOxx"
defaultMessage="No members found" defaultMessage="No members found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

19
src/plugins/components/PluginsList/PluginsList.tsx
View file

@ -1,7 +1,8 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import { TablePaginationWithContext } from "@saleor/components/TablePagination"; import { TablePaginationWithContext } from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import { PluginBaseFragment } from "@saleor/graphql"; import { PluginBaseFragment } from "@saleor/graphql";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import { EditIcon, makeStyles } from "@saleor/macaw-ui"; import { EditIcon, makeStyles } from "@saleor/macaw-ui";
@ -49,21 +50,21 @@ const PluginList: React.FC<PluginListProps> = props => {
<ResponsiveTable> <ResponsiveTable>
<PluginListTableHead sort={sort} onSort={onSort} /> <PluginListTableHead sort={sort} onSort={onSort} />
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={totalColSpan} colSpan={totalColSpan}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
settings={settings} settings={settings}
disabled={disabled} disabled={disabled}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
plugins, plugins,
plugin => plugin =>
plugin ? ( plugin ? (
<TableRow <TableRowLink
data-test-id="plugin" data-test-id="plugin"
hover={!!plugin} hover={!!plugin}
className={!!plugin ? classes.link : undefined} className={!!plugin ? classes.link : undefined}
@ -78,23 +79,23 @@ const PluginList: React.FC<PluginListProps> = props => {
<TableCell align="right"> <TableCell align="right">
<EditIcon /> <EditIcon />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
) : ( ) : (
<TableRow> <TableRowLink>
<TableCell colSpan={totalColSpan}> <TableCell colSpan={totalColSpan}>
<Skeleton /> <Skeleton />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={totalColSpan}> <TableCell colSpan={totalColSpan}>
{intl.formatMessage({ {intl.formatMessage({
id: "Co2U4u", id: "Co2U4u",
defaultMessage: "No plugins found", defaultMessage: "No plugins found",
})} })}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

7
src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
View file

@ -1,4 +1,4 @@
import { Card, TableCell, TableRow } from "@material-ui/core"; import { Card, TableCell } from "@material-ui/core";
import { attributeUrl } from "@saleor/attributes/urls"; import { attributeUrl } from "@saleor/attributes/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -11,6 +11,7 @@ import {
} from "@saleor/components/SortableTable"; } from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { AttributeFragment, ProductAttributeType } from "@saleor/graphql"; import { AttributeFragment, ProductAttributeType } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
@ -183,14 +184,14 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="ztQgD8" id="ztQgD8"
defaultMessage="No attributes found" defaultMessage="No attributes found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</SortableTableBody> </SortableTableBody>

9
src/productTypes/components/ProductTypeList/ProductTypeList.tsx
View file

@ -2,7 +2,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableFooter, TableFooter,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
@ -123,9 +122,9 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
</TableCell> </TableCell>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} /> <TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -205,14 +204,14 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="0nLsyM" id="0nLsyM"
defaultMessage="No product types found" defaultMessage="No product types found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

7
src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
View file

@ -1,4 +1,4 @@
import { Card, TableCell, TableRow, Tooltip } from "@material-ui/core"; import { Card, TableCell, Tooltip } from "@material-ui/core";
import HelpOutline from "@material-ui/icons/HelpOutline"; import HelpOutline from "@material-ui/icons/HelpOutline";
import { attributeUrl } from "@saleor/attributes/urls"; import { attributeUrl } from "@saleor/attributes/urls";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -12,6 +12,7 @@ import {
} from "@saleor/components/SortableTable"; } from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper"; import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { ProductAttributeType, ProductTypeDetailsQuery } from "@saleor/graphql"; import { ProductAttributeType, ProductTypeDetailsQuery } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc"; import { maybe, renderCollection } from "@saleor/misc";
@ -282,14 +283,14 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="ztQgD8" id="ztQgD8"
defaultMessage="No attributes found" defaultMessage="No attributes found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</SortableTableBody> </SortableTableBody>

10
src/products/components/ProductList/ProductList.tsx
View file

@ -1,4 +1,4 @@
import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableFooter } from "@material-ui/core";
import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown"; import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
import { import {
getChannelAvailabilityColor, getChannelAvailabilityColor,
@ -313,13 +313,13 @@ export const ProductList: React.FC<ProductListProps> = props => {
</DisplayColumn> </DisplayColumn>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -442,14 +442,14 @@ export const ProductList: React.FC<ProductListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="Q1Uzbb" id="Q1Uzbb"
defaultMessage="No products found" defaultMessage="No products found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

22
src/products/components/ProductStocks/ProductStocks.tsx
View file

@ -10,7 +10,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -25,6 +24,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import Link from "@saleor/components/Link"; import Link from "@saleor/components/Link";
import PreviewPill from "@saleor/components/PreviewPill"; import PreviewPill from "@saleor/components/PreviewPill";
import TableRowLink from "@saleor/components/TableRowLink";
import { ProductErrorFragment, WarehouseFragment } from "@saleor/graphql"; import { ProductErrorFragment, WarehouseFragment } from "@saleor/graphql";
import { FormChange, FormErrors } from "@saleor/hooks/useForm"; import { FormChange, FormErrors } from "@saleor/hooks/useForm";
import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset"; import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
@ -245,7 +245,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<col className={classes.colQuantity} /> <col className={classes.colQuantity} />
</colgroup> </colgroup>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<FormattedMessage {...messages.warehouseName} /> <FormattedMessage {...messages.warehouseName} />
</TableCell> </TableCell>
@ -256,7 +256,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<FormattedMessage {...messages.quantity} /> <FormattedMessage {...messages.quantity} />
</TableCell> </TableCell>
<TableCell className={classes.colAction} /> <TableCell className={classes.colAction} />
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection(stocks, (stock, index) => { {renderCollection(stocks, (stock, index) => {
@ -265,7 +265,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
); );
return ( return (
<TableRow key={stock.id}> <TableRowLink key={stock.id}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
{stock.label} {stock.label}
</TableCell> </TableCell>
@ -299,12 +299,12 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
{warehousesToAssign.length > 0 && ( {warehousesToAssign.length > 0 && (
<ClickAwayListener onClickAway={() => setExpansionState(false)}> <ClickAwayListener onClickAway={() => setExpansionState(false)}>
<TableRow <TableRowLink
className={classes.addRow} className={classes.addRow}
onClick={() => setExpansionState(!isExpanded)} onClick={() => setExpansionState(!isExpanded)}
> >
@ -354,7 +354,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
</Popper> </Popper>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</ClickAwayListener> </ClickAwayListener>
)} )}
</TableBody> </TableBody>
@ -446,7 +446,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<col className={classes.colThreshold} /> <col className={classes.colThreshold} />
</colgroup> </colgroup>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<FormattedMessage {...sectionNames.channels} /> <FormattedMessage {...sectionNames.channels} />
</TableCell> </TableCell>
@ -456,7 +456,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<TableCell className={classes.colThreshold}> <TableCell className={classes.colThreshold}>
<FormattedMessage {...messages.channelTreshold} /> <FormattedMessage {...messages.channelTreshold} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection(productVariantChannelListings, listing => { {renderCollection(productVariantChannelListings, listing => {
@ -465,7 +465,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
} }
return ( return (
<TableRow key={listing.id}> <TableRowLink key={listing.id}>
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
{listing.name} {listing.name}
</TableCell> </TableCell>
@ -498,7 +498,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
value={listing?.preorderThreshold ?? ""} value={listing?.preorderThreshold ?? ""}
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

11
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -1,4 +1,4 @@
import { Card, TableCell, TableRow } from "@material-ui/core"; import { Card, TableCell } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -8,6 +8,7 @@ import {
SortableTableRow, SortableTableRow,
} from "@saleor/components/SortableTable"; } from "@saleor/components/SortableTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
ProductVariantCreateDataQuery, ProductVariantCreateDataQuery,
ProductVariantDetailsQuery, ProductVariantDetailsQuery,
@ -94,7 +95,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
); );
})} })}
{!isCreate ? ( {!isCreate ? (
<TableRow className={classes.rowNew}> <TableRowLink className={classes.rowNew}>
<TableCell colSpan={3}> <TableCell colSpan={3}>
<Button <Button
href={productVariantAddUrl(productId)} href={productVariantAddUrl(productId)}
@ -103,9 +104,9 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
<FormattedMessage {...messages.addVariant} /> <FormattedMessage {...messages.addVariant} />
</Button> </Button>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
) : ( ) : (
<TableRow> <TableRowLink>
<TableCellAvatar <TableCellAvatar
alignRight alignRight
className={classNames( className={classNames(
@ -122,7 +123,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<FormattedMessage {...messages.newVariant} /> <FormattedMessage {...messages.newVariant} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
)} )}
</SortableTableBody> </SortableTableBody>
</ResponsiveTable> </ResponsiveTable>

14
src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
View file

@ -4,7 +4,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { import {
@ -16,6 +15,7 @@ import CardTitle from "@saleor/components/CardTitle";
import PriceField from "@saleor/components/PriceField"; import PriceField from "@saleor/components/PriceField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { ProductChannelListingErrorFragment } from "@saleor/graphql"; import { ProductChannelListingErrorFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
@ -130,7 +130,7 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
</CardContent> </CardContent>
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage <FormattedMessage
id="c8UT0c" id="c8UT0c"
@ -152,7 +152,7 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
description="tabel column header" description="tabel column header"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -168,7 +168,7 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
); );
return ( return (
<TableRow key={listing?.id || `skeleton-${index}`}> <TableRowLink key={listing?.id || `skeleton-${index}`}>
<TableCell>{listing?.name || <Skeleton />}</TableCell> <TableCell>{listing?.name || <Skeleton />}</TableCell>
<TableCell className={classes.colPrice}> <TableCell className={classes.colPrice}>
{listing ? ( {listing ? (
@ -230,18 +230,18 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="/glQgs" id="/glQgs"
defaultMessage="No channels found" defaultMessage="No channels found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

13
src/shipping/components/OrderValue/OrderValue.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, Typography } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
import { ChannelShippingData } from "@saleor/channels/utils"; import { ChannelShippingData } from "@saleor/channels/utils";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -12,6 +6,7 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import PriceField from "@saleor/components/PriceField"; import PriceField from "@saleor/components/PriceField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { ShippingChannelsErrorFragment } from "@saleor/graphql"; import { ShippingChannelsErrorFragment } from "@saleor/graphql";
import { ChangeEvent } from "@saleor/hooks/useForm"; import { ChangeEvent } from "@saleor/hooks/useForm";
import { import {
@ -138,7 +133,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
); );
return ( return (
<TableRow key={channel.id}> <TableRowLink key={channel.id}>
<TableCell> <TableCell>
<Typography>{channel.name}</Typography> <Typography>{channel.name}</Typography>
</TableCell> </TableCell>
@ -187,7 +182,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
} }
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

6
src/shipping/components/PricingCard/PricingCard.tsx
View file

@ -3,7 +3,6 @@ import {
CardContent, CardContent,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { ChannelShippingData } from "@saleor/channels/utils"; import { ChannelShippingData } from "@saleor/channels/utils";
@ -11,6 +10,7 @@ import CardTitle from "@saleor/components/CardTitle";
import PriceField from "@saleor/components/PriceField"; import PriceField from "@saleor/components/PriceField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { ShippingChannelsErrorFragment } from "@saleor/graphql"; import { ShippingChannelsErrorFragment } from "@saleor/graphql";
import { import {
getFormChannelError, getFormChannelError,
@ -91,7 +91,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
const error = getFormChannelError(formErrors.price, channel.id); const error = getFormChannelError(formErrors.price, channel.id);
return ( return (
<TableRow key={channel.id}> <TableRowLink key={channel.id}>
<TableCell> <TableCell>
<Typography>{channel.name}</Typography> <Typography>{channel.name}</Typography>
</TableCell> </TableCell>
@ -117,7 +117,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
hint={error && getShippingErrorMessage(error, intl)} hint={error && getShippingErrorMessage(error, intl)}
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

14
src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx
View file

@ -3,7 +3,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableFooter, TableFooter,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -14,6 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableHead from "@saleor/components/TableHead"; import TableHead from "@saleor/components/TableHead";
import { TablePaginationWithContext } from "@saleor/components/TablePagination"; import { TablePaginationWithContext } from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import { ShippingZoneQuery } from "@saleor/graphql"; import { ShippingZoneQuery } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc"; import { renderCollection } from "@saleor/misc";
@ -108,27 +108,27 @@ const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
</TableCell> </TableCell>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
disabled={disabled} disabled={disabled}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
</> </>
)} )}
<TableBody> <TableBody>
{products?.length === 0 ? ( {products?.length === 0 ? (
<TableRow> <TableRowLink>
<TableCell colSpan={5}> <TableCell colSpan={5}>
<FormattedMessage id="Gg4+K7" defaultMessage="No Products" /> <FormattedMessage id="Gg4+K7" defaultMessage="No Products" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
) : ( ) : (
renderCollection(products, product => { renderCollection(products, product => {
const isSelected = product ? isChecked(product.id) : false; const isSelected = product ? isChecked(product.id) : false;
return ( return (
<TableRow key={product ? product.id : "skeleton"}> <TableRowLink key={product ? product.id : "skeleton"}>
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
checked={isSelected} checked={isSelected}
@ -155,7 +155,7 @@ const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
<DeleteIcon color="primary" /> <DeleteIcon color="primary" />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
}) })
)} )}

10
src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
View file

@ -7,7 +7,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
} from "@material-ui/core"; } from "@material-ui/core";
import BackButton from "@saleor/components/BackButton"; import BackButton from "@saleor/components/BackButton";
@ -16,6 +15,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
SearchProductsQuery, SearchProductsQuery,
ShippingPriceExcludeProductMutation, ShippingPriceExcludeProductMutation,
@ -184,7 +184,7 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
<React.Fragment <React.Fragment
key={product ? product.id : `skeleton-${productIndex}`} key={product ? product.id : `skeleton-${productIndex}`}
> >
<TableRow> <TableRowLink>
<TableCell <TableCell
padding="checkbox" padding="checkbox"
className={classes.productCheckboxCell} className={classes.productCheckboxCell}
@ -211,19 +211,19 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
<TableCell className={classes.colName} colSpan={2}> <TableCell className={classes.colName} colSpan={2}>
{product?.name || <Skeleton />} {product?.name || <Skeleton />}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</React.Fragment> </React.Fragment>
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={4}> <TableCell colSpan={4}>
<FormattedMessage <FormattedMessage
id="5ZvuVw" id="5ZvuVw"
defaultMessage="No products matching given query" defaultMessage="No products matching given query"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

10
src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
View file

@ -5,7 +5,6 @@ import {
DialogTitle, DialogTitle,
TableBody, TableBody,
TableCell, TableCell,
TableRow,
TextField, TextField,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
@ -16,6 +15,7 @@ import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryWithCodeFragment } from "@saleor/graphql"; import { CountryWithCodeFragment } from "@saleor/graphql";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import { import {
@ -127,7 +127,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
<FormSpacer /> <FormSpacer />
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
<TableBody> <TableBody>
<TableRow <TableRowLink
className={classes.clickableRow} className={classes.clickableRow}
onClick={() => onClick={() =>
handleRestOfTheWorldChange( handleRestOfTheWorldChange(
@ -154,7 +154,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
checked={isRestOfTheWorldSelected} checked={isRestOfTheWorldSelected}
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
<FormSpacer /> <FormSpacer />
@ -173,7 +173,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
const isChecked = countrySelectionMap[country.code]; const isChecked = countrySelectionMap[country.code];
return ( return (
<TableRow <TableRowLink
className={classes.clickableRow} className={classes.clickableRow}
onClick={() => onClick={() =>
handleCountryChange(country.code, !isChecked) handleCountryChange(country.code, !isChecked)
@ -189,7 +189,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
> >
<Checkbox checked={isChecked} /> <Checkbox checked={isChecked} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
); );
})} })}
</TableBody> </TableBody>

14
src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
View file

@ -4,7 +4,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
@ -12,6 +11,7 @@ import CardTitle from "@saleor/components/CardTitle";
import RadioGroupField from "@saleor/components/RadioGroupField"; import RadioGroupField from "@saleor/components/RadioGroupField";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { import {
PostalCodeRuleInclusionTypeEnum, PostalCodeRuleInclusionTypeEnum,
ShippingMethodTypeFragment, ShippingMethodTypeFragment,
@ -181,7 +181,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
<col className={classes.colAction} /> <col className={classes.colAction} />
</colgroup> </colgroup>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
{postalCodes === undefined ? ( {postalCodes === undefined ? (
<Skeleton className={classes.skeleton} /> <Skeleton className={classes.skeleton} />
@ -210,14 +210,14 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
{expanded && ( {expanded && (
<TableBody> <TableBody>
{renderCollection( {renderCollection(
postalCodes, postalCodes,
postalCodeRange => ( postalCodeRange => (
<TableRow key={postalCodeRange?.id}> <TableRowLink key={postalCodeRange?.id}>
<TableCell> <TableCell>
{getPostalCodeRangeLabel(postalCodeRange)} {getPostalCodeRangeLabel(postalCodeRange)}
</TableCell> </TableCell>
@ -231,10 +231,10 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={2}> <TableCell colSpan={2}>
<Typography color="textSecondary"> <Typography color="textSecondary">
<FormattedMessage <FormattedMessage
@ -243,7 +243,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
/> />
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import IconButtonTableCell from "@saleor/components/IconButtonTableCell"; import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
@ -102,7 +96,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
/> />
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.nameColumn}> <TableCell className={classes.nameColumn}>
<FormattedMessage <FormattedMessage
id="aPCrsp" id="aPCrsp"
@ -132,7 +126,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
</TableCell> </TableCell>
<TableCell className={classes.buttonColumn} /> <TableCell className={classes.buttonColumn} />
<TableCell className={classes.buttonColumn} /> <TableCell className={classes.buttonColumn} />
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -202,14 +196,14 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={5}> <TableCell colSpan={5}>
<FormattedMessage <FormattedMessage
id="RUzdUH" id="RUzdUH"
defaultMessage="No shipping rates found" defaultMessage="No shipping rates found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox"; import Checkbox from "@saleor/components/Checkbox";
@ -113,14 +107,14 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
<TableCell className={classes.colAction} /> <TableCell className={classes.colAction} />
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
disabled={disabled} disabled={disabled}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -181,14 +175,14 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
); );
}, },
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="IhK1F3" id="IhK1F3"
defaultMessage="No shipping zones found" defaultMessage="No shipping zones found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

13
src/staff/components/StaffList/StaffList.tsx
View file

@ -3,7 +3,6 @@ import {
TableCell, TableCell,
TableFooter, TableFooter,
TableHead, TableHead,
TableRow,
Typography, Typography,
} from "@material-ui/core"; } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -98,7 +97,7 @@ const StaffList: React.FC<StaffListProps> = props => {
<col className={classes.colEmail} /> <col className={classes.colEmail} />
</colgroup> </colgroup>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader <TableCellHeader
direction={ direction={
sort.sort === StaffListUrlSortField.name sort.sort === StaffListUrlSortField.name
@ -125,17 +124,17 @@ const StaffList: React.FC<StaffListProps> = props => {
> >
<FormattedMessage id="xxQxLE" defaultMessage="Email Address" /> <FormattedMessage id="xxQxLE" defaultMessage="Email Address" />
</TableCellHeader> </TableCellHeader>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
disabled={disabled} disabled={disabled}
settings={settings} settings={settings}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -189,14 +188,14 @@ const StaffList: React.FC<StaffListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="xJQX5t" id="xJQX5t"
defaultMessage="No staff members found" defaultMessage="No staff members found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

1416
src/storybook/__snapshots__/Stories.test.ts.snap
View file

File diff suppressed because it is too large Load diff

7
src/storybook/stories/components/EditableTableCell.tsx
View file

@ -1,6 +1,7 @@
import { TableBody, TableCell, TableHead, TableRow } from "@material-ui/core"; import { TableBody, TableCell, TableHead } from "@material-ui/core";
import EditableTableCell from "@saleor/components/EditableTableCell"; import EditableTableCell from "@saleor/components/EditableTableCell";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { storiesOf } from "@storybook/react"; import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
@ -18,14 +19,14 @@ storiesOf("Generics / EditableTableCell", module)
<TableCell>Some header</TableCell> <TableCell>Some header</TableCell>
</TableHead> </TableHead>
<TableBody> <TableBody>
<TableRow> <TableRowLink>
<TableCell>Some value</TableCell> <TableCell>Some value</TableCell>
<EditableTableCell <EditableTableCell
value={"Some editable text"} value={"Some editable text"}
onConfirm={() => undefined} onConfirm={() => undefined}
/> />
<TableCell>Some value</TableCell> <TableCell>Some value</TableCell>
</TableRow> </TableRowLink>
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
)); ));

16
src/taxes/components/CountryList/CountryList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink"; import TableRowLink from "@saleor/components/TableRowLink";
@ -42,7 +36,7 @@ const CountryList: React.FC<CountryListProps> = props => {
<Card> <Card>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage id="07KB2d" defaultMessage="Country Code" /> <FormattedMessage id="07KB2d" defaultMessage="Country Code" />
</TableCell> </TableCell>
@ -55,7 +49,7 @@ const CountryList: React.FC<CountryListProps> = props => {
defaultMessage="Reduced Tax Rates" defaultMessage="Reduced Tax Rates"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -84,14 +78,14 @@ const CountryList: React.FC<CountryListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={3}> <TableCell colSpan={3}>
<FormattedMessage <FormattedMessage
id="3BTtL2" id="3BTtL2"
defaultMessage="No countries found" defaultMessage="No countries found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

21
src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
View file

@ -1,16 +1,11 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { Backlink } from "@saleor/components/Backlink"; import { Backlink } from "@saleor/components/Backlink";
import { Container } from "@saleor/components/Container"; import { Container } from "@saleor/components/Container";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryListQuery } from "@saleor/graphql"; import { CountryListQuery } from "@saleor/graphql";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
@ -66,20 +61,20 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
<Card> <Card>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.wideColumn}> <TableCell className={classes.wideColumn}>
<FormattedMessage id="ccXLVi" defaultMessage="Category" /> <FormattedMessage id="ccXLVi" defaultMessage="Category" />
</TableCell> </TableCell>
<TableCell> <TableCell>
<FormattedMessage id="la9cZ4" defaultMessage="Tax Rate" /> <FormattedMessage id="la9cZ4" defaultMessage="Tax Rate" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
taxCategories, taxCategories,
taxCategory => ( taxCategory => (
<TableRow <TableRowLink
key={taxCategory ? taxCategory.rateType : "skeleton"} key={taxCategory ? taxCategory.rateType : "skeleton"}
> >
<TableCell> <TableCell>
@ -91,17 +86,17 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
<Skeleton />, <Skeleton />,
)} )}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={2}> <TableCell colSpan={2}>
<FormattedMessage <FormattedMessage
id="Ubath+" id="Ubath+"
defaultMessage="No reduced tax categories found" defaultMessage="No reduced tax categories found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

13
src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
View file

@ -3,7 +3,6 @@ import {
TableCell, TableCell,
TableFooter, TableFooter,
TableHead, TableHead,
TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
@ -54,7 +53,7 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
return ( return (
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell className={classes.wideColumn}> <TableCell className={classes.wideColumn}>
<FormattedMessage <FormattedMessage
id="X6PF8z" id="X6PF8z"
@ -68,12 +67,12 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
defaultMessage="Completed Translations" defaultMessage="Completed Translations"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext colSpan={2} disabled={disabled} /> <TablePaginationWithContext colSpan={2} disabled={disabled} />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -106,14 +105,14 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={2}> <TableCell colSpan={2}>
<FormattedMessage <FormattedMessage
id="vcwrgW" id="vcwrgW"
defaultMessage="No translatable entities found" defaultMessage="No translatable entities found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink"; import TableRowLink from "@saleor/components/TableRowLink";
@ -41,11 +35,11 @@ const TranslationsLanguageList: React.FC<TranslationsLanguageListProps> = props
<Card> <Card>
<ResponsiveTable> <ResponsiveTable>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCell> <TableCell>
<FormattedMessage id="y1Z3or" defaultMessage="Language" /> <FormattedMessage id="y1Z3or" defaultMessage="Language" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -67,14 +61,14 @@ const TranslationsLanguageList: React.FC<TranslationsLanguageListProps> = props
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={1}> <TableCell colSpan={1}>
<FormattedMessage <FormattedMessage
id="ptPPVk" id="ptPPVk"
defaultMessage="No languages found" defaultMessage="No languages found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

13
src/warehouses/components/WarehouseList/WarehouseList.tsx
View file

@ -3,7 +3,6 @@ import {
TableCell, TableCell,
TableFooter, TableFooter,
TableHead, TableHead,
TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import EditIcon from "@material-ui/icons/Edit"; import EditIcon from "@material-ui/icons/Edit";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -86,7 +85,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
return ( return (
<ResponsiveTable data-test-id="warehouse-list"> <ResponsiveTable data-test-id="warehouse-list">
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader <TableCellHeader
direction={ direction={
sort.sort === WarehouseListUrlSortField.name sort.sort === WarehouseListUrlSortField.name
@ -109,17 +108,17 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
<TableCell className={classes.colActions}> <TableCell className={classes.colActions}>
<FormattedMessage id="wL7VAE" defaultMessage="Actions" /> <FormattedMessage id="wL7VAE" defaultMessage="Actions" />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableFooter> <TableFooter>
<TableRow> <TableRowLink>
<TablePaginationWithContext <TablePaginationWithContext
colSpan={numberOfColumns} colSpan={numberOfColumns}
settings={settings} settings={settings}
disabled={disabled} disabled={disabled}
onUpdateListSettings={onUpdateListSettings} onUpdateListSettings={onUpdateListSettings}
/> />
</TableRow> </TableRowLink>
</TableFooter> </TableFooter>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -170,14 +169,14 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow data-test-id="empty-list-message"> <TableRowLink data-test-id="empty-list-message">
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
<FormattedMessage <FormattedMessage
id="2gsiR1" id="2gsiR1"
defaultMessage="No warehouses found" defaultMessage="No warehouses found"
/> />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>

16
src/webhooks/components/WebhooksList/WebhooksList.tsx
View file

@ -1,10 +1,4 @@
import { import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -58,7 +52,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
/> />
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
<TableHead> <TableHead>
<TableRow> <TableRowLink>
<TableCellHeader> <TableCellHeader>
{intl.formatMessage(commonMessages.name)} {intl.formatMessage(commonMessages.name)}
</TableCellHeader> </TableCellHeader>
@ -70,7 +64,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
> >
<FormattedMessage {...messages.action} /> <FormattedMessage {...messages.action} />
</TableCell> </TableCell>
</TableRow> </TableRowLink>
</TableHead> </TableHead>
<TableBody> <TableBody>
{renderCollection( {renderCollection(
@ -127,11 +121,11 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
</TableRowLink> </TableRowLink>
), ),
() => ( () => (
<TableRow> <TableRowLink>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>
{intl.formatMessage(messages.noWebhooks)} {intl.formatMessage(messages.noWebhooks)}
</TableCell> </TableCell>
</TableRow> </TableRowLink>
), ),
)} )}
</TableBody> </TableBody>