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 <build@mattermost.com>

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

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 {

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);
     });
 });

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<Props> = ({license}: Props) => {
 
     const message = (
         <div className='RenewLicenseCard TrialLicense'>
-            <div className='RenewLicenseCard__text'>
-                <div className='RenewLicenseCard__text-description'>
-                    {messageBody()}
-                </div>
-                <div className='RenewLicenseCard__buttons'>
-                    <ContactUsButton
-                        customClass='btn-sm btn-primary'
-                    />
-                </div>
+            <div className='RenewLicenseCard__text RenewLicenseCard__text-description'>
+                {messageBody()}
             </div>
         </div>
     );
 
+    const actionButtonLeft = (
+        <ExternalLink
+            href={LicenseLinks.CONTACT_SALES}
+            location='license_settings_user_seat_alert'
+            className='style-button AlertBanner__buttonLeft'
+        >
+            <FormattedMessage
+                id='admin.license.trialCard.contactSales'
+                defaultMessage='Contact Sales'
+            />
+        </ExternalLink>
+    );
+
     const cardTitle = (
         <FormattedMessage
             id='admin.license.trialCard.licenseExpiring'
@@ -80,6 +87,7 @@ const TrialLicenseCard: React.FC<Props> = ({license}: Props) => {
             mode={'info'}
             title={cardTitle}
             message={message}
+            actionButtonLeft={actionButtonLeft}
         />
     );
 };

webapp/channels/src/components/announcement_bar/contact_sales/contact_us.tsx

@@ -31,7 +31,7 @@ const ContactUsButton: React.FC<Props> = (props: Props) => {
             {props.buttonTextElement || (
                 <FormattedMessage
                     id={'admin.license.trialCard.contactSales'}
-                    defaultMessage={'Contact sales'}
+                    defaultMessage={'Contact Sales'}
                 />
             )}
         </button>

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 <b>{daysCount} {daysCount, plural, one {day} other {days}}</b>. Contact sales to purchase a license and continue using advanced features.",