From 593b03fc6084497df20fad06e7fed9ccee0b0be7 Mon Sep 17 00:00:00 2001
From: John Barrier Wilson <johnbarrierwilson@gmail.com>
Date: Fri, 26 Mar 2021 14:09:45 -0500
Subject: [PATCH] [Workplace Search] Design polish: overview page (#95363)

* Rework panels to subdued style

* Fix button when source has been onboarded

* Update content_section test for EuiSpacer

* Update content_section test for EuiSpacer Length

* Lint fix for onboarding_card

* Remove spacer size due to default

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>

* Remove test line for Spacer now that size=default

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../content_section/content_section.test.tsx  |  3 +-
 .../content_section/content_section.tsx       |  4 +-
 .../views/overview/onboarding_card.tsx        | 10 +--
 .../views/overview/onboarding_steps.tsx       | 11 +--
 .../views/overview/organization_stats.tsx     | 77 ++++++++++---------
 .../views/overview/recent_activity.tsx        |  2 +-
 .../views/overview/statistic_card.tsx         |  2 +
 7 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx
index d9c2d70e78c0..d37af01287c4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx
@@ -47,8 +47,7 @@ describe('ContentSection', () => {
       />
     );
 
-    expect(wrapper.find(EuiSpacer).first().prop('size')).toEqual('s');
-    expect(wrapper.find(EuiSpacer)).toHaveLength(2);
+    expect(wrapper.find(EuiSpacer)).toHaveLength(1);
     expect(wrapper.find('.header')).toHaveLength(1);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx
index d9a4ed7eee8b..f0b86e0cc925 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx
@@ -30,7 +30,6 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
   description,
   action,
   headerChildren,
-  headerSpacer,
   testSubj,
 }) => (
   <div className={className} data-test-subj={testSubj}>
@@ -38,10 +37,9 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
       <>
         <ViewContentHeader title={title} titleSize="s" description={description} action={action} />
         {headerChildren}
-        {headerSpacer && <EuiSpacer size={headerSpacer} />}
       </>
     )}
     {children}
-    <EuiSpacer size={'xxl'} />
+    <EuiSpacer />
   </div>
 );
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx
index 2d9e5580c6f4..338eda0214ea 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_card.tsx
@@ -18,7 +18,7 @@ import {
   IconType,
 } from '@elastic/eui';
 
