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": {
"version": "0.2.13",
"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
},
"buffer-equal-constant-time": {
@ -14989,7 +14989,7 @@
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
@ -15470,7 +15470,7 @@
"fd-slicer": {
"version": "1.1.0",
"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,
"requires": {
"pend": "~1.2.0"
@ -23666,7 +23666,7 @@
"ospath": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
"integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
"integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
"dev": true
},
"p-cancelable": {
@ -24219,7 +24219,7 @@
"pend": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
},
"performance-now": {

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

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

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

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

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

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

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

@ -3,7 +3,6 @@ import {
Switch,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import { AppManifestTableDisplay } from "@saleor/apps/components/AppManifestTableDisplay/AppManifestTableDisplay";
@ -128,7 +127,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
<AppsSkeleton key={index} />
),
() => (
<TableRow className={classes.tableRow}>
<TableRowLink className={classes.tableRow}>
<TableCell className={classes.colName}>
<Typography className={classes.text} variant="body2">
<FormattedMessage
@ -138,7 +137,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
/>
</Typography>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 {
AttributeListUrlSortField,
attributeUrl,
@ -168,9 +168,9 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -242,14 +242,14 @@ const AttributeList: React.FC<AttributeListProps> = ({
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="ztQgD8"
defaultMessage="No attributes found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

@ -1,10 +1,4 @@
import {
Card,
TableCell,
TableFooter,
TableHead,
TableRow,
} from "@material-ui/core";
import { Card, TableCell, TableFooter, TableHead } from "@material-ui/core";
import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -14,6 +8,7 @@ import {
SortableTableRow,
} from "@saleor/components/SortableTable";
import TablePagination from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import {
AttributeInputTypeEnum,
AttributeValueFragment,
@ -130,7 +125,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
/>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.columnDrag} />
{isSwatch && (
<TableCell className={classes.columnSwatch}>
@ -156,10 +151,10 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
/>
</TableCell>
<TableCell className={classes.iconCell} />
</TableRow>
</TableRowLink>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePagination
colSpan={numberOfColumns}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
@ -171,7 +166,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<SortableTableBody onSortEnd={onValueReorder}>
{renderCollection(
@ -211,7 +206,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
</SortableTableRow>
),
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="g5zIpS"
@ -219,7 +214,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
description="No attribute values found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -132,13 +132,13 @@ const CategoryList: React.FC<CategoryListProps> = props => {
</TableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -188,7 +188,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
{isRoot ? (
<FormattedMessage
@ -202,7 +202,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
/>
)}
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
@ -96,9 +96,9 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -133,14 +133,14 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="Q1Uzbb"
defaultMessage="No products found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

@ -1,10 +1,4 @@
import {
Card,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@material-ui/core";
import { Card, TableBody, TableCell, TableHead } from "@material-ui/core";
import { channelAddUrl, channelUrl } from "@saleor/channels/urls";
import { Backlink } from "@saleor/components/Backlink";
import { Button } from "@saleor/components/Button";
@ -97,7 +91,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
<Card>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableRowLink>
<TableCellHeader>
<FormattedMessage
id="j/vV0n"
@ -112,7 +106,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
description="table actions"
/>
</TableCell>
</TableRow>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(
@ -149,14 +143,14 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
</TableRowLink>
),
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="/glQgs"
defaultMessage="No channels found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 {
CollectionListUrlSortField,
collectionUrl,
@ -146,13 +146,13 @@ const CollectionList: React.FC<CollectionListProps> = props => {
</TooltipTableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -211,14 +211,14 @@ const CollectionList: React.FC<CollectionListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="Yw+9F7"
defaultMessage="No collections found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

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

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

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

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

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

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

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

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

@ -6,7 +6,6 @@ import {
DialogTitle,
TableBody,
TableCell,
TableRow,
TextField,
Typography,
} from "@material-ui/core";
@ -14,6 +13,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { SearchProductsQuery } from "@saleor/graphql";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
@ -133,7 +133,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
productChoices,
(product, productIndex) => (
<React.Fragment key={product ? product.id : "skeleton"}>
<TableRow>
<TableRowLink>
<TableCell
padding="checkbox"
className={classes.productCheckboxCell}
@ -161,10 +161,10 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
<TableCell className={classes.colName} colSpan={2}>
{maybe(() => product.name)}
</TableCell>
</TableRow>
</TableRowLink>
{maybe(() => product.variants, []).map(
(variant, variantIndex) => (
<TableRow
<TableRowLink
key={variant.id}
data-test-id="assign-variant-table-row"
>
@ -206,7 +206,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
<Money money={variant.channelListings[0].price} />
)}
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { CountryFragment } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import classNames from "classnames";
@ -107,7 +108,7 @@ const CountryList: React.FC<CountryListProps> = props => {
/>
<ResponsiveTable>
<TableBody>
<TableRow className={classes.pointer} onClick={toggleCollapse}>
<TableRowLink className={classes.pointer} onClick={toggleCollapse}>
<TableCell
className={classNames(classes.wideColumn, classes.toLeft)}
>
@ -132,12 +133,12 @@ const CountryList: React.FC<CountryListProps> = props => {
/>
</IconButton>
</TableCell>
</TableRow>
</TableRowLink>
{!isCollapsed &&
renderCollection(
sortCountries(countries),
(country, countryIndex) => (
<TableRow key={country ? country.code : "skeleton"}>
<TableRowLink key={country ? country.code : "skeleton"}>
<TableCell className={classes.offsetCell}>
{maybe<React.ReactNode>(
() => (
@ -167,14 +168,14 @@ const CountryList: React.FC<CountryListProps> = props => {
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
</TableRowLink>
),
() => (
<TableRow>
<TableRowLink>
<TableCell className={classes.toLeft} colSpan={2}>
{emptyText}
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

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

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

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

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

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

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

@ -7,12 +7,12 @@ import { Link } from "react-router-dom";
type MaterialTableRowPropsType = TableRowTypeMap["props"];
export interface TableRowLinkProps
extends Omit<MaterialTableRowPropsType, "onClick"> {
export interface TableRowLinkProps extends MaterialTableRowPropsType {
children: React.ReactNode;
href?: string;
className?: string;
linkClassName?: string;
onClick?: () => void;
}
const useStyles = makeStyles(
@ -29,16 +29,21 @@ const TableRowLink = ({
href,
children,
linkClassName,
onClick,
...props
}: TableRowLinkProps) => {
const classes = useStyles();
if (!href || isExternalURL(href)) {
return <TableRow {...props}>{children}</TableRow>;
return (
<TableRow hover={!!onClick} onClick={onClick} {...props}>
{children}
</TableRow>
);
}
return (
<TableRow {...props}>
<TableRow hover={true} onClick={onClick} {...props}>
<Link className={clsx(classes.link, linkClassName)} to={href}>
{children}
</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 Checkbox from "@saleor/components/Checkbox";
import RequirePermissions, {
@ -125,13 +125,13 @@ const CustomerList: React.FC<CustomerListProps> = props => {
</RequirePermissions>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -172,14 +172,14 @@ const CustomerList: React.FC<CustomerListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="FpIcp9"
defaultMessage="No customers found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

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

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

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

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

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

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

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

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

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

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

@ -1,10 +1,4 @@
import {
Card,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import { Card, TableBody, TableCell, TableFooter } from "@material-ui/core";
import { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
@ -96,9 +90,9 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
<TableCell className={classes.colActions} />
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -161,11 +155,11 @@ const DiscountVariants: React.FC<SaleVariantsProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.discountVariantsNotFound} />
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 Date from "@saleor/components/Date";
import Money from "@saleor/components/Money";
@ -170,13 +170,13 @@ const SaleList: React.FC<SaleListProps> = props => {
</TooltipTableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -247,11 +247,11 @@ const SaleList: React.FC<SaleListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage id="51HE+Q" defaultMessage="No sales found" />
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

@ -4,12 +4,12 @@ import {
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@material-ui/core";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { DiscountErrorFragment } from "@saleor/graphql";
import { renderCollection } from "@saleor/misc";
import { getFormErrors } from "@saleor/utils/errors";
@ -94,7 +94,7 @@ const SaleValue: React.FC<SaleValueProps> = ({
);
return (
<TableRow
<TableRowLink
key={listing?.id || `skeleton-${index}`}
className={classes.row}
>
@ -119,18 +119,18 @@ const SaleValue: React.FC<SaleValueProps> = ({
<Skeleton />
)}
</TableCell>
</TableRow>
</TableRowLink>
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="/glQgs"
defaultMessage="No channels found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 Date from "@saleor/components/Date";
import Money from "@saleor/components/Money";
@ -224,13 +224,13 @@ const VoucherList: React.FC<VoucherListProps> = props => {
</TableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -324,14 +324,14 @@ const VoucherList: React.FC<VoucherListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="U2mOqA"
defaultMessage="No vouchers found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

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

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

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

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

@ -1,10 +1,4 @@
import {
Card,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import { Card, TableBody, TableCell, Typography } from "@material-ui/core";
import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
import Checkbox from "@saleor/components/Checkbox";
import DeleteIconButton from "@saleor/components/DeleteIconButton";
@ -180,11 +174,11 @@ const GiftCardsListTable: React.FC = () => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage {...messages.noGiftCardsFound} />
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 TableRowLink from "@saleor/components/TableRowLink";
import usePaginator from "@saleor/hooks/usePaginator";
import React from "react";
@ -23,14 +24,14 @@ const GiftCardsListTableFooter: React.FC = () => {
return (
<TableFooter>
<TableRow>
<TableRowLink>
<TablePagination
{...paginationValues}
settings={settings}
colSpan={numberOfColumns}
onUpdateListSettings={updateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
);
};

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

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

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

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

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

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

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

@ -1,12 +1,7 @@
import {
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@material-ui/core";
import { TableBody, TableCell, TableHead, Typography } from "@material-ui/core";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderDetailsFragment, OrderErrorFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui";
import {
@ -84,7 +79,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
<ResponsiveTable className={classes.table}>
{!!lines.length && (
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.colName} colSpan={2}>
<span className={classes.colNameLabel}>
<FormattedMessage id="x/ZVlU" defaultMessage="Product" />
@ -112,7 +107,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
/>
</TableCell>
<TableCell className={classes.colAction} />
</TableRow>
</TableRowLink>
</TableHead>
)}
<TableBody>
@ -136,7 +131,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
))
) : (
<>
<TableRow>
<TableRowLink>
<TableCell colSpan={5}>
<FormattedMessage
id="UD7/q8"
@ -148,7 +143,7 @@ const OrderDraftDetailsProducts: React.FC<OrderDraftDetailsProductsProps> = prop
</Typography>
)}
</TableCell>
</TableRow>
</TableRowLink>
</>
)}
</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 Money from "@saleor/components/Money";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableRowLink from "@saleor/components/TableRowLink";
import {
OrderErrorFragment,
OrderLineFragment,
@ -103,7 +104,7 @@ const TableLine: React.FC<TableLineProps> = ({
};
return (
<TableRow key={id}>
<TableRowLink key={id}>
<TableCell
className={classNames({
[classes.colStatusEmpty]: !alerts.length,
@ -155,7 +156,7 @@ const TableLine: React.FC<TableLineProps> = ({
<DeleteIcon color="primary" />
</IconButton>
</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 { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money";
@ -144,13 +144,13 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
</TableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -213,14 +213,14 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="KIh25E"
defaultMessage="No draft orders found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderFulfillLineFragment } from "@saleor/graphql";
import { FormsetChange, FormsetData } from "@saleor/hooks/useFormset";
import {
@ -60,7 +61,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
if (!line) {
return (
<TableRow key={lineIndex}>
<TableRowLink key={lineIndex}>
<TableCellAvatar className={classes.colName}>
<Skeleton />
</TableCellAvatar>
@ -76,12 +77,12 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
<TableCell className={classes.colWarehouse}>
<Skeleton />
</TableCell>
</TableRow>
</TableRowLink>
);
}
return (
<TableRow key={line.id}>
<TableRowLink key={line.id}>
<TableCellAvatar
className={classes.colName}
thumbnail={line?.thumbnail?.url}
@ -180,7 +181,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
</div>
</IconButton>
</TableCell>
</TableRow>
</TableRowLink>
);
};
OrderFulfillLine.displayName = "OrderFulfillLine";

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

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

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

@ -1,13 +1,8 @@
import {
TableBody,
TableCell,
TableHead,
TableRow,
Typography,
} from "@material-ui/core";
import { TableBody, TableCell, TableHead, Typography } from "@material-ui/core";
import ActionDialog from "@saleor/components/ActionDialog";
import { CardSpacer } from "@saleor/components/CardSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql";
import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
@ -76,7 +71,7 @@ const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogP
<ResponsiveTable className={classes.table}>
{!!lines?.length && (
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.colName}>
{intl.formatMessage(messages.productLabel)}
</TableCell>
@ -86,7 +81,7 @@ const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogP
<TableCell className={classes.colWarehouseStock}>
{intl.formatMessage(messages.warehouseStockLabel)}
</TableCell>
</TableRow>
</TableRowLink>
</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 TableRowLink from "@saleor/components/TableRowLink";
import { FulfillmentFragment, OrderFulfillLineFragment } from "@saleor/graphql";
import {
getAttributesCaption,
@ -33,7 +34,7 @@ const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDia
);
return (
<TableRow key={line?.id}>
<TableRowLink key={line?.id}>
<TableCellAvatar
className={classes.colName}
thumbnail={line?.thumbnail?.url}
@ -51,7 +52,7 @@ const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDia
<TableCell className={classes.colWarehouseStock}>
{getOrderLineAvailableQuantity(line, stock)}
</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 { getStringOrPlaceholder } from "@saleor/misc";
import classNames from "classnames";
@ -25,7 +26,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
const { warehouse, trackingNumber, status } = fulfillment;
return (
<TableRow>
<TableRowLink>
<TableCell className={classes.infoRow} colSpan={NUMBER_OF_COLUMNS}>
<Typography color="textSecondary" variant="body2">
{warehouse && (
@ -66,7 +67,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
)}
</Typography>
</TableCell>
</TableRow>
</TableRowLink>
);
};

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

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

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

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

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

@ -7,7 +7,6 @@ import {
DialogTitle,
TableBody,
TableCell,
TableRow,
TextField,
Typography,
} from "@material-ui/core";
@ -17,6 +16,7 @@ import ConfirmButton from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderErrorFragment, SearchOrderVariantQuery } from "@saleor/graphql";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
@ -158,7 +158,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
productChoicesWithValidVariants,
(product, productIndex) => (
<React.Fragment key={product ? product.id : "skeleton"}>
<TableRow>
<TableRowLink>
<TableCell
padding="checkbox"
className={classes.productCheckboxCell}
@ -186,11 +186,11 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
<TableCell className={classes.colName} colSpan={2}>
{maybe(() => product.name)}
</TableCell>
</TableRow>
</TableRowLink>
{maybe(() => product.variants, [])
.filter(isValidVariant)
.map((variant, variantIndex) => (
<TableRow key={variant.id}>
<TableRowLink key={variant.id}>
<TableCell />
<TableCell className={classes.colVariantCheckbox}>
<Checkbox
@ -229,7 +229,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
<TableCell className={classes.textRight}>
<OrderPriceLabel pricing={variant.pricing} />
</TableCell>
</TableRow>
</TableRowLink>
))}
</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 React from "react";
import { FormattedMessage } from "react-intl";
@ -65,7 +66,7 @@ const TableHeader = () => {
<col className={classes.colTotal} />
</colgroup>
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.colName}>
<FormattedMessage
id="WE8IFE"
@ -101,7 +102,7 @@ const TableHeader = () => {
description="order line total price"
/>
</TableCell>
</TableRow>
</TableRowLink>
</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 Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar/Avatar";
import TableRowLink from "@saleor/components/TableRowLink";
import { OrderDetailsFragment, OrderLineFragment } from "@saleor/graphql";
import { makeStyles } from "@saleor/macaw-ui";
import { maybe } from "@saleor/misc";
@ -73,7 +74,7 @@ const TableLine: React.FC<TableLineProps> = ({
const quantityToDisplay = isOrderLine ? quantityToFulfill : quantity;
return (
<TableRow key={line.id}>
<TableRowLink key={line.id}>
<TableCellAvatar
className={classes.colName}
thumbnail={maybe(() => line.orderLine.thumbnail.url)}
@ -101,7 +102,7 @@ const TableLine: React.FC<TableLineProps> = ({
}}
/>
</TableCell>
</TableRow>
</TableRowLink>
);
};

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

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

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

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

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

@ -5,12 +5,12 @@ import {
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
} from "@material-ui/core";
import Money from "@saleor/components/Money";
import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import {
OrderDetailsFragment,
OrderErrorFragment,
@ -138,7 +138,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
</CardContent>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableRowLink>
<TableCell>
<FormattedMessage
id="aAAxKp"
@ -168,7 +168,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
description="table column header"
/>
</TableCell>
</TableRow>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(
@ -204,7 +204,7 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
: "50%";
return (
<TableRow key={id}>
<TableRowLink key={id}>
<TableCellAvatar
thumbnail={thumbnail?.url}
style={{ width: productNameCellWidth }}
@ -259,15 +259,15 @@ const ItemsCard: React.FC<OrderReturnRefundLinesCardProps> = ({
/>
)}
</TableCell>
</TableRow>
</TableRowLink>
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={4}>
<Skeleton />
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle";
@ -11,6 +11,7 @@ import {
} from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { AttributeFragment, AttributeTypeEnum } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { renderCollection } from "@saleor/misc";
@ -169,14 +170,14 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="ztQgD8"
defaultMessage="No attributes found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
@ -78,12 +78,12 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
</TableCellHeader>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
disabled={disabled}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -118,14 +118,14 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="6fORLY"
defaultMessage="No page types found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

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

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

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

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

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

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

@ -3,7 +3,6 @@ import {
CardContent,
TableBody,
TableCell,
TableRow,
Typography,
} from "@material-ui/core";
import { Button } from "@saleor/components/Button";
@ -13,6 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableCellHeader from "@saleor/components/TableCellHeader";
import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { PermissionGroupMemberFragment } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import {
@ -201,7 +201,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
const isSelected = user ? isChecked(user.id) : false;
return (
<TableRow
<TableRowLink
className={classNames({
[classes.tableRow]: !!user,
})}
@ -276,18 +276,18 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
<Skeleton />
)}
</TableCell>
</TableRow>
</TableRowLink>
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="qrWOxx"
defaultMessage="No members found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 Skeleton from "@saleor/components/Skeleton";
import { TablePaginationWithContext } from "@saleor/components/TablePagination";
import TableRowLink from "@saleor/components/TableRowLink";
import { PluginBaseFragment } from "@saleor/graphql";
import useNavigator from "@saleor/hooks/useNavigator";
import { EditIcon, makeStyles } from "@saleor/macaw-ui";
@ -49,21 +50,21 @@ const PluginList: React.FC<PluginListProps> = props => {
<ResponsiveTable>
<PluginListTableHead sort={sort} onSort={onSort} />
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={totalColSpan}
onUpdateListSettings={onUpdateListSettings}
settings={settings}
disabled={disabled}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
plugins,
plugin =>
plugin ? (
<TableRow
<TableRowLink
data-test-id="plugin"
hover={!!plugin}
className={!!plugin ? classes.link : undefined}
@ -78,23 +79,23 @@ const PluginList: React.FC<PluginListProps> = props => {
<TableCell align="right">
<EditIcon />
</TableCell>
</TableRow>
</TableRowLink>
) : (
<TableRow>
<TableRowLink>
<TableCell colSpan={totalColSpan}>
<Skeleton />
</TableCell>
</TableRow>
</TableRowLink>
),
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={totalColSpan}>
{intl.formatMessage({
id: "Co2U4u",
defaultMessage: "No plugins found",
})}
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 { Button } from "@saleor/components/Button";
import CardTitle from "@saleor/components/CardTitle";
@ -11,6 +11,7 @@ import {
} from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { AttributeFragment, ProductAttributeType } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
@ -183,14 +184,14 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="ztQgD8"
defaultMessage="No attributes found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</SortableTableBody>

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

@ -2,7 +2,6 @@ import {
TableBody,
TableCell,
TableFooter,
TableRow,
Typography,
} from "@material-ui/core";
import Checkbox from "@saleor/components/Checkbox";
@ -123,9 +122,9 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext colSpan={numberOfColumns} />
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -205,14 +204,14 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="0nLsyM"
defaultMessage="No product types found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 { attributeUrl } from "@saleor/attributes/urls";
import { Button } from "@saleor/components/Button";
@ -12,6 +12,7 @@ import {
} from "@saleor/components/SortableTable";
import { TableButtonWrapper } from "@saleor/components/TableButtonWrapper/TableButtonWrapper";
import TableHead from "@saleor/components/TableHead";
import TableRowLink from "@saleor/components/TableRowLink";
import { ProductAttributeType, ProductTypeDetailsQuery } from "@saleor/graphql";
import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { maybe, renderCollection } from "@saleor/misc";
@ -282,14 +283,14 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="ztQgD8"
defaultMessage="No attributes found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</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 {
getChannelAvailabilityColor,
@ -313,13 +313,13 @@ export const ProductList: React.FC<ProductListProps> = props => {
</DisplayColumn>
</TableHead>
<TableFooter>
<TableRow>
<TableRowLink>
<TablePaginationWithContext
colSpan={numberOfColumns}
settings={settings}
onUpdateListSettings={onUpdateListSettings}
/>
</TableRow>
</TableRowLink>
</TableFooter>
<TableBody>
{renderCollection(
@ -442,14 +442,14 @@ export const ProductList: React.FC<ProductListProps> = props => {
);
},
() => (
<TableRow>
<TableRowLink>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage
id="Q1Uzbb"
defaultMessage="No products found"
/>
</TableCell>
</TableRow>
</TableRowLink>
),
)}
</TableBody>

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

@ -10,7 +10,6 @@ import {
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
Typography,
} from "@material-ui/core";
@ -25,6 +24,7 @@ import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import Link from "@saleor/components/Link";
import PreviewPill from "@saleor/components/PreviewPill";
import TableRowLink from "@saleor/components/TableRowLink";
import { ProductErrorFragment, WarehouseFragment } from "@saleor/graphql";
import { FormChange, FormErrors } from "@saleor/hooks/useForm";
import { FormsetAtomicData, FormsetChange } from "@saleor/hooks/useFormset";
@ -245,7 +245,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<col className={classes.colQuantity} />
</colgroup>
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.colName}>
<FormattedMessage {...messages.warehouseName} />
</TableCell>
@ -256,7 +256,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<FormattedMessage {...messages.quantity} />
</TableCell>
<TableCell className={classes.colAction} />
</TableRow>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(stocks, (stock, index) => {
@ -265,7 +265,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
);
return (
<TableRow key={stock.id}>
<TableRowLink key={stock.id}>
<TableCell className={classes.colName}>
{stock.label}
</TableCell>
@ -299,12 +299,12 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
</TableRowLink>
);
})}
{warehousesToAssign.length > 0 && (
<ClickAwayListener onClickAway={() => setExpansionState(false)}>
<TableRow
<TableRowLink
className={classes.addRow}
onClick={() => setExpansionState(!isExpanded)}
>
@ -354,7 +354,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
</Popper>
</div>
</TableCell>
</TableRow>
</TableRowLink>
</ClickAwayListener>
)}
</TableBody>
@ -446,7 +446,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<col className={classes.colThreshold} />
</colgroup>
<TableHead>
<TableRow>
<TableRowLink>
<TableCell className={classes.colName}>
<FormattedMessage {...sectionNames.channels} />
</TableCell>
@ -456,7 +456,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
<TableCell className={classes.colThreshold}>
<FormattedMessage {...messages.channelTreshold} />
</TableCell>
</TableRow>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(productVariantChannelListings, listing => {
@ -465,7 +465,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
}
return (
<TableRow key={listing.id}>
<TableRowLink key={listing.id}>
<TableCell className={classes.colName}>
{listing.name}
</TableCell>
@ -498,7 +498,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
value={listing?.preorderThreshold ?? ""}
/>
</TableCell>
</TableRow>
</TableRowLink>
);
})}
</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 CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
@ -8,6 +8,7 @@ import {
SortableTableRow,
} from "@saleor/components/SortableTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import TableRowLink from "@saleor/components/TableRowLink";
import {
ProductVariantCreateDataQuery,
ProductVariantDetailsQuery,
@ -94,7 +95,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
);
})}
{!isCreate ? (
<TableRow className={classes.rowNew}>
<TableRowLink className={classes.rowNew}>
<TableCell colSpan={3}>
<Button
href={productVariantAddUrl(productId)}
@ -103,9 +104,9 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
<FormattedMessage {...messages.addVariant} />
</Button>
</TableCell>
</TableRow>
</TableRowLink>
) : (
<TableRow>
<TableRowLink>
<TableCellAvatar
alignRight
className={classNames(
@ -122,7 +123,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
<TableCell className={classes.colName}>
<FormattedMessage {...messages.newVariant} />
</TableCell>
</TableRow>
</TableRowLink>
)}
</SortableTableBody>
</ResponsiveTable>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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