[Observability] [Cases] Fix Cases navigation (#102429)

elastic · Jun 21, 2021 · 491b0d1 · 491b0d1
1 parent 79b0949
commit 491b0d1
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 47 deletions.
diff --git a/x-pack/plugins/observability/public/components/app/cases/all_cases/index.tsx b/x-pack/plugins/observability/public/components/app/cases/all_cases/index.tsx
@@ -28,29 +28,26 @@ interface AllCasesProps {
 export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
   const {
     cases: casesUi,
-    application: { navigateToApp },
+    application: { getUrlForApp, navigateToUrl },
   } = useKibana().services;
   const { formatUrl } = useFormatUrl(CASES_APP_ID);
 
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   return casesUi.getAllCases({
     caseDetailsNavigation: {
       href: ({ detailName, subCaseId }: AllCasesNavProps) => {
         return formatUrl(getCaseDetailsUrl({ id: detailName, subCaseId }));
       },
       onClick: async ({ detailName, subCaseId, search }: AllCasesNavProps) =>
-        navigateToApp(`${CASES_APP_ID}`, {
-          path: getCaseDetailsUrl({ id: detailName, subCaseId }),
-        }),
+        navigateToUrl(`${casesUrl}${getCaseDetailsUrl({ id: detailName, subCaseId })}`),
     },
     configureCasesNavigation: {
       href: formatUrl(getConfigureCasesUrl()),
       onClick: async (ev) => {
         if (ev != null) {
           ev.preventDefault();
         }
-        return navigateToApp(`${CASES_APP_ID}`, {
-          path: getConfigureCasesUrl(),
-        });
+        return navigateToUrl(`${casesUrl}${getConfigureCasesUrl()}`);
       },
     },
     createCaseNavigation: {
@@ -59,9 +56,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
         if (ev != null) {
           ev.preventDefault();
         }
-        return navigateToApp(`${CASES_APP_ID}`, {
-          path: getCreateCaseUrl(),
-        });
+        return navigateToUrl(`${casesUrl}${getCreateCaseUrl()}`);
       },
     },
     disableAlerts: true,

diff --git a/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx b/x-pack/plugins/observability/public/components/app/cases/case_view/index.tsx
@@ -42,8 +42,10 @@ export interface CaseProps extends Props {
 export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) => {
   const [caseTitle, setCaseTitle] = useState<string | null>(null);
 
-  const { cases: casesUi, application } = useKibana().services;
-  const { navigateToApp } = application;
+  const {
+    cases: casesUi,
+    application: { getUrlForApp, navigateToUrl },
+  } = useKibana().services;
   const allCasesLink = getCaseUrl();
   const { formatUrl } = useFormatUrl(CASES_APP_ID);
   const href = formatUrl(allCasesLink);
@@ -79,16 +81,15 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
     [caseId, formatUrl, subCaseId]
   );
 
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   return casesUi.getCaseView({
     allCasesNavigation: {
       href: allCasesHref,
       onClick: async (ev) => {
         if (ev != null) {
           ev.preventDefault();
         }
-        return navigateToApp(`${CASES_APP_ID}`, {
-          path: allCasesLink,
-        });
+        return navigateToUrl(casesUrl);
       },
     },
     caseDetailsNavigation: {
@@ -97,9 +98,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
         if (ev != null) {
           ev.preventDefault();
         }
-        return navigateToApp(`${CASES_APP_ID}`, {
-          path: getCaseDetailsUrl({ id: caseId }),
-        });
+        return navigateToUrl(`${casesUrl}${getCaseDetailsUrl({ id: caseId })}`);
       },
     },
     caseId,
@@ -109,9 +108,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
         if (ev != null) {
           ev.preventDefault();
         }
-        return navigateToApp(`${CASES_APP_ID}`, {
-          path: configureCasesLink,
-        });
+        return navigateToUrl(`${casesUrl}${configureCasesLink}`);
       },
     },
     getCaseDetailHrefWithCommentId,

diff --git a/x-pack/plugins/observability/public/components/app/cases/create/index.test.tsx b/x-pack/plugins/observability/public/components/app/cases/create/index.test.tsx
@@ -12,23 +12,24 @@ import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_rea
 import { Create } from '.';
 import { useKibana } from '../../../../utils/kibana_react';
 import { basicCase } from '../../../../../../cases/public/containers/mock';
-import { CASES_APP_ID, CASES_OWNER } from '../constants';
+import { CASES_OWNER } from '../constants';
 import { Case } from '../../../../../../cases/common';
 import { getCaseDetailsUrl } from '../../../../pages/cases/links';
 
 jest.mock('../../../../utils/kibana_react');
 
 describe('Create case', () => {
   const mockCreateCase = jest.fn();
-  const mockNavigateToApp = jest.fn();
+  const mockNavigateToUrl = jest.fn();
+  const mockCasesUrl = 'https://elastic.co/app/observability/cases';
   beforeEach(() => {
     jest.resetAllMocks();
     (useKibana as jest.Mock).mockReturnValue({
       services: {
         cases: {
           getCreateCase: mockCreateCase,
         },
-        application: { navigateToApp: mockNavigateToApp },
+        application: { navigateToUrl: mockNavigateToUrl, getUrlForApp: () => mockCasesUrl },
       },
     });
   });
@@ -52,7 +53,7 @@ describe('Create case', () => {
             onCancel();
           },
         },
-        application: { navigateToApp: mockNavigateToApp },
+        application: { navigateToUrl: mockNavigateToUrl, getUrlForApp: () => mockCasesUrl },
       },
     });
     mount(
@@ -61,7 +62,7 @@ describe('Create case', () => {
       </EuiThemeProvider>
     );
 
-    await waitFor(() => expect(mockNavigateToApp).toHaveBeenCalledWith(`${CASES_APP_ID}`));
+    await waitFor(() => expect(mockNavigateToUrl).toHaveBeenCalledWith(`${mockCasesUrl}`));
   });
 
   it('should redirect to new case when posting the case', async () => {
@@ -72,7 +73,7 @@ describe('Create case', () => {
             onSuccess(basicCase);
           },
         },
-        application: { navigateToApp: mockNavigateToApp },
+        application: { navigateToUrl: mockNavigateToUrl, getUrlForApp: () => mockCasesUrl },
       },
     });
     mount(
@@ -82,9 +83,10 @@ describe('Create case', () => {
     );
 
     await waitFor(() =>
-      expect(mockNavigateToApp).toHaveBeenNthCalledWith(1, `${CASES_APP_ID}`, {
-        path: getCaseDetailsUrl({ id: basicCase.id }),
-      })
+      expect(mockNavigateToUrl).toHaveBeenNthCalledWith(
+        1,
+        `${mockCasesUrl}${getCaseDetailsUrl({ id: basicCase.id })}`
+      )
     );
   });
 });
