Skip to content

Commit

Permalink
migrate saved objects management edition view to react/typescript/eui (
Browse files Browse the repository at this point in the history
…#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
pgayvallet and cchaos authored Mar 19, 2020
1 parent 6ed2918 commit 395d621
Show file tree
Hide file tree
Showing 30 changed files with 2,675 additions and 475 deletions.
1 change: 1 addition & 0 deletions src/core/public/overlays/modal/modal_service.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export interface OverlayModalConfirmOptions {
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
defaultFocusedButton?: EuiConfirmModalProps['defaultFocusedButton'];
buttonColor?: EuiConfirmModalProps['buttonColor'];
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
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 &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>
<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>
Loading

0 comments on commit 395d621

Please sign in to comment.