Uses styled components instead of modify compontent style directly an…

…d small improvements on test -> ts
elastic · May 28, 2021 · 29014e8 · 29014e8
1 parent 0cc6766
commit 29014e8
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/...ager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx b/...ager_integration/endpoint_package_custom_extension/components/exception_items_summary.tsx
@@ -44,7 +44,7 @@ interface ExceptionItemsSummaryProps {
 
 export const ExceptionItemsSummary = memo<ExceptionItemsSummaryProps>(({ stats }) => {
   return (
-    <EuiFlexGroup responsive={false}>
+    <EuiFlexGroup alignItems="center" justifyContent="spaceAround">
       {SUMMARY_KEYS.map((stat) => {
         return (
           <EuiFlexItem>
@@ -68,12 +68,7 @@ const SummaryStat: FC<{ value: number; color?: EuiBadgeProps['color'] }> = memo(
   ({ children, value, color, ...commonProps }) => {
     return (
       <EuiText className="eui-displayInlineBlock" size="s">
-        <EuiFlexGroup
-          responsive={false}
-          justifyContent="center"
-          direction="row"
-          alignItems="center"
-        >
+        <EuiFlexGroup justifyContent="center" direction="row" alignItems="center">
           <EuiFlexItem grow={false} style={color === 'primary' ? CSS_BOLD : undefined}>
             {children}
           </EuiFlexItem>

diff --git a/...ger_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx b/...ger_integration/endpoint_package_custom_extension/components/fleet_event_filters_card.tsx
@@ -7,7 +7,7 @@
 
 import React, { memo, useMemo, useState, useEffect } from 'react';
 import { ApplicationStart, CoreStart } from 'kibana/public';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiPanel, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -23,6 +23,7 @@ import { useToasts } from '../../../../../../../common/lib/kibana';
 import { LinkWithIcon } from './link_with_icon';
 import { ExceptionItemsSummary } from './exception_items_summary';
 import { EventFiltersHttpService } from '../../../../../event_filters/service';
+import { StyledEuiFlexGridGroup, StyledEuiFlexGridItem } from './styled_components';
 
 export const FleetEventFiltersCard = memo<PackageCustomExtensionComponentProps>(({ pkgkey }) => {
   const {
@@ -77,8 +78,8 @@ export const FleetEventFiltersCard = memo<PackageCustomExtensionComponentProps>(
 
   return (
     <EuiPanel paddingSize="l">
-      <EuiFlexGroup alignItems="baseline">
-        <EuiFlexItem grow={false}>
+      <StyledEuiFlexGridGroup alignItems="baseline" justifyContent="center">
+        <StyledEuiFlexGridItem gridArea="title" alignItems="flex-start">
           <EuiText>
             <h4>
               <FormattedMessage
@@ -87,11 +88,11 @@ export const FleetEventFiltersCard = memo<PackageCustomExtensionComponentProps>(
               />
             </h4>
           </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ alignItems: 'center', justifyContent: 'center' }}>
+        </StyledEuiFlexGridItem>
+        <StyledEuiFlexGridItem gridArea="summary">
           <ExceptionItemsSummary stats={stats} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        </StyledEuiFlexGridItem>
+        <StyledEuiFlexGridItem gridArea="link" alignItems="flex-end">
           <>
             <LinkWithIcon
               appId={MANAGEMENT_APP_ID}
@@ -106,8 +107,8 @@ export const FleetEventFiltersCard = memo<PackageCustomExtensionComponentProps>(
               />
             </LinkWithIcon>
           </>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </StyledEuiFlexGridItem>
+      </StyledEuiFlexGridGroup>
     </EuiPanel>
   );
 });

diff --git a/...ager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx b/...ager_integration/endpoint_package_custom_extension/components/fleet_trusted_apps_card.tsx
@@ -7,7 +7,7 @@
 
 import React, { memo, useMemo, useState, useEffect } from 'react';
 import { ApplicationStart, CoreStart } from 'kibana/public';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiPanel, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -26,6 +26,7 @@ import { useToasts } from '../../../../../../../common/lib/kibana';
 import { LinkWithIcon } from './link_with_icon';
 import { ExceptionItemsSummary } from './exception_items_summary';
 import { TrustedAppsHttpService } from '../../../../../trusted_apps/service';
+import { StyledEuiFlexGridGroup, StyledEuiFlexGridItem } from './styled_components';
 
 export const FleetTrustedAppsCard = memo<PackageCustomExtensionComponentProps>(({ pkgkey }) => {
   const {
@@ -80,8 +81,8 @@ export const FleetTrustedAppsCard = memo<PackageCustomExtensionComponentProps>((
 
   return (
     <EuiPanel paddingSize="l">
-      <EuiFlexGroup alignItems="baseline">
-        <EuiFlexItem grow={false}>
+      <StyledEuiFlexGridGroup alignItems="baseline" justifyContent="center">
+        <StyledEuiFlexGridItem gridArea="title" alignItems="flex-start">
           <EuiText>
             <h4>
               <FormattedMessage
@@ -90,11 +91,11 @@ export const FleetTrustedAppsCard = memo<PackageCustomExtensionComponentProps>((
               />
             </h4>
           </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ alignItems: 'center', justifyContent: 'center' }}>
+        </StyledEuiFlexGridItem>
+        <StyledEuiFlexGridItem gridArea="summary">
           <ExceptionItemsSummary stats={stats} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        </StyledEuiFlexGridItem>
+        <StyledEuiFlexGridItem gridArea="link" alignItems="flex-end">
           <>
             <LinkWithIcon
               appId={MANAGEMENT_APP_ID}
@@ -109,8 +110,8 @@ export const FleetTrustedAppsCard = memo<PackageCustomExtensionComponentProps>((
               />
             </LinkWithIcon>
           </>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </StyledEuiFlexGridItem>
+      </StyledEuiFlexGridGroup>
     </EuiPanel>
   );
 });

diff --git a/...st_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx b/...st_manager_integration/endpoint_package_custom_extension/components/styled_components.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+export const StyledEuiFlexGridGroup = styled(EuiFlexGroup)`
+  display: grid;
+  grid-template-columns: 25% 45% 30%;
+  grid-template-areas: 'title summary link';
+`;
+
+export const StyledEuiFlexGridItem = styled(EuiFlexItem)<{
+  gridArea: string;
+  alignItems?: string;
+}>`
+  grid-area: ${({ gridArea }) => gridArea};
+  align-items: ${({ alignItems }) => alignItems ?? 'center'};
+  margin: 0px;
+  padding: 12px;
+`;
diff --git a/x-pack/test/lists_api_integration/security_and_spaces/tests/summary_exception_lists.ts b/x-pack/test/lists_api_integration/security_and_spaces/tests/summary_exception_lists.ts
@@ -7,27 +7,31 @@
 
 import expect from '@kbn/expect';
 
+import { ExceptionListSummarySchema } from '@kbn/securitysolution-io-ts-list-types';
 import { EXCEPTION_LIST_URL, EXCEPTION_LIST_ITEM_URL } from '@kbn/securitysolution-list-constants';
 import { LIST_ID } from '../../../../plugins/lists/common/constants.mock';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { getCreateExceptionListMinimalSchemaMock } from '../../../../plugins/lists/common/schemas/request/create_exception_list_schema.mock';
 import { getCreateExceptionListItemMinimalSchemaMock } from '../../../../plugins/lists/common/schemas/request/create_exception_list_item_schema.mock';
 import { createListsIndex, deleteListsIndex, deleteAllExceptions } from '../../utils';
 
+interface SummaryResponseType {
+  body: ExceptionListSummarySchema;
+}
 // eslint-disable-next-line import/no-default-export
 export default ({ getService }: FtrProviderContext) => {
   const supertest = getService('supertest');
   const es = getService('es');
 
   describe('summary_exception_lists', () => {
     describe('summary exception lists', () => {
+      beforeEach(async () => {
+        await createListsIndex(supertest);
+      });
       afterEach(async () => {
         await deleteListsIndex(supertest);
         await deleteAllExceptions(es);
       });
-      beforeEach(async () => {
-        await createListsIndex(supertest);
-      });
 
       it('should give a validation error if the list_id and the id are not supplied', async () => {
         const { body } = await supertest
@@ -43,18 +47,19 @@ export default ({ getService }: FtrProviderContext) => {
       });
 
       it('should return init summary when there are no items created', async () => {
-        const { body } = await supertest
+        const { body }: SummaryResponseType = await supertest
           .get(`${EXCEPTION_LIST_URL}/summary?list_id=${LIST_ID}`)
           .set('kbn-xsrf', 'true')
           .send()
           .expect(200);
 
-        expect(body).to.eql({
+        const expected: ExceptionListSummarySchema = {
           linux: 0,
           macos: 0,
           total: 0,
           windows: 0,
-        });
+        };
+        expect(body).to.eql(expected);
       });
 
       it('should return right summary when there are items created', async () => {
@@ -74,19 +79,19 @@ export default ({ getService }: FtrProviderContext) => {
             .expect(200);
         }
 
-        const { body } = await supertest
+        const { body }: SummaryResponseType = await supertest
           .get(`${EXCEPTION_LIST_URL}/summary?list_id=${LIST_ID}`)
           .set('kbn-xsrf', 'true')
           .send()
           .expect(200);
 
-        delete body.cursor;
-        expect(body).to.eql({
+        const expected: ExceptionListSummarySchema = {
           linux: 1,
           macos: 1,
           total: 3,
           windows: 1,
-        });
+        };
+        expect(body).to.eql(expected);
       });
     });
   });