[Security Solution] Remove deprecated EuiPage usages in EDR Workflows…

… pages (elastic#162531) ## Summary Updated our deprecated usages of `EuiPageTemplate` with the new components. Addresses this ticket: elastic#161405 Below see the affected components after applying the new components #### Administration/Endpoint List <img width="1481" alt="image" src="https://github.com/elastic/kibana/assets/56395104/3afdb8d2-56dc-4578-a1be-a7cc2879fa6b"> #### Policy error <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/cfa056ea-6998-41a0-b26a-d6cba7071f6d"> #### Policy details <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/9868ea46-d6bd-454d-b65e-0f0719b395b9"> #### Artifacts in policy <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/54f8f9b9-ba10-4d80-a91c-9b173137c3a7"> #### No artifacts in policy <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/62887c44-768d-401f-a2f0-414a8e8d837a"> #### No artifacts assigned in policy <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/b34f8789-ad14-4eba-8cb8-c1935ae36a08"> #### Empty artifact page <img width="1726" alt="image" src="https://github.com/elastic/kibana/assets/56395104/88565a6f-a0fc-4df4-91b6-9bc07baec787"> #### Artifact page <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/acee3ee3-d6e5-456c-a44e-69e8f8098cb4"> #### Empty Endpoint and Policy pages <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/5768cce5-aeb4-427b-a0c5-edfe3be43225"> <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/56395104/a5f7f8cd-f843-48c2-89c1-db1d728cc553"> --------- Co-authored-by: kibanamachine <[email protected]>
e40pud · Sep 13, 2023 · b35328f · b35328f
1 parent a0aaaed
commit b35328f
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 107 deletions.
diff --git 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(() => (
   <SecuritySolutionPageWrapper>
-    <EuiPageTemplate template="centeredContent">
-      <EuiEmptyPrompt
+    <EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
         data-test-subj="notFoundPage"
         iconColor="default"
         iconType="logoElastic"

diff --git a/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx b/x-pack/plugins/security_solution/public/management/components/administration_list_page.tsx
@@ -10,8 +10,7 @@ import React, { memo, useMemo } from 'react';
 import type { CommonProps } from '@elastic/eui';
 import {
   EuiPageHeader,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiFlexGroup,
   EuiFlexItem,
   EuiTitle,
@@ -77,16 +76,9 @@ export const AdministrationListPage: FC<AdministrationListPageProps & CommonProp
             <EuiSpacer size="l" />
           </>
         )}
-
-        <EuiPageContent
-          hasBorder={false}
-          hasShadow={false}
-          paddingSize="none"
-          color="transparent"
-          borderRadius="none"
-        >
-          <EuiPageContentBody restrictWidth={restrictWidth}>{children}</EuiPageContentBody>
-        </EuiPageContent>
+        <EuiPageSection paddingSize="none" color="transparent" restrictWidth={restrictWidth}>
+          {children}
+        </EuiPageSection>
       </div>
     );
   }

diff --git a/...plugins/security_solution/public/management/components/management_empty_state_wrapper.tsx b/...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 (
-      <StyledEuiFlexGroup direction="column" alignItems="center" data-test-subj={dataTestSubj}>
-        <EuiPageTemplate template="centeredContent">{children}</EuiPageTemplate>
+      <StyledEuiFlexGroup justifyContent="center" direction="column" data-test-subj={dataTestSubj}>
+        <EuiPageTemplate.Section grow={false} alignment="center">
+          <EuiPanel color="subdued">{children}</EuiPanel>
+        </EuiPageTemplate.Section>
       </StyledEuiFlexGroup>
     );
   }

diff --git a/...public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unassigned.tsx b/...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<CommonProps>(
       [navigateCallback]
     );
     return (
-      <EuiPageTemplate template="centeredContent">
-        <EuiEmptyPrompt
-          iconType="plusInCircle"
-          data-test-subj="policy-artifacts-empty-unassigned"
-          title={<h2>{labels.emptyUnassignedTitle}</h2>}
-          body={
-            canWriteArtifact
-              ? labels.emptyUnassignedMessage(policyName)
-              : labels.emptyUnassignedNoPrivilegesMessage(policyName)
-          }
-          actions={[
-            ...(canCreateArtifactsByPolicy && canWriteArtifact
-              ? [
-                  <EuiButton
-                    color="primary"
-                    fill
-                    onClick={onClickPrimaryButtonHandler}
-                    data-test-subj="unassigned-assign-artifacts-button"
-                  >
-                    {labels.emptyUnassignedPrimaryActionButtonTitle}
-                  </EuiButton>,
-                ]
-              : []),
-            canWriteArtifact ? (
-              // eslint-disable-next-line @elastic/eui/href-or-on-click
-              <EuiLink
-                onClick={onClickHandler}
-                href={toRouteUrl}
-                data-test-subj="unassigned-manage-artifacts-button"
-              >
-                {labels.emptyUnassignedSecondaryActionButtonTitle}
-              </EuiLink>
-            ) : null,
-          ]}
-        />
-      </EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="plusInCircle"
+        data-test-subj="policy-artifacts-empty-unassigned"
+        color="subdued"
+        title={<h2>{labels.emptyUnassignedTitle}</h2>}
+        body={
+          canWriteArtifact
+            ? labels.emptyUnassignedMessage(policyName)
+            : labels.emptyUnassignedNoPrivilegesMessage(policyName)
+        }
+        actions={[
+          ...(canCreateArtifactsByPolicy && canWriteArtifact
+            ? [
+                <EuiButton
+                  color="primary"
+                  fill
+                  onClick={onClickPrimaryButtonHandler}
+                  data-test-subj="unassigned-assign-artifacts-button"
+                >
+                  {labels.emptyUnassignedPrimaryActionButtonTitle}
+                </EuiButton>,
+              ]
+            : []),
+          canWriteArtifact ? (
+            // eslint-disable-next-line @elastic/eui/href-or-on-click
+            <EuiLink
+              onClick={onClickHandler}
+              href={toRouteUrl}
+              data-test-subj="unassigned-manage-artifacts-button"
+            >
+              {labels.emptyUnassignedSecondaryActionButtonTitle}
+            </EuiLink>
+          ) : null,
+        ]}
+      />
     );
   }
 );

