Skip to content

Update UX with Readonly mode of Tree component #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sebelga merged 15 commits into from
Aug 9, 2019
Merged

Update UX with Readonly mode of Tree component #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
891be31
Update tree to display read-only properties
Aug 4, 2019
477acc3
Move toggle logic to <Tree /> component
Aug 5, 2019
d67d1c2
Add Context to handle document properties
Aug 5, 2019
7d9ad1f
Move configuration form and document fields to their own component
Aug 6, 2019
6dfe388
Use <PropertyEditor /> to edit property
Aug 6, 2019
d7080e8
Update styles
Aug 6, 2019
80f914f
Add controlled version of <Tree /> component
Aug 6, 2019
ed68682
Update display of the property editor to occupy full width
Aug 7, 2019
64260bc
Add "create" property functionality
Aug 8, 2019
6e132c8
Add "delete" property functionality with warning modal
Aug 8, 2019
21c2276
Add confirm modal when changing type from complex to basic
Aug 8, 2019
d99f6c1
Refactor: move PropertiesProvider to <MappingsEditor />
Aug 9, 2019
2561794
Fix delete text and keyword type with multi fields
Aug 9, 2019
8df9387
Add property to the top level "propperties" object
Aug 9, 2019
bd54fb2
Forward mappings editor state to consumer
Aug 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 30 additions & 19 deletions x-pack/legacy/plugins/index_management/static/ui/components/mappings_editor/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
.mappings-editor {
.euiAccordion__childWrapper {
transition: none;
}

.euiAccordion__padding--l {
padding-right: 0;
}
$gutter: 12px;
$border-tree: 1px dotted #aaa;

.property-editor {
border-bottom: 1px solid #eee;
margin: -12px;
padding: 12px;
background-color: #fafbfd;
box-shadow: inset 0px 1px 3px 1px rgba(0,0,0,0.2);
margin-top: $gutter;
padding: $gutter;
position: relative;
padding-bottom: $gutter;
z-index: 1;

&:hover {
background-color: #fafbfd;
.action-buttons {
position: absolute;
top: -38px;
right: 0;
}
}

.property-list-item__overlay {
position: absolute;
top: 0;
left: 1px;
right: 0;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
}

.tree,
.tree ul {
margin:0;
Expand All @@ -34,15 +44,15 @@
top:0;
bottom:0;
left:0;
border-left:1px dotted #aaa;
border-left: $border-tree;
}

.tree li {
margin:0;
padding-left: 1.5em;
padding-left: $gutter * 2;
line-height:2em;
position:relative;
margin-bottom: 12px;
margin-bottom: $gutter;

&:last-child {
.property-editor {
Expand All @@ -56,16 +66,17 @@
display:block;
height:0;
border-top:1px dotted #aaa;
margin-top:-1px;
position:absolute;
top: 64px;
left:0;
top: 24px;
left: 1px;
width: $gutter;
}

.tree li:last-child:before {
background:white;
height:auto;
top: 64px;
top: $gutter * 2;
bottom:0;
left: 0;
}
}
28 changes: 14 additions & 14 deletions ..._management/static/ui/components/mappings_editor/components/advanced_settings/keyword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

import {
UseField,
Expand All @@ -14,10 +14,10 @@ import {
import { Field } from '../../../../../../../../../../src/plugins/elasticsearch_ui_shared/static/forms/components';

import { parametersDefinition, ParameterName } from '../../config';
import { ANALYZERS_OPTIONS, INDEX_OPTIONS, SIMILARITY_ALGORITHM_OPTIONS } from '../../constants';
import { INDEX_OPTIONS, SIMILARITY_ALGORITHM_OPTIONS } from '../../constants';

interface Props {
fieldPathPrefix: string;
// fieldPathPrefix: string;
isEditMode: boolean;
form: Form;
}
Expand All @@ -28,14 +28,14 @@ const fieldConfig = (param: ParameterName): FieldConfig =>
const defaultValueParam = (param: ParameterName): unknown =>
typeof fieldConfig(param).defaultValue !== 'undefined' ? fieldConfig(param).defaultValue : '';

export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Props) => {
export const KeywordAdvancedSettings = ({ form, isEditMode }: Props) => {
return (
<Fragment>
<div>
<EuiFlexGroup>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}normalizer`}
path="normalizer"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('normalizer')}
config={fieldConfig('normalizer')}
Expand All @@ -44,7 +44,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}null_value`}
path="null_value"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('null_value')}
config={fieldConfig('null_value')}
Expand All @@ -53,7 +53,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}boost`}
path="boost"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('boost')}
config={fieldConfig('boost')}
Expand All @@ -62,7 +62,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}ignore_above`}
path="ignore_above"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('ignore_above')}
config={fieldConfig('ignore_above')}
Expand All @@ -75,7 +75,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
<EuiFlexGroup>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}index_options`}
path="index_options"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('index_options')}
config={fieldConfig('index_options')}
Expand All @@ -89,7 +89,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}similarity`}
path="similarity"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('similarity')}
config={fieldConfig('similarity')}
Expand All @@ -107,7 +107,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}eager_global_ordinals`}
path="eager_global_ordinals"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('eager_global_ordinals')}
config={fieldConfig('eager_global_ordinals')}
Expand All @@ -116,7 +116,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}index_phrases`}
path="index_phrases"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('index_phrases')}
config={fieldConfig('index_phrases')}
Expand All @@ -125,7 +125,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}norms`}
path="norms"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('norms')}
config={fieldConfig('norms')}
Expand All @@ -134,7 +134,7 @@ export const KeywordAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: P
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}split_queries_on_whitespace`}
path="split_queries_on_whitespace"
form={form}
defaultValue={
isEditMode ? undefined : defaultValueParam('split_queries_on_whitespace')
Expand Down
37 changes: 18 additions & 19 deletions ...dex_management/static/ui/components/mappings_editor/components/advanced_settings/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { parametersDefinition, ParameterName } from '../../config';
import { ANALYZERS_OPTIONS, INDEX_OPTIONS, SIMILARITY_ALGORITHM_OPTIONS } from '../../constants';

interface Props {
fieldPathPrefix: string;
isEditMode: boolean;
form: Form;
}
Expand All @@ -28,14 +27,14 @@ const fieldConfig = (param: ParameterName): FieldConfig =>
const defaultValueParam = (param: ParameterName): unknown =>
typeof fieldConfig(param).defaultValue !== 'undefined' ? fieldConfig(param).defaultValue : '';

export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Props) => {
export const TextAdvancedSettings = ({ form, isEditMode }: Props) => {
return (
<Fragment>
<div>
<EuiFlexGroup>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}analyzer`}
path="analyzer"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('analyzer')}
config={fieldConfig('analyzer')}
Expand All @@ -49,7 +48,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}search_analyzer`}
path="search_analyzer"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('search_analyzer')}
config={fieldConfig('search_analyzer')}
Expand All @@ -63,7 +62,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}search_quote_analyzer`}
path="search_quote_analyzer"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('search_quote_analyzer')}
config={fieldConfig('search_quote_analyzer')}
Expand All @@ -77,7 +76,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}index_options`}
path="index_options"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('index_options')}
config={fieldConfig('index_options')}
Expand All @@ -95,7 +94,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}eager_global_ordinals`}
path="eager_global_ordinals"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('eager_global_ordinals')}
config={fieldConfig('eager_global_ordinals')}
Expand All @@ -104,7 +103,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}index_phrases`}
path="index_phrases"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('index_phrases')}
config={fieldConfig('index_phrases')}
Expand All @@ -113,7 +112,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem grow={false}>
<UseField
path={`${fieldPathPrefix}norms`}
path="norms"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('norms')}
config={fieldConfig('norms')}
Expand All @@ -122,7 +121,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}term_vector`}
path="term_vector"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('term_vector')}
config={fieldConfig('term_vector')}
Expand All @@ -135,7 +134,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
<EuiFlexGroup>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}boost`}
path="boost"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('boost')}
config={fieldConfig('boost')}
Expand All @@ -147,7 +146,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
<EuiFlexGroup>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}index_prefixes.min_chars`}
path="index_prefixes.min_chars"
form={form}
defaultValue={
isEditMode
Expand All @@ -158,16 +157,16 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
config={{
...(parametersDefinition.index_prefixes.fieldConfig! as any).min_chars,
fieldsToValidateOnChange: [
`${fieldPathPrefix}index_prefixes.min_chars`,
`${fieldPathPrefix}index_prefixes.max_chars`,
'index_prefixes.min_chars',
'index_prefixes.max_chars',
],
}}
component={Field}
/>
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}index_prefixes.max_chars`}
path="index_prefixes.max_chars"
form={form}
defaultValue={
isEditMode
Expand All @@ -178,8 +177,8 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
config={{
...(parametersDefinition.index_prefixes.fieldConfig! as any).max_chars,
fieldsToValidateOnChange: [
`${fieldPathPrefix}index_prefixes.min_chars`,
`${fieldPathPrefix}index_prefixes.max_chars`,
'index_prefixes.min_chars',
'index_prefixes.max_chars',
],
}}
component={Field}
Expand All @@ -190,7 +189,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}position_increment_gap`}
path="position_increment_gap"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('position_increment_gap')}
config={fieldConfig('position_increment_gap')}
Expand All @@ -199,7 +198,7 @@ export const TextAdvancedSettings = ({ fieldPathPrefix, form, isEditMode }: Prop
</EuiFlexItem>
<EuiFlexItem>
<UseField
path={`${fieldPathPrefix}similarity`}
path="similarity"
form={form}
defaultValue={isEditMode ? undefined : defaultValueParam('similarity')}
config={fieldConfig('similarity')}
Expand Down
Loading