-import { EuiButtonTo, EuiButtonEmptyTo } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../shared/telemetry';
 
 interface OnboardingCardProps {
@@ -49,15 +49,15 @@ export const OnboardingCard: React.FC<OnboardingCardProps> = ({
     });
 
   const completeButton = actionPath ? (
-    <EuiButtonEmptyTo to={actionPath} data-test-subj={testSubj} onClick={onClick}>
+    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick} fill>
       {actionTitle}
-    </EuiButtonEmptyTo>
+    </EuiButtonTo>
   ) : (
     <EuiButtonEmpty data-test-subj={testSubj}>{actionTitle}</EuiButtonEmpty>
   );
 
   const incompleteButton = actionPath ? (
-    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick}>
+    <EuiButtonTo to={actionPath} data-test-subj={testSubj} onClick={onClick} fill>
       {actionTitle}
     </EuiButtonTo>
   ) : (
@@ -66,7 +66,7 @@ export const OnboardingCard: React.FC<OnboardingCardProps> = ({
 
   return (
     <EuiFlexItem>
-      <EuiPanel>
+      <EuiPanel color="subdued" hasShadow={false}>
         <EuiEmptyPrompt
           iconType={complete ? 'checkInCircleFilled' : (icon as IconType)}
           iconColor={complete ? 'secondary' : 'subdued'}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_steps.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_steps.tsx
index 9f07196b2e9f..a89e3294597e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_steps.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/onboarding_steps.tsx
@@ -21,7 +21,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiButtonEmptyTo } from '../../../shared/react_router_helpers';
+import { EuiButtonTo } from '../../../shared/react_router_helpers';
 import { TelemetryLogic } from '../../../shared/telemetry';
 import { AppLogic } from '../../app_logic';
 import sharedSourcesIcon from '../../components/shared/assets/source_icons/share_circle.svg';
@@ -142,10 +142,10 @@ export const OrgNameOnboarding: React.FC = () => {
     });
 
   return (
-    <EuiPanel paddingSize="l">
+    <EuiPanel color="subdued" hasShadow={false} paddingSize="l">
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
         <EuiFlexItem className="eui-hideFor--xs eui-hideFor--s" grow={false}>
-          <EuiIcon type="training" color="subdued" size="xl" />
+          <EuiIcon type="documentEdit" size="xl" />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiTitle size="xs">
@@ -158,16 +158,17 @@ export const OrgNameOnboarding: React.FC = () => {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmptyTo
+          <EuiButtonTo
             to={ORG_SETTINGS_PATH}
             onClick={onClick}
             data-test-subj="orgNameChangeButton"
+            size="s"
           >
             <FormattedMessage
               id="xpack.enterpriseSearch.workplaceSearch.orgNameOnboarding.buttonLabel"
               defaultMessage="Name your organization"
             />
-          </EuiButtonEmptyTo>
+          </EuiButtonTo>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx
index 525035030b8c..d1f0f6a03042 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/organization_stats.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiFlexGrid } from '@elastic/eui';
+import { EuiFlexGrid, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -35,45 +35,46 @@ export const OrganizationStats: React.FC = () => {
           defaultMessage="Usage statistics"
         />
       }
-      headerSpacer="m"
     >
-      <EuiFlexGrid columns={isFederatedAuth ? 2 : 4}>
-        <StatisticCard
-          title={i18n.translate(
-            'xpack.enterpriseSearch.workplaceSearch.organizationStats.sharedSources',
-            { defaultMessage: 'Shared sources' }
+      <EuiPanel color="subdued" hasShadow={false}>
+        <EuiFlexGrid columns={isFederatedAuth ? 2 : 4}>
+          <StatisticCard
+            title={i18n.translate(
+              'xpack.enterpriseSearch.workplaceSearch.organizationStats.sharedSources',
+              { defaultMessage: 'Shared sources' }
+            )}
+            count={sourcesCount}
+            actionPath={SOURCES_PATH}
+          />
+          {!isFederatedAuth && (
+            <>
+              <StatisticCard
+                title={i18n.translate(
+                  'xpack.enterpriseSearch.workplaceSearch.organizationStats.invitations',
+                  { defaultMessage: 'Invitations' }
+                )}
+                count={pendingInvitationsCount}
+                actionPath={USERS_PATH}
+              />
+              <StatisticCard
+                title={i18n.translate(
+                  'xpack.enterpriseSearch.workplaceSearch.organizationStats.activeUsers',
+                  { defaultMessage: 'Active users' }
+                )}
+                count={accountsCount}
+                actionPath={USERS_PATH}
+              />
+            </>
           )}
-          count={sourcesCount}
-          actionPath={SOURCES_PATH}
-        />
-        {!isFederatedAuth && (
-          <>
-            <StatisticCard
-              title={i18n.translate(
-                'xpack.enterpriseSearch.workplaceSearch.organizationStats.invitations',
-                { defaultMessage: 'Invitations' }
-              )}
-              count={pendingInvitationsCount}
-              actionPath={USERS_PATH}
-            />
-            <StatisticCard
-              title={i18n.translate(
-                'xpack.enterpriseSearch.workplaceSearch.organizationStats.activeUsers',
-                { defaultMessage: 'Active users' }
-              )}
-              count={accountsCount}
-              actionPath={USERS_PATH}
-            />
-          </>
-        )}
-        <StatisticCard
-          title={i18n.translate(
-            'xpack.enterpriseSearch.workplaceSearch.organizationStats.privateSources',
-            { defaultMessage: 'Private sources' }
-          )}
-          count={personalSourcesCount}
-        />
-      </EuiFlexGrid>
+          <StatisticCard
+            title={i18n.translate(
+              'xpack.enterpriseSearch.workplaceSearch.organizationStats.privateSources',
+              { defaultMessage: 'Private sources' }
+            )}
+            count={personalSourcesCount}
+          />
+        </EuiFlexGrid>
+      </EuiPanel>
     </ContentSection>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx
index 62b96442b9ba..8bda7c2843b9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/recent_activity.tsx
@@ -41,7 +41,7 @@ export const RecentActivity: React.FC = () => {
 
   return (
     <ContentSection title={RECENT_ACTIVITY_TITLE} headerSpacer="m">
-      <EuiPanel>
+      <EuiPanel color="subdued" hasShadow={false}>
         {activityFeed.length > 0 ? (
           <>
             {activityFeed.map((props: FeedActivity, index) => (
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx
index 136901f840b8..9b134b511b34 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/statistic_card.tsx
@@ -24,6 +24,7 @@ export const StatisticCard: React.FC<StatisticCardProps> = ({ title, count = 0,
       layout="horizontal"
       title={title}
       titleSize="xs"
+      display="plain"
       description={
         <EuiTitle size="l">
           <EuiTextColor color="default">{count}</EuiTextColor>
@@ -36,6 +37,7 @@ export const StatisticCard: React.FC<StatisticCardProps> = ({ title, count = 0,
       layout="horizontal"
       title={title}
       titleSize="xs"
+      display="plain"
       description={
         <EuiTitle size="l">
           <EuiTextColor color="subdued">{count}</EuiTextColor>