[Workplace Search] PR#3362 to Kibana (#98207)

* Add StatusItem component

* Replace tooltip with new popover

* Consistant spacing

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/status_item/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 { StatusItem } from './status_item';

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/status_item/status_item.test.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { EuiPopover, EuiCopy, EuiButton, EuiButtonIcon } from '@elastic/eui';
+
+import { StatusItem } from './';
+
+describe('SourceRow', () => {
+  const details = ['foo', 'bar'];
+  it('renders', () => {
+    const wrapper = shallow(<StatusItem details={details} />);
+
+    expect(wrapper.find(EuiPopover)).toHaveLength(1);
+  });
+
+  it('renders the copy button', () => {
+    const copyMock = jest.fn();
+    const wrapper = shallow(<StatusItem details={details} />);
+    const copyEl = shallow(<div>{wrapper.find(EuiCopy).props().children(copyMock)}</div>);
+
+    expect(copyEl.find(EuiButton).props().onClick).toEqual(copyMock);
+  });
+
+  it('handles popover visibility toggle click', () => {
+    const wrapper = shallow(<StatusItem details={details} />);
+    const button = wrapper.find(EuiPopover).dive().find(EuiButtonIcon);
+    button.simulate('click');
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(true);
+
+    wrapper.find(EuiPopover).prop('closePopover')();
+
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(false);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/status_item/status_item.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 {
+  EuiCopy,
+  EuiButton,
+  EuiButtonIcon,
+  EuiToolTip,
+  EuiSpacer,
+  EuiCodeBlock,
+  EuiPopover,
+} from '@elastic/eui';
+
+import { COPY_TEXT, STATUS_POPOVER_TOOLTIP } from '../../../constants';
+
+interface StatusItemProps {
+  details: string[];
+}
+
+export const StatusItem: React.FC<StatusItemProps> = ({ details }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onButtonClick = () => setIsPopoverOpen((isOpen) => !isOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+  const formattedDetails = details.join('\n');
+
+  const tooltipPopoverTrigger = (
+    <EuiToolTip position="top" content={STATUS_POPOVER_TOOLTIP}>
+      <EuiButtonIcon
+        onClick={onButtonClick}
+        color="text"
+        iconType="questionInCircle"
+        aria-label={STATUS_POPOVER_TOOLTIP}
+      />
+    </EuiToolTip>
+  );
+
+  const infoPopover = (
+    <EuiPopover button={tooltipPopoverTrigger} isOpen={isPopoverOpen} closePopover={closePopover}>
+      <EuiCodeBlock
+        language="cmd"
+        fontSize="m"
+        paddingSize="m"
+        style={{ maxWidth: 300 }}
+        isCopyable
+      >
+        {formattedDetails}
+      </EuiCodeBlock>
+      <EuiSpacer size="s" />
+      <EuiCopy textToCopy={formattedDetails}>
+        {(copy) => (
+          <EuiButton size="s" iconType="copy" onClick={copy}>
+            {COPY_TEXT}
+          </EuiButton>
+        )}
+      </EuiCopy>
+    </EuiPopover>
+  );
+
+  return infoPopover;
+};

x-pack/plugins/enterprise_search/public/applications/workplace_search/constants.ts

@@ -751,3 +751,14 @@ export const REMOVE_BUTTON = i18n.translate(
     defaultMessage: 'Remove',
   }
 );
+
+export const COPY_TEXT = i18n.translate('xpack.enterpriseSearch.workplaceSearch.copyText', {
+  defaultMessage: 'Copy',
+});
+
+export const STATUS_POPOVER_TOOLTIP = i18n.translate(
+  'xpack.enterpriseSearch.workplaceSearch.statusPopoverTooltip',
+  {
+    defaultMessage: 'Click to view info',
+  }
+);

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/overview.tsx

@@ -14,7 +14,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiIconTip,
   EuiLink,
   EuiPanel,
   EuiSpacer,
@@ -37,6 +36,7 @@ import aclImage from '../../../assets/supports_acl.svg';
 import { ComponentLoader } from '../../../components/shared/component_loader';
 import { CredentialItem } from '../../../components/shared/credential_item';
 import { LicenseBadge } from '../../../components/shared/license_badge';
+import { StatusItem } from '../../../components/shared/status_item';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
   RECENT_ACTIVITY_TITLE,
@@ -199,15 +199,7 @@ export const Overview: React.FC = () => {
               {!custom && (
                 <EuiTableRowCell>
                   <EuiText size="xs">
-                    {status}{' '}
-                    {activityDetails && (
-                      <EuiIconTip
-                        position="top"
-                        content={activityDetails.map((detail, idx) => (
-                          <div key={idx}>{detail}</div>
-                        ))}
-                      />
-                    )}
+                    {status} {activityDetails && <StatusItem details={activityDetails} />}
                   </EuiText>
                 </EuiTableRowCell>
               )}