From efb960a1602eed9afe65c6b2e3ed18d8dc6e8720 Mon Sep 17 00:00:00 2001 From: Maria A Nunez Date: Tue, 24 Jun 2025 18:11:11 -0400 Subject: [PATCH] Fixed styling issues with multiples banners in System Console (#31822) * Fixed styling issues with banners in System Console * Fix Cypress test --------- Co-authored-by: Mattermost Build --- .../about/edition_and_license_spec.js | 2 +- .../license_settings/license_settings.scss | 6 ++++ .../renew_license_card.test.tsx | 2 +- .../trial_license_card/trial_license_card.tsx | 28 ++++++++++++------- .../contact_sales/contact_us.tsx | 2 +- webapp/channels/src/i18n/en.json | 2 +- 6 files changed, 28 insertions(+), 14 deletions(-) diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js index 774e3e6e08..c6d0444e72 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js @@ -71,7 +71,7 @@ describe('System console', () => { cy.findByText('High availability'); cy.findByText('Advanced compliance'); cy.findByText('And more...'); - cy.findByRole('button', {name: 'Contact sales'}); + cy.findByRole('button', {name: 'Contact Sales'}); }); // Validate Compare plans link is not present for Enterprise licenses diff --git a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss index e2cc4b6ab8..5236f0a9c1 100644 --- a/webapp/channels/src/components/admin_console/license_settings/license_settings.scss +++ b/webapp/channels/src/components/admin_console/license_settings/license_settings.scss @@ -51,6 +51,12 @@ &:empty { margin-bottom: 0px; } + + .AlertBanner { + &:not(:last-child) { + margin-bottom: 20px; + } + } } .current-plan-legend { diff --git a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.test.tsx b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.test.tsx index d862f667ae..a9fd51f341 100644 --- a/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.test.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/renew_license_card/renew_license_card.test.tsx @@ -77,6 +77,6 @@ describe('components/RenewalLicenseCard', () => { await actImmediate(wrapper); expect(wrapper.find('button').length).toEqual(1); - expect(wrapper.find('button').at(0).text().includes('Contact sales')).toBe(true); + expect(wrapper.find('button').at(0).text().includes('Contact Sales')).toBe(true); }); }); diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx index 2cd5dd86a8..03b7ed8a75 100644 --- a/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.tsx @@ -8,8 +8,9 @@ import {FormattedMessage} from 'react-intl'; import type {ClientLicense} from '@mattermost/types/config'; import AlertBanner from 'components/alert_banner'; -import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us'; +import ExternalLink from 'components/external_link'; +import {LicenseLinks} from 'utils/constants'; import {daysToLicenseExpire} from 'utils/license_utils'; import {getSkuDisplayName} from 'utils/subscription'; import {getBrowserTimezone} from 'utils/timezone'; @@ -53,19 +54,25 @@ const TrialLicenseCard: React.FC = ({license}: Props) => { const message = (
-
-
- {messageBody()} -
-
- -
+
+ {messageBody()}
); + const actionButtonLeft = ( + + + + ); + const cardTitle = ( = ({license}: Props) => { mode={'info'} title={cardTitle} message={message} + actionButtonLeft={actionButtonLeft} /> ); }; diff --git a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx index ac4b612685..af997bf3ba 100644 --- a/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx +++ b/webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx @@ -31,7 +31,7 @@ const ContactUsButton: React.FC = (props: Props) => { {props.buttonTextElement || ( )} diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 40fd83b2bc..2b6966e6d9 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -1608,7 +1608,7 @@ "admin.license.trial-request.embargoed.button": "Close", "admin.license.trial-request.startTrial": "Start trial", "admin.license.trial-request.title": "Experience all that Mattermost Enterprise Advanced has to offer with a free trial for the next 30 days. No obligation to buy and no credit card required. ", - "admin.license.trialCard.contactSales": "Contact sales", + "admin.license.trialCard.contactSales": "Contact Sales", "admin.license.trialCard.licenseExpiring": "You’re currently on a free trial of our Mattermost {licenseType}.", "admin.license.trialCard.purchase_license": "Purchase a license", "admin.license.trialLicenseCard.expiringAfterFewDays": "Your free trial will expire in {daysCount} {daysCount, plural, one {day} other {days}}. Contact sales to purchase a license and continue using advanced features.",