maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Remove custom styles (#94839)

Browse source 
* Replace custom margin style with EuiFlexGroup gutter

* Replace custom padding style with EuiFlexGroup gutter

* Remove custom wrapper around Loading on Overview page (alpha)

* Replace custom range value output with EuiRange's showInput prop

* Remove custom style

I'll refer the correct handling of this to design pass

* Remove "euiPanel--inset" className, as it doesn't do anything in Amsterdam theme

* Remove unused className `euiPanel--noShadow`

We're already using hasShadow={false} prop that does the same

* Remove `euiPanel--outline` className, as it doesn't do anything in Amsterdam theme

* Inline classNames declaration with the goal to remove them later

They don't do anything in Amsterdam theme, but I'm not removing them to keep context for design pass.

* Remove `eui-textNoWrap` className from buttons, as it's already included in button styles

* Remove classNames with no styles attached

* Replace custom padding in content_section with EuiSpacer

* Remove source-row styles

Most of the classNames were redundant and not needed anymore. The ones that were actually used were either replaced with EUI props or deleted, so we could apply EUI styles during design pass.

* Replace source_icon styles with EUI components and props

* Replace source-card icon styles with EUI prop

* Remove className declarations with no styles attached to classes

* Fix tests

* Increase space between source overview panels

* Use smaller icons on source prioritization and connectors pages

* Invert SourceIcon default size and size provided via props

The default size was "xxl", now it's "m". "m" size is default in EUI, so it's more consistent.

* Get rid of   as horizontal spacer
This commit is contained in:
Vadim Yakhin 2021-03-17 19:26:50 -03:00 committed by GitHub
parent 74b604608a
commit 1b65ea91e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 143 additions and 290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiButtonEmpty, EuiText } from '@elastic/eui';
import { EuiButtonEmpty, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { externalUrl, getWorkplaceSearchUrl } from '../../../shared/enterprise_search_url';
import { NAV } from '../../constants';
@ -16,23 +16,17 @@ export const WorkplaceSearchHeaderActions: React.FC = () => {
if (!externalUrl.enterpriseSearchUrl) return null;
return (
<>
<EuiButtonEmpty
href={getWorkplaceSearchUrl('/sources')}
target="_blank"
iconType="user"
style={{ marginRight: 5 }}
>
<EuiText size="s">{NAV.PERSONAL_DASHBOARD}</EuiText>
</EuiButtonEmpty>
<EuiButtonEmpty
href={getWorkplaceSearchUrl('/search')}
target="_blank"
iconType="search"
style={{ marginRight: 5 }}
>
<EuiText size="s">{NAV.SEARCH}</EuiText>
</EuiButtonEmpty>
</>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiButtonEmpty href={getWorkplaceSearchUrl('/sources')} target="_blank" iconType="user">
<EuiText size="s">{NAV.PERSONAL_DASHBOARD}</EuiText>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem>
<EuiButtonEmpty href={getWorkplaceSearchUrl('/search')} target="_blank" iconType="search">
<EuiText size="s">{NAV.SEARCH}</EuiText>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
);
};

10
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.scss
View file

@ -1,10 +0,0 @@
/*
* 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.
*/
.content-section {
padding-bottom: 44px;
}

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.test.tsx
View file

@ -25,7 +25,7 @@ describe('ContentSection', () => {
const wrapper = shallow(<ContentSection {...props} className="test" />);
expect(wrapper.prop('data-test-subj')).toEqual('contentSection');
expect(wrapper.prop('className')).toEqual('test content-section');
expect(wrapper.prop('className')).toEqual('test');
expect(wrapper.find('.children')).toHaveLength(1);
});
@ -48,7 +48,7 @@ describe('ContentSection', () => {
);
expect(wrapper.find(EuiSpacer).first().prop('size')).toEqual('s');
expect(wrapper.find(EuiSpacer)).toHaveLength(1);
expect(wrapper.find(EuiSpacer)).toHaveLength(2);
expect(wrapper.find('.header')).toHaveLength(1);
});
});

5
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/content_section/content_section.tsx
View file

