github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[App Search] Update instances of EuiPanel/EuiPageContent to bordered or filled panels (#96090) (#96104)

Browse source 
* Add hasBorder to all EuiPageContent panels

* EngineCreation: switch EuiPageBody to EuiPageContent
+ add hasBorder

* Credentials: update EuiPanels w/ hasBorder

* ApiCodeExample: switch to hasBorder

* DataPanel: update to take & pass hasBorder prop

* Analytics & EngineOverview: use hasBorder

* Relevance Tuning: update EuiPanels

- switch to hasBorder for top level panels
- switch to color="subdued" for boost accordion
- tweak padding of boost panel
- CSS cleanup

* Role Mappings: switch to hasBorder

+ remove unused class - `euiPanel--disabled` was not applying any styles
+ remove random 'export' string

* Sample engine CTA: switch to subdued panel
+ fix sizing - when loading button pops in, it was causing text to overflow

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2021-04-01 20:14:47 -04:00 • committed by GitHub
parent 5443379a38
commit 6692fd8c3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 131 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/views/analytics.tsx
View file

@ -83,8 +83,7 @@ export const Analytics: React.FC = () => {
/>
</EuiFlexItem>
<EuiFlexItem grow={3}>
{/* TODO: Update this panel to use the bordered version once available */}
<EuiPanel hasShadow={false} color="transparent">
<EuiPanel hasBorder>
<AnalyticsChart
lines={[
{
@ -196,6 +195,7 @@ export const Analytics: React.FC = () => {
<EuiSpacer size="xl" />
<DataPanel
hasBorder
title={<h2>{RECENT_QUERIES}</h2>}
subtitle={i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.recentQueriesDescription',

26
x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/views/query_detail.tsx
View file

@ -9,7 +9,7 @@ import React from 'react';
import { useValues } from 'kea';
import { EuiSpacer } from '@elastic/eui';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
@ -56,17 +56,19 @@ export const QueryDetail: React.FC<Props> = ({ breadcrumbs }) => {
/>
<EuiSpacer />
<AnalyticsChart
lines={[
{
id: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetail.chartTooltip',
{ defaultMessage: 'Queries per day' }
),
data: convertToChartData({ startDate, data: queriesPerDayForQuery }),
},
]}
/>
<EuiPanel hasBorder>
<AnalyticsChart
lines={[
{
id: i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.analytics.queryDetail.chartTooltip',
{ defaultMessage: 'Queries per day' }
),
data: convertToChartData({ startDate, data: queriesPerDayForQuery }),
},
]}
/>
</EuiPanel>
<EuiSpacer />
<AnalyticsSection

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
View file

@ -57,7 +57,7 @@ export const Credentials: React.FC = () => {
<EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
<EuiPageContentBody>
{shouldShowCredentialsForm && <CredentialsFlyout />}
<EuiPanel className="eui-textCenter">
<EuiPanel hasBorder className="eui-textCenter">
<EuiTitle size="s">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
@ -116,7 +116,9 @@ export const Credentials: React.FC = () => {
</EuiPageContentHeader>
<EuiSpacer size="m" />
<FlashMessages />
<EuiPanel>{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}</EuiPanel>
<EuiPanel hasBorder>
{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
</EuiPanel>
</EuiPageContentBody>
</>
);

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/form_components/key_engine_access.tsx
View file

@ -104,7 +104,7 @@ export const EngineSelection: React.FC = () => {
return (
<>
<EuiSpacer size="s" />
<EuiPanel>
<EuiPanel hasBorder>
<EuiTitle size="xs">
<h4>
{i18n.translate(

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/form_components/key_read_write_access.tsx
View file

@ -22,7 +22,7 @@ export const FormKeyReadWriteAccess: React.FC = () => {
return (
<>
<EuiSpacer size="s" />
<EuiPanel>
<EuiPanel hasBorder>
<EuiTitle size="xs">
<h3>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.formReadWrite.label', {

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curation_creation.tsx
View file

@ -25,7 +25,7 @@ export const CurationCreation: React.FC = () => {
<>
<EuiPageHeader pageTitle={CREATE_NEW_CURATION_TITLE} />
<FlashMessages />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiTitle>
<h2>
{i18n.translate(

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations.tsx
View file

@ -54,7 +54,7 @@ export const Curations: React.FC = () => {
</EuiButtonTo>,
]}
/>
<EuiPageContent>
<EuiPageContent hasBorder>
<FlashMessages />
<CurationsTable />
</EuiPageContent>

8
x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
View file

@ -94,6 +94,14 @@ describe('DataPanel', () => {
expect(wrapper.find(LoadingOverlay)).toHaveLength(1);
});
it('passes hasBorder', () => {
const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
expect(wrapper.prop('hasBorder')).toBeFalsy();
wrapper.setProps({ hasBorder: true });
expect(wrapper.prop('hasBorder')).toBeTruthy();
});
it('passes class names', () => {
const wrapper = shallow(<DataPanel title={<h1>Test</h1>} className="testing" />);

3
x-pack/plugins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
View file

@ -29,6 +29,7 @@ interface Props {
iconType?: string;
action?: React.ReactNode;
filled?: boolean;
hasBorder?: boolean;
isLoading?: boolean;
className?: string;
}
@ -39,6 +40,7 @@ export const DataPanel: React.FC<Props> = ({
iconType,
action,
filled,
hasBorder,
isLoading,
className,
children,
@ -52,6 +54,7 @@ export const DataPanel: React.FC<Props> = ({
<EuiPanel
{...props}
color={filled ? 'subdued' : 'plain'}
hasBorder={hasBorder}
className={classes}
hasShadow={false}
aria-busy={isLoading}

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
View file

@ -96,7 +96,7 @@ export const FlyoutBody: React.FC = () => {
</p>
</EuiText>
<EuiSpacer />
<EuiPanel hasShadow={false} paddingSize="s" className="eui-textBreakAll">
<EuiPanel hasBorder paddingSize="s" className="eui-textBreakAll">
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
<EuiFlexItem grow={false}>
<EuiBadge color="primary">POST</EuiBadge>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/document_detail.tsx
View file

@ -91,7 +91,7 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
</EuiButton>,
]}
/>
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiPageContentBody>
<FlashMessages />
<EuiBasicTable columns={columns} items={fields} />

137
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
View file

@ -16,12 +16,11 @@ import {
EuiFlexItem,
EuiFieldText,
EuiSelect,
EuiPageBody,
EuiPageHeader,
EuiPageContent,
EuiSpacer,
EuiTitle,
EuiButton,
EuiPanel,
} from '@elastic/eui';
import { FlashMessages } from '../../../shared/flash_messages';
@ -48,75 +47,73 @@ export const EngineCreation: React.FC = () => {
<div data-test-subj="EngineCreation">
<SetPageChrome trail={[ENGINE_CREATION_TITLE]} />
<EuiPageHeader pageTitle={ENGINE_CREATION_TITLE} />
<EuiPageBody>
<FlashMessages />
<EuiPanel>
<EuiForm>
<form
data-test-subj="EngineCreationForm"
onSubmit={(e) => {
e.preventDefault();
submitEngine();
}}
>
<EuiTitle>
<h2>{ENGINE_CREATION_FORM_TITLE}</h2>
</EuiTitle>
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
data-test-subj="EngineCreationNameFormRow"
label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
helpText={
name.length > 0 && rawName !== name ? (
<>
{SANITIZED_NAME_NOTE} <strong>{name}</strong>
</>
) : (
ALLOWED_CHARS_NOTE
)
}
<FlashMessages />
<EuiPageContent hasBorder>
<EuiForm>
<form
data-test-subj="EngineCreationForm"
onSubmit={(e) => {
e.preventDefault();
submitEngine();
}}
>
<EuiTitle>
<h2>{ENGINE_CREATION_FORM_TITLE}</h2>
</EuiTitle>
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
data-test-subj="EngineCreationNameFormRow"
label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
helpText={
name.length > 0 && rawName !== name ? (
<>
{SANITIZED_NAME_NOTE} <strong>{name}</strong>
</>
) : (
ALLOWED_CHARS_NOTE
)
}
fullWidth
>
<EuiFieldText
name="engine-name"
value={rawName}
onChange={(event) => setRawName(event.currentTarget.value)}
autoComplete="off"
fullWidth
>
<EuiFieldText
name="engine-name"
value={rawName}
onChange={(event) => setRawName(event.currentTarget.value)}
autoComplete="off"
fullWidth
data-test-subj="EngineCreationNameInput"
placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
autoFocus
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
<EuiSelect
name="engine-language"
value={language}
options={SUPPORTED_LANGUAGES}
data-test-subj="EngineCreationLanguageInput"
onChange={(event) => setLanguage(event.currentTarget.value)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiButton
disabled={name.length === 0}
type="submit"
data-test-subj="NewEngineSubmitButton"
fill
color="secondary"
>
{ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>
</form>
</EuiForm>
</EuiPanel>
</EuiPageBody>
data-test-subj="EngineCreationNameInput"
placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
autoFocus
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
<EuiSelect
name="engine-language"
value={language}
options={SUPPORTED_LANGUAGES}
data-test-subj="EngineCreationLanguageInput"
onChange={(event) => setLanguage(event.currentTarget.value)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiButton
disabled={name.length === 0}
type="submit"
data-test-subj="NewEngineSubmitButton"
fill
color="secondary"
>
{ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>
</form>
</EuiForm>
</EuiPageContent>
</div>
);
};

1
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/recent_api_logs.tsx
View file

@ -34,6 +34,7 @@ export const RecentApiLogs: React.FC = () => {
{VIEW_API_LOGS}
</EuiButtonEmptyTo>
}
hasBorder
>
TODO: API Logs Table
{/* <ApiLogsTable hidePagination={true} /> */}

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/components/total_charts.tsx
View file

@ -40,6 +40,7 @@ export const TotalCharts: React.FC = () => {
{VIEW_ANALYTICS}
</EuiButtonEmptyTo>
}
hasBorder
>
<AnalyticsChart
lines={[
@ -62,6 +63,7 @@ export const TotalCharts: React.FC = () => {
{VIEW_API_LOGS}
</EuiButtonEmptyTo>
}
hasBorder
>
<AnalyticsChart
lines={[

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
View file

@ -34,7 +34,7 @@ export const EmptyState: React.FC = () => {
<>
<SetPageChrome />
<EnginesOverviewHeader />
<EuiPageContent className="emptyState">
<EuiPageContent hasBorder className="emptyState">
{canManageEngines ? (
<EuiEmptyPrompt
data-test-subj="AdminEmptyEnginesPrompt"

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/loading_state.tsx
View file

@ -18,7 +18,7 @@ export const LoadingState: React.FC = () => {
<>
<SetPageChrome />
<EnginesOverviewHeader />
<EuiPageContent paddingSize="l">
<EuiPageContent hasBorder paddingSize="l">
<EuiLoadingContent lines={5} />
<EuiSpacer size="xxl" />
<EuiLoadingContent lines={4} />

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
View file

@ -84,7 +84,7 @@ export const EnginesOverview: React.FC = () => {
<SendTelemetry action="viewed" metric="engines_overview" />
<EnginesOverviewHeader />
<EuiPageContent panelPaddingSize="s" className="enginesOverview">
<EuiPageContent hasBorder panelPaddingSize="s" className="enginesOverview">
<FlashMessages />
<EuiPageContentHeader responsive={false}>
<EuiPageContentHeaderSection>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
View file

@ -19,7 +19,7 @@ export const ErrorConnecting: React.FC = () => {
<SetPageChrome />
<SendTelemetry action="error" metric="cannot_connect" />
<EuiPageContent>
<EuiPageContent hasBorder>
<ErrorStatePrompt />
</EuiPageContent>
</>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
View file

@ -86,7 +86,7 @@ export const Library: React.FC = () => {
<>
<SetPageChrome trail={['Library']} />
<EuiPageHeader pageTitle="Library" />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiPageContentBody>
<EuiTitle size="m">
<h2>Result</h2>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx
View file

@ -87,7 +87,7 @@ export const MetaEngineCreation: React.FC = () => {
}
/>
<FlashMessages />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiForm
component="form"
data-test-subj="MetaEngineCreationForm"

5
x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boost_item_content/boost_item_content.tsx
View file

@ -41,9 +41,10 @@ export const BoostItemContent: React.FC<Props> = ({ boost, index, name }) => {
};
return (
<EuiPanel hasShadow={false} className="relevanceTuningAccordionItem">
<EuiPanel color="subdued" paddingSize="none" className="relevanceTuningAccordionItem">
<EuiSpacer size="m" />
{getBoostForm()}
<EuiSpacer />
<EuiSpacer size="m" />
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.engine.relevanceTuning.boosts.impactLabel',

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/boosts/boosts.tsx
View file

@ -90,7 +90,7 @@ export const Boosts: React.FC<Props> = ({ name, type, boosts = [] }) => {
);
return (
<EuiPanel className="boosts">
<EuiPanel color="subdued" className="boosts">
<EuiFlexGroup responsive={false} alignItems="center">
<EuiFlexItem>
<EuiTitle size="xxs">

1
x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.scss
View file

@ -19,7 +19,6 @@
}
.relevanceTuningAccordionItem {
border: none;
border-top: $euiBorderThin;
border-radius: 0;
}

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_form/relevance_tuning_form.tsx
View file

@ -73,7 +73,7 @@ export const RelevanceTuningForm: React.FC = () => {
</>
)}
{filteredSchemaFields.map((fieldName) => (
<EuiPanel key={fieldName} className="relevanceTuningForm__panel">
<EuiPanel key={fieldName} hasBorder className="relevanceTuningForm__panel">
<EuiAccordion
key={fieldName}
id={fieldName}
@ -112,7 +112,7 @@ export const RelevanceTuningForm: React.FC = () => {
</EuiTitle>
<EuiSpacer size="s" />
{filteredSchemaFieldsWithConflicts.map((fieldName) => (
<EuiPanel key={fieldName} className="relevanceTuningForm__panel">
<EuiPanel key={fieldName} hasBorder className="relevanceTuningForm__panel">
<EuiTitle size="xs">
<h4 data-test-subj="DisabledField">{fieldName}</h4>
</EuiTitle>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning_preview.tsx
View file

@ -48,7 +48,7 @@ export const RelevanceTuningPreview: React.FC = () => {
const { engineName, isMetaEngine } = useValues(EngineLogic);
return (
<EuiPanel>
<EuiPanel hasBorder>
<EuiTitle size="m">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.engine.relevanceTuning.preview.title', {

5
x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mapping.tsx
View file

@ -166,7 +166,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
<EuiSpacer />
<EuiFlexGroup alignItems="stretch">
<EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiPanel hasBorder paddingSize="l">
<EuiTitle size="s">
<h3>{ROLE_TITLE}</h3>
</EuiTitle>
@ -175,7 +175,6 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
<h4>{FULL_ENGINE_ACCESS_TITLE}</h4>
</EuiTitle>
<EuiSpacer />
export{' '}
{STANDARD_ROLE_TYPES.map(({ type, description }) => (
<RoleSelector
key={type}
@ -190,7 +189,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
</EuiFlexItem>
{hasAdvancedRoles && (
<EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiPanel hasBorder paddingSize="l">
<EuiTitle size="s">
<h3>{ENGINE_ACCESS_TITLE}</h3>
</EuiTitle>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx
View file

@ -127,7 +127,7 @@ export const RoleMappings: React.FC = () => {
pageTitle={ROLE_MAPPINGS_TITLE}
description={ROLE_MAPPINGS_DESCRIPTION}
/>
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiPageContentBody>
<FlashMessages />
{roleMappings.length === 0 ? roleMappingEmptyState : roleMappingsTable}

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/sample_engine_creation_cta/sample_engine_creation_cta.tsx
View file

@ -23,9 +23,9 @@ export const SampleEngineCreationCta: React.FC = () => {
const { createSampleEngine } = useActions(SampleEngineCreationCtaLogic);
return (
<EuiPanel>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiPanel color="subdued">
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem className="eui-textLeft eui-textNoWrap">
<EuiTitle size="s">
<h3>{SAMPLE_ENGINE_CREATION_CTA_TITLE}</h3>
</EuiTitle>

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx
View file

@ -21,7 +21,7 @@ export const Settings: React.FC = () => {
<>
<SetPageChrome trail={[SETTINGS_TITLE]} />
<EuiPageHeader pageTitle={SETTINGS_TITLE} />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiPageContentBody>
<FlashMessages />
<LogRetentionConfirmationModal />

2
x-pack/plugins/enterprise_search/public/applications/shared/not_found/not_found.tsx
View file

@ -73,7 +73,7 @@ export const NotFound: React.FC<NotFoundProps> = ({ product = {}, breadcrumbs })
<SetPageChrome trail={breadcrumbs} />
<SendTelemetry action="error" metric="not_found" />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiEmptyPrompt
title={<Logo />}
body={

8
x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.test.tsx
View file

@ -41,14 +41,6 @@ describe('AttributeSelector', () => {
expect(wrapper.find('[data-test-subj="AttributeSelector"]').exists()).toBe(true);
});
it('renders disabled panel with className', () => {
const wrapper = shallow(<AttributeSelector {...baseProps} disabled />);
expect(wrapper.find('[data-test-subj="AttributeSelector"]').prop('className')).toEqual(
'euiPanel--disabled'
);
});
describe('Auth Providers', () => {
const findAuthProvidersSelect = (wrapper: ShallowWrapper) =>
wrapper.find('[data-test-subj="AuthProviderSelect"]');

6
x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.tsx
View file

@ -100,11 +100,7 @@ export const AttributeSelector: React.FC<Props> = ({
handleAuthProviderChange = () => null,
}) => {
return (
<EuiPanel
data-test-subj="AttributeSelector"
paddingSize="l"
className={disabled ? 'euiPanel--disabled' : ''}
>
<EuiPanel data-test-subj="AttributeSelector" hasBorder paddingSize="l">
<EuiTitle size="s">
<h3>{ATTRIBUTE_SELECTOR_TITLE}</h3>
</EuiTitle>

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

@ -141,7 +141,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
<EuiSpacer />
<EuiFlexGroup alignItems="stretch">
<EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiPanel hasBorder paddingSize="l">
<EuiTitle size="s">
<h3>{ROLE_LABEL}</h3>
</EuiTitle>
@ -158,7 +158,7 @@ export const RoleMapping: React.FC<RoleMappingProps> = ({ isNew }) => {
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem>
<EuiPanel paddingSize="l">
<EuiPanel hasBorder paddingSize="l">
<EuiTitle size="s">
<h3>{GROUP_ASSIGNMENT_TITLE}</h3>
</EuiTitle>