Remove custom styles (#94839)
* 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:
parent
74b604608a
commit
1b65ea91e5
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>↑</strong>
|
||||
</div>
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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} />
|
||||
);
|
||||
|
|
|
@ -1,15 +0,0 @@
|
|||
.source-row {
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__actions a {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
|
@ -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', () => {
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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) => (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -99,9 +99,9 @@ export const ConfigureOauth: React.FC<ConfigureOauthProps> = ({ name, onFormCrea
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="step-4">
|
||||
<>
|
||||
{header}
|
||||
{sectionLoading ? <Loading /> : configfieldsForm}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
{name}
|
||||
{!connected &&
|
||||
!accountContextOnly &&
|
||||
isOrganization &&
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -10,11 +10,6 @@
|
|||
.source-card-configured {
|
||||
padding: 8px;
|
||||
|
||||
&__icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
&__not-connected-tooltip {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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) => (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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]}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
||||
{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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in a new issue