Skip to content
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.

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

Fix TagDialog #871

Merged
merged 4 commits into from
Aug 20, 2018
Merged
Changes from 1 commit
Commits
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
54 changes: 34 additions & 20 deletions gsa/src/web/pages/tags/component.js
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ import _ from 'gmp/locale';
import {isDefined} from 'gmp/utils/identity';
import {shorten} from 'gmp/utils/string';
import {first} from 'gmp/utils/array';
import {getEntityType, typeName} from 'gmp/utils/entitytype';
import {getEntityType, pluralizeType, typeName} from 'gmp/utils/entitytype';

import {YES_VALUE} from 'gmp/parser';

@@ -42,7 +42,10 @@ import Wrapper from 'web/components/layout/wrapper';

import EntityComponent from 'web/entity/component';

import TagDialog from 'web/apges/tags/dialog';
import TagDialog from 'web/pages/tags/dialog';

export const SELECT_MAX_RESOURCES = 200; // concerns items in TagDialog's Select
export const MAX_RESOURCES = 40; // concerns listing in "Assigned Resources" tab

const TYPES = [
'agent',
@@ -131,33 +134,42 @@ class TagComponent extends React.Component {
comment,
id,
name,
resources,
resource_type,
resourceCount,
resourceType,
value,
} = response.data;

this.setState({
active,
comment,
dialogVisible: true,
id,
name,
resource_ids: resources.map(res => res.id),
resource_type: isDefined(resource_type) ?
resource_type :
first(resource_types, [])[0],
resource_types,
title: _('Edit Tag {{name}}', {name: shorten(name)}),
value,
...options,
});
const filter = 'rows=0 tag_id="' + id; /* rows=0 is needed, as otherwise
the default filter will be applied (rows=10) */
gmp[pluralizeType(resourceType)].get({filter})
.then(resp => {
const resources = resp.data;
this.setState({
active,
comment,
dialogVisible: true,
id,
name,
resourceCount,
resource_ids: resources.map(res => res.id),
resource_type: isDefined(resourceType) ?
resourceType :
first(resource_types, [])[0],
resource_types,
resources_action:
Copy link
Contributor

Choose a reason for hiding this comment

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

The variables should be changed to camelCase in another commit or PR.

resourceCount < SELECT_MAX_RESOURCES ? undefined : 'add',
title: _('Edit Tag {{name}}', {name: shorten(name)}),
value,
...options,
});
});
});
}
else {
this.setState({
active: undefined,
comment: undefined,
name: undefined,
resourceCount: 0,
resource_ids: [],
resource_type: undefined,
resource_types,
@@ -214,6 +226,7 @@ class TagComponent extends React.Component {
resource_ids,
resource_type,
resource_types = [],
resourceCount,
dialogVisible,
title,
value,
@@ -257,6 +270,7 @@ class TagComponent extends React.Component {
resource_ids={resource_ids}
resource_type={resource_type}
resource_types={resource_types}
resourceCount={resourceCount}
title={title}
value={value}
onClose={this.closeTagDialog}
78 changes: 46 additions & 32 deletions gsa/src/web/pages/tags/dialog.js
Original file line number Diff line number Diff line change
@@ -51,6 +51,8 @@ import YesNoRadio from 'web/components/form/yesnoradio';

import Layout from 'web/components/layout/layout';

import {SELECT_MAX_RESOURCES} from 'web/pages/tags/component';

const Divider = glamorous.div({
margin: '0 5px',
});
@@ -191,6 +193,7 @@ class TagDialog extends React.Component {
comment = '',
fixed = false,
name = _('default:unnamed'),
resourceCount,
resource_types = [],
title = _('New Tag'),
value = '',
@@ -213,6 +216,7 @@ class TagDialog extends React.Component {
};

const typeIsChosen = isDefined(this.state.resourceType);
const showResourceSelection = resourceCount < SELECT_MAX_RESOURCES;

const controlledData = {
resource_ids: this.state.resourceIdsSelected,
@@ -265,39 +269,48 @@ class TagDialog extends React.Component {
/>
</FormGroup>

<FormGroup title={_('Resource Type')}>
<Select
name="resource_type"
items={resourceTypesOptions}
value={this.state.resourceType}
disabled={fixed || resourceTypesOptions.length === 0}
onChange={type => this.handleResourceTypeChange(
type, onValueChange)}
/>
</FormGroup>

<FormGroup title={_('Resources')}>
<ScrollableContent>
<MultiSelect
name="resource_ids"
items={renderSelectItems(this.state.resourceOptions)}
value={this.state.resourceIdsSelected}
disabled={!typeIsChosen || fixed ||
resourceTypesOptions.length === 0}
onChange={ids => this.handleIdChange(ids, onValueChange)}
{showResourceSelection &&
<FormGroup title={_('Resource Type')}>
<Select
name="resource_type"
items={resourceTypesOptions}
value={this.state.resourceType}
disabled={fixed || resourceTypesOptions.length === 0}
onChange={type => this.handleResourceTypeChange(
type, onValueChange)}
/>
</ScrollableContent>
<Divider>
{_('or add by ID:')}
</Divider>
<TextField
name="resource_id_text"
value={this.state.resourceIdText}
grow="1"
disabled={!typeIsChosen || fixed}
onChange={id => this.handleIdChangeByText(id, onValueChange)}
/>
</FormGroup>
</FormGroup>
}
{showResourceSelection &&
<FormGroup title={_('Resources')}>
<ScrollableContent>
<MultiSelect
name="resource_ids"
items={renderSelectItems(this.state.resourceOptions)}
value={this.state.resourceIdsSelected}
disabled={!typeIsChosen || fixed ||
resourceTypesOptions.length === 0}
onChange={ids => this.handleIdChange(ids, onValueChange)}
/>
</ScrollableContent>
<Divider>
{_('or add by ID:')}
</Divider>
<TextField
name="resource_id_text"
value={this.state.resourceIdText}
grow="1"
disabled={!typeIsChosen || fixed}
onChange={id =>
this.handleIdChangeByText(id, onValueChange)}
/>
</FormGroup>
}
{!showResourceSelection &&
<FormGroup title={_('Resources')}>
<span>{_('Too many resources to list.')}</span>
</FormGroup>
}
<FormGroup title={_('Active')}>
<YesNoRadio
name="active"
@@ -320,6 +333,7 @@ TagDialog.propTypes = {
fixed: PropTypes.bool,
gmp: PropTypes.gmp.isRequired,
name: PropTypes.string,
resourceCount: PropTypes.number.isRequired,
resource_ids: PropTypes.arrayOf(PropTypes.id),
resource_type: PropTypes.string,
resource_types: PropTypes.array.isRequired,
2 changes: 1 addition & 1 deletion gsa/src/web/pages/tags/resourcelist.js
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ import Layout from 'web/components/layout/layout';
import DetailsLink from 'web/components/link/detailslink';
import Loading from 'web/components/loading/loading';

const MAX_RESOURCES = 40;
import {MAX_RESOURCES} from 'web/pages/tags/component';

const Spacer = styled.div`
height: 12px,