[Observability] [Cases] Fix Cases navigation (#102429)
This commit is contained in:
parent
79b0949d34
commit
491b0d1d0b
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 })}`
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue