Fix needless tool tip inside host and user risk inspect modal (#142219) (#142230)

(cherry picked from commit b94538185a)

Co-authored-by: Pablo Machado <pablo.nevesmachado@elastic.co>
This commit is contained in:
Kibana Machine 2022-09-29 09:43:43 -06:00 committed by GitHub
parent ab1a4c1298
commit d299c5f5bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 30 additions and 75 deletions

View file

@ -31,7 +31,6 @@ const HostRiskSummaryComponent: React.FC<{
<RiskScoreHeaderTitle
title={i18n.HOST_RISK_DATA_TITLE}
riskScoreEntity={RiskScoreEntity.host}
showTooltip={false}
/>
}
toolTipContent={

View file

@ -31,7 +31,6 @@ const UserRiskSummaryComponent: React.FC<{
<RiskScoreHeaderTitle
title={i18n.USER_RISK_DATA_TITLE}
riskScoreEntity={RiskScoreEntity.user}
showTooltip={false}
/>
}
toolTipContent={

View file

@ -13,6 +13,7 @@ import { useCheckSignalIndex } from '../../../../detections/containers/detection
import type { inputsModel } from '../../../store';
import { HeaderSection } from '../../header_section';
import * as i18n from './translations';
import * as overviewI18n from '../../../../overview/components/entity_analytics/common/translations';
import { RiskScoreHeaderTitle } from '../risk_score_onboarding/risk_score_header_title';
export const RiskScoresDeprecated = ({
@ -46,7 +47,15 @@ export const RiskScoresDeprecated = ({
return (
<EuiPanel hasBorder>
<HeaderSection title={<RiskScoreHeaderTitle riskScoreEntity={entityType} />} titleSize="s" />
<HeaderSection
title={<RiskScoreHeaderTitle riskScoreEntity={entityType} />}
titleSize="s"
tooltip={
entityType === RiskScoreEntity.user
? overviewI18n.USER_RISK_TABLE_TOOLTIP
: overviewI18n.HOST_RISK_TABLE_TOOLTIP
}
/>
<EuiEmptyPrompt
title={<h2>{translations.cta}</h2>}
body={translations.body}

View file

@ -5,46 +5,23 @@
* 2.0.
*/
import React from 'react';
import styled from 'styled-components';
import { EuiIconTip } from '@elastic/eui';
import { RiskScoreEntity } from '../../../../../common/search_strategy';
import { NavItemBetaBadge } from '../../navigation/nav_item_beta_badge';
import * as i18n from '../../../../overview/components/entity_analytics/common/translations';
import { TECHNICAL_PREVIEW } from './translations';
const IconWrapper = styled.span`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;
const RiskScoreHeaderTitleComponent = ({
riskScoreEntity,
showTooltip = true,
title,
}: {
riskScoreEntity: RiskScoreEntity;
showTooltip?: boolean;
title?: string;
}) => {
return (
<>
{title ??
(riskScoreEntity === RiskScoreEntity.user ? i18n.USER_RISK_TITLE : i18n.HOST_RISK_TITLE)}
{showTooltip && (
<IconWrapper>
<EuiIconTip
color="subdued"
content={
riskScoreEntity === RiskScoreEntity.user
? i18n.USER_RISK_TABLE_TOOLTIP
: i18n.HOST_RISK_TABLE_TOOLTIP
}
position="right"
size="l"
type="iInCircle"
/>
</IconWrapper>
)}
<NavItemBetaBadge text={TECHNICAL_PREVIEW} className="eui-alignMiddle" />
</>
);

View file

@ -14,6 +14,7 @@ import * as i18n from './translations';
import { RiskScoreHeaderTitle } from './risk_score_header_title';
import { RiskScoreRestartButton } from './risk_score_restart_button';
import type { inputsModel } from '../../../store';
import * as overviewI18n from '../../../../overview/components/entity_analytics/common/translations';
const RiskScoresNoDataDetectedComponent = ({
entityType,
@ -33,7 +34,15 @@ const RiskScoresNoDataDetectedComponent = ({
return (
<EuiPanel data-test-subj={`${entityType}-risk-score-no-data-detected`} hasBorder>
<HeaderSection title={<RiskScoreHeaderTitle riskScoreEntity={entityType} />} titleSize="s" />
<HeaderSection
title={<RiskScoreHeaderTitle riskScoreEntity={entityType} />}
titleSize="s"
tooltip={
entityType === RiskScoreEntity.user
? overviewI18n.USER_RISK_TABLE_TOOLTIP
: overviewI18n.HOST_RISK_TABLE_TOOLTIP
}
/>
<EuiEmptyPrompt
title={<h2>{translations.title}</h2>}
body={translations.body}

View file

@ -8,8 +8,7 @@
import React, { useMemo, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
import styled from 'styled-components';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import type { Columns, Criteria, ItemsPerRow } from '../../../common/components/paginated_table';
import { PaginatedTable } from '../../../common/components/paginated_table';
import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
@ -43,10 +42,6 @@ export const rowItems: ItemsPerRow[] = [
},
];
const IconWrapper = styled.span`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;
const tableType = hostsModel.HostsTableType.risk;
interface HostRiskScoreTableProps {
@ -150,21 +145,6 @@ const HostRiskScoreTableComponent: React.FC<HostRiskScoreTableProps> = ({
</EuiFlexGroup>
);
const headerTitle = (
<>
{i18nHosts.HOST_RISK_TITLE}
<IconWrapper>
<EuiIconTip
color="subdued"
content={i18nHosts.HOST_RISK_TABLE_TOOLTIP}
position="right"
size="l"
type="iInCircle"
/>
</IconWrapper>
</>
);
const getHostRiskScoreFilterQuerySelector = useMemo(
() => hostsSelectors.hostRiskScoreSeverityFilterSelector(),
[]
@ -200,8 +180,9 @@ const HostRiskScoreTableComponent: React.FC<HostRiskScoreTableProps> = ({
/>
}
headerSupplement={risk}
headerTitle={headerTitle}
headerTitle={i18nHosts.HOST_RISK_TITLE}
headerUnit={i18n.UNIT(totalCount)}
headerTooltip={i18nHosts.HOST_RISK_TABLE_TOOLTIP}
id={id}
isInspect={isInspect}
itemsPerRow={rowItems}

View file

@ -37,6 +37,7 @@ import { RiskScoresNoDataDetected } from '../../../../common/components/risk_sco
import { useRefetchQueries } from '../../../../common/hooks/use_refetch_queries';
import { Loader } from '../../../../common/components/loader';
import { Panel } from '../../../../common/components/panel';
import * as commonI18n from '../common/translations';
const TABLE_QUERY_ID = 'hostRiskDashboardTable';
const HOST_RISK_KPI_QUERY_ID = 'headerHostRiskScoreKpiQuery';
@ -161,6 +162,7 @@ const EntityAnalyticsHostRiskScoresComponent = () => {
id={TABLE_QUERY_ID}
toggleStatus={toggleStatus}
toggleQuery={setToggleStatus}
tooltip={commonI18n.HOST_RISK_TABLE_TOOLTIP}
>
{toggleStatus && (
<EuiFlexGroup alignItems="center" gutterSize="m">

View file

@ -37,6 +37,7 @@ import { RiskScoresNoDataDetected } from '../../../../common/components/risk_sco
import { useRefetchQueries } from '../../../../common/hooks/use_refetch_queries';
import { Loader } from '../../../../common/components/loader';
import { Panel } from '../../../../common/components/panel';
import * as commonI18n from '../common/translations';
const TABLE_QUERY_ID = 'userRiskDashboardTable';
const USER_RISK_KPI_QUERY_ID = 'headerUserRiskScoreKpiQuery';
@ -161,6 +162,7 @@ const EntityAnalyticsUserRiskScoresComponent = () => {
id={TABLE_QUERY_ID}
toggleStatus={toggleStatus}
toggleQuery={setToggleStatus}
tooltip={commonI18n.USER_RISK_TABLE_TOOLTIP}
>
{toggleStatus && (
<EuiFlexGroup alignItems="center" gutterSize="m">

View file

@ -119,7 +119,6 @@ export const HostOverview = React.memo<HostSummaryProps>(
<RiskScoreHeaderTitle
title={i18n.HOST_RISK_SCORE}
riskScoreEntity={RiskScoreEntity.host}
showTooltip={false}
/>
),
description: (
@ -135,7 +134,6 @@ export const HostOverview = React.memo<HostSummaryProps>(
<RiskScoreHeaderTitle
title={i18n.HOST_RISK_CLASSIFICATION}
riskScoreEntity={RiskScoreEntity.host}
showTooltip={false}
/>
),
description: (

View file

@ -119,7 +119,6 @@ export const UserOverview = React.memo<UserSummaryProps>(
<RiskScoreHeaderTitle
title={i18n.USER_RISK_SCORE}
riskScoreEntity={RiskScoreEntity.user}
showTooltip={false}
/>
),
description: (
@ -135,7 +134,6 @@ export const UserOverview = React.memo<UserSummaryProps>(
<RiskScoreHeaderTitle
title={i18n.USER_RISK_CLASSIFICATION}
riskScoreEntity={RiskScoreEntity.host}
showTooltip={false}
/>
),
description: (

View file

@ -8,8 +8,7 @@
import React, { useMemo, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
import styled from 'styled-components';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import type { Columns, Criteria, ItemsPerRow } from '../../../common/components/paginated_table';
import { PaginatedTable } from '../../../common/components/paginated_table';
@ -32,10 +31,6 @@ import type {
UserRiskScore,
} from '../../../../common/search_strategy';
const IconWrapper = styled.span`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;
export const rowItems: ItemsPerRow[] = [
{
text: i18n.ROWS_5,
@ -152,21 +147,6 @@ const UserRiskScoreTableComponent: React.FC<UserRiskScoreTableProps> = ({
</EuiFlexGroup>
);
const headerTitle = (
<>
{i18nUsers.NAVIGATION_RISK_TITLE}
<IconWrapper>
<EuiIconTip
color="subdued"
content={i18n.USER_RISK_TABLE_TOOLTIP}
position="right"
size="l"
type="iInCircle"
/>
</IconWrapper>
</>
);
const getUserRiskScoreFilterQuerySelector = useMemo(
() => usersSelectors.userRiskScoreSeverityFilterSelector(),
[]
@ -201,7 +181,8 @@ const UserRiskScoreTableComponent: React.FC<UserRiskScoreTableProps> = ({
/>
}
headerSupplement={risk}
headerTitle={headerTitle}
headerTitle={i18nUsers.NAVIGATION_RISK_TITLE}
headerTooltip={i18n.USER_RISK_TABLE_TOOLTIP}
headerUnit={i18n.UNIT(totalCount)}
id={id}
isInspect={isInspect}