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

[Uptime] update panels with hasBorder prop (#103752)

Browse source 
* update panels with hasBorder prop

* remove panels where unnecessary
This commit is contained in:
Dominique Clarke 2021-07-01 12:46:45 -04:00 committed by GitHub
parent 9dc303a4c6
commit bc99bb0399
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 27 additions and 346 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

221
x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap generated
View file

@ -1,221 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ResponsiveWrapper HOC is not responsive when prop is false 1`] = `
<EuiPanel
paddingSize="m"
>
<Component
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {
"date": Object {
"full": Object {
"day": "numeric",
"month": "long",
"weekday": "long",
"year": "numeric",
},
"long": Object {
"day": "numeric",
"month": "long",
"year": "numeric",
},
"medium": Object {
"day": "numeric",
"month": "short",
"year": "numeric",
},
"short": Object {
"day": "numeric",
"month": "numeric",
"year": "2-digit",
},
},
"number": Object {
"currency": Object {
"style": "currency",
},
"percent": Object {
"style": "percent",
},
},
"relative": Object {
"days": Object {
"units": "day",
},
"hours": Object {
"units": "hour",
},
"minutes": Object {
"units": "minute",
},
"months": Object {
"units": "month",
},
"seconds": Object {
"units": "second",
},
"years": Object {
"units": "year",
},
},
"time": Object {
"full": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"long": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"medium": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
},
"short": Object {
"hour": "numeric",
"minute": "numeric",
},
},
},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"now": [Function],
"onError": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": null,
}
}
/>
</EuiPanel>
`;
exports[`ResponsiveWrapper HOC renders a responsive wrapper 1`] = `
<styled.div>
<Component
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {
"date": Object {
"full": Object {
"day": "numeric",
"month": "long",
"weekday": "long",
"year": "numeric",
},
"long": Object {
"day": "numeric",
"month": "long",
"year": "numeric",
},
"medium": Object {
"day": "numeric",
"month": "short",
"year": "numeric",
},
"short": Object {
"day": "numeric",
"month": "numeric",
"year": "2-digit",
},
},
"number": Object {
"currency": Object {
"style": "currency",
},
"percent": Object {
"style": "percent",
},
},
"relative": Object {
"days": Object {
"units": "day",
},
"hours": Object {
"units": "hour",
},
"minutes": Object {
"units": "minute",
},
"months": Object {
"units": "month",
},
"seconds": Object {
"units": "second",
},
"years": Object {
"units": "year",
},
},
"time": Object {
"full": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"long": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
"timeZoneName": "short",
},
"medium": Object {
"hour": "numeric",
"minute": "numeric",
"second": "numeric",
},
"short": Object {
"hour": "numeric",
"minute": "numeric",
},
},
},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"now": [Function],
"onError": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": null,
}
}
/>
</styled.div>
`;

10
x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { shallowWithIntl } from '@kbn/test/jest';
import { render } from '../../../lib/helper/rtl_helpers';
import { withResponsiveWrapper } from './responsive_wrapper';
interface Prop {
@ -20,12 +20,12 @@ describe('ResponsiveWrapper HOC', () => {
});
it('renders a responsive wrapper', () => {
const component = shallowWithIntl(<WrappedByHOC isResponsive={true} />);
expect(component).toMatchSnapshot();
const { getByTestId } = render(<WrappedByHOC isResponsive={true} />);
expect(getByTestId('uptimeWithResponsiveWrapper--wrapper')).toBeInTheDocument();
});
it('is not responsive when prop is false', () => {
const component = shallowWithIntl(<WrappedByHOC isResponsive={false} />);
expect(component).toMatchSnapshot();
const { getByTestId } = render(<WrappedByHOC isResponsive={false} />);
expect(getByTestId('uptimeWithResponsiveWrapper--panel')).toBeInTheDocument();
});
});

4
x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx
View file

@ -32,11 +32,11 @@ export const withResponsiveWrapper = <P extends {} & ResponsiveWrapperProps>(
Component: FC<P>
): FC<ResponsiveWrapperProps & P> => ({ isResponsive, ...rest }: ResponsiveWrapperProps) =>
isResponsive ? (
<ResponsiveWrapper>
<ResponsiveWrapper data-test-subj="uptimeWithResponsiveWrapper--wrapper">
<Component {...(rest as P)} />
</ResponsiveWrapper>
) : (
<EuiPanel paddingSize="m">
<EuiPanel paddingSize="m" hasBorder data-test-subj="uptimeWithResponsiveWrapper--panel">
<Component {...(rest as P)} />
</EuiPanel>
);

2
x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
View file

@ -34,7 +34,7 @@ export const MonitorDurationComponent = ({
hasMLJob,
}: DurationChartProps) => {
return (
<EuiPanel paddingSize="m">
<EuiPanel paddingSize="m" hasBorder>
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem>
<EuiTitle size="s">

2
x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx
View file

@ -251,7 +251,7 @@ export const PingList = () => {
};
return (
<EuiPanel>
<EuiPanel hasBorder>
<PingListHeader />
<EuiSpacer size="s" />
<EuiBasicTable

2
x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx
View file

@ -49,7 +49,7 @@ export const MonitorStatusDetailsComponent = ({ monitorLocations }: MonitorStatu
}, []);
return (
<EuiPanel>
<EuiPanel hasBorder>
<EuiFlexGroup gutterSize="l" wrap={true} responsive={true}>
<EuiFlexItem grow={1}>
<MonitorStatusBar />

6
x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiLoadingSpinner } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingSpinner } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
@ -104,7 +104,7 @@ export const StepDetailContainer: React.FC<Props> = ({ checkGroup, stepIndex })
: [],
}}
>
<EuiPanel>
<>
{(!journey || journey.loading) && (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
@ -124,7 +124,7 @@ export const StepDetailContainer: React.FC<Props> = ({ checkGroup, stepIndex })
{journey && activeStep && !journey.loading && (
<WaterfallChartContainer checkGroup={checkGroup} stepIndex={stepIndex} />
)}
</EuiPanel>
</>
</PageTemplateComponent>
);
};

92
x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap generated
View file

@ -1,92 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataOrIndexMissing component renders headingMessage 1`] = `
<EuiFlexGroup
data-test-subj="data-missing"
justifyContent="center"
>
<EuiFlexItem
grow={false}
style={
Object {
"flexBasis": 700,
}
}
>
<EuiSpacer
size="m"
/>
<EuiPanel>
<EuiEmptyPrompt
actions={
<EuiFlexGroup>
<EuiFlexItem>
<EuiButton
color="primary"
fill={true}
href="/app/home#/tutorial/uptimeMonitors"
>
<FormattedMessage
defaultMessage="View setup instructions"
id="xpack.uptime.emptyState.viewSetupInstructions"
values={Object {}}
/>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton
color="primary"
href="/app/uptime/settings"
>
<FormattedMessage
defaultMessage="Update index pattern settings"
id="xpack.uptime.emptyState.updateIndexPattern"
values={Object {}}
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
}
body={
<React.Fragment>
<p>
<FormattedMessage
defaultMessage="Set up Heartbeat to start monitoring your services."
id="xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage"
values={Object {}}
/>
</p>
<p>
<FormattedMessage
defaultMessage="If Heartbeat is already set up, confirm it's sending data to Elasticsearch, then update the index pattern settings to match the Heartbeat config."
id="xpack.uptime.emptyState.configureHeartbeatIndexSettings"
values={Object {}}
/>
</p>
</React.Fragment>
}
iconType="logoUptime"
title={
<EuiTitle
size="l"
>
<h3>
<FormattedMessage
defaultMessage="Uptime index {indexName} not found"
id="xpack.uptime.emptyState.noIndexTitle"
values={
Object {
"indexName": <em>
heartbeat-*
</em>,
}
}
/>
</h3>
</EuiTitle>
}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
`;

