Skip to content

Commit

Permalink
Tweak import and copy flyout options
Browse files Browse the repository at this point in the history 
* Now use tooltips instead of subdued text -- this is cleaner
* Copy flyout shows "Relationship options" as a separate heading
  • Loading branch information
@jportner
jportner committed Aug 19, 2020
1 parent 1b34a2d commit d885e64
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 72 deletions.
36 changes: 20 additions & 16 deletions ...cts_management/public/management_section/objects_table/components/import_mode_control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,17 @@
* under the License.
*/

import React, { useState, Fragment } from 'react';
import React, { useState } from 'react';
import {
EuiFormFieldset,
EuiTitle,
EuiCheckableCard,
EuiRadioGroup,
EuiText,
EuiSpacer,
EuiFlexGroup,
EuiFlexItem,
EuiIconTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';

Expand All @@ -49,11 +52,11 @@ export const ImportModeControl = ({

const createNewCopiesDisabled = {
id: 'createNewCopiesDisabled',
title: i18n.translate(
text: i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.createNewCopies.disabledTitle',
{ defaultMessage: 'Check for existing objects' }
),
text: i18n.translate(
tooltip: i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.createNewCopies.disabledText',
{
defaultMessage:
Expand All @@ -63,11 +66,11 @@ export const ImportModeControl = ({
};
const createNewCopiesEnabled = {
id: 'createNewCopiesEnabled',
title: i18n.translate(
text: i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.createNewCopies.enabledTitle',
{ defaultMessage: 'Create new objects with random IDs' }
),
text: i18n.translate(
tooltip: i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.createNewCopies.enabledText',
{ defaultMessage: 'All imported objects will be created with new random IDs.' }
),
Expand All @@ -86,19 +89,20 @@ export const ImportModeControl = ({
{ defaultMessage: 'Request action when conflict occurs' }
),
};
const formTitle = i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.formTitle',
const importOptionsTitle = i18n.translate(
'savedObjectsManagement.objectsTable.importModeControl.importOptionsTitle',
{ defaultMessage: 'Import options' }
);

const createLabel = ({ title, text }: { title: string; text: string }, subduedText = true) => (
<Fragment>
<EuiText>{title}</EuiText>
<EuiSpacer size="xs" />
<EuiText color={subduedText ? 'subdued' : undefined} size="s">
{text}
</EuiText>
</Fragment>
const createLabel = ({ text, tooltip }: { text: string; tooltip: string }) => (
<EuiFlexGroup>
<EuiFlexItem>
<EuiText>{text}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip content={tooltip} position="left" type="iInCircle" />
</EuiFlexItem>
</EuiFlexGroup>
);
const onChange = (partial: Partial<ImportMode>) => {
if (partial.createNewCopies !== undefined) {
Expand Down Expand Up @@ -128,7 +132,7 @@ export const ImportModeControl = ({
legend={{
children: (
<EuiTitle size="xs">
<span>{formTitle}</span>
<span>{importOptionsTitle}</span>
</EuiTitle>
),
}}
Expand Down
132 changes: 76 additions & 56 deletions x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_mode_control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useState, Fragment } from 'react';
import React, { useState } from 'react';
import {
EuiFormFieldset,
EuiTitle,
EuiCheckableCard,
EuiRadioGroup,
EuiText,
EuiSpacer,
EuiFlexGroup,
EuiFlexItem,
EuiIconTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';

Expand All @@ -31,11 +34,11 @@ export const CopyModeControl = ({ initialValues, updateSelection }: CopyModeCont

const createNewCopiesDisabled = {
id: 'createNewCopiesDisabled',
title: i18n.translate(
text: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.createNewCopies.disabledTitle',
{ defaultMessage: 'Check for existing objects' }
),
text: i18n.translate(
tooltip: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.createNewCopies.disabledText',
{
defaultMessage:
Expand All @@ -45,11 +48,11 @@ export const CopyModeControl = ({ initialValues, updateSelection }: CopyModeCont
};
const createNewCopiesEnabled = {
id: 'createNewCopiesEnabled',
title: i18n.translate(
text: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.createNewCopies.enabledTitle',
{ defaultMessage: 'Create new objects with random IDs' }
),
text: i18n.translate(
tooltip: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.createNewCopies.enabledText',
{ defaultMessage: 'All copied objects will be created with new random IDs.' }
),
Expand All @@ -70,31 +73,36 @@ export const CopyModeControl = ({ initialValues, updateSelection }: CopyModeCont
};
const includeRelated = {
id: 'includeRelated',
title: i18n.translate(
text: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.includeRelated.title',
{ defaultMessage: 'Include related saved objects' }
),
text: i18n.translate(
tooltip: i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.includeRelated.text',
{
defaultMessage:
'This will copy any other objects this has references to -- for example, a dashboard may have references to multiple visualizations.',
}
),
};
const formTitle = i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.formTitle',
const copyOptionsTitle = i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.copyOptionsTitle',
{ defaultMessage: 'Copy options' }
);
const relationshipOptionsTitle = i18n.translate(
'xpack.spaces.management.copyToSpace.copyModeControl.relationshipOptionsTitle',
{ defaultMessage: 'Relationship options' }
);

const createLabel = ({ title, text }: { title: string; text: string }, subduedText = true) => (
<Fragment>
<EuiText>{title}</EuiText>
<EuiSpacer size="xs" />
<EuiText color={subduedText ? 'subdued' : undefined} size="s">
{text}
</EuiText>
</Fragment>
const createLabel = ({ text, tooltip }: { text: string; tooltip: string }) => (
<EuiFlexGroup>
<EuiFlexItem>
<EuiText>{text}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip content={tooltip} position="left" type="iInCircle" />
</EuiFlexItem>
</EuiFlexGroup>
);
const onChange = (partial: Partial<CopyMode>) => {
if (partial.createNewCopies !== undefined) {
Expand All @@ -106,49 +114,61 @@ export const CopyModeControl = ({ initialValues, updateSelection }: CopyModeCont
};

return (
<EuiFormFieldset
legend={{
children: (
<EuiTitle size="xs">
<span>{formTitle}</span>
</EuiTitle>
),
}}
>
<EuiCheckableCard
id={createNewCopiesDisabled.id}
label={createLabel(createNewCopiesDisabled)}
checked={!createNewCopies}
onChange={() => onChange({ createNewCopies: false })}
<>
<EuiFormFieldset
legend={{
children: (
<EuiTitle size="xs">
<span>{copyOptionsTitle}</span>
</EuiTitle>
),
}}
>
<EuiRadioGroup
options={[overwriteEnabled, overwriteDisabled]}
idSelected={overwrite ? overwriteEnabled.id : overwriteDisabled.id}
onChange={(id: string) => onChange({ overwrite: id === overwriteEnabled.id })}
disabled={createNewCopies}
data-test-subj={'cts-copyModeControl-overwriteRadioGroup'}
/>
</EuiCheckableCard>
<EuiCheckableCard
id={createNewCopiesDisabled.id}
label={createLabel(createNewCopiesDisabled)}
checked={!createNewCopies}
onChange={() => onChange({ createNewCopies: false })}
>
<EuiRadioGroup
options={[overwriteEnabled, overwriteDisabled]}
idSelected={overwrite ? overwriteEnabled.id : overwriteDisabled.id}
onChange={(id: string) => onChange({ overwrite: id === overwriteEnabled.id })}
disabled={createNewCopies}
data-test-subj={'cts-copyModeControl-overwriteRadioGroup'}
/>
</EuiCheckableCard>

<EuiSpacer size="s" />
<EuiSpacer size="s" />

<EuiCheckableCard
id={createNewCopiesEnabled.id}
label={createLabel(createNewCopiesEnabled)}
checked={createNewCopies}
onChange={() => onChange({ createNewCopies: true })}
/>
<EuiCheckableCard
id={createNewCopiesEnabled.id}
label={createLabel(createNewCopiesEnabled)}
checked={createNewCopies}
onChange={() => onChange({ createNewCopies: true })}
/>
</EuiFormFieldset>

<EuiSpacer size="s" />
<EuiSpacer size="m" />

<EuiCheckableCard
id={includeRelated.id}
label={createLabel(includeRelated, false)}
checkableType="checkbox"
checked={true}
onChange={() => {}} // noop
disabled
/>
</EuiFormFieldset>
<EuiFormFieldset
legend={{
children: (
<EuiTitle size="xs">
<span>{relationshipOptionsTitle}</span>
</EuiTitle>
),
}}
>
<EuiCheckableCard
id={includeRelated.id}
label={createLabel(includeRelated)}
checkableType="checkbox"
checked={true}
onChange={() => {}} // noop
disabled
/>
</EuiFormFieldset>
</>
);
};

0 comments on commit d885e64

Please sign in to comment.