Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Management API - redirect on disabled app path #55136

Merged
merged 5 commits into from
Jan 17, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<kbn-management-app>
<div id="management-landing"></div>
<div id="management-landing" data-test-subj="management-landing"></div>
</kbn-management-app>
61 changes: 32 additions & 29 deletions src/plugins/management/public/management_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export class ManagementApp {
readonly basePath: string;
readonly order: number;
readonly mount: ManagementSectionMount;
protected enabledStatus: boolean = true;
private enabledStatus: boolean = true;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optioanal nit: I believe :boolean is not needed as the correct type is derived from the initial value.


constructor(
{ id, title, basePath, order = 100, mount }: CreateManagementApp,
Expand All @@ -54,35 +54,38 @@ export class ManagementApp {
title,
mount: async ({}, params) => {
let appUnmount: Unmount;
async function setBreadcrumbs(crumbs: ChromeBreadcrumb[]) {
const [coreStart] = await getStartServices();
coreStart.chrome.setBreadcrumbs([
{
text: i18n.translate('management.breadcrumb', {
defaultMessage: 'Management',
}),
href: '#/management',
},
...crumbs,
]);
}

ReactDOM.render(
<ManagementChrome
getSections={getSections}
selectedId={id}
legacySections={getLegacyManagementSections().items}
onMounted={async element => {
appUnmount = await mount({
basePath,
element,
setBreadcrumbs,
});
}}
/>,
params.element
);
if (!this.enabledStatus) {
window.location.hash = '/management';
} else {
async function setBreadcrumbs(crumbs: ChromeBreadcrumb[]) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optional nit: it was here before, so feel free to ignore, but technically we can move setBreadcrumbs function one level up to create it only once per app (or even make it a private class method assuming getStartServices can become a private readonly as well).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll likely address this in a future refactor. Gave it a try but it twas changing a bit more code than I'd like for this PR.

const [coreStart] = await getStartServices();
coreStart.chrome.setBreadcrumbs([
{
text: i18n.translate('management.breadcrumb', {
defaultMessage: 'Management',
}),
href: '#/management',
},
...crumbs,
]);
}

ReactDOM.render(
<ManagementChrome
getSections={getSections}
selectedId={id}
legacySections={getLegacyManagementSections().items}
onMounted={async element => {
appUnmount = await mount({
basePath,
element,
setBreadcrumbs,
});
}}
/>,
params.element
);
}
return async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems appUnmount() and ReactDOM.unmountComponentAtNode(params.element) will be called even if React was not mounted. Maybe you could do an early return

if (!this.enabledStatus) {
  window.location.hash = '/management';
  // Early return
  return () => {};
}

and leave the rest of the function as before.

appUnmount();
ReactDOM.unmountComponentAtNode(params.element);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import * as React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { CoreSetup, Plugin } from 'kibana/public';
import { ManagementSetup } from '../../../../../src/plugins/management/public';
import { ManagementSetup, ManagementApp } from '../../../../../src/plugins/management/public';

export class ManagementTestPlugin
implements Plugin<ManagementTestPluginSetup, ManagementTestPluginStart> {
Expand All @@ -33,14 +33,30 @@ export class ManagementTestPlugin
order: 25,
});

testSection!.registerApp({
function disableAndNav(app: ManagementApp) {
return () => {
app.disable();
window.location.hash = '/management/test-section';
};
}

const app = testSection!.registerApp({
id: 'test-management',
title: 'Management Test',
mount(params) {
params.setBreadcrumbs([{ text: 'Management Test' }]);
ReactDOM.render(
<Router>
<h1 data-test-subj="test-management-header">Hello from management test plugin</h1>
<div>
<a
onClick={disableAndNav(app)}
onKeyUp={disableAndNav(app)}
data-test-subj="test-management-disable"
>
Disable
</a>
</div>
<Switch>
<Route exact path={`${params.basePath}`}>
<Link to={`${params.basePath}/one`} data-test-subj="test-management-link-one">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,10 @@ export default function({ getService, getPageObjects }) {
await testSubjects.click('test-management-link-basepath');
await testSubjects.existOrFail('test-management-link-one');
});

it('should redirect when app is disabled', async () => {
await testSubjects.click('test-management-disable');
await testSubjects.existOrFail('management-landing');
});
});
}