[Enterprise Search] Rewire overview designs. (#130066)

* Rewire overview page with new designs

- Fix issues caused by VS Code
- Bind add content button for empty prompt
- Add content icons to assets
- Add text for icons and tooltip
- Add link to Elasticsearch Guide
- Add context menu for create button
- Add some more css changes that VS Code deleted
- Add Header popover to show deployment details
- Filter SVG colors

* Fix some issues

* Review changes

* Revert some more changes

* Fix i18n issues

* Lint fixes for sass file

* Re-fix linting

* Add render tests

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Update x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx

Co-authored-by: Scotty Bollinger <[email protected]>

* Add tests for overview content

Also made some changes to reduce the churn when we implement this
feature

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Scotty Bollinger <[email protected]>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_card/elasticsearch_card.tsx

@@ -11,9 +11,9 @@ import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle, EuiSpacer } fro
 
 import { i18n } from '@kbn/i18n';
 
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
 import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { ELASTICSEARCH_GUIDE_PATH } from '../../routes';
-import { ElasticsearchResources } from '../elasticsearch_resources';
 
 export const ElasticsearchCard: React.FC = () => {
   return (

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/elasticsearch_guide/elasticsearch_guide.tsx

@@ -24,10 +24,10 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { docLinks } from '../../../shared/doc_links';
+import { ElasticsearchResources } from '../../../shared/elasticsearch_resources';
 
 import { ElasticsearchClientInstructions } from '../elasticsearch_client_instructions';
 import { ElasticsearchCloudId } from '../elasticsearch_cloud_id';
-import { ElasticsearchResources } from '../elasticsearch_resources';
 
 // Replace FormattedMessage with i18n strings
 

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/index.ts

@@ -7,3 +7,4 @@
 
 export { useEnterpriseSearchOverviewNav } from './nav';
 export { EnterpriseSearchOverviewPageTemplate } from './page_template';
+export { EnterpriseSearchOverviewHeaderActions } from './kibana_header_actions';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 React from 'react';
+
+import { mount } from 'enzyme';
+
+import { EuiPopover, EuiButtonEmpty } from '@elastic/eui';
+
+import { EnterpriseSearchOverviewHeaderActions } from './kibana_header_actions';
+
+describe('Enterprise Search overview HeaderActions', () => {
+  it('renders', () => {
+    const wrapper = mount(<EnterpriseSearchOverviewHeaderActions />);
+    const popover = wrapper.find(EuiPopover);
+
+    expect(popover.find(EuiButtonEmpty).text()).toContain('Deployment details');
+    expect(popover.prop('isOpen')).toBeFalsy();
+  });
+
+  it('opens popover when clicked', () => {
+    const wrapper = mount(<EnterpriseSearchOverviewHeaderActions />);
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toBeFalsy();
+    wrapper.find(EuiPopover).find(EuiButtonEmpty).simulate('click');
+    wrapper.update();
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toBeTruthy();
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/layout/kibana_header_actions.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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 React, { useState } from 'react';
+
+import {
+  EuiHeaderLinks,
+  EuiIcon,
+  EuiCopy,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiPopover,
+  EuiFormRow,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiPopoverTitle,
+  EuiPopoverFooter,
+  EuiText,
+} from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+export const EnterpriseSearchOverviewHeaderActions: React.FC = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  // TODO change it with actual value
+  // TODO make this conditional only for users on cloud, as on-prem users will not have a deployment id to show.
+  const clientId = 'fgdshjafghj13eshfdjag718yfhjdskf';
+
+  return (
+    <EuiHeaderLinks>
+      <EuiPopover
+        button={
+          <EuiButtonEmpty onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+            <EuiIcon type="iInCircle" />
+            &nbsp;
+            {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails', {
+              defaultMessage: 'Deployment details',
+            })}
+          </EuiButtonEmpty>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+      >
+        <EuiPopoverTitle>
+          {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails', {
+            defaultMessage: 'Deployment details',
+          })}
+        </EuiPopoverTitle>
+        <EuiText grow={false}>
+          <p>
+            {i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails.description', {
+              defaultMessage:
+                'Send data to Elastic from your applications by referencing your deployment and Elasticsearch information.',
+            })}
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiFormRow
+          fullWidth
+          label={i18n.translate('xpack.enterpriseSearch.overview.deploymentDetails.clientIdLabel', {
+            defaultMessage: 'Client ID',
+          })}
+        >
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow>
+              <EuiFieldText readOnly value={clientId} fullWidth />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiCopy
+                beforeMessage={i18n.translate(
+                  'xpack.enterpriseSearch.overview.deploymentDetails.copyToClipboard',
+                  { defaultMessage: 'Copy to clipboard' }
+                )}
+                afterMessage={i18n.translate(
+                  'xpack.enterpriseSearch.overview.deploymentDetails.copiedToClipboard',
+                  { defaultMessage: 'Copied Client ID to clipboard' }
+                )}
+                textToCopy={clientId}
+              >
+                {(copy) => (
+                  <EuiButtonIcon
+                    aria-label={i18n.translate(
+                      'xpack.enterpriseSearch.overview.deploymentDetails.copyButtonAriaLabel',
+                      { defaultMessage: 'Copy to clipboard' }
+                    )}
+                    onClick={copy}
+                    iconType="copyClipboard"
+                    color="primary"
+                    display="base"
+                    size="s"
+                  />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+        <EuiPopoverFooter>
+          {/* TODO need link to Create and manage API keys*/}
+          <EuiButton>
+            {i18n.translate('xpack.enterpriseSearch.overview.createAndManageButton', {
+              defaultMessage: 'Create and manage API keys',
+            })}
+          </EuiButton>
+        </EuiPopoverFooter>
+      </EuiPopover>
+    </EuiHeaderLinks>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { OverviewContent } from './overview_content';

x-pack/plugins/enterprise_search/public/applications/enterprise_search_overview/components/overview_content/overview_content.test.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 { setMockValues } from '../../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+import { AddContentEmptyPrompt } from '../../../shared/add_content_empty_prompt';
+import { GettingStartedSteps } from '../../../shared/getting_started_steps';
+
+import { LicenseCallout } from '../license_callout';
+import { SetupGuideCta } from '../setup_guide';
+import { TrialCallout } from '../trial_callout';
+
+import { OverviewContent } from '.';
+
+describe('OverviewContent', () => {
+  const props = {
+    access: {},
+    isWorkplaceSearchAdmin: true,
+  };
+
+  it('renders the overview page, Getting Started steps & setup guide CTAs with no host set', () => {
+    setMockValues({ config: { host: '' } });
+    const wrapper = shallow(<OverviewContent {...props} />);
+
+    expect(wrapper.find(GettingStartedSteps)).toHaveLength(1);
+    expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(1);
+    expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
+    expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+  });
+
+  it('renders the trial callout', () => {
+    setMockValues({ config: { host: 'localhost' } });
+    const wrapper = shallow(<OverviewContent {...props} />);
+
+    expect(wrapper.find(TrialCallout)).toHaveLength(1);
+  });
+
+  // TODO Refactor this and other tests according to the search indices permissions
+  describe('access checks when host is set', () => {
+    beforeEach(() => {
+      setMockValues({ config: { host: 'localhost' } });
+    });
+
+    it('renders the license callout when user has access to a product', () => {
+      setMockValues({ config: { host: 'localhost' } });
+      const wrapper = shallow(
+        <OverviewContent {...props} access={{ hasWorkplaceSearchAccess: true }} />
+      );
+
+      expect(wrapper.find(LicenseCallout)).toHaveLength(1);
+    });
+
+    it('renders empty prompt and overview or license callout if the user does not have access', () => {
+      const wrapper = shallow(<OverviewContent {...props} />);
+
+      expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
+      expect(wrapper.find(GettingStartedSteps)).toHaveLength(0);
+      expect(wrapper.find(AddContentEmptyPrompt)).toHaveLength(0);
+      expect(wrapper.find(LicenseCallout)).toHaveLength(0);
+      expect(wrapper.find(SetupGuideCta)).toHaveLength(0);
+    });
+  });
+});