[Workplace Search] Design polish: Groups, Security and Custom source (#96870)

* Add missing i18n

Oops

* Change button color

* Fix custom source created screen

* Add better empty state to groups

* Align toggle to right side of table

* Update design for security page

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

@@ -62,9 +62,10 @@ export const SaveCustom: React.FC<SaveCustomProps> = ({
 }) => (
   <>
     {header}
+    <EuiSpacer />
     <EuiFlexGroup direction="row">
       <EuiFlexItem grow={2}>
-        <EuiPanel paddingSize="l">
+        <EuiPanel paddingSize="l" hasShadow={false} color="subdued">
           <EuiFlexGroup direction="column" alignItems="center" responsive={false}>
             <EuiFlexItem>
               <EuiIcon type="checkInCircleFilled" color="#42CC89" size="xxl" />

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx

@@ -12,18 +12,14 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiFieldText } from '@elastic/eui';
+import { EuiFieldText, EuiEmptyPrompt } from '@elastic/eui';
 
 import { Loading } from '../../../../shared/loading';
 import { ContentSection } from '../../../components/shared/content_section';
 import { SourcesTable } from '../../../components/shared/sources_table';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
 
-import {
-  GroupOverview,
-  EMPTY_SOURCES_DESCRIPTION,
-  EMPTY_USERS_DESCRIPTION,
-} from './group_overview';
+import { GroupOverview } from './group_overview';
 
 const deleteGroup = jest.fn();
 const showSharedSourcesModal = jest.fn();
@@ -92,7 +88,7 @@ describe('GroupOverview', () => {
     expect(updateGroupName).toHaveBeenCalled();
   });
 
-  it('renders empty state messages', () => {
+  it('renders empty state', () => {
     setMockValues({
       ...mockValues,
       group: {
@@ -103,10 +99,7 @@ describe('GroupOverview', () => {
     });
 
     const wrapper = shallow(<GroupOverview />);
-    const sourcesSection = wrapper.find('[data-test-subj="GroupContentSourcesSection"]') as any;
-    const usersSection = wrapper.find('[data-test-subj="GroupUsersSection"]') as any;
 
-    expect(sourcesSection.prop('description')).toEqual(EMPTY_SOURCES_DESCRIPTION);
-    expect(usersSection.prop('description')).toEqual(EMPTY_USERS_DESCRIPTION);
+    expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(1);
   });
 });

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx

@@ -12,10 +12,12 @@ import { useActions, useValues } from 'kea';
 import {
   EuiButton,
   EuiConfirmModal,
+  EuiEmptyPrompt,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiPanel,
   EuiSpacer,
   EuiHorizontalRule,
 } from '@elastic/eui';
@@ -24,6 +26,7 @@ import { i18n } from '@kbn/i18n';
 import { Loading } from '../../../../shared/loading';
 import { TruncatedContent } from '../../../../shared/truncate';
 import { AppLogic } from '../../../app_logic';
+import noSharedSourcesIcon from '../../../assets/share_circle.svg';
 import { ContentSection } from '../../../components/shared/content_section';
 import { SourcesTable } from '../../../components/shared/sources_table';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
@@ -145,6 +148,12 @@ export const GroupOverview: React.FC = () => {
       values: { name },
     }
   );
+  const GROUP_SOURCES_TITLE = i18n.translate(
+    'xpack.enterpriseSearch.workplaceSearch.groups.overview.groupSourcesTitle',
+    {
+      defaultMessage: 'Group content sources',
+    }
+  );
   const GROUP_SOURCES_DESCRIPTION = i18n.translate(
     'xpack.enterpriseSearch.workplaceSearch.groups.overview.groupSourcesDescription',
     {
@@ -170,15 +179,29 @@ export const GroupOverview: React.FC = () => {
 
   const sourcesSection = (
     <ContentSection
-      title="Group content sources"
-      description={hasContentSources ? GROUP_SOURCES_DESCRIPTION : EMPTY_SOURCES_DESCRIPTION}
+      title={GROUP_SOURCES_TITLE}
+      description={GROUP_SOURCES_DESCRIPTION}
       action={manageSourcesButton}
       data-test-subj="GroupContentSourcesSection"
     >
-      {hasContentSources && sourcesTable}
+      {sourcesTable}
     </ContentSection>
   );
 
+  const sourcesEmptyState = (
+    <>
+      <EuiPanel paddingSize="none" color="subdued">
+        <EuiEmptyPrompt
+          iconType={noSharedSourcesIcon}
+          title={<h2>{GROUP_SOURCES_TITLE}</h2>}
+          body={<p>{EMPTY_SOURCES_DESCRIPTION}</p>}
+          actions={manageSourcesButton}
+        />
+      </EuiPanel>
+      <EuiSpacer />
+    </>
+  );
+
   const usersSection = !isFederatedAuth && (
     <ContentSection
       title="Group users"
@@ -252,7 +275,7 @@ export const GroupOverview: React.FC = () => {
     <>
       <ViewContentHeader title={truncatedName} />
       <EuiSpacer />
-      {sourcesSection}
+      {hasContentSources ? sourcesSection : sourcesEmptyState}
       {usersSection}
       {nameSection}
       {canDeleteGroup && deleteSection}

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx

@@ -60,7 +60,7 @@ export const Groups: React.FC = () => {
     messages[0].description = (
       <EuiButtonTo
         to={getGroupPath(newGroup.id)}
-        color="primary"
+        color="secondary"
         data-test-subj="NewGroupManageButton"
       >
         {i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.newGroup.action', {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/components/private_sources_table.tsx

@@ -152,7 +152,7 @@ export const PrivateSourcesTable: React.FC<PrivateSourcesTableProps> = ({
           {contentSources.map((source, i) => (
             <EuiTableRow key={i}>
               <EuiTableRowCell>{source.name}</EuiTableRowCell>
-              <EuiTableRowCell>
+              <EuiTableRowCell align="right">
                 <EuiSwitch
                   checked={!!source.isEnabled}
                   disabled={sectionDisabled}

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/security/security.tsx

@@ -115,6 +115,7 @@ export const Security: React.FC = () => {
     <EuiPanel
       paddingSize="none"
       hasShadow={false}
+      color="subdued"
       className={classNames({
         'euiPanel--disabled': !hasPlatinumLicense,
       })}
@@ -187,9 +188,11 @@ export const Security: React.FC = () => {
         messageText={SECURITY_UNSAVED_CHANGES_MESSAGE}
       />
       {header}
-      {allSourcesToggle}
-      {!hasPlatinumLicense && platinumLicenseCallout}
-      {sourceTables}
+      <EuiPanel color="subdued" hasBorder={false}>
+        {allSourcesToggle}
+        {!hasPlatinumLicense && platinumLicenseCallout}
+        {sourceTables}
+      </EuiPanel>
       {confirmModalVisible && confirmModal}
     </>
   );