[Cloud Security] Added new Benchmark Error message component (#154636)

## Summary

This ticket is part of Quick Wins ticket.
This PR updates the Error message that user receive when the app can't
retrieve Benchmark data due to issue with the API


<img width="1423" alt="Screen Shot 2023-04-09 at 12 39 31 AM"
src="https://user-images.githubusercontent.com/8703149/230760566-3e172d5d-d795-4d80-982c-ba6677153c52.png">

x-pack/plugins/cloud_security_posture/public/pages/benchmarks/benchmarks.test.tsx

@@ -17,6 +17,7 @@ import { useCspBenchmarkIntegrations } from './use_csp_benchmark_integrations';
 import { useCspSetupStatusApi } from '../../common/api/use_setup_status_api';
 import { useSubscriptionStatus } from '../../common/hooks/use_subscription_status';
 import { useCspIntegrationLink } from '../../common/navigation/use_csp_integration_link';
+import { ERROR_STATE_TEST_SUBJECT } from './benchmarks_table';
 
 jest.mock('./use_csp_benchmark_integrations');
 jest.mock('../../common/api/use_setup_status_api');
@@ -80,7 +81,7 @@ describe('<Benchmarks />', () => {
     const error = new Error('message');
     renderBenchmarks(createReactQueryResponse({ status: 'error', error }));
 
-    expect(screen.getByText(error.message)).toBeInTheDocument();
+    expect(screen.getByTestId(ERROR_STATE_TEST_SUBJECT)).toBeInTheDocument();
   });
 
   it('renders the benchmarks table', () => {

x-pack/plugins/cloud_security_posture/public/pages/benchmarks/benchmarks_table.tsx

@@ -14,18 +14,24 @@ import {
   EuiLink,
   EuiToolTip,
   EuiAvatar,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 import { pagePathGetters } from '@kbn/fleet-plugin/public';
 import { i18n } from '@kbn/i18n';
 import type { PackagePolicy } from '@kbn/fleet-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { TimestampTableCell } from '../../components/timestamp_table_cell';
 import type { Benchmark } from '../../../common/types';
 import { useKibana } from '../../common/hooks/use_kibana';
 import { benchmarksNavigation } from '../../common/navigation/constants';
 import * as TEST_SUBJ from './test_subjects';
 import { getEnabledCspIntegrationDetails } from '../../common/utils/get_enabled_csp_integration_details';
+import { isCommonError } from '../../components/cloud_posture_page';
+import { FullSizeCenteredPage } from '../../components/full_size_centered_page';
+
+export const ERROR_STATE_TEST_SUBJECT = 'benchmark_page_error';
 
 interface BenchmarksTableProps
   extends Pick<EuiBasicTableProps<Benchmark>, 'loading' | 'error' | 'noItemsMessage' | 'sorting'>,
@@ -67,6 +73,39 @@ const IntegrationButtonLink = ({
   );
 };
 
+const ErrorMessageComponent = (error: { error: unknown }) => (
+  <FullSizeCenteredPage>
+    <EuiEmptyPrompt
+      color="danger"
+      iconType="warning"
+      data-test-subj={ERROR_STATE_TEST_SUBJECT}
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.csp.benchmarks.benchmarksTable.errorRenderer.errorTitle"
+            defaultMessage="We couldn't fetch your cloud security posture benchmark data"
+          />
+        </h2>
+      }
+      body={
+        isCommonError(error) ? (
+          <p>
+            <FormattedMessage
+              id="xpack.csp.benchmarks.benchmarksTable.errorRenderer.errorDescription"
+              defaultMessage="{error} {statusCode}: {body}"
+              values={{
+                error: error.body.error,
+                statusCode: error.body.statusCode,
+                body: error.body.message,
+              }}
+            />
+          </p>
+        ) : undefined
+      }
+    />
+  </FullSizeCenteredPage>
+);
+
 const BENCHMARKS_TABLE_COLUMNS: Array<EuiBasicTableColumn<Benchmark>> = [
   {
     field: 'package_policy.name',
@@ -193,6 +232,10 @@ export const BenchmarksTable = ({
     setQuery({ page: { ...page, index: page.index + 1 }, sort });
   };
 
+  if (error) {
+    return <ErrorMessageComponent error={error} />;
+  }
+
   return (
     <EuiBasicTable
       data-test-subj={rest['data-test-subj']}