From b35328f2b26e46c60bffc633b1d64fd894c2292d Mon Sep 17 00:00:00 2001 From: Kevin Logan <56395104+kevinlog@users.noreply.github.com> Date: Wed, 13 Sep 2023 07:41:57 -0400 Subject: [PATCH] [Security Solution] Remove deprecated EuiPage usages in EDR Workflows pages (#162531) ## Summary Updated our deprecated usages of `EuiPageTemplate` with the new components. Addresses this ticket: https://github.com/elastic/kibana/issues/161405 Below see the affected components after applying the new components #### Administration/Endpoint List image #### Policy error image #### Policy details image #### Artifacts in policy image #### No artifacts in policy image #### No artifacts assigned in policy image #### Empty artifact page image #### Artifact page image #### Empty Endpoint and Policy pages image image --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../security_solution/public/app/404.tsx | 6 +- .../components/administration_list_page.tsx | 16 +--- .../management_empty_state_wrapper.tsx | 8 +- .../policy_artifacts_empty_unassigned.tsx | 78 +++++++++---------- .../policy_artifacts_empty_unexisting.tsx | 49 ++++++------ .../layout/policy_artifacts_layout.tsx | 12 +-- .../pages/policy/view/policy_details.tsx | 14 ++-- .../view/components/empty_state.tsx | 4 +- 8 files changed, 80 insertions(+), 107 deletions(-) diff --git a/x-pack/plugins/security_solution/public/app/404.tsx b/x-pack/plugins/security_solution/public/app/404.tsx index 562a542bb2a06..ce77baa895f12 100644 --- a/x-pack/plugins/security_solution/public/app/404.tsx +++ b/x-pack/plugins/security_solution/public/app/404.tsx @@ -8,13 +8,13 @@ import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiEmptyPrompt, EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui'; +import { EuiPageTemplate } from '@elastic/eui'; import { SecuritySolutionPageWrapper } from '../common/components/page_wrapper'; export const NotFoundPage = React.memo(() => ( - - + )} - - - {children} - + + {children} + ); } diff --git a/x-pack/plugins/security_solution/public/management/components/management_empty_state_wrapper.tsx b/x-pack/plugins/security_solution/public/management/components/management_empty_state_wrapper.tsx index db25aea95f917..162b8a19be6c4 100644 --- a/x-pack/plugins/security_solution/public/management/components/management_empty_state_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/management/components/management_empty_state_wrapper.tsx @@ -6,7 +6,7 @@ */ import React, { memo } from 'react'; -import { EuiFlexGroup, EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui'; +import { EuiFlexGroup, EuiPanel, EuiPageTemplate } from '@elastic/eui'; import styled from 'styled-components'; export const StyledEuiFlexGroup = styled(EuiFlexGroup)` @@ -22,8 +22,10 @@ export const ManagementEmptyStateWrapper = memo( 'data-test-subj'?: string; }) => { return ( - - {children} + + + {children} + ); } diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unassigned.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unassigned.tsx index 98b9d3bd8404d..37d52c27b8d8c 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unassigned.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unassigned.tsx @@ -6,12 +6,7 @@ */ import React, { memo, useCallback } from 'react'; -import { - EuiButton, - EuiEmptyPrompt, - EuiPageTemplate_Deprecated as EuiPageTemplate, - EuiLink, -} from '@elastic/eui'; +import { EuiButton, EuiLink, EuiPageTemplate } from '@elastic/eui'; import { usePolicyDetailsArtifactsNavigateCallback } from '../../policy_hooks'; import { useGetLinkTo } from './use_policy_artifacts_empty_hooks'; import { useUserPrivileges } from '../../../../../../common/components/user_privileges'; @@ -54,42 +49,41 @@ export const PolicyArtifactsEmptyUnassigned = memo( [navigateCallback] ); return ( - - {labels.emptyUnassignedTitle}} - body={ - canWriteArtifact - ? labels.emptyUnassignedMessage(policyName) - : labels.emptyUnassignedNoPrivilegesMessage(policyName) - } - actions={[ - ...(canCreateArtifactsByPolicy && canWriteArtifact - ? [ - - {labels.emptyUnassignedPrimaryActionButtonTitle} - , - ] - : []), - canWriteArtifact ? ( - // eslint-disable-next-line @elastic/eui/href-or-on-click - - {labels.emptyUnassignedSecondaryActionButtonTitle} - - ) : null, - ]} - /> - + {labels.emptyUnassignedTitle}} + body={ + canWriteArtifact + ? labels.emptyUnassignedMessage(policyName) + : labels.emptyUnassignedNoPrivilegesMessage(policyName) + } + actions={[ + ...(canCreateArtifactsByPolicy && canWriteArtifact + ? [ + + {labels.emptyUnassignedPrimaryActionButtonTitle} + , + ] + : []), + canWriteArtifact ? ( + // eslint-disable-next-line @elastic/eui/href-or-on-click + + {labels.emptyUnassignedSecondaryActionButtonTitle} + + ) : null, + ]} + /> ); } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unexisting.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unexisting.tsx index 1b1e52c872465..2ff8a399d3858 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unexisting.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unexisting.tsx @@ -6,11 +6,7 @@ */ import React, { memo } from 'react'; -import { - EuiEmptyPrompt, - EuiButton, - EuiPageTemplate_Deprecated as EuiPageTemplate, -} from '@elastic/eui'; +import { EuiButton, EuiPageTemplate } from '@elastic/eui'; import { useGetLinkTo } from './use_policy_artifacts_empty_hooks'; import type { POLICY_ARTIFACT_EMPTY_UNEXISTING_LABELS } from './translations'; import type { ArtifactListPageUrlParams } from '../../../../../components/artifact_list_page'; @@ -43,28 +39,27 @@ export const PolicyArtifactsEmptyUnexisting = memo( } ); return ( - - {labels.emptyUnexistingTitle}} - body={labels.emptyUnexistingMessage} - actions={ - canWriteArtifact ? ( - // eslint-disable-next-line @elastic/eui/href-or-on-click - - {labels.emptyUnexistingPrimaryActionButtonTitle} - - ) : null - } - /> - + {labels.emptyUnexistingTitle}} + body={labels.emptyUnexistingMessage} + actions={ + canWriteArtifact ? ( + // eslint-disable-next-line @elastic/eui/href-or-on-click + + {labels.emptyUnexistingPrimaryActionButtonTitle} + + ) : null + } + /> ); } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/layout/policy_artifacts_layout.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/layout/policy_artifacts_layout.tsx index 666bb5534d3ec..70ac3ce16aab7 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/layout/policy_artifacts_layout.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/artifacts/layout/policy_artifacts_layout.tsx @@ -15,7 +15,7 @@ import { EuiSpacer, EuiLink, EuiButton, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, } from '@elastic/eui'; import { useAppUrl } from '../../../../../../common/lib/kibana'; import { APP_UI_ID } from '../../../../../../../common/constants'; @@ -218,13 +218,7 @@ export const PolicyArtifactsLayout = React.memo( /> )} - + ( getPolicyArtifactsPath={getPolicyArtifactsPath} getArtifactPath={getArtifactPath} /> - + ); } diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx index f1a0976cbf021..7f72a8d475134 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx @@ -8,11 +8,7 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { useLocation } from 'react-router-dom'; -import { - EuiCallOut, - EuiLoadingSpinner, - EuiPageTemplate_Deprecated as EuiPageTemplate, -} from '@elastic/eui'; +import { EuiCallOut, EuiLoadingSpinner, EuiPageTemplate } from '@elastic/eui'; import { usePolicyDetailsSelector } from './policy_hooks'; import { policyDetails, agentStatusSummary, apiError } from '../store/policy_details/selectors'; import { AgentsSummary } from './components/agents_summary'; @@ -78,23 +74,23 @@ export const PolicyDetails = React.memo(() => { const pageBody: React.ReactNode = useMemo(() => { if (policyApiError) { return ( - + {policyApiError?.message} - + ); } if (!policyItem) { return ( - + - + ); } diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/empty_state.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/empty_state.tsx index c4a0d44d19e25..6dc176b1cb52d 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/empty_state.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/empty_state.tsx @@ -6,7 +6,7 @@ */ import React, { memo } from 'react'; -import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; +import { EuiButton, EuiPageTemplate } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { ManagementEmptyStateWrapper } from '../../../../components/management_empty_state_wrapper'; @@ -18,7 +18,7 @@ export const EmptyState = memo<{ }>(({ onAdd, isAddDisabled = false, backComponent }) => { return ( -