Euified Management Saved Objects view component.

src/legacy/core_plugins/kibana/public/management/sections/objects/index.js

@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { management } from 'ui/management';
-import './_view';
+import './view/_view';
 import './_objects';
 import 'ace';
 import { uiModules } from 'ui/modules';

src/legacy/core_plugins/kibana/public/management/sections/objects/view/_view.html

@@ -0,0 +1,5 @@
+<kbn-management-app section="kibana/objects" class="kuiView" data-test-subj="savedObjectsEdit">
+  <kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
+    <div id="reactViewSavedObjectsId"></div>
+  </kbn-management-objects-view>
+</kbn-management-app>

src/legacy/core_plugins/kibana/public/management/sections/objects/_view.js → src/legacy/core_plugins/kibana/public/management/sections/objects/view/_view.js

@@ -17,27 +17,82 @@
  * under the License.
  */
 
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { I18nContext } from 'ui/i18n';
+import { EuiSpacer } from '@elastic/eui';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
 import angular from 'angular';
 import 'angular-elastic/elastic';
 import rison from 'rison-node';
-import { savedObjectManagementRegistry } from '../../saved_object_registry';
+import { savedObjectManagementRegistry } from '../../../saved_object_registry';
 import objectViewHTML from './_view.html';
 import uiRoutes from 'ui/routes';
 import { uiModules } from 'ui/modules';
 import { fatalError, toastNotifications } from 'ui/notify';
 import 'ui/accessibility/kbn_ui_ace_keyboard_mode';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
 import { isNumeric } from 'ui/utils/numeric';
-import { canViewInApp } from './lib/in_app_url';
+import { canViewInApp } from '../lib/in_app_url';
+import { Header, Errors, Intro, Form } from './components';
 
-import { castEsToKbnFieldTypeName } from '../../../../../../../plugins/data/public';
+import { castEsToKbnFieldTypeName } from '../../../../../../../../plugins/data/public';
 
-import { getViewBreadcrumbs } from './breadcrumbs';
+import { getViewBreadcrumbs } from '../breadcrumbs';
 
 const location = 'SavedObject view';
 
+const REACT_COMPONENT_ID = 'reactViewSavedObjectsId';
+
+function updateReactComponent($scope) {
+  $scope.$$postDigest(() => {
+    const node = document.getElementById(REACT_COMPONENT_ID);
+    if (!node) {
+      return;
+    }
+
+    render(
+      <I18nContext>
+        <Header
+          canEdit={$scope.canEdit}
+          title={$scope.title}
+          link={$scope.link}
+          canViewInApp={$scope.canViewInApp}
+          canDelete={$scope.canDelete}
+          removeObject={$scope.delete}
+        />
+
+        {$scope.notFound ?
+          <>
+            <EuiSpacer size="s" />
+            <Errors notFound={$scope.notFound} />
+          </>
+          : null
+        }
+        <EuiSpacer size="s" />
+        <Intro />
+
+        <EuiSpacer size="m" />
+        <Form
+          initialFields={$scope.fields}
+          onChange={$scope.onChange}
+          canEdit={$scope.canEdit}
+          title={$scope.title}
+          submit={$scope.submit}
+          cancel={$scope.cancel}
+        />
+      </I18nContext>,
+      node
+    );
+  });
+}
+
+function destroyReactComponent() {
+  const node = document.getElementById(REACT_COMPONENT_ID);
+  node && unmountComponentAtNode(node);
+}
+
 uiRoutes
   .when('/management/kibana/objects/:service/:id', {
     template: objectViewHTML,
@@ -74,7 +129,7 @@ uiModules.get('apps/management', ['monospaced.elastic'])
             parents = [key];
           }
 
-          const field = { type: 'text', name: parents.join('.'), value: val };
+          const field = { type: 'textarea', name: parents.join('.'), value: val };
 
           if (_.isString(field.value)) {
             try {
@@ -148,6 +203,12 @@ uiModules.get('apps/management', ['monospaced.elastic'])
         $scope.notFound = $routeParams.notFound;
 
         $scope.title = service.type;
+        $scope.$watch('link', () => {
+          updateReactComponent($scope);
+        });
+        $scope.onChange = fields => {
+          $scope.fields = fields;
+        };
 
         savedObjectsClient.get(service.type, $routeParams.id)
           .then(function (obj) {
@@ -170,39 +231,6 @@ uiModules.get('apps/management', ['monospaced.elastic'])
           })
           .catch(error => fatalError(error, location));
 
-        // This handles the validation of the Ace Editor. Since we don't have any
-        // other hooks into the editors to tell us if the content is valid or not
-        // we need to use the annotations to see if they have any errors. If they
-        // do then we push the field.name to aceInvalidEditor variable.
-        // Otherwise we remove it.
-        const loadedEditors = [];
-        $scope.aceInvalidEditors = [];
-
-        $scope.aceLoaded = function (editor) {
-          if (_.contains(loadedEditors, editor)) return;
-          loadedEditors.push(editor);
-
-          editor.$blockScrolling = Infinity;
-
-          const session = editor.getSession();
-          const fieldName = editor.container.id;
-
-          session.setTabSize(2);
-          session.setUseSoftTabs(true);
-          session.on('changeAnnotation', function () {
-            const annotations = session.getAnnotations();
-            if (_.some(annotations, { type: 'error' })) {
-              if (!_.contains($scope.aceInvalidEditors, fieldName)) {
-                $scope.aceInvalidEditors.push(fieldName);
-              }
-            } else {
-              $scope.aceInvalidEditors = _.without($scope.aceInvalidEditors, fieldName);
-            }
-
-            if (!$rootScope.$$phase) $scope.$apply();
-          });
-        };
-
         $scope.cancel = function () {
           $window.history.back();
           return false;
@@ -273,6 +301,12 @@ uiModules.get('apps/management', ['monospaced.elastic'])
 
           toastNotifications.addSuccess(`${_.capitalize(action)} '${$scope.obj.attributes.title}' ${$scope.title.toLowerCase()} object`);
         }
+
+        $scope.$on('$destroy', () => {
+          destroyReactComponent();
+        });
+
+        updateReactComponent($scope);
       }
     };
   });