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.

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

Fix TagDialog #871

Merged
merged 4 commits into from
Aug 20, 2018
Merged

Fix TagDialog #871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a5a65a
Update imports
swaterkamp Aug 15, 2018
9006293
Fix and change TagDialog
swaterkamp Aug 15, 2018
738eba6
Change filter to load max SELECT_MAX_RESOURCES resources
swaterkamp Aug 15, 2018
e389289
Fix TagDialog when opening from within TagsDialog
swaterkamp Aug 15, 2018
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
65 changes: 39 additions & 26 deletions gsa/src/web/pages/tags/component.js
View file
Open in desktop
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:
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,
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
Open in desktop
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
Open in desktop
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