[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>
This commit is contained in:
parent
03db229e2d
commit
593b03fc60
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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'}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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) => (
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue