cleanup wrapper page and renaming

elastic · Jun 4, 2021 · 75bb560 · 75bb560
1 parent cba4e70
commit 75bb560
Show file tree

Hide file tree

Showing 25 changed files with 134 additions and 119 deletions.
diff --git a/x-pack/plugins/security_solution/public/app/404.tsx b/x-pack/plugins/security_solution/public/app/404.tsx
@@ -8,15 +8,15 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { WrapperPage } from '../common/components/wrapper_page';
+import { SecuritySolutionPageWrapper } from '../common/components/page_wrapper';
 
 export const NotFoundPage = React.memo(() => (
-  <WrapperPage>
+  <SecuritySolutionPageWrapper>
     <FormattedMessage
       id="xpack.securitySolution.pages.fourohfour.noContentFoundDescription"
       defaultMessage="No content found"
     />
-  </WrapperPage>
+  </SecuritySolutionPageWrapper>
 ));
 
 NotFoundPage.displayName = 'NotFoundPage';
diff --git a/x-pack/plugins/security_solution/public/cases/pages/case.tsx b/x-pack/plugins/security_solution/public/cases/pages/case.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { WrapperPage } from '../../common/components/wrapper_page';
+import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { AllCases } from '../components/all_cases';
@@ -21,15 +21,15 @@ export const CasesPage = React.memo(() => {
 
   return userPermissions == null || userPermissions?.read ? (
     <>
-      <WrapperPage>
+      <SecuritySolutionPageWrapper>
         {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
           <CaseCallOut
             title={savedObjectReadOnlyErrorMessage.title}
             messages={[{ ...savedObjectReadOnlyErrorMessage, title: '' }]}
           />
         )}
         <AllCases userCanCrud={userPermissions?.crud ?? false} />
-      </WrapperPage>
+      </SecuritySolutionPageWrapper>
       <SpyRoute pageName={SecurityPageName.case} />
     </>
   ) : (

diff --git a/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx b/x-pack/plugins/security_solution/public/cases/pages/case_details.tsx
@@ -10,7 +10,7 @@ import { useParams, useHistory } from 'react-router-dom';
 
 import { SecurityPageName } from '../../app/types';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
-import { WrapperPage } from '../../common/components/wrapper_page';
+import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
 import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
 import { getCaseUrl } from '../../common/components/link_to';
@@ -34,7 +34,7 @@ export const CaseDetailsPage = React.memo(() => {
 
   return caseId != null ? (
     <>
-      <WrapperPage noPadding>
+      <SecuritySolutionPageWrapper noPadding>
         {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
           <CaseCallOut
             title={savedObjectReadOnlyErrorMessage.title}
@@ -46,7 +46,7 @@ export const CaseDetailsPage = React.memo(() => {
           subCaseId={subCaseId}
           userCanCrud={userPermissions?.crud ?? false}
         />
-      </WrapperPage>
+      </SecuritySolutionPageWrapper>
       <SpyRoute pageName={SecurityPageName.case} />
     </>
   ) : null;

diff --git a/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx b/x-pack/plugins/security_solution/public/cases/pages/configure_cases.tsx
@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { SecurityPageName } from '../../app/types';
 import { getCaseUrl } from '../../common/components/link_to';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
-import { WrapperPage } from '../../common/components/wrapper_page';
+import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { useGetUserSavedObjectPermissions, useKibana } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { navTabs } from '../../app/home/home_navigations';
@@ -46,7 +46,7 @@ const ConfigureCasesPageComponent: React.FC = () => {
 
   return (
     <>
-      <WrapperPage noPadding>
+      <SecuritySolutionPageWrapper noPadding>
         <SectionWrapper>
           <HeaderWrapper>
             <CaseHeaderPage title={i18n.CONFIGURE_CASES_PAGE_TITLE} backOptions={backOptions} />
@@ -57,7 +57,7 @@ const ConfigureCasesPageComponent: React.FC = () => {
             userCanCrud: userPermissions?.crud ?? false,
           })}
         </WhitePageWrapper>
-      </WrapperPage>
+      </SecuritySolutionPageWrapper>
       <SpyRoute pageName={SecurityPageName.case} />
     </>
   );

diff --git a/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx b/x-pack/plugins/security_solution/public/cases/pages/create_case.tsx
@@ -11,7 +11,7 @@ import { useHistory } from 'react-router-dom';
 import { SecurityPageName } from '../../app/types';
 import { getCaseUrl } from '../../common/components/link_to';
 import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
-import { WrapperPage } from '../../common/components/wrapper_page';
+import { SecuritySolutionPageWrapper } from '../../common/components/page_wrapper';
 import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { navTabs } from '../../app/home/home_navigations';
@@ -40,10 +40,10 @@ export const CreateCasePage = React.memo(() => {
 
   return (
     <>
-      <WrapperPage>
+      <SecuritySolutionPageWrapper>
         <CaseHeaderPage backOptions={backOptions} title={i18n.CREATE_TITLE} />
         <Create />
-      </WrapperPage>
+      </SecuritySolutionPageWrapper>
       <SpyRoute pageName={SecurityPageName.case} />
     </>
   );

diff --git a/...security_solution/public/common/components/page_wrapper/__snapshots__/index.test.tsx.snap b/...security_solution/public/common/components/page_wrapper/__snapshots__/index.test.tsx.snap
diff --git a/...ponents/wrapper_page/bottom_bar/index.tsx → ...ponents/page_wrapper/bottom_bar/index.tsx b/...ponents/wrapper_page/bottom_bar/index.tsx → ...ponents/page_wrapper/bottom_bar/index.tsx
@@ -7,40 +7,19 @@
 
 /* eslint-disable react/display-name */
 
-import React, { useMemo, useRef } from 'react';
-import styled from 'styled-components';
+import React, { useRef } from 'react';
 import { KibanaPageTemplateProps } from '../../../../../../../../src/plugins/kibana_react/public';
 import { useKibana } from '../../../../common/lib/kibana';
-import { IS_DRAGGING_CLASS_NAME } from '../../../../common/components/drag_and_drop/drag_classnames';
 import { useShowTimeline } from '../../../../common/utils/timeline/use_show_timeline';
 import { useSourcererScope } from '../../../../common/containers/sourcerer';
 import { DETECTIONS_SUB_PLUGIN_ID } from '../../../../../common/constants';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
-import { getTimelineShowStatusByIdSelector } from '../../../../timelines/components/flyout/selectors';
-import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { AutoSaveWarningMsg } from '../../../../timelines/components/timeline/auto_save_warning';
 import { Flyout } from '../../../../timelines/components/flyout';
 import { useAppMountContext } from '../../../../app/app_mount_context';
 
-const bottomBarClassName = 'timeline-bottom-bar';
-
-const StyledBottomBar = styled.span<{ $isShowingTimelineOverlay?: boolean }>`
-  .${bottomBarClassName} {
-    animation: 'none !important'; // disable the default bottom bar slide animation
-    background: #ffffff; // Override bottom bar black background
-    color: inherit; // Necessary to override the bottom bar 'white text'
-    transform: ${(
-      { $isShowingTimelineOverlay } // Since the bottom bar wraps the whole overlay now, need to override any transforms when it is open
-    ) => ($isShowingTimelineOverlay ? 'none' : 'translateY(calc(100% - 50px))')};
-    z-index: ${({ theme }) => theme.eui.euiZLevel8};
-
-    .${IS_DRAGGING_CLASS_NAME} & {
-      // When a drag is in process the bottom flyout should slide up to allow a drop
-      transform: none;
-    }
-  }
-`;
+export const BOTTOM_BAR_CLASSNAME = 'timeline-bottom-bar';
 
 export const SecuritySolutionBottomBar = React.memo(() => {
   const subPluginId = useRef<string>('');
@@ -49,8 +28,6 @@ export const SecuritySolutionBottomBar = React.memo(() => {
   application.currentAppId$.subscribe((appId) => {
     subPluginId.current = appId ?? '';
   });
-  const getTimelineShowStatus = useMemo(() => getTimelineShowStatusByIdSelector(), []);
-  const { show } = useDeepEqualSelector((state) => getTimelineShowStatus(state, TimelineId.active));
 
   const [showTimeline] = useShowTimeline();
 
@@ -61,15 +38,15 @@ export const SecuritySolutionBottomBar = React.memo(() => {
   );
 
   return indicesExist && showTimeline ? (
-    <StyledBottomBar $isShowingTimelineOverlay={show}>
+    <>
       <AutoSaveWarningMsg />
       <Flyout timelineId={TimelineId.active} onAppLeave={onAppLeave} />
-    </StyledBottomBar>
+    </>
   ) : null;
 });
 
 export const SecuritySolutionBottomBarProps: KibanaPageTemplateProps['bottomBarProps'] = {
-  className: bottomBarClassName,
+  className: BOTTOM_BAR_CLASSNAME,
   position: 'fixed',
   usePortal: false,
 };
diff --git a/.../wrapper_page/global_kql_header/index.tsx → .../page_wrapper/global_kql_header/index.tsx b/.../wrapper_page/global_kql_header/index.tsx → .../page_wrapper/global_kql_header/index.tsx
@@ -7,7 +7,7 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { OutPortal } from 'react-reverse-portal';
-import { useGlobalHeaderPortal } from '../../hooks/use_global_header_portal';
+import { useGlobalHeaderPortal } from '../../../hooks/use_global_header_portal';
 
 /**
  * This component uses a reverse portal to render the global kql bar within the SecuritySolutionPageWrapper

diff --git a/...on/components/wrapper_page/index.test.tsx → ...on/components/page_wrapper/index.test.tsx b/...on/components/wrapper_page/index.test.tsx → ...on/components/page_wrapper/index.test.tsx
@@ -9,18 +9,18 @@ import { shallow } from 'enzyme';
 import React from 'react';
 
 import { TestProviders } from '../../mock';
-import { WrapperPage } from './index';
+import { SecuritySolutionPageWrapper } from './index';
 
-describe('WrapperPage', () => {
+describe('SecuritySolutionPageWrapper', () => {
   test('it renders', () => {
     const wrapper = shallow(
       <TestProviders>
-        <WrapperPage>
+        <SecuritySolutionPageWrapper>
           <p>{'Test page'}</p>
-        </WrapperPage>
+        </SecuritySolutionPageWrapper>
       </TestProviders>
     );
 
-    expect(wrapper.find('Memo(WrapperPageComponent)')).toMatchSnapshot();
+    expect(wrapper.find('Memo(SecuritySolutionPageWrapperComponent)')).toMatchSnapshot();
   });
 });
diff --git a/.../common/components/wrapper_page/index.tsx → .../common/components/page_wrapper/index.tsx b/.../common/components/wrapper_page/index.tsx → .../common/components/page_wrapper/index.tsx
@@ -5,21 +5,52 @@
  * 2.0.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { CommonProps, EuiPanel } from '@elastic/eui';
+import { useKibana } from '../../../common/lib/kibana';
 import { KibanaPageTemplate } from '../../../../../../../src/plugins/kibana_react/public';
 import { useGlobalFullScreen } from '../../../common/containers/use_full_screen';
 import { AppGlobalStyle } from '../../../common/components/page';
 import { gutterTimeline } from '../../../common/lib/helpers';
+import { TimelineId } from '../../../../common/types/timeline';
+import { IS_DRAGGING_CLASS_NAME } from '../../../common/components/drag_and_drop/drag_classnames';
+import { getTimelineShowStatusByIdSelector } from '../../../timelines/components/flyout/selectors';
+import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import { useThrottledResizeObserver } from '../../../common/components/utils';
-import { useKibana } from '../../../common/lib/kibana';
 import { GlobalKQLHeader } from './global_kql_header';
-import { SecuritySolutionBottomBar, SecuritySolutionBottomBarProps } from './bottom_bar';
+import {
+  BOTTOM_BAR_CLASSNAME,
+  SecuritySolutionBottomBar,
+  SecuritySolutionBottomBarProps,
+} from './bottom_bar';
 import { useSecurityPageTemplateNav } from './navigation';
 
 /* eslint-disable react/display-name */
 
+/**
+ * Need to apply the styles via a className to effect the containing bottom bar
+ * rather than applying them to the timeline bar directly
+ */
+const StyledKibanaPageTemplate = styled(KibanaPageTemplate)<{
+  $isShowingTimelineOverlay?: boolean;
+}>`
+  .${BOTTOM_BAR_CLASSNAME} {
+    animation: 'none !important'; // disable the default bottom bar slide animation
+    background: #ffffff; // Override bottom bar black background
+    color: inherit; // Necessary to override the bottom bar 'white text'
+    transform: ${(
+      { $isShowingTimelineOverlay } // Since the bottom bar wraps the whole overlay now, need to override any transforms when it is open
+    ) => ($isShowingTimelineOverlay ? 'none' : 'translateY(calc(100% - 50px))')};
+    z-index: ${({ theme }) => theme.eui.euiZLevel8};
+
+    .${IS_DRAGGING_CLASS_NAME} & {
+      // When a drag is in process the bottom flyout should slide up to allow a drop
+      transform: none;
+    }
+  }
+`;
+
 const StyledEuiPanel = styled(EuiPanel)<{
   $paddingTop: number;
   $noPadding?: boolean;
@@ -33,7 +64,7 @@ const StyledEuiPanel = styled(EuiPanel)<{
   padding-bottom: ${({ $withTimeline }) => ($withTimeline ? gutterTimeline : undefined)};
 `;
 
-interface WrapperPageProps {
+interface SecuritySolutionPageWrapperProps {
   children: React.ReactNode;
   noPadding?: boolean;
   noTimeline?: boolean;
@@ -42,13 +73,19 @@ interface WrapperPageProps {
   style?: Record<string, string>;
 }
 
-export const WrapperPage: React.FC<WrapperPageProps & CommonProps> = React.memo(
+export const SecuritySolutionPageWrapper: React.FC<
+  SecuritySolutionPageWrapperProps & CommonProps
+> = React.memo(
   ({ children, className, noPadding, noTimeline, pageHeaderChildren, style, ...otherProps }) => {
     const securityPageTemplateNav = useSecurityPageTemplateNav();
     const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
     useEffect(() => {
       setGlobalFullScreen(false); // exit full screen mode on page load
     }, [setGlobalFullScreen]);
+    const getTimelineShowStatus = useMemo(() => getTimelineShowStatusByIdSelector(), []);
+    const { show: isShowingTimelineOverlay } = useDeepEqualSelector((state) =>
+      getTimelineShowStatus(state, TimelineId.active)
+    );
 
     const { overlays } = useKibana().services;
     const { ref, height = 0 } = useThrottledResizeObserver(300);
@@ -63,7 +100,8 @@ export const WrapperPage: React.FC<WrapperPageProps & CommonProps> = React.memo(
     }, [banners$]); // Only un/re-subscribe if the Observable changes
 
     return (
-      <KibanaPageTemplate
+      <StyledKibanaPageTemplate
+        $isShowingTimelineOverlay={isShowingTimelineOverlay}
         bottomBarProps={SecuritySolutionBottomBarProps}
         bottomBar={<SecuritySolutionBottomBar />}
         paddingSize="none"
@@ -87,7 +125,7 @@ export const WrapperPage: React.FC<WrapperPageProps & CommonProps> = React.memo(
           {children}
           <AppGlobalStyle />
         </StyledEuiPanel>
-      </KibanaPageTemplate>
+      </StyledKibanaPageTemplate>
     );
   }
 );
diff --git a/...mponents/wrapper_page/navigation/index.ts → ...mponents/page_wrapper/navigation/index.ts b/...mponents/wrapper_page/navigation/index.ts → ...mponents/page_wrapper/navigation/index.ts
@@ -44,7 +44,7 @@ export const useSecurityPageTemplateNav = (): KibanaPageTemplateProps['solutionN
 
   const navItems = [
     {
-      name: null,
+      name: '',
       id: APP_ID,
       items: topLevelNavItems,
     },

diff --git a/...security_solution/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap b/...security_solution/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap