[Cloud Posture] search bar styles update (#128361)

x-pack/plugins/cloud_security_posture/public/pages/findings/findings.tsx

@@ -5,24 +5,18 @@
  * 2.0.
  */
 import React from 'react';
-import type { EuiPageHeaderProps } from '@elastic/eui';
 import { useKubebeatDataView } from '../../common/api/use_kubebeat_data_view';
 import { allNavigationItems } from '../../common/navigation/constants';
 import { useCspBreadcrumbs } from '../../common/navigation/use_csp_breadcrumbs';
 import { FindingsContainer } from './findings_container';
 import { CspPageTemplate } from '../../components/csp_page_template';
-import { FINDINGS } from './translations';
-
-const pageHeader: EuiPageHeaderProps = {
-  pageTitle: FINDINGS,
-};
 
 export const Findings = () => {
   const dataViewQuery = useKubebeatDataView();
   useCspBreadcrumbs([allNavigationItems.findings]);
 
   return (
-    <CspPageTemplate pageHeader={pageHeader} query={dataViewQuery}>
+    <CspPageTemplate paddingSize="none" query={dataViewQuery}>
       {dataViewQuery.data && <FindingsContainer dataView={dataViewQuery.data} />}
     </CspPageTemplate>
   );

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_container.tsx

@@ -5,7 +5,9 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { FindingsTable } from './findings_table';
 import { FindingsSearchBar } from './findings_search_bar';
 import * as TEST_SUBJECTS from './test_subjects';
@@ -15,14 +17,9 @@ import { useUrlQuery } from '../../common/hooks/use_url_query';
 import { useFindings, type CspFindingsRequest } from './use_findings';
 
 // TODO: define this as a schema with default values
-// need to get Query and DateRange schema
 const getDefaultQuery = (): CspFindingsRequest => ({
   query: { language: 'kuery', query: '' },
   filters: [],
-  dateRange: {
-    from: 'now-15m',
-    to: 'now',
-  },
   sort: [{ ['@timestamp']: SortDirection.desc }],
   from: 0,
   size: 10,
@@ -31,7 +28,7 @@ const getDefaultQuery = (): CspFindingsRequest => ({
 export const FindingsContainer = ({ dataView }: { dataView: DataView }) => {
   const { urlQuery: findingsQuery, setUrlQuery, key } = useUrlQuery(getDefaultQuery);
   const findingsResult = useFindings(dataView, findingsQuery, key);
-
+  const { euiTheme } = useEuiTheme();
   return (
     <div data-test-subj={TEST_SUBJECTS.FINDINGS_CONTAINER}>
       <FindingsSearchBar
@@ -40,8 +37,23 @@ export const FindingsContainer = ({ dataView }: { dataView: DataView }) => {
         {...findingsQuery}
         {...findingsResult}
       />
-      <EuiSpacer />
-      <FindingsTable setQuery={setUrlQuery} {...findingsQuery} {...findingsResult} />
+      <div
+        css={css`
+          padding: ${euiTheme.size.l};
+        `}
+      >
+        <PageTitle />
+        <EuiSpacer />
+        <FindingsTable setQuery={setUrlQuery} {...findingsQuery} {...findingsResult} />
+      </div>
     </div>
   );
 };
+
+const PageTitle = () => (
+  <EuiTitle size="l">
+    <h2>
+      <FormattedMessage id="xpack.csp.findings.findingsTitle" defaultMessage="Findings" />
+    </h2>
+  </EuiTitle>
+);

x-pack/plugins/cloud_security_posture/public/pages/findings/findings_search_bar.tsx

@@ -5,14 +5,17 @@
  * 2.0.
  */
 import React from 'react';
+import { css } from '@emotion/react';
+import { EuiThemeComputed, useEuiTheme } from '@elastic/eui';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import * as TEST_SUBJECTS from './test_subjects';
 import type { CspFindingsRequest, CspFindingsResponse } from './use_findings';
 import type { CspClientPluginStartDeps } from '../../types';
 import { PLUGIN_NAME } from '../../../common';
 import type { DataView } from '../../../../../../src/plugins/data/common';
+import { FINDINGS_SEARCH_PLACEHOLDER } from './translations';
 
-type SearchBarQueryProps = Pick<CspFindingsRequest, 'query' | 'filters' | 'dateRange'>;
+type SearchBarQueryProps = Pick<CspFindingsRequest, 'query' | 'filters'>;
 
 interface BaseFindingsSearchBarProps extends SearchBarQueryProps {
   setQuery(v: Partial<SearchBarQueryProps>): void;
@@ -22,36 +25,43 @@ type FindingsSearchBarProps = CspFindingsResponse & BaseFindingsSearchBarProps;
 
 export const FindingsSearchBar = ({
   dataView,
-  dateRange,
   query,
   filters,
   status,
   setQuery,
 }: FindingsSearchBarProps & { dataView: DataView }) => {
+  const { euiTheme } = useEuiTheme();
   const {
     unifiedSearch: {
       ui: { SearchBar },
     },
   } = useKibana<CspClientPluginStartDeps>().services;
 
   return (
-    <SearchBar
-      appName={PLUGIN_NAME}
-      dataTestSubj={TEST_SUBJECTS.FINDINGS_SEARCH_BAR}
-      showFilterBar={true}
-      showDatePicker={true}
-      showQueryBar={true}
-      showQueryInput={true}
-      showSaveQuery={false}
-      isLoading={status === 'loading'}
-      indexPatterns={[dataView]}
-      dateRangeFrom={dateRange.from}
-      dateRangeTo={dateRange.to}
-      query={query}
-      filters={filters}
-      onQuerySubmit={setQuery}
-      // @ts-expect-error onFiltersUpdated is a valid prop on SearchBar
-      onFiltersUpdated={(value: Filter[]) => setQuery({ filters: value })}
-    />
+    <div css={getContainerStyle(euiTheme)}>
+      <SearchBar
+        appName={PLUGIN_NAME}
+        dataTestSubj={TEST_SUBJECTS.FINDINGS_SEARCH_BAR}
+        showFilterBar={true}
+        showQueryBar={true}
+        showQueryInput={true}
+        showDatePicker={false}
+        showSaveQuery={false}
+        isLoading={status === 'loading'}
+        indexPatterns={[dataView]}
+        query={query}
+        filters={filters}
+        onQuerySubmit={setQuery}
+        // @ts-expect-error onFiltersUpdated is a valid prop on SearchBar
+        onFiltersUpdated={(value: Filter[]) => setQuery({ filters: value })}
+        placeholder={FINDINGS_SEARCH_PLACEHOLDER}
+      />
+    </div>
   );
 };
+
+const getContainerStyle = (theme: EuiThemeComputed) => css`
+  border-bottom: ${theme.border.thin};
+  background-color: ${theme.colors.body};
+  padding: ${theme.size.base};
+`;

x-pack/plugins/cloud_security_posture/public/pages/findings/translations.ts

@@ -38,10 +38,6 @@ export const OS = i18n.translate('xpack.csp.findings.osLabel', {
   defaultMessage: 'OS',
 });
 
-export const FINDINGS = i18n.translate('xpack.csp.findings.findingsLabel', {
-  defaultMessage: 'Findings',
-});
-
 export const RESOURCE = i18n.translate('xpack.csp.findings.resourceLabel', {
   defaultMessage: 'Resource',
 });
@@ -190,3 +186,8 @@ export const PLATFORM = i18n.translate('xpack.csp.findings.platformLabel', {
 export const NO_FINDINGS = i18n.translate('xpack.csp.findings.nonFindingsLabel', {
   defaultMessage: 'There are no Findings',
 });
+
+export const FINDINGS_SEARCH_PLACEHOLDER = i18n.translate(
+  'xpack.csp.findings.searchBar.searchPlaceholder',
+  { defaultMessage: 'Search findings (eg. resource.section : "API Server")' }
+);

x-pack/plugins/cloud_security_posture/public/pages/findings/use_findings.ts

@@ -8,13 +8,12 @@ import type { Filter } from '@kbn/es-query';
 import { type UseQueryResult, useQuery } from 'react-query';
 import type { AggregationsAggregate, SearchResponse } from '@elastic/elasticsearch/lib/api/types';
 import { number } from 'io-ts';
-import { extractErrorMessage, isNonNullable } from '../../../common/utils/helpers';
+import { extractErrorMessage } from '../../../common/utils/helpers';
 import type {
   DataView,
   EsQuerySortValue,
   IKibanaSearchResponse,
   SerializedSearchSourceFields,
-  TimeRange,
 } from '../../../../../../src/plugins/data/common';
 import type { CspClientPluginStartDeps } from '../../types';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
@@ -30,7 +29,6 @@ interface CspFindings {
 export interface CspFindingsRequest
   extends Required<Pick<SerializedSearchSourceFields, 'sort' | 'size' | 'from' | 'query'>> {
   filters: Filter[];
-  dateRange: TimeRange;
 }
 
 type ResponseProps = 'data' | 'error' | 'status';
@@ -86,18 +84,13 @@ const extractFindings = ({
 const createFindingsSearchSource = (
   {
     query,
-    dateRange,
     dataView,
     filters,
     ...rest
-  }: Omit<CspFindingsRequest, 'queryKey'> & {
-    dataView: DataView;
-  },
+  }: Omit<CspFindingsRequest, 'queryKey'> & { dataView: DataView },
   queryService: CspClientPluginStartDeps['data']['query']
 ): SerializedSearchSourceFields => {
   if (query) queryService.queryString.setQuery(query);
-  const timeFilter = queryService.timefilter.timefilter.createFilter(dataView, dateRange);
-  queryService.filterManager.setFilters([...filters, timeFilter].filter(isNonNullable));
 
   return {
     ...rest,