Add way to pass props to modal in ModalRoute, use to make Troubleshooting Job modal wide

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>
 

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>
     );

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);