[CLD-7724] Allow admin-set announcement banners to stack below system ones (#27171)

* Allow admin-set announcement banners to stack below system ones

* Fix x button in banners

* Fix lint

webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/AnnouncementBar should match snapshot, admin configured bar 1`] = `
+<div>
+  <AnnouncementBar
+    actions={
+      Object {
+        "decrementAnnouncementBarCount": [MockFunction],
+        "incrementAnnouncementBarCount": [MockFunction],
+        "sendVerificationEmail": [MockFunction],
+      }
+    }
+    allowBannerDismissal={true}
+    announcementBarCount={0}
+    bannerColor="green"
+    bannerText="Banner text"
+    bannerTextColor="black"
+    canViewAPIv3Banner={false}
+    canViewSystemErrors={false}
+    color=""
+    enableBanner={true}
+    enablePreviewMode={false}
+    enableSignUpWithGitLab={false}
+    isLoggedIn={true}
+    isTallBanner={false}
+    license={
+      Object {
+        "id": "",
+      }
+    }
+    message="text"
+    sendEmailNotifications={true}
+    showCTA={true}
+    showCloseButton={false}
+    showLinkAsButton={false}
+    siteURL=""
+    textColor=""
+    type="critical"
+  />
+  <AnnouncementBar
+    actions={
+      Object {
+        "decrementAnnouncementBarCount": [MockFunction],
+        "incrementAnnouncementBarCount": [MockFunction],
+        "sendVerificationEmail": [MockFunction],
+      }
+    }
+    allowBannerDismissal={true}
+    announcementBarCount={0}
+    bannerColor="green"
+    bannerText="Banner text"
+    bannerTextColor="black"
+    canViewAPIv3Banner={false}
+    canViewSystemErrors={false}
+    className="admin-announcement"
+    color=""
+    enableBanner={true}
+    enablePreviewMode={false}
+    enableSignUpWithGitLab={false}
+    isLoggedIn={true}
+    isTallBanner={false}
+    license={
+      Object {
+        "id": "",
+      }
+    }
+    message="text"
+    sendEmailNotifications={true}
+    showCTA={true}
+    showCloseButton={false}
+    showLinkAsButton={false}
+    siteURL=""
+    textColor=""
+    type="critical"
+  />
+</div>
+`;
+
 exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] = `
 <_StyledDiv
   className="announcement-bar announcement-bar-critical"

webapp/channels/src/components/announcement_bar/announcement_bar.test.tsx

@@ -101,4 +101,19 @@ describe('components/AnnouncementBar', () => {
         wrapper.setProps(newProps as any);
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should match snapshot, admin configured bar', () => {
+        const props = {...baseProps, enableBanner: true, bannerText: 'Banner text'};
+        const wrapper = shallow(
+            <div>
+                <AnnouncementBar {...props}/>
+                <AnnouncementBar
+                    {...props}
+                    className='admin-announcement'
+                />
+            </div>,
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
 });

webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx

@@ -43,6 +43,7 @@ class AnnouncementBarController extends React.PureComponent<Props> {
         if (this.props.config?.EnableBanner === 'true' && this.props.config.BannerText?.trim()) {
             adminConfiguredAnnouncementBar = (
                 <TextDismissableBar
+                    className='admin-announcement'
                     color={this.props.config.BannerColor}
                     textColor={this.props.config.BannerTextColor}
                     allowDismissal={this.props.config.AllowBannerDismissal === 'true'}
@@ -98,6 +99,8 @@ class AnnouncementBarController extends React.PureComponent<Props> {
         //    Baz
         // }
         // Even if all Foo, Bar and Baz render, only Baz is visible as it's further down.
+        // One exception to this rule is for admin configured announcement banners
+        // If set with class 'admin-announcement', they will always be visible, stacked vertically.
         return (
             <>
                 <NotificationPermissionBar/>

webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx

@@ -16,6 +16,7 @@ import {isStringContainingUrl} from 'utils/url';
 type Props = {
     id?: string;
     showCloseButton: boolean;
+    className?: string;
     color: string;
     textColor: string;
     type: string;
@@ -131,6 +132,10 @@ export default class AnnouncementBar extends React.PureComponent<Props, State> {
             barClass = 'announcement-bar announcement-bar-general';
         }
 
+        if (this.props.className) {
+            barClass += ` ${this.props.className}`;
+        }
+
         let closeButton;
         if (this.props.showCloseButton) {
             closeButton = (

webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx

@@ -17,6 +17,7 @@ interface Props extends Partial<AnnouncementBarProps> {
     allowDismissal: boolean;
     text: React.ReactNode;
     onDismissal?: () => void;
+    className?: string;
 }
 
 type State = {

webapp/channels/src/sass/base/_structure.scss

@@ -116,6 +116,7 @@ body.app__body #root {
     --columns: min-content minmax(385px, 1fr) min-content;
     grid-template:
         "announcement announcement announcement" min-content
+        "admin-announcement admin-announcement admin-announcement" min-content
         "header header header" min-content
         "team-sidebar main app-sidebar"
         "footer footer footer" min-content / var(--columns);
@@ -131,6 +132,7 @@ body.app__body #root {
         padding-right: 0;
         grid-template:
             'announcement announcement' min-content
+            'admin-announcement admin-announcement' min-content
             'header header' min-content
             'lhs center'
             'footer footer' min-content
@@ -147,6 +149,10 @@ body.app__body #root {
         grid-area: announcement;
     }
 
+    .announcement-bar.admin-announcement {
+        grid-area: admin-announcement;
+    }
+
     #global-header {
         grid-area: header;
     }

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -63,7 +63,6 @@
         }
 
         &.announcement-bar__close {
-            position: absolute;
             top: 5px;
             right: 0;
             padding: 0 10px;