7
x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx
View file

@ -6,8 +6,9 @@
*/
import React from 'react';
import { shallowWithIntl } from '@kbn/test/jest';
import { screen } from '@testing-library/react';
import { FormattedMessage } from '@kbn/i18n/react';
import { render } from '../../../lib/helper/rtl_helpers';
import { DataOrIndexMissing } from './data_or_index_missing';
describe('DataOrIndexMissing component', () => {
@ -19,7 +20,7 @@ describe('DataOrIndexMissing component', () => {
values={{ indexName: <em>heartbeat-*</em> }}
/>
);
const component = shallowWithIntl(<DataOrIndexMissing headingMessage={headingMessage} />);
expect(component).toMatchSnapshot();
render(<DataOrIndexMissing headingMessage={headingMessage} />);
expect(screen.getByText(/heartbeat-*/)).toBeInTheDocument();
});
});

2
x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx
View file

@ -30,7 +30,7 @@ export const DataOrIndexMissing = ({ headingMessage, settings }: DataMissingProp
<EuiFlexGroup justifyContent="center" data-test-subj="data-missing">
<EuiFlexItem grow={false} style={{ flexBasis: 700 }}>
<EuiSpacer size="m" />
<EuiPanel>
<EuiPanel hasBorder>
<EuiEmptyPrompt
iconType="logoUptime"
title={

2
x-pack/plugins/uptime/public/components/overview/empty_state/empty_state_error.tsx
View file

@ -22,7 +22,7 @@ export const EmptyStateError = ({ errors }: EmptyStateErrorProps) => {
return (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiPanel>
<EuiPanel hasBorder>
<EuiEmptyPrompt
iconType="securityApp"
iconColor="subdued"

2
x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap generated
View file

@ -845,7 +845,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
}
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive c0"

2
x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
View file

@ -173,7 +173,7 @@ export const MonitorListComponent: ({
];
return (
<EuiPanel>
<EuiPanel hasBorder>
<MonitorListHeader />
<EuiSpacer size="m" />
<EuiBasicTable

2
x-pack/plugins/uptime/public/components/overview/status_panel.tsx
View file

@ -13,7 +13,7 @@ import { SnapshotComponent } from './snapshot';
const STATUS_CHART_HEIGHT = '160px';
export const StatusPanel = ({}) => (
<EuiPanel>
<EuiPanel hasBorder>
<EuiFlexGroup gutterSize="l">
<EuiFlexItem grow={2}>
<SnapshotComponent height={STATUS_CHART_HEIGHT} />

12
x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx
View file

@ -5,13 +5,7 @@
* 2.0.
*/
import {
EuiBasicTable,
EuiBasicTableColumn,
EuiButtonIcon,
EuiPanel,
EuiTitle,
} from '@elastic/eui';
import { EuiBasicTable, EuiBasicTableColumn, EuiButtonIcon, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { MouseEvent } from 'react';
import styled from 'styled-components';
@ -147,7 +141,7 @@ export const StepsList = ({ data, error, loading }: Props) => {
};
return (
<EuiPanel>
<>
<EuiTitle>
<h2>
{statusMessage(
@ -176,6 +170,6 @@ export const StepsList = ({ data, error, loading }: Props) => {
tableLayout={'auto'}
rowProps={getRowProps}
/>
</EuiPanel>
</>
);
};

5
x-pack/plugins/uptime/public/pages/settings.tsx
View file

@ -13,7 +13,6 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiPanel,
EuiSpacer,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -148,7 +147,7 @@ export const SettingsPage: React.FC = () => {
);
return (
<EuiPanel style={{ maxWidth: 1000, margin: 'auto' }}>
<>
<EuiFlexGroup>
<EuiFlexItem grow={false}>{cannotEditNotice}</EuiFlexItem>
</EuiFlexGroup>
@ -213,6 +212,6 @@ export const SettingsPage: React.FC = () => {
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</>
);
};