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

Fix long name vouchers (#1626) (#1640)

Browse source 
* Fix long name vouchers

* update snapshots

* QA improvements - wrap page headers

* QA improvements - same changes for sales
This commit is contained in:
Michał Droń 2021-12-01 14:37:51 +01:00 committed by GitHub
parent 45c2726910
commit ae1d1f478a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 84 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
View file

@ -33,6 +33,7 @@ import DiscountProducts from "../DiscountProducts";
import DiscountVariants from "../DiscountVariants"; import DiscountVariants from "../DiscountVariants";
import SaleInfo from "../SaleInfo"; import SaleInfo from "../SaleInfo";
import SaleSummary from "../SaleSummary"; import SaleSummary from "../SaleSummary";
import { useStyles } from "../SaleSummary/styles";
import SaleType from "../SaleType"; import SaleType from "../SaleType";
import SaleValue from "../SaleValue"; import SaleValue from "../SaleValue";
@ -150,6 +151,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
toggleAll toggleAll
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const { const {
makeChangeHandler: makeMetadataChangeHandler makeChangeHandler: makeMetadataChangeHandler
} = useMetadataChangeTrigger(); } = useMetadataChangeTrigger();
@ -185,7 +187,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
<Backlink onClick={onBack}> <Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.sales)} {intl.formatMessage(sectionNames.sales)}
</Backlink> </Backlink>
<PageHeader title={maybe(() => sale.name)} /> <PageHeader className={classes.wrapAnywhere} title={sale?.name} />
<Grid> <Grid>
<div> <div>
<SaleInfo <SaleInfo

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

