From ae1d1f478a4d1a033858b2197c82a31514731fd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Wed, 1 Dec 2021 14:37:51 +0100
Subject: [PATCH] Fix long name vouchers (#1626) (#1640)

* Fix long name vouchers

* update snapshots

* QA improvements - wrap page headers

* QA improvements - same changes for sales
---
 .../SaleDetailsPage/SaleDetailsPage.tsx       |  4 +-
 .../components/SaleList/SaleList.tsx          |  9 ++-
 .../components/SaleSummary/SaleSummary.tsx    |  5 +-
 .../components/SaleSummary/styles.ts          | 10 +++
 .../VoucherDetailsPage/VoucherDetailsPage.tsx |  7 +-
 .../components/VoucherList/VoucherList.tsx    | 11 +++-
 .../VoucherSummary/VoucherSummary.tsx         |  4 +-
 .../components/VoucherSummary/styles.ts       | 10 +++
 .../__snapshots__/Stories.test.ts.snap        | 64 +++++++++----------
 9 files changed, 84 insertions(+), 40 deletions(-)
 create mode 100644 src/discounts/components/SaleSummary/styles.ts
 create mode 100644 src/discounts/components/VoucherSummary/styles.ts

diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
index 79e36cb1f..46d499ea1 100644
--- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
+++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -33,6 +33,7 @@ import DiscountProducts from "../DiscountProducts";
 import DiscountVariants from "../DiscountVariants";
 import SaleInfo from "../SaleInfo";
 import SaleSummary from "../SaleSummary";
+import { useStyles } from "../SaleSummary/styles";
 import SaleType from "../SaleType";
 import SaleValue from "../SaleValue";
 
@@ -150,6 +151,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   toggleAll
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
   const {
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
@@ -185,7 +187,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
             <Backlink onClick={onBack}>
               {intl.formatMessage(sectionNames.sales)}
             </Backlink>
-            <PageHeader title={maybe(() => sale.name)} />
+            <PageHeader className={classes.wrapAnywhere} title={sale?.name} />
             <Grid>
               <div>
                 <SaleInfo
diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx
index 45d87cd63..40aaa2dc5 100644
--- a/src/discounts/components/SaleList/SaleList.tsx
+++ b/src/discounts/components/SaleList/SaleList.tsx
@@ -15,6 +15,7 @@ import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { SaleType } from "@saleor/types/globalTypes";
 import { getArrowDirection } from "@saleor/utils/sort";
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -56,6 +57,10 @@ const useStyles = makeStyles(
     },
     tableRow: {
       cursor: "pointer"
+    },
+    textOverflow: {
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
   }),
   { name: "SaleList" }
@@ -189,7 +194,9 @@ const SaleList: React.FC<SaleListProps> = props => {
                     onChange={() => toggle(sale.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colName}>
+                <TableCell
+                  className={classNames(classes.colName, classes.textOverflow)}
+                >
                   {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
                 </TableCell>
                 <TableCell className={classes.colStart}>
diff --git a/src/discounts/components/SaleSummary/SaleSummary.tsx b/src/discounts/components/SaleSummary/SaleSummary.tsx
index 44ab1b5b5..b470255e9 100644
--- a/src/discounts/components/SaleSummary/SaleSummary.tsx
+++ b/src/discounts/components/SaleSummary/SaleSummary.tsx
@@ -15,7 +15,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { maybe } from "../../../misc";
 import { SaleType } from "../../../types/globalTypes";
 import { SaleDetails_sale } from "../../types/SaleDetails";
-
+import { useStyles } from "./styles";
 export interface SaleSummaryProps extends ChannelProps {
   sale: SaleDetails_sale;
 }
@@ -25,6 +25,7 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
   sale
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
 
   const channel = sale?.channelListings?.find(
     listing => listing.channel.id === selectedChannelId
@@ -36,7 +37,7 @@ const SaleSummary: React.FC<SaleSummaryProps> = ({
         <Typography variant="caption">
           <FormattedMessage defaultMessage="Name" description="sale name" />
         </Typography>
-        <Typography>
+        <Typography className={classes.wrapAnywhere}>
           {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
         </Typography>
         <FormSpacer />
diff --git a/src/discounts/components/SaleSummary/styles.ts b/src/discounts/components/SaleSummary/styles.ts
new file mode 100644
index 000000000..a8e97277a
--- /dev/null
+++ b/src/discounts/components/SaleSummary/styles.ts
@@ -0,0 +1,10 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  () => ({
+    wrapAnywhere: {
+      overflowWrap: "anywhere"
+    }
+  }),
+  { name: "SaleSummary" }
+);
diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
index 43617e9c1..b73cf5162 100644
--- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
+++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
@@ -42,6 +42,7 @@ import VoucherInfo from "../VoucherInfo";
 import VoucherLimits from "../VoucherLimits";
 import VoucherRequirements from "../VoucherRequirements";
 import VoucherSummary from "../VoucherSummary";
+import { useStyles } from "../VoucherSummary/styles";
 import VoucherTypes from "../VoucherTypes";
 import VoucherValue from "../VoucherValue";
 
@@ -154,6 +155,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   productListToolbar
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
   const {
     makeChangeHandler: makeMetadataChangeHandler
   } = useMetadataChangeTrigger();
@@ -226,7 +228,10 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
             <Backlink onClick={onBack}>
               {intl.formatMessage(sectionNames.vouchers)}
             </Backlink>
-            <PageHeader title={voucher?.code} />
+            <PageHeader
+              className={classes.wrapAnywhere}
+              title={voucher?.code}
+            />
             <Grid>
               <div>
                 <VoucherInfo
diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx
index 071dfd3be..f1243616b 100644
--- a/src/discounts/components/VoucherList/VoucherList.tsx
+++ b/src/discounts/components/VoucherList/VoucherList.tsx
@@ -16,6 +16,7 @@ import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { DiscountValueTypeEnum } from "@saleor/types/globalTypes";
 import { getArrowDirection } from "@saleor/utils/sort";
 import { getFooterColSpanWithBulkActions } from "@saleor/utils/tables";
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -72,6 +73,10 @@ const useStyles = makeStyles(
     },
     textRight: {
       textAlign: "right"
+    },
+    textOverflow: {
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
   }),
   { name: "VoucherList" }
@@ -243,8 +248,10 @@ const VoucherList: React.FC<VoucherListProps> = props => {
                     onChange={() => toggle(voucher.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colName}>
-                  {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
+                <TableCell
+                  className={classNames(classes.colName, classes.textOverflow)}
+                >
+                  {voucher?.code ?? <Skeleton />}
                 </TableCell>
                 <TableCell className={classes.colMinSpent}>
                   {voucher?.code ? (
diff --git a/src/discounts/components/VoucherSummary/VoucherSummary.tsx b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
index ce8e0fc41..583c0f213 100644
--- a/src/discounts/components/VoucherSummary/VoucherSummary.tsx
+++ b/src/discounts/components/VoucherSummary/VoucherSummary.tsx
@@ -16,6 +16,7 @@ import { maybe } from "../../../misc";
 import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 import { translateVoucherTypes } from "../../translations";
 import { VoucherDetails_voucher } from "../../types/VoucherDetails";
+import { useStyles } from "./styles";
 
 export interface VoucherSummaryProps extends ChannelProps {
   voucher: VoucherDetails_voucher;
@@ -26,6 +27,7 @@ const VoucherSummary: React.FC<VoucherSummaryProps> = ({
   voucher
 }) => {
   const intl = useIntl();
+  const classes = useStyles();
 
   const translatedVoucherTypes = translateVoucherTypes(intl);
   const channel = voucher?.channelListings?.find(
@@ -39,7 +41,7 @@ const VoucherSummary: React.FC<VoucherSummaryProps> = ({
         <Typography variant="caption">
           <FormattedMessage defaultMessage="Code" description="voucher code" />
         </Typography>
-        <Typography>
+        <Typography className={classes.wrapAnywhere}>
           {maybe<React.ReactNode>(() => voucher.code, <Skeleton />)}
         </Typography>
         <FormSpacer />
diff --git a/src/discounts/components/VoucherSummary/styles.ts b/src/discounts/components/VoucherSummary/styles.ts
new file mode 100644
index 000000000..d58c6c98c
--- /dev/null
+++ b/src/discounts/components/VoucherSummary/styles.ts
@@ -0,0 +1,10 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  () => ({
+    wrapAnywhere: {
+      overflowWrap: "anywhere"
+    }
+  }),
+  { name: "VoucherSummary" }
+);
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index cd31960e5..3f07b2ad1 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -88362,7 +88362,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -89456,7 +89456,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 Name
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 Happy minute day!
               </div>
@@ -89791,7 +89791,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -90885,7 +90885,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 Name
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 Happy minute day!
               </div>
@@ -91220,7 +91220,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -92329,7 +92329,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 Name
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 Happy minute day!
               </div>
@@ -92664,7 +92664,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -93794,7 +93794,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 Name
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -94103,7 +94103,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id SaleSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -95593,7 +95593,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 Name
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id SaleSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 Happy minute day!
               </div>
@@ -96301,7 +96301,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </span>
               </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!
               </td>
@@ -96359,7 +96359,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </span>
               </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!
               </td>
@@ -96433,7 +96433,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </span>
               </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!
               </td>
@@ -96491,7 +96491,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </span>
               </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!
               </td>
@@ -96549,7 +96549,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
                 </span>
               </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!
               </td>
@@ -96965,7 +96965,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
                 </span>
               </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
                   class="Skeleton-skeleton-id"
@@ -97395,7 +97395,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
                 </span>
               </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!
               </td>
@@ -97453,7 +97453,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
                 </span>
               </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!
               </td>
@@ -97511,7 +97511,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
                 </span>
               </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!
               </td>
@@ -97569,7 +97569,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
                 </span>
               </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!
               </td>
@@ -97627,7 +97627,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
                 </span>
               </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!
               </td>
@@ -101129,7 +101129,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -103061,7 +103061,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 Code
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 DISCOUNT
               </div>
@@ -103489,7 +103489,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -105446,7 +105446,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 Code
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 DISCOUNT
               </div>
@@ -105874,7 +105874,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
       class="Container-root-id"
     >
       <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+        class="ExtendedPageHeader-root-id VoucherSummary-wrapAnywhere-id ExtendedPageHeader-block-id"
         data-test-id="page-header"
       >
         <div
@@ -107376,7 +107376,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 Code
               </div>
               <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
+                class="MuiTypography-root-id VoucherSummary-wrapAnywhere-id MuiTypography-body1-id"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -108162,7 +108162,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 </span>
               </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
               </td>
@@ -108246,7 +108246,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
                 </span>
               </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
               </td>
@@ -108732,7 +108732,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
                 </span>
               </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
                   class="Skeleton-skeleton-id"
@@ -109210,7 +109210,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
                 </span>
               </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
               </td>
@@ -109278,7 +109278,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
                 </span>
               </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
               </td>