diff --git a/x-pack/plugins/observability/public/components/app/cases/create/index.tsx b/x-pack/plugins/observability/public/components/app/cases/create/index.tsx
@@ -15,17 +15,18 @@ import { CASES_APP_ID, CASES_OWNER } from '../constants';
 export const Create = React.memo(() => {
   const {
     cases,
-    application: { navigateToApp },
+    application: { getUrlForApp, navigateToUrl },
   } = useKibana().services;
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   const onSuccess = useCallback(
-    async ({ id }) =>
-      navigateToApp(`${CASES_APP_ID}`, {
-        path: getCaseDetailsUrl({ id }),
-      }),
-    [navigateToApp]
+    async ({ id }) => navigateToUrl(`${casesUrl}${getCaseDetailsUrl({ id })}`),
+    [casesUrl, navigateToUrl]
   );
 
-  const handleSetIsCancel = useCallback(() => navigateToApp(`${CASES_APP_ID}`), [navigateToApp]);
+  const handleSetIsCancel = useCallback(() => navigateToUrl(`${casesUrl}`), [
+    casesUrl,
+    navigateToUrl,
+  ]);
 
   return (
     <EuiPanel>

diff --git a/x-pack/plugins/observability/public/pages/cases/case_details.tsx b/x-pack/plugins/observability/public/pages/cases/case_details.tsx
@@ -16,16 +16,17 @@ import { CaseCallOut, permissionsReadOnlyErrorMessage } from '../../components/a
 
 export const CaseDetailsPage = React.memo(() => {
   const {
-    application: { navigateToApp },
+    application: { getUrlForApp, navigateToUrl },
   } = useKibana().services;
   const userPermissions = useGetUserCasesPermissions();
   const { detailName: caseId, subCaseId } = useParams<{
     detailName?: string;
     subCaseId?: string;
   }>();
 
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   if (userPermissions != null && !userPermissions.read) {
-    navigateToApp(`${CASES_APP_ID}`);
+    navigateToUrl(casesUrl);
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx b/x-pack/plugins/observability/public/pages/cases/configure_cases.tsx
@@ -23,22 +23,23 @@ const ButtonEmpty = styled(EuiButtonEmpty)`
 function ConfigureCasesPageComponent() {
   const {
     cases,
-    application: { navigateToApp },
+    application: { getUrlForApp, navigateToUrl },
   } = useKibana().services;
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   const userPermissions = useGetUserCasesPermissions();
   const { ObservabilityPageTemplate } = usePluginContext();
   const onClickGoToCases = useCallback(
     async (ev) => {
       ev.preventDefault();
-      return navigateToApp(`${CASES_APP_ID}`);
+      return navigateToUrl(casesUrl);
     },
-    [navigateToApp]
+    [casesUrl, navigateToUrl]
   );
   const { formatUrl } = useFormatUrl(CASES_APP_ID);
   const href = formatUrl(getCaseUrl());
   useBreadcrumbs([{ ...casesBreadcrumbs.cases, href }, casesBreadcrumbs.configure]);
   if (userPermissions != null && !userPermissions.read) {
-    navigateToApp(`${CASES_APP_ID}`);
+    navigateToUrl(casesUrl);
     return null;
   }
 

diff --git a/x-pack/plugins/observability/public/pages/cases/create_case.tsx b/x-pack/plugins/observability/public/pages/cases/create_case.tsx
@@ -25,22 +25,23 @@ export const CreateCasePage = React.memo(() => {
   const userPermissions = useGetUserCasesPermissions();
   const { ObservabilityPageTemplate } = usePluginContext();
   const {
-    application: { navigateToApp },
+    application: { getUrlForApp, navigateToUrl },
   } = useKibana().services;
 
+  const casesUrl = getUrlForApp(CASES_APP_ID);
   const goTo = useCallback(
     async (ev) => {
       ev.preventDefault();
-      return navigateToApp(CASES_APP_ID);
+      return navigateToUrl(casesUrl);
     },
-    [navigateToApp]
+    [casesUrl, navigateToUrl]
   );
 
   const { formatUrl } = useFormatUrl(CASES_APP_ID);
   const href = formatUrl(getCaseUrl());
   useBreadcrumbs([{ ...casesBreadcrumbs.cases, href }, casesBreadcrumbs.create]);
   if (userPermissions != null && !userPermissions.crud) {
-    navigateToApp(`${CASES_APP_ID}`);
+    navigateToUrl(casesUrl);
     return null;
   }