Remove no longer needed container from security teaser pages.

Author: linuspahl

graylog2-web-interface/src/components/security/page-layout/Container.tsx

@@ -14,14 +14,13 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import * as React from 'react';
-import styled, { css } from 'styled-components';
 import type { PropsWithChildren } from 'react';
+import * as React from 'react';
 import { useState } from 'react';
+import styled, { css } from 'styled-components';
 
 import { Alert, Button } from 'components/bootstrap';
 import { Icon, ConfirmDialog } from 'components/common';
-import { ContentArea, Container } from 'components/security/page-layout';
 
 const StyledAlert = styled(Alert)`
   padding: ${({ theme }) => theme.spacings.lg};
@@ -103,22 +102,19 @@ const TeaserPageLayout = ({ children }: PropsWithChildren) => {
 
   return (
     <>
-      <Container>
-        <ContentArea>
-          <StyledAlert bsStyle="info" noIcon>
-            <Banner>
-              <LeftItems>
-                <BoldText>Security Demo</BoldText>
-                <span>For more information and booking a full demo of the product visit Graylog website.</span>
-              </LeftItems>
-              <Button bsStyle="primary" role="link" target="_blank" href="https://graylog.org/explore-security/">
-                Graylog Security <Icon name="open_in_new" />
-              </Button>
-            </Banner>
-          </StyledAlert>
-          {children}
-        </ContentArea>
-      </Container>
+      <StyledAlert bsStyle="info" noIcon>
+        <Banner>
+          <LeftItems>
+            <BoldText>Security Demo</BoldText>
+            <span>For more information and booking a full demo of the product visit Graylog website.</span>
+          </LeftItems>
+          <Button bsStyle="primary" role="link" target="_blank" href="https://graylog.org/explore-security/">
+            Graylog Security <Icon name="open_in_new" />
+          </Button>
+        </Banner>
+      </StyledAlert>
+      {children}
+
       {showModal && (
         <ConfirmDialog
           show

graylog2-web-interface/src/components/security/page-layout/ContentArea.tsx

@@ -16,13 +16,10 @@
  */
 import * as React from 'react';
 import styled from 'styled-components';
-import { useMemo, forwardRef } from 'react';
 import 'wicg-inert';
 
 import Hotspot from 'components/security/teaser/Hotspot';
-import { SAVE_COPY } from 'views/components/contexts/SearchPageLayoutContext';
-import PageContentLayout from 'components/layout/PageContentLayout';
-import SearchPageLayoutProvider from 'views/components/contexts/SearchPageLayoutProvider';
+import NoSidebarSearchLayout from 'views/components/NoSidebarSearchLayout';
 import type { SearchJobResult } from 'views/logic/SearchResult';
 import type { SearchJson } from 'views/logic/search/Search';
 import StaticSearch from 'views/components/StaticSearch';
@@ -33,10 +30,8 @@ type HotspotMeta = {
   description: string;
 };
 
-const StyledPageContentLayout = styled(PageContentLayout)`
-  .page-content-grid {
-    position: relative;
-  }
+const ReadOnlyContainer = styled.div`
+  height: 100%;
 `;
 
 const DashboardOverlay = styled.div`
@@ -49,43 +44,27 @@ const DashboardOverlay = styled.div`
   z-index: 1;
 `;
 
-const searchAreaContainer = (hotspots: Array<HotspotMeta>) =>
-  forwardRef<HTMLDivElement, React.PropsWithChildren>(({ children }, ref) => (
-    <StyledPageContentLayout ref={ref}>
-      <DashboardOverlay>
-        {hotspots.map(({ description, positionX, positionY }, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Hotspot positionX={positionX} positionY={positionY} index={index} key={`hotspot-${index}`}>
-            {description}
-          </Hotspot>
-        ))}
-      </DashboardOverlay>
-      <div inert="">{children}</div>
-    </StyledPageContentLayout>
-  ));
-
 type Props = {
   searchJson: Partial<SearchJson>;
   viewJson: any;
   searchJobResult: Partial<SearchJobResult>;
   hotspots: Array<HotspotMeta>;
 };
 
-const TeaserSearch = ({ searchJson, viewJson, searchJobResult, hotspots }: Props) => {
-  const searchPageLayout = useMemo(
-    () => ({
-      sidebar: { isShown: false },
-      viewActions: SAVE_COPY,
-      searchAreaContainer: { component: searchAreaContainer(hotspots) },
-    }),
-    [hotspots],
-  );
-
-  return (
-    <SearchPageLayoutProvider value={searchPageLayout}>
+const TeaserSearch = ({ searchJson, viewJson, searchJobResult, hotspots }: Props) => (
+  <NoSidebarSearchLayout>
+    <DashboardOverlay>
+      {hotspots.map(({ description, positionX, positionY }, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Hotspot positionX={positionX} positionY={positionY} index={index} key={`hotspot-${index}`}>
+          {description}
+        </Hotspot>
+      ))}
+    </DashboardOverlay>
+    <ReadOnlyContainer inert="">
       <StaticSearch searchJson={searchJson} viewJson={viewJson} searchJobResult={searchJobResult} />
-    </SearchPageLayoutProvider>
-  );
-};
+    </ReadOnlyContainer>
+  </NoSidebarSearchLayout>
+);
 
 export default TeaserSearch;

graylog2-web-interface/src/components/security/page-layout/index.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+
+import SearchPageLayoutProvider from 'views/components/contexts/SearchPageLayoutProvider';
+import type { LayoutState } from 'views/components/contexts/SearchPageLayoutContext';
+import { SAVE_COPY } from 'views/components/contexts/SearchPageLayoutContext';
+import { Row } from 'components/bootstrap';
+
+const Container = styled(Row)`
+  position: relative;
+`;
+
+const PageContentLayout = styled.div`
+  padding: 0 15px;
+  width: 100%;
+  height: 100%;
+`;
+
+const SearchAreaContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren>(({ children }, ref) => (
+  <PageContentLayout ref={ref}>{children}</PageContentLayout>
+));
+
+type Props = {
+  children: React.ReactNode;
+  viewActions?: LayoutState['viewActions'];
+};
+
+const NoSidebarSearchLayout = ({ children, viewActions = SAVE_COPY }: Props) => {
+  const searchPageLayout = useMemo(
+    () => ({
+      sidebar: { isShown: false },
+      viewActions,
+      searchAreaContainer: { component: SearchAreaContainer },
+    }),
+    [viewActions],
+  );
+
+  return (
+    <SearchPageLayoutProvider value={searchPageLayout}>
+      <Container>{children}</Container>
+    </SearchPageLayoutProvider>
+  );
+};
+
+export default NoSidebarSearchLayout;