Skip to content

Commit

Permalink
[Workplace Search] Design polish: overview page (elastic#95363) (elas…
Browse files Browse the repository at this point in the history
…tic#95578)

* 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 <[email protected]>

* Remove test line for Spacer now that size=default

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

Co-authored-by: John Barrier Wilson <[email protected]>
Co-authored-by: Scotty Bollinger <[email protected]>
  • Loading branch information
3 people authored Mar 26, 2021
1 parent be804cd commit 3c14e0b
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,16 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
description,
action,
headerChildren,
headerSpacer,
testSubj,
}) => (
<div className={className} data-test-subj={testSubj}>
{title && (
<>
<ViewContentHeader title={title} titleSize="s" description={description} action={action} />
{headerChildren}
{headerSpacer && <EuiSpacer size={headerSpacer} />}
</>
)}
{children}
<EuiSpacer size={'xxl'} />
<EuiSpacer />
</div>
);
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
) : (
Expand All @@ -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'}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 3c14e0b

Please sign in to comment.