Custom Styled Flyout Panel sub-header component

elastic · Apr 14, 2020 · 8b5182d · 8b5182d
1 parent ed9f2c5
commit 8b5182d
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 34 deletions.
diff --git a/...endpoint/public/applications/endpoint/view/hosts/details/components/flyout_sub_header.tsx b/...endpoint/public/applications/endpoint/view/hosts/details/components/flyout_sub_header.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo } from 'react';
+import { EuiFlyoutHeader, CommonProps, EuiButtonEmpty } from '@elastic/eui';
+import styled from 'styled-components';
+
+export type FlyoutSubHeaderProps = CommonProps & {
+  children: React.ReactNode;
+  backButton?: {
+    title: string;
+    onClick: (event: React.MouseEvent) => void;
+    href?: string;
+  };
+};
+
+const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
+  padding: ${props => props.theme.eui.paddingSizes.s};
+
+  &.hasButtons {
+    .buttons {
+      padding-bottom: ${props => props.theme.eui.paddingSizes.s};
+    }
+
+    .back-button-content {
+      padding-left: 0;
+      &-text {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .flyout-content {
+    padding-left: ${props => props.theme.eui.paddingSizes.m};
+  }
+`;
+
+const BUTTON_CONTENT_PROPS = Object.freeze({ className: 'back-button-content' });
+const BUTTON_TEXT_PROPS = Object.freeze({ className: 'back-button-content-text' });
+
+/**
+ * A Eui Flyout Header component that has its styles adjusted to display a panel sub-header.
+ * Component also provides a way to display a "back" button above the header title.
+ */
+export const FlyoutSubHeader = memo<FlyoutSubHeaderProps>(
+  ({ children, backButton, ...otherProps }) => {
+    return (
+      <StyledEuiFlyoutHeader hasBorder {...otherProps} className={backButton && `hasButtons`}>
+        {backButton && (
+          <div className="buttons">
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiButtonEmpty
+              data-test-subj="flyoutSubHeaderBackButton"
+              iconType="arrowLeft"
+              contentProps={BUTTON_CONTENT_PROPS}
+              textProps={BUTTON_TEXT_PROPS}
+              size="xs"
+              href={backButton?.href ?? ''}
+              onClick={backButton?.onClick}
+            >
+              {backButton?.title}
+            </EuiButtonEmpty>
+          </div>
+        )}
+        <div className={'flyout-content'}>{children}</div>
+      </StyledEuiFlyoutHeader>
+    );
+  }
+);
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/index.tsx
@@ -12,17 +12,18 @@ import {
   EuiTitle,
   EuiLoadingContent,
   EuiSpacer,
-  EuiButtonEmpty,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { useHostListSelector } from '../hooks';
 import { urlFromQueryParams } from '../url_from_query_params';
 import { uiQueryParams, detailsData, detailsError, showView } from '../../../store/hosts/selectors';
 import { HostDetails } from './host_details';
 import { PolicyResponse } from './policy_response';
 import { HostMetadata } from '../../../../../../common/types';
+import { FlyoutSubHeader } from './components/flyout_sub_header';
 
 export const HostDetailsFlyout = memo(() => {
   const history = useHistory();
@@ -93,47 +94,35 @@ const PolicyResponseFlyoutPanel = memo<{
 }>(({ hostMeta }) => {
   const history = useHistory();
   const { show, ...queryParams } = useHostListSelector(uiQueryParams);
-  const detailsUri = useMemo(() => {
-    return urlFromQueryParams({
+  const backButtonProp = useMemo(() => {
+    const detailsUri = urlFromQueryParams({
       ...queryParams,
       selected_host: hostMeta.host.id,
     });
-  }, [hostMeta.host.id, queryParams]);
-  const buttonContentProps = useMemo(() => {
-    return { style: { paddingLeft: '0' } };
-  }, []);
+    return {
+      title: i18n.translate('xpack.endpoint.host.policyResponse.backLinkTitle', {
+        defaultMessage: 'Endpoint Details',
+      }),
+      href: '?' + detailsUri.search,
+      onClick: ev => {
+        ev.preventDefault();
+        history.push(detailsUri);
+      },
+    };
+  }, [history, hostMeta.host.id, queryParams]);
 
   return (
     <>
-      <EuiFlyoutHeader hasBorder>
-        <>
-          {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
-          <EuiButtonEmpty
-            data-test-subj="backToHostDetails"
-            iconType="arrowLeft"
-            contentProps={buttonContentProps}
-            size="xs"
-            href={'?' + detailsUri.search}
-            onClick={(ev: React.MouseEvent) => {
-              ev.preventDefault();
-              history.push(detailsUri);
-            }}
-          >
+      <FlyoutSubHeader backButton={backButtonProp}>
+        <EuiTitle size="xxs">
+          <h3>
             <FormattedMessage
-              id="xpack.endpoint.host.policyResponse.detailsLinkTitle"
-              defaultMessage="Endpoint Details"
+              id="xpack.endpoint.host.policyResponse.title"
+              defaultMessage="Policy Response"
             />
-          </EuiButtonEmpty>
-          <EuiTitle size="xs">
-            <h3>
-              <FormattedMessage
-                id="xpack.endpoint.host.policyResponse.title"
-                defaultMessage="Policy Response"
-              />
-            </h3>
-          </EuiTitle>
-        </>
-      </EuiFlyoutHeader>
+          </h3>
+        </EuiTitle>
+      </FlyoutSubHeader>
       <EuiFlyoutBody>
         <PolicyResponse />
       </EuiFlyoutBody>