From aaf0e65c97a85f159a7b53841db74b4845de82cc Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Tue, 5 Feb 2019 12:06:47 -0800
Subject: [PATCH] Add way to pass props to modal in ModalRoute, use to make
Troubleshooting Job modal wide
---
frontend/src/metabase/admin/routes.jsx | 7 ++++++-
.../admin/tasks/containers/JobTriggersModal.jsx | 11 ++++++++---
frontend/src/metabase/hoc/ModalRoute.jsx | 8 ++++----
3 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/frontend/src/metabase/admin/routes.jsx b/frontend/src/metabase/admin/routes.jsx
index 7b9678d970d..79b607e754b 100644
--- a/frontend/src/metabase/admin/routes.jsx
+++ b/frontend/src/metabase/admin/routes.jsx
@@ -88,11 +88,16 @@ const getRoutes = (store, IsAdmin) => (
title={t`Troubleshooting`}
component={TroubleshootingApp}
>
+ <IndexRedirect to="tasks" />
<Route path="tasks" component={TasksApp}>
<ModalRoute path=":taskId" modal={TaskModal} />
</Route>
<Route path="jobs" component={JobInfoApp}>
- <ModalRoute path=":jobKey" modal={JobTriggersModal} />
+ <ModalRoute
+ path=":jobKey"
+ modal={JobTriggersModal}
+ modalProps={{ wide: true }}
+ />
</Route>
</Route>
diff --git a/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx b/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
index f9250cb0f1f..915cb5da031 100644
--- a/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
+++ b/frontend/src/metabase/admin/tasks/containers/JobTriggersModal.jsx
@@ -50,6 +50,11 @@ const renderTriggersTable = triggers => {
@connect(null, { fetchJobInfo, goBack })
export default class JobTriggersModal extends React.Component {
+ state = {
+ triggers: null,
+ error: null,
+ };
+
async componentDidMount() {
try {
const { jobKey } = this.props.params;
@@ -64,13 +69,13 @@ export default class JobTriggersModal extends React.Component {
}
render() {
- const { jobKey, goBack } = this.props.params;
- const { triggers, error } = this.state || {};
+ const { params: { jobKey }, goBack } = this.props;
+ const { triggers, error } = this.state;
return (
<ModalContent title={t`Triggers for ${jobKey}`} onClose={goBack}>
<LoadingAndErrorWrapper loading={!triggers} error={error}>
- <Box p={3}>{renderTriggersTable(triggers)}</Box>
+ {() => renderTriggersTable(triggers)}
</LoadingAndErrorWrapper>
</ModalContent>
);
diff --git a/frontend/src/metabase/hoc/ModalRoute.jsx b/frontend/src/metabase/hoc/ModalRoute.jsx
index 7158a4782ac..bf6678b8fe9 100644
--- a/frontend/src/metabase/hoc/ModalRoute.jsx
+++ b/frontend/src/metabase/hoc/ModalRoute.jsx
@@ -4,7 +4,7 @@ import { push } from "react-router-redux";
import { connect } from "react-redux";
import Modal from "metabase/components/Modal";
-const ModalWithRoute = ComposedModal =>
+const ModalWithRoute = (ComposedModal, modalProps = {}) =>
connect(null, { onChangeLocation: push })(
class extends Component {
static displayName = `ModalWithRoute[${ComposedModal.displayName ||
@@ -21,7 +21,7 @@ const ModalWithRoute = ComposedModal =>
render() {
return (
- <Modal onClose={this.onClose}>
+ <Modal {...modalProps} onClose={this.onClose}>
<ComposedModal {...this.props} onClose={this.onClose} />
</Modal>
);
@@ -32,11 +32,11 @@ const ModalWithRoute = ComposedModal =>
// react-router Route wrapper that handles routed modals
export class ModalRoute extends Route {
static createRouteFromReactElement(element) {
- const { modal } = element.props;
+ const { modal, modalProps } = element.props;
if (modal) {
element = React.cloneElement(element, {
- component: ModalWithRoute(modal),
+ component: ModalWithRoute(modal, modalProps),
});
return Route.createRouteFromReactElement(element);
--
GitLab