@ -12,8 +12,6 @@ import { EuiSpacer } from '@elastic/eui';
import { SpacerSizeTypes } from '../../../types';
import { ViewContentHeader } from '../view_content_header';
import './content_section.scss';
interface ContentSectionProps {
children: React.ReactNode;
className?: string;
@ -35,7 +33,7 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
headerSpacer,
testSubj,
}) => (
<div className={`${className} content-section`} data-test-subj={testSubj}>
<div className={className} data-test-subj={testSubj}>
{title && (
<>
<ViewContentHeader title={title} titleSize="s" description={description} action={action} />
@ -44,5 +42,6 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
</>
)}
{children}
<EuiSpacer size={'xxl'} />
</div>
);

11
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/license_callout/license_callout.tsx
View file

@ -19,22 +19,17 @@ export const LicenseCallout: React.FC<LicenseCalloutProps> = ({ message }) => {
const title = (
<>
{message}{' '}
<EuiLink
className="wsLicenseLink"
target="_blank"
external
href={ENT_SEARCH_LICENSE_MANAGEMENT}
>
<EuiLink target="_blank" external href={ENT_SEARCH_LICENSE_MANAGEMENT}>
<strong>Explore Platinum features</strong>
</EuiLink>
</>
);
return (
<div className="wsLicenseCallout">
<div>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<div className="wsLicenseIcon">
<div>
<strong>&#8593;</strong>
</div>
</EuiFlexItem>

22
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.scss
View file

@ -1,22 +0,0 @@
/*
* 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.
*/
.wrapped-icon {
width: 30px;
height: 30px;
overflow: hidden;
margin-right: 4px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
}
}

8
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.test.tsx
View file

@ -14,16 +14,10 @@ import { EuiIcon } from '@elastic/eui';
import { SourceIcon } from './';
describe('SourceIcon', () => {
it('renders unwrapped icon', () => {
it('renders', () => {
const wrapper = shallow(<SourceIcon name="foo" serviceType="custom" />);
expect(wrapper.find(EuiIcon)).toHaveLength(1);
expect(wrapper.find('.user-group-source')).toHaveLength(0);
});
it('renders wrapped icon', () => {
const wrapper = shallow(<SourceIcon name="foo" wrapped serviceType="custom" />);
expect(wrapper.find('.wrapped-icon')).toHaveLength(1);
});
});

24
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
View file

@ -11,33 +11,15 @@ import { camelCase } from 'lodash';
import { EuiIcon, IconSize } from '@elastic/eui';
import './source_icon.scss';
import { images } from '../assets/source_icons';
interface SourceIconProps {
serviceType: string;
name: string;
className?: string;
wrapped?: boolean;
size?: IconSize;
}
export const SourceIcon: React.FC<SourceIconProps> = ({
name,
serviceType,
className,
wrapped,
size = 'xxl',
}) => {
const icon = (
<EuiIcon type={images[camelCase(serviceType)]} title={name} className={className} size={size} />
);
return wrapped ? (
<div className="wrapped-icon" title={name}>
{icon}
</div>
) : (
<>{icon}</>
);
};
export const SourceIcon: React.FC<SourceIconProps> = ({ name, serviceType, className, size }) => (
<EuiIcon type={images[camelCase(serviceType)]} title={name} className={className} size={size} />
);

15
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_row/source_row.scss
View file

@ -1,15 +0,0 @@
.source-row {
&__icon {
width: 24px;
height: 24px;
}
&__name {
font-weight: 500;
}
&__actions a {
opacity: 1.0;
pointer-events: auto;
}
}

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_row/source_row.test.tsx
View file

@ -73,7 +73,7 @@ describe('SourceRow', () => {
};
const wrapper = shallow(<SourceRow isOrganization source={source} />);
expect(wrapper.find('.source-row__document-count').contains('Remote')).toBeTruthy();
expect(wrapper.find('[data-test-subj="SourceDocumentCount"]').contains('Remote')).toBeTruthy();
});
it('renders details link', () => {

32
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_row/source_row.tsx
View file

@ -7,7 +7,6 @@
import React from 'react';
import classNames from 'classnames';
// Prefer importing entire lodash library, e.g. import { get } from "lodash"
// eslint-disable-next-line no-restricted-imports
import _kebabCase from 'lodash/kebabCase';
@ -35,8 +34,6 @@ import {
import { ContentSourceDetails } from '../../../types';
import { SourceIcon } from '../source_icon';
import './source_row.scss';
const CREDENTIALS_INVALID_ERROR_REASON = 1;
export interface ISourceRow {
@ -72,15 +69,6 @@ export const SourceRow: React.FC<SourceRowProps> = ({
const showFix =
isOrganization && hasError && allowsReauth && errorReason === CREDENTIALS_INVALID_ERROR_REASON;
const rowClass = classNames(
'source-row',
{ 'content-section--disabled': !searchable },
{ 'source-row source-row--error': hasError }
);
// eslint-disable-next-line @typescript-eslint/naming-convention
const imageClass = classNames('source-row__icon', { 'source-row__icon--loading': isIndexing });
const fixLink = (
<EuiLinkTo
to={getSourcesPath(
@ -105,7 +93,7 @@ export const SourceRow: React.FC<SourceRowProps> = ({
);
return (
<EuiTableRow data-test-subj="GroupsRow" className={rowClass}>
<EuiTableRow data-test-subj="GroupsRow">
<EuiTableRowCell>
<EuiFlexGroup
justifyContent="flexStart"
@ -114,15 +102,9 @@ export const SourceRow: React.FC<SourceRowProps> = ({
responsive={false}
>
<EuiFlexItem grow={false}>
<SourceIcon
serviceType={isIndexing ? 'loadingSmall' : serviceType}
name={name}
className={imageClass}
/>
</EuiFlexItem>
<EuiFlexItem>
<span className="source-row__name">{name}</span>
<SourceIcon serviceType={isIndexing ? 'loadingSmall' : serviceType} name={name} />
</EuiFlexItem>
<EuiFlexItem>{name}</EuiFlexItem>
</EuiFlexGroup>
</EuiTableRowCell>
<EuiTableRowCell>
@ -138,17 +120,13 @@ export const SourceRow: React.FC<SourceRowProps> = ({
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiText
className={`source-row__status source-row__status--${status}`}
color={status === 'need-more-config' ? 'default' : 'subdued'}
size="xs"
>
<EuiText color={status === 'need-more-config' ? 'default' : 'subdued'} size="xs">
{statusMessage}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTableRowCell>
<EuiTableRowCell className="source-row__document-count" data-test-subj="SourceDocumentCount">
<EuiTableRowCell data-test-subj="SourceDocumentCount">
{isFederatedSource ? remoteTooltip : parseInt(documentCount, 10).toLocaleString('en-US')}
</EuiTableRowCell>
{onSearchableToggle && (

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/sources_table/sources_table.tsx
View file

@ -27,7 +27,7 @@ export const SourcesTable: React.FC<SourcesTableProps> = ({
if (onSearchableToggle) headerItems.push('Searchable');
return (
<EuiTable className="table table--emphasized" responsive={false}>
<EuiTable responsive={false}>
<TableHeader extraCell headerItems={headerItems} />
<EuiTableBody>
{sources.map((source) => (

9
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_header.tsx
View file

@ -34,11 +34,16 @@ export const AddSourceHeader: React.FC<AddSourceHeaderProps> = ({
responsive={false}
>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={serviceType} name={name} className="adding-a-source__icon" />
<SourceIcon
serviceType={serviceType}
name={name}
className="adding-a-source__icon"
size="xxl"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="m">
<h3 className="adding-a-source__name">
<h3>
<EuiTextColor color="default">{name}</EuiTextColor>
</h3>
</EuiText>

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
View file

@ -126,7 +126,7 @@ export const AddSourceList: React.FC = () => {
<EuiFlexGroup justifyContent="center" alignItems="stretch">
<EuiFlexItem>
<EuiSpacer size="xl" />
<EuiPanel className="euiPanel euiPanel--inset">
<EuiPanel>
<EuiSpacer size="s" />
<EuiSpacer size="xxl" />
<EuiEmptyPrompt

10
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/available_sources_list.tsx
View file

@ -48,13 +48,7 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
title={name}
description={<></>}
isDisabled={disabled}
icon={
<SourceIcon
serviceType={serviceType}
name={name}
className="euiIcon--xxxLarge source-card-icon"
/>
}
icon={<SourceIcon serviceType={serviceType} name={name} size="xxl" />}
/>
);
@ -79,7 +73,7 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
};
const visibleSources = (
<EuiFlexGrid columns={3} gutterSize="m" className="source-grid" responsive={false}>
<EuiFlexGrid columns={3} gutterSize="m" responsive={false}>
{sources.map((source, i) => (
<EuiFlexItem key={i} data-test-subj="AvailableSourceCard">
{getSourceCard(source)}

6
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/config_completed.tsx
View file

@ -48,7 +48,7 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
header,
privateSourcesEnabled,
}) => (
<div className="step-3">
<>
{header}
<EuiSpacer size="xxl" />
<EuiFlexGroup
@ -139,7 +139,6 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
to={getSourcesPath(ADD_SOURCE_PATH, true)}
fill={accountContextOnly}
color={accountContextOnly ? 'primary' : undefined}
className="eui-textNoWrap"
>
{CONFIG_COMPLETED_CONFIGURE_NEW_BUTTON}
</EuiButtonTo>
@ -148,7 +147,6 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
<EuiFlexItem grow={false}>
<EuiButton
color="primary"
className="eui-textNoWrap"
fill
onClick={advanceStep}
data-test-subj="ConfigCompletedConnectButton"
@ -164,5 +162,5 @@ export const ConfigCompleted: React.FC<ConfigCompletedProps> = ({
</EuiFlexItem>
)}
</EuiFlexGroup>
</div>
</>
);

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/configuration_intro.tsx
View file

@ -43,7 +43,7 @@ export const ConfigurationIntro: React.FC<ConfigurationIntroProps> = ({
advanceStep,
header,
}) => (
<div className="step-1">
<>
{header}
<EuiSpacer />
<EuiFlexGroup
@ -153,5 +153,5 @@ export const ConfigurationIntro: React.FC<ConfigurationIntroProps> = ({
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</div>
</>
);

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/configure_custom.tsx
View file

@ -48,7 +48,7 @@ export const ConfigureCustom: React.FC<ConfigureCustomProps> = ({
setCustomSourceNameValue(e.target.value);
return (
<div className="custom-api-step-1">
<>
{header}
<EuiSpacer />
<form onSubmit={handleFormSubmit}>
@ -93,6 +93,6 @@ export const ConfigureCustom: React.FC<ConfigureCustomProps> = ({
</EuiFormRow>
</EuiForm>
</form>
</div>
</>
);
};

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/configure_oauth.tsx
View file

@ -99,9 +99,9 @@ export const ConfigureOauth: React.FC<ConfigureOauthProps> = ({ name, onFormCrea
);
return (
<div className="step-4">
<>
{header}
{sectionLoading ? <Loading /> : configfieldsForm}
</div>
</>
);
};

8
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/configured_sources_list.tsx
View file

@ -79,16 +79,12 @@ export const ConfiguredSourcesList: React.FC<ConfiguredSourcesProps> = ({
responsive={false}
>
<EuiFlexItem grow={false}>
<SourceIcon
serviceType={serviceType}
name={name}
className="source-card-configured__icon"
/>
<SourceIcon serviceType={serviceType} name={name} size="l" />
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="s">
<h4>
{name}&nbsp;
{name}
{!connected &&
!accountContextOnly &&
isOrganization &&

46
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/connect_instance.tsx
View file

@ -263,30 +263,28 @@ export const ConnectInstance: React.FC<ConnectInstanceProps> = ({
);
return (
<div className="step-4">
<form onSubmit={handleFormSubmit}>
<EuiFlexGroup
direction="row"
alignItems="flexStart"
justifyContent="spaceBetween"
gutterSize="xl"
responsive={false}
>
<EuiFlexItem grow={1} className="adding-a-source__connect-an-instance">
<EuiPanel paddingSize="none">
<EuiPanel hasShadow={false} paddingSize="l">
{header}
</EuiPanel>
<EuiHorizontalRule margin="xs" />
<EuiPanel hasShadow={false} paddingSize="l">
<SourceFeatures features={features} name={name} objTypes={objTypes} />
</EuiPanel>
<form onSubmit={handleFormSubmit}>
<EuiFlexGroup
direction="row"
alignItems="flexStart"
justifyContent="spaceBetween"
gutterSize="xl"
responsive={false}
>
<EuiFlexItem grow={1} className="adding-a-source__connect-an-instance">
<EuiPanel paddingSize="none">
<EuiPanel hasShadow={false} paddingSize="l">
{header}
</EuiPanel>
<EuiSpacer />
{formFields}
</EuiFlexItem>
</EuiFlexGroup>
</form>
</div>
<EuiHorizontalRule margin="xs" />
<EuiPanel hasShadow={false} paddingSize="l">
<SourceFeatures features={features} name={name} objTypes={objTypes} />
</EuiPanel>
</EuiPanel>
<EuiSpacer />
{formFields}
</EuiFlexItem>
</EuiFlexGroup>
</form>
);
};

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/re_authenticate.tsx
View file

@ -49,7 +49,7 @@ export const ReAuthenticate: React.FC<ReAuthenticateProps> = ({ name, header })
};
return (
<div className="step-4">
<>
{header}
<EuiSpacer />
<form onSubmit={handleFormSubmit}>
@ -86,6 +86,6 @@ export const ReAuthenticate: React.FC<ReAuthenticateProps> = ({ name, header })
</EuiButton>
</EuiFormRow>
</form>
</div>
</>
);
};

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

@ -60,7 +60,7 @@ export const SaveCustom: React.FC<SaveCustomProps> = ({
isOrganization,
header,
}) => (
<div className="custom-api-step-2">
<>
{header}
<EuiFlexGroup direction="row">
<EuiFlexItem grow={2}>
@ -205,5 +205,5 @@ export const SaveCustom: React.FC<SaveCustomProps> = ({
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</div>
</>
);

7
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/add_source/source_features.tsx
View file

@ -187,12 +187,7 @@ export const SourceFeatures: React.FC<ConnectInstanceProps> = ({ features, objTy
<EuiFlexGroup>
{includedFeatures.map((featureId, i) => (
<EuiFlexItem key={i}>
<EuiPanel
hasShadow={false}
color="subdued"
className="euiPanel--inset"
paddingSize="l"
>
<EuiPanel hasShadow={false} color="subdued" paddingSize="l">
<FeaturesRouter featureId={featureId as IncludedFeatureIds} />
</EuiPanel>
</EuiFlexItem>

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx
View file

@ -125,7 +125,7 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
onTabClick={onSelectedTabChanged}
/>
) : (
<EuiPanel className="euiPanel--inset">
<EuiPanel>
<EuiEmptyPrompt
iconType="indexRollupApp"
title={<h2>{DISPLAY_SETTINGS_EMPTY_TITLE}</h2>}

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

@ -116,7 +116,7 @@ export const Overview: React.FC = () => {
const emptyState = (
<>
<EuiSpacer size="s" />
<EuiPanel paddingSize="l" className="euiPanel--inset" data-test-subj="EmptyDocumentSummary">
<EuiPanel paddingSize="l" data-test-subj="EmptyDocumentSummary">
<EuiEmptyPrompt
title={<h2>{SOURCES_NO_CONTENT_TITLE}</h2>}
iconType="documents"
@ -127,12 +127,10 @@ export const Overview: React.FC = () => {
);
return (
<div className="content-section">
<div className="section-header">
<EuiTitle size="xs">
<h4>{CONTENT_SUMMARY_TITLE}</h4>
</EuiTitle>
</div>
<>
<EuiTitle size="xs">
<h4>{CONTENT_SUMMARY_TITLE}</h4>
</EuiTitle>
<EuiSpacer size="s" />
{!summary && <ComponentLoader text="Loading summary details..." />}
{!!summary &&
@ -157,7 +155,7 @@ export const Overview: React.FC = () => {
</EuiTableBody>
</EuiTable>
))}
</div>
</>
);
};
@ -165,7 +163,7 @@ export const Overview: React.FC = () => {
const emptyState = (
<>
<EuiSpacer size="s" />
<EuiPanel paddingSize="l" className="euiPanel--inset" data-test-subj="EmptyActivitySummary">
<EuiPanel paddingSize="l" data-test-subj="EmptyActivitySummary">
<EuiEmptyPrompt
title={<h2>{EMPTY_ACTIVITY_TITLE}</h2>}
iconType="clock"
@ -213,15 +211,13 @@ export const Overview: React.FC = () => {
);
return (
<div className="content-section">
<div className="section-header">
<EuiTitle size="xs">
<h3>{RECENT_ACTIVITY_TITLE}</h3>
</EuiTitle>
</div>
<>
<EuiTitle size="xs">
<h3>{RECENT_ACTIVITY_TITLE}</h3>
</EuiTitle>
<EuiSpacer size="s" />
{activities.length === 0 ? emptyState : activitiesTable}
</div>
</>
);
};
@ -234,11 +230,7 @@ export const Overview: React.FC = () => {
<EuiFlexGroup direction="column" gutterSize="s" data-test-subj="GroupsSummary">
{groups.map((group, index) => (
<EuiFlexItem key={index}>
<EuiPanelTo
to={getGroupPath(group.id)}
data-test-subj="SourceGroupLink"
className="euiPanel--inset"
>
<EuiPanelTo to={getGroupPath(group.id)} data-test-subj="SourceGroupLink">
<EuiText size="s" className="eui-textTruncate">
<strong>{group.name}</strong>
</EuiText>
@ -306,7 +298,7 @@ export const Overview: React.FC = () => {
<h4>{DOCUMENT_PERMISSIONS_TITLE}</h4>
</EuiTitle>
<EuiSpacer size="m" />
<EuiPanel className="euiPanel--inset" data-test-subj="DocumentPermissionsDisabled">
<EuiPanel data-test-subj="DocumentPermissionsDisabled">
<EuiText size="s">
<EuiFlexGroup wrap gutterSize="m" alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
@ -455,7 +447,7 @@ export const Overview: React.FC = () => {
<ViewContentHeader title="Source overview" />
<EuiFlexGroup gutterSize="xl" alignItems="flexStart">
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" direction="column">
<EuiFlexGroup gutterSize="xl" direction="column">
<EuiFlexItem>
<DocumentSummary data-test-subj="DocumentSummary" />
</EuiFlexItem>

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx
View file

@ -140,7 +140,7 @@ export const Schema: React.FC = () => {
<SchemaFieldsTable />
</>
) : (
<EuiPanel className="euiPanel--inset">
<EuiPanel>
<EuiEmptyPrompt
iconType="managementApp"
title={<h2>{SCHEMA_EMPTY_SCHEMA_TITLE}</h2>}

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_content.tsx
View file

@ -106,7 +106,7 @@ export const SourceContent: React.FC = () => {
const isCustomSource = serviceType === CUSTOM_SERVICE_TYPE;
const emptyState = (
<EuiPanel className="euiPanel--inset">
<EuiPanel>
<EuiEmptyPrompt
title={<h2>{emptyMessage}</h2>}
iconType="documents"

11
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_info_card.tsx
View file

@ -35,18 +35,13 @@ export const SourceInfoCard: React.FC<SourceInfoCardProps> = ({
}) => (
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup gutterSize="none" justifyContent="flexStart" alignItems="center">
<EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
<EuiFlexItem grow={null}>
<SourceIcon
className="content-source-meta__icon"
serviceType={sourceType}
name={sourceType}
size="l"
/>
<SourceIcon serviceType={sourceType} name={sourceType} size="l" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h5 style={{ paddingLeft: 8 }}>{sourceName}</h5>
<h5>{sourceName}</h5>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>

5
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/sources.scss
View file

@ -10,11 +10,6 @@
.source-card-configured {
padding: 8px;
&__icon {
width: 2em;
height: 2em;
}
&__not-connected-tooltip {
position: relative;
top: 3px;

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/sources_view.tsx
View file

@ -62,7 +62,7 @@ export const SourcesView: React.FC<SourcesViewProps> = ({ children }) => {
gutterSize="s"
>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={serviceType} name={addedSourceName} />
<SourceIcon serviceType={serviceType} name={addedSourceName} size="xxl" />
</EuiFlexItem>
<EuiFlexItem>
{i18n.translate('xpack.enterpriseSearch.workplaceSearch.sourcesView.modal.heading', {

18
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx
View file

@ -106,7 +106,7 @@ export const GroupSourcePrioritization: React.FC = () => {
const hasSources = contentSources.length > 0;
const zeroState = (
<EuiPanel paddingSize="none" className="euiPanel--inset">
<EuiPanel paddingSize="none">
<EuiSpacer size="xxl" />
<EuiEmptyPrompt
iconType="advancedSettingsApp"
@ -132,7 +132,7 @@ export const GroupSourcePrioritization: React.FC = () => {
);
const sourceTable = (
<EuiTable className="table table--emphasized" responsive={false} tableLayout="auto">
<EuiTable responsive={false} tableLayout="auto">
<EuiTableHeader>
<EuiTableHeaderCell>{SOURCE_TABLE_HEADER}</EuiTableHeaderCell>
<EuiTableHeaderCell align="right">{PRIORITY_TABLE_HEADER}</EuiTableHeaderCell>
@ -143,14 +143,12 @@ export const GroupSourcePrioritization: React.FC = () => {
<EuiTableRowCell>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={serviceType} name={name} className="source-row__icon" />
</EuiFlexItem>
<EuiFlexItem>
<span className="source-row__name">{name}</span>
<SourceIcon serviceType={serviceType} name={name} />
</EuiFlexItem>
<EuiFlexItem>{name}</EuiFlexItem>
</EuiFlexGroup>
</EuiTableRowCell>
<EuiTableRowCell align="right" style={{ padding: 0 }}>
<EuiTableRowCell align="right">
<EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiRange
@ -158,17 +156,13 @@ export const GroupSourcePrioritization: React.FC = () => {
min={1}
max={10}
step={1}
showInput
value={activeSourcePriorities[id]}
onChange={(e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) =>
handleSliderChange(id, e)
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ paddingLeft: 10, width: 32 }}>
<div style={{ margin: 0 }} className="input-container--range__count">
{activeSourcePriorities[id]}
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTableRowCell>
</EuiTableRow>

12
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sources.tsx
View file

@ -7,6 +7,8 @@
import React, { useState } from 'react';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { SourceIcon } from '../../../components/shared/source_icon';
import { MAX_TABLE_ROW_ICONS } from '../../../constants';
import { ContentSource } from '../../../types';
@ -26,9 +28,13 @@ export const GroupSources: React.FC<GroupSourcesProps> = ({ groupSources }) => {
return (
<>
{visibleSources.map((source, index) => (
<SourceIcon {...source} wrapped key={index} />
))}
<EuiFlexGroup gutterSize="s">
{visibleSources.map((source, index) => (
<EuiFlexItem key={index}>
<SourceIcon {...source} size="l" />
</EuiFlexItem>
))}
</EuiFlexGroup>
{hiddenSources.length > 0 && (
<GroupRowSourcesDropdown
isPopoverOpen={popoverOpen}

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_users_table.tsx
View file

@ -69,7 +69,7 @@ export const GroupUsersTable: React.FC = () => {
return (
<>
<EuiTable className="table table--emphasized">
<EuiTable>
<TableHeader extraCell={isFederatedAuth} headerItems={headerItems} />
<EuiTableBody>
{users.slice(firstItem, lastItem + 1).map((user: User) => (

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/groups_table.tsx
View file

@ -75,7 +75,7 @@ export const GroupsTable: React.FC<{}> = () => {
<>
{showPagination ? <TablePaginationBar {...paginationOptions} /> : clearFiltersLink}
<EuiSpacer size="m" />
<EuiTable className="groups-table" tableLayout="auto">
<EuiTable tableLayout="auto">
<EuiTableHeader>
<EuiTableHeaderCell>{GROUP_TABLE_HEADER}</EuiTableHeaderCell>
<EuiTableHeaderCell>{SOURCES_TABLE_HEADER}</EuiTableHeaderCell>

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/source_option_item.tsx
View file

@ -22,7 +22,7 @@ interface SourceOptionItemProps {
export const SourceOptionItem: React.FC<SourceOptionItemProps> = ({ source }) => (
<EuiFlexGroup gutterSize="xs" justifyContent="flexStart" alignItems="center">
<EuiFlexItem grow={false}>
<SourceIcon wrapped {...source} />
<SourceIcon {...source} size="l" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<TruncatedContent tooltipType="title" content={source.name} length={MAX_LENGTH} />

7
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx
View file

@ -54,13 +54,8 @@ export const Overview: React.FC = () => {
initializeOverview();
}, [initializeOverview]);
// TODO: Remove div wrapper once the Overview page is using the full Layout
if (dataLoading) {
return (
<div style={{ height: '90vh' }}>
<Loading />
</div>
);
return <Loading />;
}
const hideOnboarding = hasUsers && hasOrgSources && isOldAccount && orgName !== defaultOrgName;

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/role_mappings/role_mapping.tsx
View file

@ -163,7 +163,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
<h3>{GROUP_ASSIGNMENT_TITLE}</h3>
</EuiTitle>
<EuiSpacer />
<div className="engines-list">
<div>
<EuiFormRow
isInvalid={!hasGroupAssignment}
error={[GROUP_ASSIGNMENT_INVALID_ERROR]}

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

@ -94,16 +94,12 @@ export const PrivateSourcesTable: React.FC<PrivateSourcesTableProps> = ({
const panelDisabled = !isEnabled || !hasPlatinumLicense;
const sectionDisabled = !sectionEnabled;
const panelClass = classNames('euiPanel--outline euiPanel--noShadow', {
'euiPanel--disabled': panelDisabled,
});
const tableClass = classNames({ 'euiTable--disabled': sectionDisabled });
const emptyState = (
<>
<EuiSpacer />
<EuiPanel className="euiPanel--inset euiPanel--outline" hasShadow={false} color="subdued">
<EuiPanel hasShadow={false} color="subdued">
<EuiText textAlign="center" color="subdued" size="s">
<strong>
{isRemote ? REMOTE_SOURCES_EMPTY_TABLE_TITLE : STANDARD_SOURCES_EMPTY_TABLE_TITLE}
@ -175,7 +171,12 @@ export const PrivateSourcesTable: React.FC<PrivateSourcesTableProps> = ({
);
return (
<EuiPanel hasShadow={false} className={panelClass}>
<EuiPanel
hasShadow={false}
className={classNames({
'euiPanel--disabled': panelDisabled,
})}
>
{sectionHeading}
{hasSources && sourcesTable}
</EuiPanel>

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

@ -74,10 +74,6 @@ export const Security: React.FC = () => {
if (dataLoading) return <Loading />;
const panelClass = classNames('euiPanel--noShadow', {
'euiPanel--disabled': !hasPlatinumLicense,
});
const savePrivateSources = () => {
saveSourceRestrictions();
hideConfirmModal();
@ -116,7 +112,13 @@ export const Security: React.FC = () => {
);
const allSourcesToggle = (
<EuiPanel paddingSize="none" hasShadow={false} className={panelClass}>
<EuiPanel
paddingSize="none"
hasShadow={false}
className={classNames({
'euiPanel--disabled': !hasPlatinumLicense,
})}
>
<EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiSwitch

19
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/connectors.tsx
View file

@ -94,18 +94,15 @@ export const Connectors: React.FC = () => {
<EuiFlexItem grow={1}>
<EuiFlexGroup justifyContent="flexStart" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<SourceIcon
serviceType={serviceType}
name={name}
className="source-row__icon"
/>
<SourceIcon serviceType={serviceType} name={name} />
</EuiFlexItem>
<EuiFlexItem>
<span className="source-row__name">
{name}
&nbsp;&nbsp;
{accountContextOnly && <EuiBadge color="hollow">{PRIVATE_SOURCE}</EuiBadge>}
</span>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>{name}</EuiFlexItem>
<EuiFlexItem grow={false}>
{accountContextOnly && <EuiBadge color="hollow">{PRIVATE_SOURCE}</EuiBadge>}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

7
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/settings/components/oauth_application.tsx
View file

@ -92,12 +92,7 @@ export const OauthApplication: React.FC = () => {
};
const licenseModal = (
<EuiModal
className="oauth-platinum-modal"
maxWidth={500}
onClose={closeLicenseModal}
data-test-subj="LicenseModal"
>
<EuiModal maxWidth={500} onClose={closeLicenseModal} data-test-subj="LicenseModal">
<EuiModalBody>
<EuiSpacer size="xl" />
<LicenseBadge />