Skip to content

Commit

Permalink
Updated spaces management page
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomheymann
thomheymann committed May 23, 2021
1 parent b1a95e4 commit 16cd550
Show file tree
Hide file tree
Showing 11 changed files with 452 additions and 479 deletions.
158 changes: 52 additions & 106 deletions x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,32 @@
* 2.0.
*/

import type { EuiPopoverProps } from '@elastic/eui';
import {
EuiDescribedFormGroup,
EuiFieldText,
EuiFormRow,
EuiLoadingSpinner,
EuiPopover,
EuiSpacer,
EuiTextArea,
EuiTitle,
} from '@elastic/eui';
import type { ChangeEvent } from 'react';
import React, { Component, Fragment, lazy, Suspense } from 'react';
import React, { Component } from 'react';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import type { Space } from 'src/plugins/spaces_oss/common';

import { isReservedSpace } from '../../../../common';
import { getSpaceAvatarComponent } from '../../../space_avatar';
import { getSpaceColor, getSpaceInitials } from '../../../space_avatar';
import type { SpaceValidator } from '../../lib';
import { toSpaceIdentifier } from '../../lib';
import type { FormValues } from '../manage_space_page';
import { SectionPanel } from '../section_panel';
import { CustomizeSpaceAvatar } from './customize_space_avatar';
import { SpaceIdentifier } from './space_identifier';

// No need to wrap LazySpaceAvatar in an error boundary, because it is one of the first chunks loaded when opening Kibana.
const LazySpaceAvatar = lazy(() =>
getSpaceAvatarComponent().then((component) => ({ default: component }))
);

interface Props {
validator: SpaceValidator;
space: Partial<Space>;
space: FormValues;
editingExistingSpace: boolean;
onChange: (space: Partial<Space>) => void;
onChange: (space: FormValues) => void;
}

