-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
migrate saved objects management edition view to react/typescript/eui (…
…#59490) * migrate so management edition view to react * fix bundle name + add forgotten data-test-subj * add FTR tests for edition page * EUIfy react components * wrap form with EuiPanel + caps btns labels * Wrapping whole view in page content panel and removing legacy classes * improve delete confirmation modal * update translations * improve delete popin * add unit test on view components * remove kui classes & address comments * extract createFieldList and add tests * disable form submit during submition Co-authored-by: cchaos <caroline.horn@elastic.co>
- Loading branch information
1 parent
6ed2918
commit 395d621
Showing
30 changed files
with
2,675 additions
and
475 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
204 changes: 3 additions & 201 deletions
204
src/legacy/core_plugins/kibana/public/management/sections/objects/_view.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 — 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’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> | ||
| <kbn-management-app section="kibana/objects" data-test-subj="savedObjectsEdit"> | ||
| <kbn-management-objects-view> | ||
| <div id="reactSavedObjectsView"></div> | ||
| </kbn-management-objects-view> | ||
| </kbn-management-app> |
Oops, something went wrong.