[ResponseOps][Cases]Breadcrumb links should be aligned with informati…

…on architecture: 0001 (#209520) Closes #195036 ## Summary - removed 'Back to cases' link, not needed with the breadcrumb https://github.com/user-attachments/assets/ffef4163-1ebc-4962-be95-8cff156da316 - instead of clicking on the "Back to cases" button, we should click on the middle breadcrumb called "Cases" to go back to all cases page
elastic · Feb 19, 2025 · fe49524 · fe49524
1 parent 78b8f8c
commit fe49524
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 61 deletions.
diff --git a/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx b/x-pack/platform/plugins/shared/cases/public/components/case_view/case_view_page.tsx
@@ -88,7 +88,6 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
       <>
         <HeaderPage
           border={false}
-          showBackButton={true}
           data-test-subj="case-view-title"
           titleNode={
             <EditableTitle

diff --git a/x-pack/platform/plugins/shared/cases/public/components/configure_cases/index.tsx b/x-pack/platform/plugins/shared/cases/public/components/configure_cases/index.tsx
@@ -623,11 +623,7 @@ export const ConfigureCases: React.FC = React.memo(() => {
 
   return (
     <EuiPageSection restrictWidth={true}>
-      <HeaderPage
-        showBackButton={true}
-        data-test-subj="case-configure-title"
-        title={i18n.CONFIGURE_CASES_PAGE_TITLE}
-      />
+      <HeaderPage data-test-subj="case-configure-title" title={i18n.CONFIGURE_CASES_PAGE_TITLE} />
       <EuiPageBody restrictWidth={true}>
         <div css={getFormWrapperCss(euiTheme)}>
           {hasMinimumLicensePermissions && (

diff --git a/x-pack/platform/plugins/shared/cases/public/components/create/index.tsx b/x-pack/platform/plugins/shared/cases/public/components/create/index.tsx
@@ -25,11 +25,7 @@ export const CreateCase = React.memo<CreateCaseFormProps>(
 
     return (
       <EuiPageSection restrictWidth={true}>
-        <HeaderPage
-          showBackButton={true}
-          data-test-subj="case-create-title"
-          title={i18n.CREATE_CASE_TITLE}
-        />
+        <HeaderPage data-test-subj="case-create-title" title={i18n.CREATE_CASE_TITLE} />
         <CreateCaseForm
           afterCaseCreated={afterCaseCreated}
           onCancel={onCancel}

diff --git a/x-pack/platform/plugins/shared/cases/public/components/header_page/index.test.tsx b/x-pack/platform/plugins/shared/cases/public/components/header_page/index.test.tsx
@@ -36,16 +36,6 @@ describe('HeaderPage', () => {
     expect(result.getByText('Test supplement')).toBeInTheDocument();
   });
 
-  it('renders the back link when provided', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <HeaderPage showBackButton title="Test title" />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('.casesHeaderPage__linkBack').first().exists()).toBe(true);
-  });
-
   it('DOES NOT render the back link when not provided', () => {
     const wrapper = mount(
       <TestProviders>

diff --git a/x-pack/platform/plugins/shared/cases/public/components/header_page/index.tsx b/x-pack/platform/plugins/shared/cases/public/components/header_page/index.tsx
@@ -5,15 +5,12 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import type { EuiThemeComputed } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, EuiProgress, useEuiFontSize, useEuiTheme } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiProgress, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-import { useAllCasesNavigation } from '../../common/navigation';
-import { LinkIcon } from '../link_icon';
 import { Title } from './title';
-import * as i18n from './translations';
 import { useCasesContext } from '../cases_context/use_cases_context';
 
 interface HeaderProps {
@@ -22,7 +19,6 @@ interface HeaderProps {
 }
 
 export interface HeaderPageProps extends HeaderProps {
-  showBackButton?: boolean;
   children?: React.ReactNode;
   title: string | React.ReactNode;
   titleNode?: React.ReactElement;
@@ -42,7 +38,6 @@ const getHeaderCss = (euiTheme: EuiThemeComputed<{}>, border?: boolean) => css`
 `;
 
 const HeaderPageComponent: React.FC<HeaderPageProps> = ({
-  showBackButton = false,
   border,
   children,
   isLoading,
@@ -51,19 +46,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   'data-test-subj': dataTestSubj,
 }) => {
   const { releasePhase } = useCasesContext();
-  const { navigateToAllCases } = useAllCasesNavigation();
   const { euiTheme } = useEuiTheme();
-  const xsFontSize = useEuiFontSize('xs').fontSize;
-
-  const navigateToAllCasesClick = useCallback(
-    (e: React.SyntheticEvent) => {
-      if (e) {
-        e.preventDefault();
-      }
-      navigateToAllCases();
-    },
-    [navigateToAllCases]
-  );
 
   return (
     <header css={getHeaderCss(euiTheme, border)} data-test-subj={dataTestSubj}>
@@ -74,24 +57,6 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
             display: block;
           `}
         >
-          {showBackButton && (
-            <div
-              className="casesHeaderPage__linkBack"
-              css={css`
-                font-size: ${xsFontSize};
-                margin-bottom: ${euiTheme.size.s};
-              `}
-            >
-              <LinkIcon
-                dataTestSubj="backToCases"
-                onClick={navigateToAllCasesClick}
-                iconType="arrowLeft"
-              >
-                {i18n.BACK_TO_ALL}
-              </LinkIcon>
-            </div>
-          )}
-
           {titleNode || <Title title={title} releasePhase={releasePhase} />}
 
           {border && isLoading && <EuiProgress size="xs" color="accent" />}

diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts
@@ -443,7 +443,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
          */
         await setTimeoutAsync(2000);
 
-        await testSubjects.click('backToCases');
+        await testSubjects.click('breadcrumb');
 
         await cases.casesTable.waitForCasesToBeListed();
         await cases.casesTable.goToFirstListedCase();

diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group2/list_view.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group2/list_view.ts
@@ -739,7 +739,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         await cases.casesTable.goToFirstListedCase();
 
         await header.waitUntilLoadingHasFinished();
-        await testSubjects.click('backToCases');
+        await testSubjects.click('breadcrumb');
 
         await header.waitUntilLoadingHasFinished();
         await cases.casesTable.waitForCasesToBeListed();

diff --git a/x-pack/test/security_solution_cypress/cypress/screens/create_new_case.ts b/x-pack/test/security_solution_cypress/cypress/screens/create_new_case.ts
@@ -7,7 +7,7 @@
 
 export const ADD_COMMENT_INPUT = '[data-test-subj="add-comment"] textarea';
 
-export const BACK_TO_CASES_BTN = '[data-test-subj="backToCases"]';
+export const BACK_TO_CASES_BTN = 'a[title="Cases"]';
 
 export const DESCRIPTION_INPUT = '[data-test-subj="caseDescription"] textarea';