interface State {
Expand All @@ -60,14 +50,10 @@ export class CustomizeSpace extends Component<Props, State> {
const panelTitle = i18n.translate(
'xpack.spaces.management.manageSpacePage.customizeSpaceTitle',
{
defaultMessage: 'Customize your space',
defaultMessage: 'General',
}
);

const extraPopoverProps: Partial<EuiPopoverProps> = {
initialFocus: 'input[name="spaceInitials"]',
};

return (
<SectionPanel title={panelTitle} description={panelTitle}>
<EuiDescribedFormGroup
Expand All @@ -76,12 +62,14 @@ export class CustomizeSpace extends Component<Props, State> {
<h3>
<FormattedMessage
id="xpack.spaces.management.manageSpacePage.customizeSpacePanelDescription"
defaultMessage="Name your space and customize its avatar."
defaultMessage="Describe this space"
/>
</h3>
</EuiTitle>
}
description={this.getPanelDescription()}
description={i18n.translate('xpack.spaces.management.manageSpacePage.nameFormRowLabel', {
defaultMessage: 'Give your space a name and description for easy identification.',
})}
fullWidth
>
<EuiFormRow
Expand All @@ -94,43 +82,25 @@ export class CustomizeSpace extends Component<Props, State> {
<EuiFieldText
name="name"
data-test-subj="addSpaceName"
placeholder={i18n.translate(
'xpack.spaces.management.manageSpacePage.awesomeSpacePlaceholder',
{
defaultMessage: 'Awesome space',
}
)}
value={name}
onChange={this.onNameChange}
isInvalid={validator.validateSpaceName(this.props.space).isInvalid}
fullWidth
/>
</EuiFormRow>

<EuiSpacer />

{this.props.space && isReservedSpace(this.props.space) ? null : (
<Fragment>
<SpaceIdentifier
space={this.props.space}
editable={!editingExistingSpace}
onChange={this.onSpaceIdentifierChange}
validator={validator}
/>
</Fragment>
)}

<EuiFormRow
data-test-subj="optionalDescription"
label={i18n.translate(
'xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel',
{
defaultMessage: 'Description (optional)',
defaultMessage: 'Description',
}
)}
helpText={i18n.translate(
'xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText',
{
defaultMessage: 'The description appears on the Space selection screen.',
defaultMessage: 'The description appears on the space selection screen.',
}
)}
{...validator.validateSpaceDescription(this.props.space)}
Expand All @@ -141,78 +111,48 @@ export class CustomizeSpace extends Component<Props, State> {
name="description"
value={description}
onChange={this.onDescriptionChange}
isInvalid={validator.validateSpaceDescription(this.props.space).isInvalid}
fullWidth
rows={2}
/>
</EuiFormRow>

<EuiFormRow
label={i18n.translate('xpack.spaces.management.manageSpacePage.avatarFormRowLabel', {
defaultMessage: 'Avatar',
})}
>
<EuiPopover
id="customizeAvatarPopover"
button={
<button
title={i18n.translate(
'xpack.spaces.management.manageSpacePage.clickToCustomizeTooltip',
{
defaultMessage: 'Click to customize this space avatar',
}
)}
onClick={this.togglePopover}
>
<Suspense fallback={<EuiLoadingSpinner />}>
<LazySpaceAvatar space={this.props.space} size="l" />
</Suspense>
</button>
}
closePopover={this.closePopover}
{...extraPopoverProps}
ownFocus={true}
isOpen={this.state.customizingAvatar}
>
<div style={{ maxWidth: 240 }}>
<CustomizeSpaceAvatar space={this.props.space} onChange={this.onAvatarChange} />
</div>
</EuiPopover>
</EuiFormRow>
{editingExistingSpace ? null : (
<SpaceIdentifier
space={this.props.space}
editable={!editingExistingSpace}
onChange={this.onSpaceIdentifierChange}
validator={validator}
/>
)}
</EuiDescribedFormGroup>

<EuiDescribedFormGroup
title={
<EuiTitle size="xs">
<h3>
<FormattedMessage
id="xpack.spaces.management.manageSpacePage.avatarTitle"
defaultMessage="Customize avatar for this space"
/>
</h3>
</EuiTitle>
}
description={i18n.translate('xpack.spaces.management.manageSpacePage.avatarDescription', {
defaultMessage: 'Choose how you wish your space’s avatar to appear across Kibana.',
})}
fullWidth
>
<CustomizeSpaceAvatar
space={this.props.space}
onChange={this.onAvatarChange}
validator={validator}
/>
</EuiDescribedFormGroup>
</SectionPanel>
);
}

public togglePopover = () => {
this.setState({
customizingAvatar: !this.state.customizingAvatar,
});
};

public closePopover = () => {
this.setState({
customizingAvatar: false,
});
};

public getPanelDescription = () => {
return this.props.editingExistingSpace ? (
<p>
<FormattedMessage
id="xpack.spaces.management.manageSpacePage.customizeSpacePanelUrlIdentifierNotEditable"
defaultMessage="The url identifier cannot be changed."
/>
</p>
) : (
<p>
<FormattedMessage
id="xpack.spaces.management.manageSpacePage.customizeSpacePanelUrlIdentifierEditable"
defaultMessage="Note the URL identifier. You cannot change it after you create the space."
/>
</p>
);
};

public onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
if (!this.props.space) {
return;
Expand All @@ -230,6 +170,12 @@ export class CustomizeSpace extends Component<Props, State> {
...this.props.space,
name: e.target.value,
id,
initials: this.props.space.customAvatarInitials
? this.props.space.initials
: getSpaceInitials({ name: e.target.value }),
color: this.props.space.customAvatarColor
? this.props.space.color
: getSpaceColor({ name: e.target.value }),
});
};

Expand All @@ -252,7 +198,7 @@ export class CustomizeSpace extends Component<Props, State> {
});
};

public onAvatarChange = (space: Partial<Space>) => {
public onAvatarChange = (space: FormValues) => {
this.props.onChange(space);
};
}
Loading

0 comments on commit 16cd550

Please sign in to comment.