[Uptime]fix wrapping issue in certificate list column (#74749)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Shahzad 2020-08-25 12:35:29 +02:00 committed by GitHub
parent 43cac5af45
commit 1257aad5b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 44 deletions

View file

@ -1,8 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FingerprintCol renders expected elements for valid props 1`] = `
Array [
.c1 .euiButtonEmpty__content {
.c1 .euiButtonEmpty__content {
padding-right: 0px;
}
@ -10,8 +9,9 @@ Array [
margin-right: 8px;
}
<span
class="c0"
<span>
<span
class="c0 eui-textNoWrap"
data-test-subj="CA06F56B258B7A0D4F2B05470939478651151984"
>
<span
@ -48,17 +48,9 @@ Array [
/>
</button>
</span>
</span>,
.c1 .euiButtonEmpty__content {
padding-right: 0px;
}
.c0 {
margin-right: 8px;
}
<span
class="c0"
</span>
<span
class="c0 eui-textNoWrap"
data-test-subj="3111500C4A66012CDAE333EC3FCA1C9DDE45C954440E7EE413716BFF3663C074"
>
<span
@ -95,8 +87,8 @@ Array [
/>
</button>
</span>
</span>,
]
</span>
</span>
`;
exports[`FingerprintCol shallow renders expected elements for valid props 1`] = `

View file

@ -16,7 +16,7 @@ const EmptyButton = styled(EuiButtonEmpty)`
}
`;
const Span = styled.span`
const StyledSpan = styled.span`
margin-right: 8px;
`;
@ -27,7 +27,7 @@ interface Props {
export const FingerprintCol: React.FC<Props> = ({ cert }) => {
const ShaComponent = ({ text, val }: { text: string; val: string }) => {
return (
<Span data-test-subj={val}>
<StyledSpan data-test-subj={val} className="eui-textNoWrap">
<EuiToolTip content={val}>
<EmptyButton>{text} </EmptyButton>
</EuiToolTip>
@ -41,13 +41,13 @@ export const FingerprintCol: React.FC<Props> = ({ cert }) => {
/>
)}
</EuiCopy>
</Span>
</StyledSpan>
);
};
return (
<>
<span>
<ShaComponent text="SHA 1" val={cert?.sha1?.toUpperCase() ?? ''} />
<ShaComponent text="SHA 256" val={cert?.sha256?.toUpperCase() ?? ''} />
</>
</span>
);
};

View file

@ -904,12 +904,10 @@ exports[`MonitorList component renders the monitor list 1`] = `
>
<span
class="euiFilterButton__textShift"
data-text="Up"
title="Up"
>
<span
class="euiTextColor euiTextColor--default"
>
Up
</span>
Up
</span>
</span>
</span>

View file

@ -38,12 +38,10 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
>
<span
class="euiFilterButton__textShift"
data-text="Up"
title="Up"
>
<span
class="euiTextColor euiTextColor--default"
>
Up
</span>
Up
</span>
</span>
</span>

View file

@ -15,7 +15,6 @@ export interface FilterStatusButtonProps {
isActive: boolean;
value: 'up' | 'down' | '';
withNext: boolean;
color?: string;
}
export const FilterStatusButton = ({
@ -24,14 +23,12 @@ export const FilterStatusButton = ({
isDisabled,
isActive,
value,
color,
withNext,
}: FilterStatusButtonProps) => {
const [getUrlParams, setUrlParams] = useUrlParams();
const { statusFilter: urlValue } = getUrlParams();
return (
<EuiFilterButton
color={(isActive ? color : undefined) as any}
data-test-subj={dataTestSubj}
hasActiveFilters={isActive}
isDisabled={isDisabled}

View file

@ -6,7 +6,7 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFilterGroup, EuiTextColor } from '@elastic/eui';
import { EuiFilterGroup } from '@elastic/eui';
import { FilterStatusButton } from './filter_status_button';
import { useGetUrlParams } from '../../../hooks';
@ -28,13 +28,9 @@ export const StatusFilter: React.FC = () => {
isActive={statusFilter === ''}
/>
<FilterStatusButton
content={
<EuiTextColor color={statusFilter === 'up' ? 'secondary' : undefined}>
{i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
defaultMessage: 'Up',
})}
</EuiTextColor>
}
content={i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
defaultMessage: 'Up',
})}
dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
value="up"
withNext={true}
@ -47,7 +43,6 @@ export const StatusFilter: React.FC = () => {
dataTestSubj="xpack.uptime.filterBar.filterStatusDown"
value="down"
withNext={false}
color={'danger'}
isActive={statusFilter === 'down'}
/>
</EuiFilterGroup>