Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Apr 2, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...enterprise_search/public/applications/app_search/components/analytics/views/analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
{
Expand Down Expand Up @@ -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',
Expand Down
26 changes: 14 additions & 12 deletions ...erprise_search/public/applications/app_search/components/analytics/views/query_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';

import { useValues } from 'kea';

import { EuiSpacer } from '@elastic/eui';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { SetAppSearchChrome as SetPageChrome } from '../../../../shared/kibana_chrome';
Expand Down Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions ...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion ...pp_search/components/credentials/credentials_flyout/form_components/key_engine_access.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const EngineSelection: React.FC = () => {
return (
<>
<EuiSpacer size="s" />
<EuiPanel>
<EuiPanel hasBorder>
<EuiTitle size="xs">
<h4>
{i18n.translate(
Expand Down
2 changes: 1 addition & 1 deletion ...earch/components/credentials/credentials_flyout/form_components/key_read_write_access.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
2 changes: 1 addition & 1 deletion ...se_search/public/applications/app_search/components/curations/views/curation_creation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const CurationCreation: React.FC = () => {
<>
<EuiPageHeader pageTitle={CREATE_NEW_CURATION_TITLE} />
<FlashMessages />
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiTitle>
<h2>
{i18n.translate(
Expand Down
2 changes: 1 addition & 1 deletion ...enterprise_search/public/applications/app_search/components/curations/views/curations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const Curations: React.FC = () => {
</EuiButtonTo>,
]}
/>
<EuiPageContent>
<EuiPageContent hasBorder>
<FlashMessages />
<CurationsTable />
</EuiPageContent>
Expand Down
8 changes: 8 additions & 0 deletions ...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />);

Expand Down
3 changes: 3 additions & 0 deletions ...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface Props {
iconType?: string;
action?: React.ReactNode;
filled?: boolean;
hasBorder?: boolean;
isLoading?: boolean;
className?: string;
}
Expand All @@ -39,6 +40,7 @@ export const DataPanel: React.FC<Props> = ({
iconType,
action,
filled,
hasBorder,
isLoading,
className,
children,
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion ...ons/app_search/components/document_creation/creation_mode_components/api_code_example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...enterprise_search/public/applications/app_search/components/documents/document_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const DocumentDetail: React.FC<Props> = ({ engineBreadcrumb }) => {
</EuiButton>,
]}
/>
<EuiPageContent>
<EuiPageContent hasBorder>
<EuiPageContentBody>
<FlashMessages />
<EuiBasicTable columns={columns} items={fields} />
Expand Down
137 changes: 67 additions & 70 deletions ...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,11 @@ import {
EuiFlexItem,
EuiFieldText,
EuiSelect,
EuiPageBody,
EuiPageHeader,
EuiPageContent,
EuiSpacer,
EuiTitle,
EuiButton,
EuiPanel,
} from '@elastic/eui';

import { FlashMessages } from '../../../shared/flash_messages';
Expand All @@ -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 change: 1 addition & 0 deletions .../public/applications/app_search/components/engine_overview/components/recent_api_logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const RecentApiLogs: React.FC = () => {
{VIEW_API_LOGS}
</EuiButtonEmptyTo>
}
hasBorder
>
TODO: API Logs Table
{/* <ApiLogsTable hidePagination={true} /> */}
Expand Down
2 changes: 2 additions & 0 deletions ...rch/public/applications/app_search/components/engine_overview/components/total_charts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const TotalCharts: React.FC = () => {
{VIEW_ANALYTICS}
</EuiButtonEmptyTo>
}
hasBorder
>
<AnalyticsChart
lines={[
Expand All @@ -62,6 +63,7 @@ export const TotalCharts: React.FC = () => {
{VIEW_API_LOGS}
</EuiButtonEmptyTo>
}
hasBorder
>
<AnalyticsChart
lines={[
Expand Down
2 changes: 1 addition & 1 deletion ...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const EmptyState: React.FC = () => {
<>
<SetPageChrome />
<EnginesOverviewHeader />
<EuiPageContent className="emptyState">
<EuiPageContent hasBorder className="emptyState">
{canManageEngines ? (
<EuiEmptyPrompt
data-test-subj="AdminEmptyEnginesPrompt"
Expand Down
2 changes: 1 addition & 1 deletion ...ise_search/public/applications/app_search/components/engines/components/loading_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion .../enterprise_search/public/applications/app_search/components/engines/engines_overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...se_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const ErrorConnecting: React.FC = () => {
<SetPageChrome />
<SendTelemetry action="error" metric="cannot_connect" />

<EuiPageContent>
<EuiPageContent hasBorder>
<ErrorStatePrompt />
</EuiPageContent>
</>
Expand Down
2 changes: 1 addition & 1 deletion ...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading