Merge pull request #768 from swaterkamp/ImproveTags

Improve tags

gsa/src/web/entities/container.js

@@ -35,6 +35,7 @@ import Filter from 'gmp/models/filter.js';
 
 import compose from '../utils/compose.js';
 import PropTypes from '../utils/proptypes.js';
+import {type_name} from '../utils/render.js';
 
 import SelectionType from '../utils/selectiontype.js';
 
@@ -49,6 +50,8 @@ import withDialogNotification from '../components/notification/withDialogNotifia
 
 import SortBy from '../components/sortby/sortby.js';
 
+import TagDialog from '../pages/tags/dialog.js';
+
 import TagsDialog from './tagsdialog.js';
 
 const log = logger.getLogger('web.entities.container');
@@ -71,6 +74,7 @@ class EntitiesContainer extends React.Component {
       updating: false,
       selection_type: SelectionType.SELECTION_PAGE_CONTENTS,
       tags: [],
+      tagDialogVisible: false,
       tagsDialogVisible: false,
     };
 
@@ -93,6 +97,7 @@ class EntitiesContainer extends React.Component {
     this.notifyChanged = notify(`${entities_command_name}.changed`);
 
     this.handleChanged = this.handleChanged.bind(this);
+    this.handleCreateTag = this.handleCreateTag.bind(this);
     this.handleDeselected = this.handleDeselected.bind(this);
     this.handleDeleteBulk = this.handleDeleteBulk.bind(this);
     this.handleDownloadBulk = this.handleDownloadBulk.bind(this);
@@ -108,6 +113,8 @@ class EntitiesContainer extends React.Component {
     this.handleFilterCreated = this.handleFilterCreated.bind(this);
     this.handleFilterChanged = this.handleFilterChanged.bind(this);
     this.handleFilterReset = this.handleFilterReset.bind(this);
+    this.openTagDialog = this.openTagDialog.bind(this);
+    this.closeTagDialog = this.closeTagDialog.bind(this);
     this.openTagsDialog = this.openTagsDialog.bind(this);
     this.closeTagsDialog = this.closeTagsDialog.bind(this);
   }
@@ -406,6 +413,33 @@ class EntitiesContainer extends React.Component {
     this.load();
   }
 
+  openTagDialog() {
+    this.setState({tagDialogVisible: true});
+  }
+
+  closeTagDialog() {
+    this.setState({tagDialogVisible: false});
+  }
+
+  handleCreateTag(data) {
+    const {gmp} = this.props;
+    const {tags} = this.state;
+    let newTag;
+    return gmp.tag.create(data).then(response => {
+      newTag = response.data;
+    })
+    .then(() => {
+      return gmp.tag.get(newTag);
+    })
+    .then(response => {
+      tags.push(response.data);
+      this.setState({
+        newTag: response.data,
+        tags,
+      });
+    });
+  }
+
   openTagsDialog() {
     this.getTagsByType();
     this.setState({tagsDialogVisible: true});
@@ -432,11 +466,13 @@ class EntitiesContainer extends React.Component {
       entities_counts,
       loaded_filter,
       loading,
+      newTag,
       selected = {},
       selection_type,
       sortBy,
       sortDir,
       tags,
+      tagDialogVisible,
       tagsDialogVisible,
       updating,
     } = this.state;
@@ -463,6 +499,7 @@ class EntitiesContainer extends React.Component {
     }
     const Component = this.props.component;
     const other = exclude_object_props(this.props, exclude_props);
+
     return (
       <Wrapper>
         <Component
@@ -500,12 +537,24 @@ class EntitiesContainer extends React.Component {
         {tagsDialogVisible &&
           <TagsDialog
             filter={loaded_filter}
+            tag={newTag}
             tags={tags}
             title={title}
             resources={selected}
             resourceType={entitiesType}
             selectionType={selection_type}
             onClose={this.closeTagsDialog}
+            onNewTagClick={this.openTagDialog}
+          />
+        }
+        {tagDialogVisible &&
+          <TagDialog
+            fixed={true}
+            resources={selected}
+            resource_type={entitiesType}
+            resource_types={[[entitiesType, type_name(entitiesType)]]}
+            onClose={this.closeTagDialog}
+            onSave={this.handleCreateTag}
           />
         }
       </Wrapper>

gsa/src/web/entities/tagsdialog.js

@@ -25,6 +25,7 @@ import 'core-js/fn/object/entries';
 import React from 'react';
 
 import _ from 'gmp/locale.js';
+import {is_defined} from 'gmp/utils/identity';
 import {render_select_items} from 'web/utils/render.js';
 
 import withGmp from 'web/utils/withGmp';
@@ -37,19 +38,32 @@ import SaveDialog from '../components/dialog/savedialog.js';
 import FormGroup from '../components/form/formgroup.js';
 import Select from '../components/form/select.js';
 
+import NewIcon from '../components/icon/newicon.js';
+
+import Divider from '../components/layout/divider.js';
 import Layout from '../components/layout/layout.js';
 
 class TagsDialog extends React.Component {
 
   constructor(args) {
     super(...args);
 
-    this.state = {tag: {}};
+    this.state = {};
 
     this.handleChange = this.handleChange.bind(this);
     this.save = this.save.bind(this);
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (is_defined(nextProps.tag) && nextProps.tag.id !== prevState.propId) {
+      return {
+        ...nextProps.tag,
+        propId: nextProps.tag.id,
+      };
+    }
+    return null;
+  }
+
   handleChange(value, name) {
     const {gmp} = this.props;
     gmp.tag.get({id: value}).then(response => {
@@ -125,17 +139,27 @@ class TagsDialog extends React.Component {
       tags,
       title = _('Add Tag'),
       onClose,
+      onNewTagClick,
     } = this.props;
 
     const {
+      comment,
       id,
+      name,
+      value,
     } = this.state;
 
     return (
       <SaveDialog
         buttonTitle="Add Tag"
         title={title}
         width="650px"
+        values={{
+          comment,
+          id,
+          name,
+          value,
+        }}
         onClose={onClose}
         onSave={this.save}
       >
@@ -146,14 +170,27 @@ class TagsDialog extends React.Component {
           return (
             <Layout flex="column">
               <FormGroup title={_('Choose Tag')} titleSize="4">
-                <Select
-                  menuPosition="adjust"
-                  name="name"
-                  value={id}
-                  width="230"
-                  items={render_select_items(tags)}
-                  onChange={this.handleChange}
-                />
+                <Divider>
+                  <Select
+                    menuPosition="adjust"
+                    name="name"
+                    value={id}
+                    width="230"
+                    items={render_select_items(tags)}
+                    onChange={this.handleChange}
+                  />
+                  <NewIcon
+                    value={'tag'}
+                    title={_('Create a new Tag')}
+                    onClick={onNewTagClick}
+                  />
+                </Divider>
+              </FormGroup>
+              <FormGroup title={_('Value')} titleSize="4">
+                {is_defined(value) ? value : ''}
+              </FormGroup>
+              <FormGroup title={_('Comment')} titleSize="4">
+                {is_defined(comment) ? comment : ''}
               </FormGroup>
             </Layout>
           );
@@ -173,11 +210,11 @@ TagsDialog.propTypes = {
   resourceType: PropTypes.string.isRequired,
   resources: PropTypes.object,
   selectionType: PropTypes.string.isRequired,
-  tag: PropTypes.model,
   tags: PropTypes.array,
   title: PropTypes.string,
   value: PropTypes.string,
   onClose: PropTypes.func.isRequired,
+  onNewTagClick: PropTypes.func.isRequired,
   onValueChange: PropTypes.func,
 };
 

gsa/src/web/pages/tags/listpage.js

@@ -104,6 +104,7 @@ const TagsPage = ({
       filterEditDialog={TagsFilterDialog}
       sectionIcon="tag.svg"
       table={TagsTable}
+      tags={false}
       title={_('Tags')}
       toolBarIcons={ToolBarIcons}
       onChanged={onChanged}