Added trusted app card component.

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.stories.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 from 'react';
+import { ThemeProvider } from 'styled-components';
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { KibanaContextProvider } from '../../../../../../../../../../src/plugins/kibana_react/public';
+import { TrustedApp } from '../../../../../../../common/endpoint/types';
+
+import { createSampleTrustedApp } from '../../../test_utils';
+
+import { TrustedAppCard } from '.';
+
+addDecorator((storyFn) => (
+  <KibanaContextProvider services={{ uiSettings: { get: () => 'MMM D, YYYY @ HH:mm:ss.SSS' } }}>
+    <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      {storyFn()}
+    </ThemeProvider>
+  </KibanaContextProvider>
+));
+
+storiesOf('Components|TrustedAppCard', module)
+  .add('default', () => {
+    const trustedApp: TrustedApp = createSampleTrustedApp(5);
+    trustedApp.created_at = '2020-09-17T14:52:33.899Z';
+    trustedApp.entries = [
+      {
+        field: 'process.path.text',
+        operator: 'included',
+        type: 'match',
+        value: '/some/path/on/file/system',
+      },
+    ];
+
+    return <TrustedAppCard trustedApp={trustedApp} onDelete={action('onClick')} />;
+  })
+  .add('multiple entries', () => {
+    const trustedApp: TrustedApp = createSampleTrustedApp(5);
+    trustedApp.created_at = '2020-09-17T14:52:33.899Z';
+    trustedApp.entries = [
+      {
+        field: 'process.path.text',
+        operator: 'included',
+        type: 'match',
+        value: '/some/path/on/file/system',
+      },
+      {
+        field: 'process.code_signature',
+        operator: 'included',
+        type: 'match',
+        value: 'Elastic',
+      },
+    ];
+
+    return <TrustedAppCard trustedApp={trustedApp} onDelete={action('onClick')} />;
+  });

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_app_card/index.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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, useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTableFieldDataColumnType } from '@elastic/eui';
+
+import {
+  Immutable,
+  TrustedApp,
+  MacosLinuxConditionEntry,
+  WindowsConditionEntry,
+} from '../../../../../../../common/endpoint/types';
+
+import { FormattedDate } from '../../../../../../common/components/formatted_date';
+import { ConditionsTable } from '../../../../../../common/components/conditions_table';
+import {
+  ItemDetailsAction,
+  ItemDetailsCard,
+  ItemDetailsPropertySummary,
+} from '../../../../../../common/components/item_details_card';
+
+import { OS_TITLES, PROPERTY_TITLES, ENTRY_PROPERTY_TITLES } from '../../translations';
+
+type Entry = MacosLinuxConditionEntry | WindowsConditionEntry;
+
+const getEntriesColumnDefinitions = (): Array<EuiTableFieldDataColumnType<Entry>> => [
+  {
+    field: 'field',
+    name: ENTRY_PROPERTY_TITLES.field,
+    sortable: false,
+    truncateText: true,
+    textOnly: true,
+    width: '30%',
+  },
+  {
+    field: 'operator',
+    name: ENTRY_PROPERTY_TITLES.operator,
+    sortable: false,
+    truncateText: true,
+    width: '20%',
+  },
+  {
+    field: 'value',
+    name: ENTRY_PROPERTY_TITLES.value,
+    sortable: false,
+    truncateText: true,
+    width: '60%',
+  },
+];
+
+interface TrustedAppCardProps {
+  trustedApp: Immutable<TrustedApp>;
+  onDelete: (id: string) => void;
+}
+
+export const TrustedAppCard = memo(({ trustedApp, onDelete }: TrustedAppCardProps) => {
+  const handleDelete = useCallback(() => onDelete(trustedApp.id), [onDelete, trustedApp.id]);
+
+  return (
+    <ItemDetailsCard>
+      <ItemDetailsPropertySummary name={PROPERTY_TITLES.name} value={trustedApp.name} />
+      <ItemDetailsPropertySummary name={PROPERTY_TITLES.os} value={OS_TITLES[trustedApp.os]} />
+      <ItemDetailsPropertySummary
+        name={PROPERTY_TITLES.created_at}
+        value={
+          <FormattedDate
+            fieldName={PROPERTY_TITLES.created_at}
+            value={trustedApp.created_at}
+            className="eui-textTruncate"
+          />
+        }
+      />
+      <ItemDetailsPropertySummary name={PROPERTY_TITLES.created_by} value={trustedApp.created_by} />
+
+      <ConditionsTable
+        columns={useMemo(() => getEntriesColumnDefinitions(), [])}
+        items={useMemo(() => [...trustedApp.entries], [trustedApp.entries])}
+        badge="and"
+        responsive
+      />
+
+      <ItemDetailsAction size="s" color="danger" onClick={handleDelete}>
+        {i18n.translate('xpack.securitySolution.trustedapps.card.removeButtonLabel', {
+          defaultMessage: 'Remove',
+        })}
+      </ItemDetailsAction>
+    </ItemDetailsCard>
+  );
+});
+
+TrustedAppCard.displayName = 'TrustedAppCard';