Skip to content

Design edits #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
legrego merged 1 commit into from
Nov 14, 2018
Merged

Design edits #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 0 additions & 7 deletions x-pack/plugins/spaces/public/views/management/_manage_spaces.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,3 @@
.spcGridPage {
min-height: calc(100vh - 70px);
}

.spcManagePage__content {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
flex-grow: 0;
}
3 changes: 1 addition & 2 deletions ...s/spaces/public/views/management/components/secure_space_message/secure_space_message.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 { EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
import { EuiLink, EuiText } from '@elastic/eui';
import React, { Fragment } from 'react';
import { UserProfile } from 'x-pack/common/user_profile';

Expand All @@ -16,7 +16,6 @@ export const SecureSpaceMessage = (props: Props) => {
if (props.userProfile.hasCapability('manageSecurity')) {
return (
<Fragment>
<EuiSpacer />
<EuiText className="eui-textCenter">
<p>
Want to assign a role to a space? Go to Management and select{' '}
Expand Down
64 changes: 39 additions & 25 deletions x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ import {
EuiFlexItem,
EuiFormRow,
EuiPanel,
EuiPopover,
EuiSpacer,
EuiText,
EuiTextArea,
} from '@elastic/eui';
import React, { ChangeEvent, Component, Fragment } from 'react';
import { isReservedSpace } from 'x-pack/plugins/spaces/common';
Expand All @@ -39,30 +41,41 @@ export class CustomizeSpace extends Component<Props, {}> {
<EuiDescribedFormGroup
title={<h3>Customize your space</h3>}
description={this.getPanelDescription()}
fullWidth
>
<EuiFormRow label="Name" {...validator.validateSpaceName(this.props.space)} fullWidth>
<EuiFieldText
name="name"
placeholder={'Awesome space'}
value={name}
onChange={this.onNameChange}
fullWidth
/>
</EuiFormRow>
<EuiFlexGroup responsive={false}>
<EuiFlexItem>
<EuiFormRow label="Name" {...validator.validateSpaceName(this.props.space)} fullWidth>
<EuiFieldText
name="name"
placeholder={'Awesome space'}
value={name}
onChange={this.onNameChange}
fullWidth
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label="Avatar">
<EuiPopover
id="customizeAvatarPopover"
button={
<button title="Click to customize">
<SpaceAvatar space={this.props.space} size="l" />
</button>
}
// closePopover={() => {}}
// isOpen={!!name}
Copy link
Copy Markdown
Author

@cchaos cchaos Nov 13, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the popover that needs to be hooked up with states.

>
<div style={{ maxWidth: 240 }}>
<CustomizeSpaceAvatar space={this.props.space} onChange={this.onAvatarChange} />
</div>
</EuiPopover>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>

{name && (
<Fragment>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<EuiFormRow label="Avatar">
<SpaceAvatar space={this.props.space} size="l" />
</EuiFormRow>
</EuiFlexItem>
<CustomizeSpaceAvatar space={this.props.space} onChange={this.onAvatarChange} />
</EuiFlexGroup>
<EuiSpacer />
</Fragment>
)}
<EuiSpacer />

{this.props.space && isReservedSpace(this.props.space) ? null : (
<Fragment>
Expand All @@ -77,15 +90,16 @@ export class CustomizeSpace extends Component<Props, {}> {

<EuiFormRow
label="Description (optional)"
helpText="Displayed alongside the space avatar on the space selection screen"
{...validator.validateSpaceDescription(this.props.space)}
fullWidth
>
<EuiFieldText
<EuiTextArea
name="description"
placeholder={'This is where the magic happens'}
value={description}
onChange={this.onDescriptionChange}
fullWidth
rows={2}
/>
</EuiFormRow>
</EuiDescribedFormGroup>
Expand Down Expand Up @@ -126,7 +140,7 @@ export class CustomizeSpace extends Component<Props, {}> {
});
};

public onDescriptionChange = (e: ChangeEvent<HTMLInputElement>) => {
public onDescriptionChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
this.props.onChange({
...this.props.space,
description: e.target.value,
Expand Down
35 changes: 18 additions & 17 deletions ...gins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,24 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {

return (
<Fragment>
<EuiFlexItem grow={false}>
<EuiFormRow label={'Initials (2 max)'}>
<EuiFieldText
inputRef={this.initialsInputRef}
name="spaceInitials"
// allows input to be cleared or otherwise invalidated while user is editing the initials,
// without defaulting to the derived initials provided by `getSpaceInitials`
value={initialsHasFocus ? pendingInitials || '' : getSpaceInitials(space)}
onChange={this.onInitialsChange}
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={true}>
<EuiFormRow label={'Color'}>
<EuiColorPicker color={getSpaceColor(space)} onChange={this.onColorChange} />
</EuiFormRow>
</EuiFlexItem>
<EuiFormRow label={'Initials (2 max)'}>
<EuiFieldText
inputRef={this.initialsInputRef}
name="spaceInitials"
// allows input to be cleared or otherwise invalidated while user is editing the initials,
// without defaulting to the derived initials provided by `getSpaceInitials`
value={initialsHasFocus ? pendingInitials || '' : getSpaceInitials(space)}
onChange={this.onInitialsChange}
disabled={!space.name}
/>
</EuiFormRow>
<EuiFormRow label={'Color'}>
<EuiColorPicker
disabled={!space.name}
color={getSpaceColor(space)}
onChange={this.onColorChange}
/>
</EuiFormRow>
</Fragment>
);
}
Expand Down
8 changes: 4 additions & 4 deletions ...ck/plugins/spaces/public/views/management/edit_space/customize_space/space_identifier.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class SpaceIdentifier extends Component<Props, State> {
<Fragment>
<EuiFormRow
label={this.getLabel()}
helpText={this.getHelpText()}
helpText={this.getHelpText(id)}
{...this.props.validator.validateURLIdentifier(this.props.space)}
fullWidth
>
Expand All @@ -53,7 +53,7 @@ export class SpaceIdentifier extends Component<Props, State> {
placeholder={
this.state.editing || !this.props.editable
? undefined
: 'The URL identifier is generated from the space name.'
: 'awesome-space'
}
value={id}
onChange={this.onChange}
Expand All @@ -74,8 +74,8 @@ export class SpaceIdentifier extends Component<Props, State> {
return (<p>URL identifier <EuiLink onClick={this.onEditClick}>{editLinkText}</EuiLink></p>);
};

public getHelpText = () => {
return (<p>If the identifier is <strong>engineering</strong>, the Kibana URL is <br /> https://my-kibana.example<strong>/s/engineering/</strong>app/kibana.</p>);
public getHelpText = (identifier: string) => {
return (<p>Example: https://my-kibana.example<strong>/s/{identifier || 'awesome-space'}/</strong>app/kibana</p>);
};

public onEditClick = () => {
Expand Down
62 changes: 38 additions & 24 deletions ...k/plugins/spaces/public/views/management/edit_space/enabled_features/enabled_features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/
// @ts-ignore
import { EuiDescribedFormGroup, EuiFormRow, EuiIconTip, EuiText } from '@elastic/eui';
import React, { Component, ReactNode } from 'react';
import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import React, { Component, Fragment, ReactNode } from 'react';
import { Feature } from 'x-pack/common/feature';
import { Space } from 'x-pack/plugins/spaces/common/model/space';
import { CollapsiblePanel } from 'x-pack/public/components';
Expand All @@ -21,18 +21,22 @@ export class EnabledFeatures extends Component<Props, {}> {
public render() {
return (
<CollapsiblePanel initiallyCollapsed title={this.getPanelTitle()}>
<EuiDescribedFormGroup
title={<h3>Enable features within this space</h3>}
description={this.getDescription()}
>
<EuiFormRow hasEmptyLabelSpace>
<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle size="xs">
<h3>Enable features within this space</h3>
</EuiTitle>
<EuiSpacer size="s" />
{this.getDescription()}
</EuiFlexItem>
<EuiFlexItem>
<FeatureTable
features={this.props.features}
space={this.props.space}
onChange={this.props.onChange}
/>
</EuiFormRow>
</EuiDescribedFormGroup>
</EuiFlexItem>
</EuiFlexGroup>
</CollapsiblePanel>
);
}
Expand All @@ -53,15 +57,8 @@ export class EnabledFeatures extends Component<Props, {}> {
);
} else if (enabledCount === 0) {
details = (
<EuiText color={'danger'} size={'s'} style={{ display: 'inline-block' }}>
<em>
<EuiIconTip
type={'alert'}
color={'danger'}
content={`At least one feature must be enabled`}
/>{' '}
(no features enabled)
</em>
<EuiText color="danger" size={'s'} style={{ display: 'inline-block' }}>
<em>(no features enabled)</em>
</EuiText>
);
} else {
Expand All @@ -84,13 +81,30 @@ export class EnabledFeatures extends Component<Props, {}> {
};

private getDescription = () => {
const featureCount = this.props.features.length;
const disabledCount = this.getKnownDisabledFeatures().length;
const enabledCount = featureCount - disabledCount;

return (
<EuiText>
<p>Choose which features are enabled within this space.</p>
<p>
<strong>Note: </strong> this is not a security mechanism.
</p>
</EuiText>
<Fragment>
<EuiText size="s" color="subdued">
<p>Choose which features are enabled within this space.</p>
<p>
<strong>Note: </strong> this is not a security mechanism.
</p>
</EuiText>
{enabledCount === 0 && (
<Fragment>
<EuiSpacer />
<EuiCallOut
color="danger"
title="At least one feature must be enabled"
iconType="alert"
size="s"
/>
</Fragment>
)}
</Fragment>
);
};
}
6 changes: 4 additions & 2 deletions x-pack/plugins/spaces/public/views/management/edit_space/enabled_features/feature_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,16 @@ export class FeatureTable extends Component<Props, {}> {
render: (feature: Feature) => {
return (
<EuiText>
<EuiIcon type={feature.icon as IconType} style={{ marginRight: '10px' }} />
{feature.name}
<EuiIcon type={feature.icon as IconType} />
&ensp; {feature.name}
</EuiText>
);
},
},
{
field: 'space',
width: '80',
align: 'right',
name: 'Enabled?',
render: (spaceEntry: Space, record: Record<string, any>) => {
const checked = !(
Expand Down
9 changes: 7 additions & 2 deletions x-pack/plugins/spaces/public/views/management/edit_space/manage_space_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export class ManageSpacePage extends Component<Props, State> {
onChange={this.onSpaceChange}
/>

<EuiHorizontalRule />
<EuiSpacer />

{this.getFormButtons()}
</Fragment>
Expand All @@ -180,7 +180,12 @@ export class ManageSpacePage extends Component<Props, State> {

public maybeGetSecureSpacesMessage = () => {
if (this.editingExistingSpace()) {
return <SecureSpaceMessage userProfile={this.props.userProfile} />;
return (
<Fragment>
<EuiHorizontalRule />
<SecureSpaceMessage userProfile={this.props.userProfile} />
</Fragment>
);
}
return null;
};
Expand Down