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

This commit is contained in:
Steph Milovic 2021-06-21 10:54:46 -06:00 committed by GitHub
parent 79b0949d34
commit 491b0d1d0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 47 deletions

View file

@ -28,19 +28,18 @@ 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()),
@ -48,9 +47,7 @@ export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
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,

View file

@ -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,6 +81,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
[caseId, formatUrl, subCaseId]
);
const casesUrl = getUrlForApp(CASES_APP_ID);
return casesUi.getCaseView({
allCasesNavigation: {
href: allCasesHref,
@ -86,9 +89,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
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,

View file

@ -12,7 +12,7 @@ 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';
@ -20,7 +20,8 @@ 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({
@ -28,7 +29,7 @@ describe('Create case', () => {
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 })}`
)
);
});
});

View file

@ -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>

View file

@ -16,7 +16,7 @@ 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<{
@ -24,8 +24,9 @@ export const CaseDetailsPage = React.memo(() => {
subCaseId?: string;
}>();
const casesUrl = getUrlForApp(CASES_APP_ID);
if (userPermissions != null && !userPermissions.read) {
navigateToApp(`${CASES_APP_ID}`);
navigateToUrl(casesUrl);
return null;
}

View file

@ -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;
}

View file

@ -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;
}