Move banner list under topbar (gravitational#36760)

ean · Jan 16, 2024 · b52dc61 · b52dc61
1 parent d749d69
commit b52dc61
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 47 deletions.
diff --git a/web/packages/teleport/src/Main/Main.tsx b/web/packages/teleport/src/Main/Main.tsx
@@ -26,7 +26,7 @@ import React, {
   useContext,
 } from 'react';
 import styled from 'styled-components';
-import { Indicator } from 'design';
+import { Box, Indicator } from 'design';
 import { Failed } from 'design/CardError';
 
 import useAttempt from 'shared/hooks/useAttemptNext';
@@ -170,23 +170,24 @@ export function Main(props: MainProps) {
             : null
         }
       />
-      <BannerList
-        banners={banners}
-        customBanners={props.customBanners}
-        billingBanners={featureFlags.billing && props.billingBanners}
-        onBannerDismiss={dismissAlert}
-      >
+      <Wrapper>
         <MainContainer>
           <Navigation />
           <HorizontalSplit>
             <ContentMinWidth>
+              <BannerList
+                banners={banners}
+                customBanners={props.customBanners}
+                billingBanners={featureFlags.billing && props.billingBanners}
+                onBannerDismiss={dismissAlert}
+              />
               <Suspense fallback={null}>
                 <FeatureRoutes lockedFeatures={ctx.lockedFeatures} />
               </Suspense>
             </ContentMinWidth>
           </HorizontalSplit>
         </MainContainer>
-      </BannerList>
+      </Wrapper>
       {displayOnboardDiscover && (
         <OnboardDiscover onClose={handleOnClose} onOnboard={handleOnboard} />
       )}
@@ -306,3 +307,10 @@ export const StyledIndicator = styled(HorizontalSplit)`
   align-items: center;
   justify-content: center;
 `;
+
+const Wrapper = styled(Box)<{ hasDockedElement: boolean }>`
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  width: ${p => (p.hasDockedElement ? 'calc(100vw - 520px)' : '100vw')};
+`;
diff --git a/web/packages/teleport/src/components/BannerList/BannerList.test.tsx b/web/packages/teleport/src/components/BannerList/BannerList.test.tsx
@@ -67,16 +67,6 @@ describe('components/BannerList/Banner', () => {
     expect(dismiss).toHaveBeenCalledWith('test-banner1');
   });
 
-  it('supports rendering children', () => {
-    const message = 'That was easy';
-    render(
-      <BannerList banners={banners}>
-        <button>{message}</button>
-      </BannerList>
-    );
-    expect(screen.getByText(message)).toBeInTheDocument();
-  });
-
   it('does not modify the provided banner list on hide', () => {
     banners.pop();
     render(<BannerList banners={banners} />);

diff --git a/web/packages/teleport/src/components/BannerList/BannerList.tsx b/web/packages/teleport/src/components/BannerList/BannerList.tsx
@@ -17,28 +17,20 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { Box } from 'design';
 
-import { MainContainer } from 'teleport/Main/MainContainer';
-
-import { useLayout } from 'teleport/Main/LayoutContext';
-
 import { Banner } from './Banner';
 
 import type { Severity } from './Banner';
 import type { ReactNode } from 'react';
 
 export const BannerList = ({
   banners = [],
-  children,
   customBanners = [],
   billingBanners = [],
   onBannerDismiss = () => {},
 }: Props) => {
-  const { hasDockedElement } = useLayout();
-
   const [bannerData, setBannerData] = useState<{ [id: string]: BannerType }>(
     {}
   );
@@ -63,12 +55,7 @@ export const BannerList = ({
   );
 
   return (
-    <Wrapper
-      hasDockedElement={hasDockedElement}
-      bannerCount={
-        shownBanners.length + customBanners.length + billingBanners.length
-      }
-    >
+    <Box>
       {shownBanners.map(banner => (
         <Banner
           message={banner.message}
@@ -81,26 +68,12 @@ export const BannerList = ({
       ))}
       {customBanners}
       {billingBanners}
-      {children}
-    </Wrapper>
+    </Box>
   );
 };
 
-const Wrapper = styled(Box)<{ bannerCount: number; hasDockedElement: boolean }>`
-  display: flex;
-  height: 100vh;
-  flex-direction: column;
-  width: ${p => (p.hasDockedElement ? 'calc(100vw - 520px)' : '100vw')};
-
-  ${MainContainer} {
-    flex: 1;
-    height: calc(100% - ${props => props.bannerCount * 38}px);
-  }
-`;
-
 type Props = {
   banners: BannerType[];
-  children?: ReactNode;
   customBanners?: ReactNode[];
   onBannerDismiss?: (string) => void;
   billingBanners?: ReactNode[];