Add "Create rollup job" wizard foundation and logistics step (#22381)

* Lay foundation for wizard: chrome, navigation, steps configuration, error-reporting.
* Add first step for rollup logistics: form, help text, documentation link, validation.
* You can create a job with the wizard: add createJob API endpoint, deep-link to newly-created job.
* Show 'Loading' and 'No job found' feedback inside of detail panel.
* Internationalize job list page, create page, and logistics step.

src/ui/public/indices/constants/index.js

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { INDEX_PATTERN_ILLEGAL_CHARACTERS_VISIBLE } from 'ui/index_patterns';
+
+export const INDEX_ILLEGAL_CHARACTERS_VISIBLE = INDEX_PATTERN_ILLEGAL_CHARACTERS_VISIBLE.concat(',');

src/ui/public/indices/index.js

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {
+  INDEX_ILLEGAL_CHARACTERS_VISIBLE,
+} from './constants';

x-pack/plugins/rollup/common/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const PLUGIN = {
+  ID: 'rollup'
+};

x-pack/plugins/rollup/index.js

@@ -5,7 +5,7 @@
  */
 
 import { resolve } from 'path';
-import { PLUGIN } from './common/constants';
+import { PLUGIN } from './common';
 import { registerLicenseChecker } from './server/lib/register_license_checker';
 import {
   registerIndicesRoute,

x-pack/plugins/rollup/public/crud_app/app.js

@@ -4,16 +4,43 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Switch, Route } from 'react-router-dom';
-import { CRUD_APP_BASE_PATH } from '../../common/constants';
-import { JobList } from './sections';
 
-export const App = () => (
-  <div>
-    <Switch>
-      <Route exact path={CRUD_APP_BASE_PATH} component={JobList} />
-    </Switch>
-  </div>
-);
+import { CRUD_APP_BASE_PATH } from './constants';
+import { registerRouter } from './services';
+import { JobList, JobCreate } from './sections';
 
+export class App extends Component {
+  static contextTypes = {
+    router: PropTypes.shape({
+      history: PropTypes.shape({
+        push: PropTypes.func.isRequired,
+        createHref: PropTypes.func.isRequired
+      }).isRequired
+    }).isRequired
+  }
+
+  constructor(...args) {
+    super(...args);
+    this.registerRouter();
+  }
+
+  registerRouter() {
+    // Share the router with the app without requiring React or context.
+    const { router } = this.context;
+    registerRouter(router);
+  }
+
+  render() {
+    return (
+      <div>
+        <Switch>
+          <Route exact path={`${CRUD_APP_BASE_PATH}`} component={JobList} />
+          <Route exact path={`${CRUD_APP_BASE_PATH}/create`} component={JobCreate} />
+        </Switch>
+      </div>
+    );
+  }
+}

x-pack/plugins/rollup/common/constants/crud_app.js → x-pack/plugins/rollup/public/crud_app/constants/index.js

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const CRUD_APP_BASE_PATH = '/management/elasticsearch/rollup_jobs/';
+export const CRUD_APP_BASE_PATH = '/management/elasticsearch/rollup_jobs';

x-pack/plugins/rollup/public/crud_app/index.js

@@ -12,19 +12,20 @@ import { I18nProvider } from '@kbn/i18n/react';
 import { management } from 'ui/management';
 import routes from 'ui/routes';
 
-import { CRUD_APP_BASE_PATH } from '../../common/constants';
+import { CRUD_APP_BASE_PATH } from './constants';
 import { setHttpClient } from './services';
 import { App } from './app';
 import template from './main.html';
 import { rollupJobsStore } from './store';
+import './index.less';
 
 const esSection = management.getSection('elasticsearch');
 
 esSection.register('rollup_jobs', {
   visible: true,
   display: 'Rollup Jobs',
   order: 2,
-  url: `#${CRUD_APP_BASE_PATH}`
+  url: `#${CRUD_APP_BASE_PATH}`,
 });
 
 export const manageAngularLifecycle = ($scope, $route, elem) => {
@@ -46,7 +47,7 @@ export const manageAngularLifecycle = ($scope, $route, elem) => {
 const renderReact = async (elem) => {
   render(
     <I18nProvider>
-      <Provider store={rollupJobsStore()}>
+      <Provider store={rollupJobsStore}>
         <HashRouter>
           <App />
         </HashRouter>
@@ -56,7 +57,7 @@ const renderReact = async (elem) => {
   );
 };
 
-routes.when(`${CRUD_APP_BASE_PATH}:view?`, {
+routes.when(`${CRUD_APP_BASE_PATH}/:view?`, {
   template: template,
   controllerAs: 'rollupJobs',
   controller: class IndexRollupJobsController {

x-pack/plugins/rollup/public/crud_app/index.less

@@ -0,0 +1,9 @@
+/**
+ * 1. Override EUI styles.
+ */
+.rollupJobWizardPage {
+  max-width: 1000px !important; /* 1 */
+  width: 100% !important; /* 1 */
+  margin-top: 16px;
+  margin-bottom: 16px;
+}

x-pack/plugins/rollup/public/crud_app/sections/index.js

@@ -5,3 +5,4 @@
  */
 
 export { JobList } from './job_list';
+export { JobCreate } from './job_create';

x-pack/plugins/rollup/common/constants/index.js → x-pack/plugins/rollup/public/crud_app/sections/job_create/index.js

@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PLUGIN } from './plugin';
-export { CRUD_APP_BASE_PATH } from './crud_app';
+export { JobCreate } from './job_create.container';

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.container.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { JobCreate as JobCreateView } from './job_create';
+
+import {
+  isSaving,
+  getCreateJobError,
+} from '../../store/selectors';
+
+import {
+  createJob,
+  clearCreateJobErrors,
+} from '../../store/actions';
+
+const mapStateToProps = (state) => {
+  return {
+    isSaving: isSaving(state),
+    saveError: getCreateJobError(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    createJob: jobConfig => {
+      dispatch(createJob(jobConfig));
+    },
+    clearCreateJobErrors: () => {
+      dispatch(clearCreateJobErrors());
+    },
+  };
+};
+
+export const JobCreate = connect(mapStateToProps, mapDispatchToProps)(JobCreateView);