@ -15,6 +15,7 @@ import { maybe, renderCollection } from "@saleor/misc";
import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types"; import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
import { SaleType } from "@saleor/types/globalTypes"; import { SaleType } from "@saleor/types/globalTypes";
import { getArrowDirection } from "@saleor/utils/sort"; import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -56,6 +57,10 @@ const useStyles = makeStyles(
}, },
tableRow: { tableRow: {
cursor: "pointer" cursor: "pointer"
},
textOverflow: {
textOverflow: "ellipsis",
overflow: "hidden"
} }
}), }),
{ name: "SaleList" } { name: "SaleList" }
@ -189,7 +194,9 @@ const SaleList: React.FC<SaleListProps> = props => {
onChange={() => toggle(sale.id)} onChange={() => toggle(sale.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName}> <TableCell
className={classNames(classes.colName, classes.textOverflow)}
>
{maybe<React.ReactNode>(() => sale.name, <Skeleton />)} {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
</TableCell> </TableCell>
<TableCell className={classes.colStart}> <TableCell className={classes.colStart}>

5
src/discounts/components/SaleSummary/SaleSummary.tsx
View file

@ -15,7 +15,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import { maybe } from "../../../misc"; import { maybe } from "../../../misc";
import { SaleType } from "../../../types/globalTypes"; import { SaleType } from "../../../types/globalTypes";
import { SaleDetails_sale } from "../../types/SaleDetails"; import { SaleDetails_sale } from "../../types/SaleDetails";
import { useStyles } from "./styles";
export interface SaleSummaryProps extends ChannelProps { export interface SaleSummaryProps extends ChannelProps {
sale: SaleDetails_sale; sale: SaleDetails_sale;
} }
@ -25,6 +25,7 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
sale sale
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const channel = sale?.channelListings?.find( const channel = sale?.channelListings?.find(
listing => listing.channel.id === selectedChannelId listing => listing.channel.id === selectedChannelId
@ -36,7 +37,7 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
<Typography variant="caption"> <Typography variant="caption">
<FormattedMessage defaultMessage="Name" description="sale name" /> <FormattedMessage defaultMessage="Name" description="sale name" />
</Typography> </Typography>
<Typography> <Typography className={classes.wrapAnywhere}>
{maybe<React.ReactNode>(() => sale.name, <Skeleton />)} {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
</Typography> </Typography>
<FormSpacer /> <FormSpacer />

10
src/discounts/components/SaleSummary/styles.ts Normal file
View file

@ -0,0 +1,10 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
() => ({
wrapAnywhere: {
overflowWrap: "anywhere"
}
}),
{ name: "SaleSummary" }
);

7
src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
View file

@ -42,6 +42,7 @@ import VoucherInfo from "../VoucherInfo";
import VoucherLimits from "../VoucherLimits"; import VoucherLimits from "../VoucherLimits";
import VoucherRequirements from "../VoucherRequirements"; import VoucherRequirements from "../VoucherRequirements";
import VoucherSummary from "../VoucherSummary"; import VoucherSummary from "../VoucherSummary";
import { useStyles } from "../VoucherSummary/styles";
import VoucherTypes from "../VoucherTypes"; import VoucherTypes from "../VoucherTypes";
import VoucherValue from "../VoucherValue"; import VoucherValue from "../VoucherValue";
@ -154,6 +155,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
productListToolbar productListToolbar
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const { const {
makeChangeHandler: makeMetadataChangeHandler makeChangeHandler: makeMetadataChangeHandler
} = useMetadataChangeTrigger(); } = useMetadataChangeTrigger();
@ -226,7 +228,10 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
<Backlink onClick={onBack}> <Backlink onClick={onBack}>
{intl.formatMessage(sectionNames.vouchers)} {intl.formatMessage(sectionNames.vouchers)}
</Backlink> </Backlink>
<PageHeader title={voucher?.code} /> <PageHeader
className={classes.wrapAnywhere}
title={voucher?.code}
/>
<Grid> <Grid>
<div> <div>
<VoucherInfo <VoucherInfo

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

@ -16,6 +16,7 @@ import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes";
import { getArrowDirection } from "@saleor/utils/sort"; import { getArrowDirection } from "@saleor/utils/sort";
import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables"; import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
import classNames from "classnames";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -72,6 +73,10 @@ const useStyles = makeStyles(
}, },
textRight: { textRight: {
textAlign: "right" textAlign: "right"
},
textOverflow: {
textOverflow: "ellipsis",
overflow: "hidden"
} }
}), }),
{ name: "VoucherList" } { name: "VoucherList" }
@ -243,8 +248,10 @@ const VoucherList: React.FC<VoucherListProps> = props => {
onChange={() => toggle(voucher.id)} onChange={() => toggle(voucher.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName}> <TableCell
{maybe<React.ReactNode>(() => voucher.code, <Skeleton />)} className={classNames(classes.colName, classes.textOverflow)}
>
{voucher?.code ?? <Skeleton />}
</TableCell> </TableCell>
<TableCell className={classes.colMinSpent}> <TableCell className={classes.colMinSpent}>
{voucher?.code ? ( {voucher?.code ? (

4
src/discounts/components/VoucherSummary/VoucherSummary.tsx
View file

@ -16,6 +16,7 @@ import { maybe } from "../../../misc";
import { DiscountValueTypeEnum } from "../../../types/globalTypes"; import { DiscountValueTypeEnum } from "../../../types/globalTypes";
import { translateVoucherTypes } from "../../translations"; import { translateVoucherTypes } from "../../translations";
import { VoucherDetails_voucher } from "../../types/VoucherDetails"; import { VoucherDetails_voucher } from "../../types/VoucherDetails";
import { useStyles } from "./styles";
export interface VoucherSummaryProps extends ChannelProps { export interface VoucherSummaryProps extends ChannelProps {
voucher: VoucherDetails_voucher; voucher: VoucherDetails_voucher;
@ -26,6 +27,7 @@ const VoucherSummary: React.FC<VoucherSummaryProps> = ({
voucher voucher
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const translatedVoucherTypes = translateVoucherTypes(intl); const translatedVoucherTypes = translateVoucherTypes(intl);
const channel = voucher?.channelListings?.find( const channel = voucher?.channelListings?.find(
@ -39,7 +41,7 @@ const VoucherSummary: React.FC<VoucherSummaryProps> = ({
<Typography variant="caption"> <Typography variant="caption">
<FormattedMessage defaultMessage="Code" description="voucher code" /> <FormattedMessage defaultMessage="Code" description="voucher code" />
</Typography> </Typography>
<Typography> <Typography className={classes.wrapAnywhere}>
{maybe<React.ReactNode>(() => voucher.code, <Skeleton />)} {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
</Typography> </Typography>
<FormSpacer /> <FormSpacer />

10
src/discounts/components/VoucherSummary/styles.ts Normal file
View file

@ -0,0 +1,10 @@
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
() => ({
wrapAnywhere: {
overflowWrap: "anywhere"
}
}),
{ name: "VoucherSummary" }
);

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

@ -88362,7 +88362,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -89456,7 +89456,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
Name Name
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
Happy minute day! Happy minute day!
</div> </div>
@ -89791,7 +89791,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -90885,7 +90885,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
Name Name
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
Happy minute day! Happy minute day!
</div> </div>
@ -91220,7 +91220,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -92329,7 +92329,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
Name Name
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
Happy minute day! Happy minute day!
</div> </div>
@ -92664,7 +92664,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -93794,7 +93794,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
Name Name
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
<span <span
class="Skeleton-skeleton-id" class="Skeleton-skeleton-id"
@ -94103,7 +94103,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -95593,7 +95593,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
Name Name
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
Happy minute day! Happy minute day!
</div> </div>
@ -96301,7 +96301,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy front day! Happy front day!
</td> </td>
@ -96359,7 +96359,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy minute day! Happy minute day!
</td> </td>
@ -96433,7 +96433,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy class day! Happy class day!
</td> </td>
@ -96491,7 +96491,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy human day! Happy human day!
</td> </td>
@ -96549,7 +96549,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy year day! Happy year day!
</td> </td>
@ -96965,7 +96965,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
<span <span
class="Skeleton-skeleton-id" class="Skeleton-skeleton-id"
@ -97395,7 +97395,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy front day! Happy front day!
</td> </td>
@ -97453,7 +97453,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy minute day! Happy minute day!
</td> </td>
@ -97511,7 +97511,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy class day! Happy class day!
</td> </td>
@ -97569,7 +97569,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy human day! Happy human day!
</td> </td>
@ -97627,7 +97627,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
> >
Happy year day! Happy year day!
</td> </td>
@ -101129,7 +101129,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -103061,7 +103061,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
Code Code
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
DISCOUNT DISCOUNT
</div> </div>
@ -103489,7 +103489,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -105446,7 +105446,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
Code Code
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
DISCOUNT DISCOUNT
</div> </div>
@ -105874,7 +105874,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
class="Container-root-id" class="Container-root-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
data-test-id="page-header" data-test-id="page-header"
> >
<div <div
@ -107376,7 +107376,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
Code Code
</div> </div>
<div <div
class="MuiTypography-root-id MuiTypography-body1-id" class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
> >
<span <span
class="Skeleton-skeleton-id" class="Skeleton-skeleton-id"
@ -108162,7 +108162,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
> >
FREE2019 FREE2019
</td> </td>
@ -108246,7 +108246,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
> >
FREE2020 FREE2020
</td> </td>
@ -108732,7 +108732,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
> >
<span <span
class="Skeleton-skeleton-id" class="Skeleton-skeleton-id"
@ -109210,7 +109210,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
> >
FREE2019 FREE2019
</td> </td>
@ -109278,7 +109278,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
</span> </span>
</td> </td>
<td <td
class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id" class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
> >
FREE2020 FREE2020
</td> </td>