diff --git a/...public/management/pages/policy/view/artifacts/empty/policy_artifacts_empty_unexisting.tsx b/...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<CommonProps>(
       }
     );
     return (
-      <EuiPageTemplate template="centeredContent">
-        <EuiEmptyPrompt
-          iconType="plusInCircle"
-          data-test-subj="policy-artifacts-empty-unexisting"
-          title={<h2>{labels.emptyUnexistingTitle}</h2>}
-          body={labels.emptyUnexistingMessage}
-          actions={
-            canWriteArtifact ? (
-              // eslint-disable-next-line @elastic/eui/href-or-on-click
-              <EuiButton
-                color="primary"
-                fill
-                onClick={onClickHandler}
-                href={toRouteUrl}
-                data-test-subj="unexisting-manage-artifacts-button"
-              >
-                {labels.emptyUnexistingPrimaryActionButtonTitle}
-              </EuiButton>
-            ) : null
-          }
-        />
-      </EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
+        color="subdued"
+        iconType="plusInCircle"
+        data-test-subj="policy-artifacts-empty-unexisting"
+        title={<h2>{labels.emptyUnexistingTitle}</h2>}
+        body={labels.emptyUnexistingMessage}
+        actions={
+          canWriteArtifact ? (
+            // eslint-disable-next-line @elastic/eui/href-or-on-click
+            <EuiButton
+              color="primary"
+              fill
+              onClick={onClickHandler}
+              href={toRouteUrl}
+              data-test-subj="unexisting-manage-artifacts-button"
+            >
+              {labels.emptyUnexistingPrimaryActionButtonTitle}
+            </EuiButton>
+          ) : null
+        }
+      />
     );
   }
 );

diff --git a/...solution/public/management/pages/policy/view/artifacts/layout/policy_artifacts_layout.tsx b/...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<PolicyArtifactsLayoutProps>(
           />
         )}
         <EuiSpacer size="l" />
-        <EuiPageContent
-          hasBorder={false}
-          hasShadow={false}
-          paddingSize="none"
-          color="transparent"
-          borderRadius="none"
-        >
+        <EuiPageSection paddingSize="none" color="transparent">
           <PolicyArtifactsList
             policy={policyItem}
             apiClient={exceptionsListApiClient}
@@ -235,7 +229,7 @@ export const PolicyArtifactsLayout = React.memo<PolicyArtifactsLayoutProps>(
             getPolicyArtifactsPath={getPolicyArtifactsPath}
             getArtifactPath={getArtifactPath}
           />
-        </EuiPageContent>
+        </EuiPageSection>
       </div>
     );
   }

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
@@ -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 (
-        <EuiPageTemplate template="centeredContent">
+        <EuiPageTemplate.Section grow={false} alignment="center">
           <EuiCallOut color="danger" title={policyApiError?.error}>
             <span data-test-subj="policyDetailsIdNotFoundMessage">{policyApiError?.message}</span>
           </EuiCallOut>
-        </EuiPageTemplate>
+        </EuiPageTemplate.Section>
       );
     }
 
     if (!policyItem) {
       return (
-        <EuiPageTemplate template="centeredContent">
+        <EuiPageTemplate.Section grow={false} alignment="center">
           <EuiLoadingSpinner
             className="essentialAnimation"
             size="xl"
             data-test-subj="policyDetailsLoading"
           />
-        </EuiPageTemplate>
+        </EuiPageTemplate.Section>
       );
     }
 

diff --git a/...ns/security_solution/public/management/pages/trusted_apps/view/components/empty_state.tsx b/...ns/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 (
     <ManagementEmptyStateWrapper>
-      <EuiEmptyPrompt
+      <EuiPageTemplate.EmptyPrompt
         data-test-subj="trustedAppEmptyState"
         iconType="plusInCircle"
         title={