Skip to content

Commit

Permalink
Merge pull request #871 from swaterkamp/Tags
Browse files Browse the repository at this point in the history 
Fix TagDialog
  • Loading branch information
@swaterkamp
swaterkamp authored Aug 20, 2018
2 parents d1a83ab + e389289 commit 6884548
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 59 deletions.
65 changes: 39 additions & 26 deletions gsa/src/web/pages/tags/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,23 @@ 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';

import PropTypes from '../../utils/proptypes.js';
import compose from '../../utils/compose';
import withGmp from '../../utils/withGmp.js';
import withCapabilities from '../../utils/withCapabilities.js';
import PropTypes from 'web/utils/proptypes';
import compose from 'web/utils/compose';
import withGmp from 'web/utils/withGmp';
import withCapabilities from 'web/utils/withCapabilities';

import Wrapper from '../../components/layout/wrapper.js';
import Wrapper from 'web/components/layout/wrapper';

import EntityComponent from '../../entity/component.js';
import EntityComponent from 'web/entity/component';

import TagDialog from './dialog.js';
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',
Expand Down Expand Up @@ -131,33 +134,41 @@ 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=' + SELECT_MAX_RESOURCES + ' tag_id="' + id;
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:
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,
Expand Down Expand Up @@ -214,6 +225,7 @@ class TagComponent extends React.Component {
resource_ids,
resource_type,
resource_types = [],
resourceCount,
dialogVisible,
title,
value,
Expand Down Expand Up @@ -257,6 +269,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}
Expand Down
78 changes: 46 additions & 32 deletions gsa/src/web/pages/tags/dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
Expand Down Expand Up @@ -191,6 +193,7 @@ class TagDialog extends React.Component {
comment = '',
fixed = false,
name = _('default:unnamed'),
resourceCount = 0,
resource_types = [],
title = _('New Tag'),
value = '',
Expand All @@ -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,
Expand Down Expand Up @@ -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"
Expand All @@ -320,6 +333,7 @@ TagDialog.propTypes = {
fixed: PropTypes.bool,
gmp: PropTypes.gmp.isRequired,
name: PropTypes.string,
resourceCount: PropTypes.number,
resource_ids: PropTypes.arrayOf(PropTypes.id),
resource_type: PropTypes.string,
resource_types: PropTypes.array.isRequired,
Expand Down
2 changes: 1 addition & 1 deletion gsa/src/web/pages/tags/resourcelist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 6884548

Please sign in to comment.