From bedee65d8d6db1ccb1995c0137a476c39c99a18f Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 18 Jun 2024 22:37:33 +0800 Subject: [PATCH 01/13] Make bold string before semi colon and adjust the height and having ellipsis conditions depending on what notification will be displayed. --- .../GlobalNotifications.js | 42 ++++++++++++++----- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index f6fdd277e3..941d1f6c98 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -213,6 +213,31 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { closeSnackbar(id); }, [id, closeSnackbar]); + const parseStrToBold = (str, isHeading = false) => { + if (str.indexOf(":") !== -1) { + return ( + <> + {str.substring(0, str.indexOf(":") + 1)} + {str.substring(str.indexOf(":") + 1)} + + ); + } else if (str.indexOf(":") === -1 && isHeading) + return {str}; + else if (str.indexOf(":") === -1 && [undefined, ""].includes(props.heading)) + return {str}; + else return str; + }; + + const typograpySX = { + maxWidth: "540px", + overflow: "hidden", + textOverflow: "ellipsis", + // this will only show 1 or 2 lines to prevent exceeding on the expected height + // depending what type of notification will be displayed. + display: props.severity === "success" ? "block" : "-webkit-box", + "-webkit-line-clamp": props.heading && props.message ? "1" : "2", + "-webkit-box-orient": "vertical", + }; return ( { } sx={{ width: 540, - height: props.heading ? "auto" : 44, + height: props.heading || props.message.length > 65 ? 56 : 44, }} > @@ -238,13 +263,12 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { variant="body2" noWrap={props.severity === "success"} sx={{ - maxWidth: "540px", - overflow: "hidden", - textOverflow: "ellipsis", - fontWeight: props.heading ? 700 : "normal", + ...typograpySX, }} > - {props.heading ? props.heading : props.message} + {props.heading + ? props.heading && parseStrToBold(props.heading, true) + : props.message && parseStrToBold(props.message)} {props.heading && ( @@ -252,12 +276,10 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { variant="body2" noWrap={props.severity === "success"} sx={{ - maxWidth: "540px", - overflow: "hidden", - textOverflow: "ellipsis", + ...typograpySX, }} > - {props.message} + {parseStrToBold(props.message)} )} From 5c10df92c6259c6de569822803651c86d53e612a Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Wed, 19 Jun 2024 11:16:08 +0800 Subject: [PATCH 02/13] Update to use MUI typography component --- .../global-notifications/GlobalNotifications.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index 941d1f6c98..f75bac0feb 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -214,17 +214,24 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { }, [id, closeSnackbar]); const parseStrToBold = (str, isHeading = false) => { + const styles = { + variant: "body2", + fontWeight: 700, + component: "span", + }; if (str.indexOf(":") !== -1) { return ( <> - {str.substring(0, str.indexOf(":") + 1)} + + {str.substring(0, str.indexOf(":") + 1)} + {str.substring(str.indexOf(":") + 1)} ); } else if (str.indexOf(":") === -1 && isHeading) - return {str}; + return {str}; else if (str.indexOf(":") === -1 && [undefined, ""].includes(props.heading)) - return {str}; + return {str}; else return str; }; From 02964e3226902b95bb58e2686b72a12483827d4b Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Wed, 26 Jun 2024 20:05:55 +0800 Subject: [PATCH 03/13] remove fix height --- src/shell/components/global-notifications/GlobalNotifications.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index f75bac0feb..76d27a9955 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -262,7 +262,6 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { } sx={{ width: 540, - height: props.heading || props.message.length > 65 ? 56 : 44, }} > From daf26e636ec5b58bc1908c30d1b5bc1ebdcb505a Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 2 Jul 2024 06:51:29 +0800 Subject: [PATCH 04/13] Adjusting padding to get the expected height --- src/shell/components/global-notifications/GlobalNotifications.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index 76d27a9955..a51e24ea99 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -262,6 +262,7 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { } sx={{ width: 540, + padding: props.severity === "success" ? "4px 8px" : "0px 8px", }} > From 8d1344fbd9dae7e0b7c3a9fb6fdb873c6cd448a7 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 2 Jul 2024 07:22:23 +0800 Subject: [PATCH 05/13] adjusting condition on padding --- .../global-notifications/GlobalNotifications.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index a51e24ea99..5561c9e033 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -125,7 +125,7 @@ export default connect((state) => { return ( { } sx={{ width: 540, - padding: props.severity === "success" ? "4px 8px" : "0px 8px", + padding: + !(props.heading && props.message) || props.severity === "success" + ? "4px 8px" + : "0px 8px", }} > @@ -275,7 +278,7 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { > {props.heading ? props.heading && parseStrToBold(props.heading, true) - : props.message && parseStrToBold(props.message)} + : props.message && parseStrToBold(props.message.substring(0, 15))} {props.heading && ( From ac44bcc6100968ee4a264084926bcf236d845289 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 2 Jul 2024 07:23:03 +0800 Subject: [PATCH 06/13] adjust duration --- .../components/global-notifications/GlobalNotifications.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index 5561c9e033..09c4ecd13d 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -125,7 +125,7 @@ export default connect((state) => { return ( Date: Tue, 9 Jul 2024 10:40:14 +0800 Subject: [PATCH 07/13] remove the substring ,it's only meant for testing but got include in the code. --- .../components/global-notifications/GlobalNotifications.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index 09c4ecd13d..d202c525e9 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -278,7 +278,7 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { > {props.heading ? props.heading && parseStrToBold(props.heading, true) - : props.message && parseStrToBold(props.message.substring(0, 15))} + : props.message && parseStrToBold(props.message)} {props.heading && ( From e31832b9e2f0d36d85076f1e2acce2f072e5cc0a Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 9 Jul 2024 14:06:05 +0800 Subject: [PATCH 08/13] content specs update --- cypress/e2e/content/actions.spec.js | 2 +- src/shell/store/notifications.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js index e6bf44494a..0a739320c1 100644 --- a/cypress/e2e/content/actions.spec.js +++ b/cypress/e2e/content/actions.spec.js @@ -101,7 +101,7 @@ describe("Actions in content editor", () => { cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta"); }); - cy.get("textarea") + cy.get("textarea", { timeout: 10000 }) .first() .type("{selectall}{backspace}This is an item meta description") .should("have.value", "This is an item meta description"); diff --git a/src/shell/store/notifications.ts b/src/shell/store/notifications.ts index 271ac555b4..35e4c751bd 100644 --- a/src/shell/store/notifications.ts +++ b/src/shell/store/notifications.ts @@ -46,6 +46,7 @@ export function notify(data: NotifyArgs) { type: "NEW_NOTIFICATION", data: { ...data, + message: data.message, active: true, epoch: Date.now(), }, From f3d0602dbb611082b1e0596e442ba850a0e6cdfd Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 9 Jul 2024 15:57:45 +0800 Subject: [PATCH 09/13] additional timeout --- cypress/e2e/content/actions.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js index 0a739320c1..33e0146223 100644 --- a/cypress/e2e/content/actions.spec.js +++ b/cypress/e2e/content/actions.spec.js @@ -212,10 +212,10 @@ describe("Actions in content editor", () => { cy.visit("/content/6-a1a600-k0b6f0/new"); }); - cy.get("input[name=title]", { timeout: 5000 }).click().type(timestamp); + cy.get("input[name=title]", { timeout: 10000 }).click().type(timestamp); cy.getBySelector("CreateItemSaveButton").click(); - cy.contains("Created Item", { timeout: 5000 }).should("exist"); + cy.contains("Created Item", { timeout: 10000 }).should("exist"); }); it("Saved item becomes publishable", () => { From 8937bec5abe0881652f98135472bbdf0a56d8435 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 9 Jul 2024 16:21:52 +0800 Subject: [PATCH 10/13] update test --- cypress/e2e/content/actions.spec.js | 4 ++-- src/shell/store/notifications.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js index 33e0146223..500b2567e7 100644 --- a/cypress/e2e/content/actions.spec.js +++ b/cypress/e2e/content/actions.spec.js @@ -212,10 +212,10 @@ describe("Actions in content editor", () => { cy.visit("/content/6-a1a600-k0b6f0/new"); }); - cy.get("input[name=title]", { timeout: 10000 }).click().type(timestamp); + cy.get("input[name=title]", { timeout: 5000 }).click().type(timestamp); cy.getBySelector("CreateItemSaveButton").click(); - cy.contains("Created Item", { timeout: 10000 }).should("exist"); + cy.get("[data-cy=toast]").contains("Created Item"); }); it("Saved item becomes publishable", () => { diff --git a/src/shell/store/notifications.ts b/src/shell/store/notifications.ts index 35e4c751bd..271ac555b4 100644 --- a/src/shell/store/notifications.ts +++ b/src/shell/store/notifications.ts @@ -46,7 +46,6 @@ export function notify(data: NotifyArgs) { type: "NEW_NOTIFICATION", data: { ...data, - message: data.message, active: true, epoch: Date.now(), }, From a742ede1f8055e63f49bb5d19b6988de89c49ae9 Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 9 Jul 2024 18:09:58 +0800 Subject: [PATCH 11/13] retest --- cypress/e2e/content/actions.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js index 500b2567e7..5e07f52b70 100644 --- a/cypress/e2e/content/actions.spec.js +++ b/cypress/e2e/content/actions.spec.js @@ -143,7 +143,7 @@ describe("Actions in content editor", () => { cy.waitOn("/v1/content/models*", () => { cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta"); }); - + cy.wait(10000); cy.getBySelector("PublishMenuButton").click(); cy.getBySelector("PublishScheduleButton").click({ force: true }); cy.getBySelector("SchedulePublishButton").click(); @@ -215,7 +215,7 @@ describe("Actions in content editor", () => { cy.get("input[name=title]", { timeout: 5000 }).click().type(timestamp); cy.getBySelector("CreateItemSaveButton").click(); - cy.get("[data-cy=toast]").contains("Created Item"); + cy.contains("Created Item", { timeout: 5000 }).should("exist"); }); it("Saved item becomes publishable", () => { From b7a67d8c863a88a4a23412b5f68ca360e10462ac Mon Sep 17 00:00:00 2001 From: Gian Espinosa Date: Tue, 9 Jul 2024 19:12:47 +0800 Subject: [PATCH 12/13] add condition to prevent issue in test in globalnotif --- .../GlobalNotifications.js | 83 ++++++++++--------- 1 file changed, 44 insertions(+), 39 deletions(-) diff --git a/src/shell/components/global-notifications/GlobalNotifications.js b/src/shell/components/global-notifications/GlobalNotifications.js index d202c525e9..d5473849d6 100644 --- a/src/shell/components/global-notifications/GlobalNotifications.js +++ b/src/shell/components/global-notifications/GlobalNotifications.js @@ -245,43 +245,34 @@ export const CustomNotification = forwardRef(({ id, ...props }, ref) => { "-webkit-line-clamp": props.heading && props.message ? "1" : "2", "-webkit-box-orient": "vertical", }; + return ( - - - - - - } - sx={{ - width: 540, - padding: - !(props.heading && props.message) || props.severity === "success" - ? "4px 8px" - : "0px 8px", - }} - > - - - {props.heading - ? props.heading && parseStrToBold(props.heading, true) - : props.message && parseStrToBold(props.message)} - - - {props.heading && ( + {typeof props.message === "object" ? ( + "" + ) : ( + + + + + + } + sx={{ + width: 540, + padding: + !(props.heading && props.message) || props.severity === "success" + ? "4px 8px" + : "0px 8px", + }} + > + { ...typograpySX, }} > - {parseStrToBold(props.message)} + {props.heading + ? props.heading && parseStrToBold(props.heading, true) + : props.message && parseStrToBold(props.message)} - )} - - + + {props.heading && ( + + {parseStrToBold(props.message)} + + )} + + + )} ); }); From 3e626876d014f0ef8c83599524c29d32ad3560a2 Mon Sep 17 00:00:00 2001 From: Andres Date: Tue, 9 Jul 2024 15:57:56 -0700 Subject: [PATCH 13/13] update tests --- cypress/e2e/content/actions.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/content/actions.spec.js b/cypress/e2e/content/actions.spec.js index 5e07f52b70..e6bf44494a 100644 --- a/cypress/e2e/content/actions.spec.js +++ b/cypress/e2e/content/actions.spec.js @@ -101,7 +101,7 @@ describe("Actions in content editor", () => { cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta"); }); - cy.get("textarea", { timeout: 10000 }) + cy.get("textarea") .first() .type("{selectall}{backspace}This is an item meta description") .should("have.value", "This is an item meta description"); @@ -143,7 +143,7 @@ describe("Actions in content editor", () => { cy.waitOn("/v1/content/models*", () => { cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta"); }); - cy.wait(10000); + cy.getBySelector("PublishMenuButton").click(); cy.getBySelector("PublishScheduleButton").click({ force: true }); cy.getBySelector("SchedulePublishButton").click();