migrate saved objects management edition view to react/typescript/eui

src/legacy/core_plugins/kibana/public/management/saved_object_registry.ts

@@ -35,9 +35,15 @@ interface SavedObjectRegistryEntry {
   title: string;
 }
 
+export interface ISavedObjectsManagementRegistry {
+  register(service: SavedObjectRegistryEntry): void;
+  all(): SavedObjectRegistryEntry[];
+  get(id: string): SavedObjectRegistryEntry | undefined;
+}
+
 const registry: SavedObjectRegistryEntry[] = [];
 
-export const savedObjectManagementRegistry = {
+export const savedObjectManagementRegistry: ISavedObjectsManagementRegistry = {
   register: (service: SavedObjectRegistryEntry) => {
     registry.push(service);
   },

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

@@ -28,7 +28,6 @@ import { ObjectsTable } from './components/objects_table';
 import { I18nContext } from 'ui/i18n';
 import { get } from 'lodash';
 import { npStart } from 'ui/new_platform';
-
 import { getIndexBreadcrumbs } from './breadcrumbs';
 
 const REACT_OBJECTS_TABLE_DOM_ELEMENT_ID = 'reactSavedObjectsTable';

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

@@ -1,203 +1,5 @@
 <kbn-management-app section="kibana/objects" class="kuiView" data-test-subj="savedObjectsEdit">
   <kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
-    <!-- Header -->
-    <div class="kuiViewContentItem kuiBar kuiVerticalRhythm">
-      <div class="kuiBarSection">
-        <h1
-          class="kuiTitle"
-          i18n-id="kbn.management.objects.view.editItemTitle"
-          i18n-default-message="Edit {title}"
-          i18n-values="{ title }"
-          ng-if="canEdit"
-        ></h1>
-
-        <h1
-          class="kuiTitle"
-          i18n-id="kbn.management.objects.view.viewItemTitle"
-          i18n-default-message="View {title}"
-          i18n-values="{ title }"
-          ng-if="!canEdit"
-        ></h1>
-      </div>
-
-      <div class="kuiBarSection">
-        <a
-          class="kuiButton kuiButton--basic kuiButton--iconText"
-          href="{{ link }}"
-          ng-if="canViewInApp"
-        >
-          <span class="kuiButton__inner">
-            <span class="kuiButton__icon kuiIcon fa-eye"></span>
-            <span
-              i18n-id="kbn.management.objects.view.viewItemButtonLabel"
-              i18n-default-message="View {title}"
-              i18n-values="{ title }"
-            ></span>
-          </span>
-        </a>
-
-        <button
-          class="kuiButton kuiButton--danger kuiButton--iconText"
-          ng-click="delete()"
-          ng-if="canDelete"
-          data-test-subj="savedObjectEditDelete"
-        >
-          <span class="kuiButton__inner">
-            <span class="kuiButton__icon kuiIcon fa-trash-o"></span>
-            <span
-              i18n-id="kbn.management.objects.view.deleteItemButtonLabel"
-              i18n-default-message="Delete {title}"
-              i18n-values="{ title }"
-              ></span>
-          </span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Errors -->
-    <div
-      class="kuiViewContentItem kuiVerticalRhythm"
-      ng-if="notFound"
-    >
-      <div class="kuiInfoPanel kuiInfoPanel--error">
-        <div class="kuiInfoPanelHeader">
-          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
-          <span
-            class="kuiInfoPanelHeader__title"
-            i18n-id="kbn.management.objects.view.savedObjectProblemErrorMessage"
-            i18n-default-message="There is a problem with this saved object"
-            ></span>
-        </div>
-
-        <div class="kuiInfoPanelBody">
-          <div
-            class="kuiInfoPanelBody__message"
-            ng-if="notFound === 'search'"
-            i18n-id="kbn.management.objects.view.savedSearchDoesNotExistErrorMessage"
-            i18n-default-message="The saved search associated with this object no longer exists."
-          ></div>
-
-          <div
-            class="kuiInfoPanelBody__message"
-            ng-if="notFound === 'index-pattern'"
-            i18n-id="kbn.management.objects.view.indexPatternDoesNotExistErrorMessage"
-            i18n-default-message="The index pattern associated with this object no longer exists."
-          ></div>
-
-          <div
-            class="kuiInfoPanelBody__message"
-            ng-if="notFound === 'index-pattern-field'"
-            i18n-id="kbn.management.objects.view.fieldDoesNotExistErrorMessage"
-            i18n-default-message="A field associated with this object no longer exists in the index pattern."
-          ></div>
-
-          <div
-            class="kuiInfoPanelBody__message"
-            i18n-id="kbn.management.objects.view.howToFixErrorDescription"
-            i18n-default-message="If you know what this error means, go ahead and fix it &mdash; otherwise click the delete button above."
-          ></div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Intro -->
-    <div class="kuiViewContentItem kuiVerticalRhythm">
-      <div class="kuiInfoPanel kuiInfoPanel--warning" ng-if="canEdit">
-        <div class="kuiInfoPanelHeader">
-          <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
-          <span
-            class="kuiInfoPanelHeader__title"
-            i18n-id="kbn.management.objects.view.howToModifyObjectTitle"
-            i18n-default-message="Proceed with caution!"
-          ></span>
-        </div>
-
-        <div class="kuiInfoPanelBody">
-          <div
-            class="kuiInfoPanelBody__message"
-            i18n-id="kbn.management.objects.view.howToModifyObjectDescription"
-            i18n-default-message=" Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be."
-          >
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="kuiViewContentItem kuiVerticalRhythm">
-      <!-- Form -->
-      <form
-        role="form"
-        name="objectForm"
-        ng-submit="submit()"
-        data-test-subj="savedObjectEditForm"
-      >
-        <div class="kuiFormSection" ng-repeat="field in fields">
-          <label for="{{ field.name }}" class="kuiFormLabel">
-            {{ field.name }}
-          </label>
-
-          <input
-            id="{{ field.name }}"
-            ng-if="field.type === 'number'"
-            class="kuiTextInput"
-            type="number"
-            ng-model="field.value"
-            ng-disabled="{{ !canEdit }}"
-          >
-
-          <textarea
-            id="{{ field.name }}"
-            ng-if="field.type === 'text'"
-            class="kuiTextArea"
-            rows="1"
-            msd-elastic=" "
-            ng-model="field.value"
-            ng-disabled="{{ !canEdit }}"
-          ></textarea>
-
-          <input
-            ng-if="field.type === 'boolean'"
-            class="kuiCheckBox"
-            type="checkbox"
-            ng-model="field.value"
-            ng-checked="field.value"
-            ng-disabled="{{ !canEdit }}"
-          >
-
-          <div
-            ng-if="field.type === 'json' || field.type === 'array'"
-            kbn-ui-ace-keyboard-mod
-            ng-attr-readonly="{{ canEdit ? undefined : true }}"
-            ui-ace="{ onLoad: aceLoaded, mode: 'json' }"
-            id="{{field.name}}"
-            ng-model="field.value"
-            class="form-control"
-          ></div>
-        </div>
-      </form>
-
-      <!-- Actions -->
-      <div class="kuiButtonGroup">
-        <button
-          class="kuiButton kuiButton--primary"
-          aria-label="{{ 'kbn.management.objects.view.saveButtonAriaLabel' | i18n: { defaultMessage: 'Save { title } Object', values: { title } } }}"
-          ng-click="submit()"
-          ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0"
-          i18n-id="kbn.management.objects.view.saveButtonLabel"
-          i18n-default-message="Save { title } Object"
-          i18n-values="{ title }"
-          ng-if="canEdit"
-          data-test-subj="savedObjectEditSave"
-        ></button>
-
-        <button
-          class="kuiButton kuiButton--basic"
-          aria-label="{{ 'kbn.management.objects.view.cancelButtonAriaLabel' | i18n: { defaultMessage: 'Cancel'} }}"
-          ng-click="cancel()"
-          i18n-id="kbn.management.objects.view.cancelButtonLabel"
-          i18n-default-message="Cancel"
-        ></button>
-      </div>
-    </div>
+    <div id="reactSavedObjectsView"></div>
   </kbn-management-objects-view>
 </kbn-management-app>