Fixed userId, roleId and groupId not rendering in create entity permissions dialog

CHANGELOG.md

@@ -38,6 +38,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
   logged in [#1508](https://github.com/greenbone/gsa/pull/1508)
 
 ### Fixed
+- Fixed userId, roleId and groupId not rendering in create entity permissions dialog [#1658](https://github.com/greenbone/gsa/pull/1658)
 - Don't crash Schedule details and list pages if invalid ical data is loaded [#1656](https://github.com/greenbone/gsa/pull/1656)
 - Fix showing loading indicator in content composers [#1613](https://github.com/greenbone/gsa/pull/1613)
 - Enable downloading csv in table dashboard [#1611](https://github.com/greenbone/gsa/pull/1611)

gsa/src/web/components/form/__tests__/__snapshots__/datepicker.js.snap

@@ -60,12 +60,12 @@ exports[`DatePicker component tests should render 2`] = `
     class="react-datepicker__input-container"
   >
     <div
-      class="sc-likbZx cRBOzA"
+      class="sc-eKZiaR dyRGkt"
       width="auto"
     >
       2018/11/11
       <span
-        class="sc-ePZHVD bHdJcz sc-jzJRlG ksEyeu sc-fjdhpX iICojt"
+        class="sc-likbZx MusHR sc-jzJRlG ksEyeu sc-fjdhpX iICojt"
       >
         <svg>
           calendar.svg

gsa/src/web/entity/permissions.js

@@ -80,6 +80,7 @@ class Permissions extends React.Component {
       multiplePermissionDialogVisible: false,
     };
 
+    this.handleChange = this.handleChange.bind(this);
     this.handleMultipleSave = this.handleMultipleSave.bind(this);
     this.openMultiplePermissionDialog = this.openMultiplePermissionDialog.bind(
       this,
@@ -154,6 +155,10 @@ class Permissions extends React.Component {
     this.setState({multiplePermissionDialogVisible: false});
   }
 
+  handleChange(value, name) {
+    this.setState({[name]: value});
+  }
+
   handleCloseMultiplePermissionDialog() {
     this.closeMultiplePermissionDialog();
     this.handleInteraction();
@@ -234,6 +239,7 @@ class Permissions extends React.Component {
             title={title}
             userId={userId}
             users={users}
+            onChange={this.handleChange}
             onClose={this.handleCloseMultiplePermissionDialog}
             onSave={this.handleMultipleSave}
           />

gsa/src/web/pages/permissions/multipledialog.js

@@ -19,6 +19,8 @@
 
 import React from 'react';
 
+import styled from 'styled-components';
+
 import _ from 'gmp/locale';
 
 import {typeName, getEntityType} from 'gmp/utils/entitytype';
@@ -40,6 +42,11 @@ export const CURRENT_RESOURCE_ONLY = '0';
 export const INCLUDE_RELATED_RESOURCES = '1';
 export const RELATED_RESOURCES_ONLY = '2';
 
+const EntityName = styled.div`
+  font-style: italic;
+  word-break: break-all;
+`;
+
 const MultiplePermissionDialog = withCapabilities(
   ({
     capabilities,
@@ -57,24 +64,25 @@ const MultiplePermissionDialog = withCapabilities(
     title = _('Create Permission'),
     userId,
     users = [],
+    onChange,
     onClose,
     onSave,
   }) => {
     const hasRelated = related.length > 0;
 
     const defaultValues = {
-      groupId,
       includeRelated,
       permission,
-      roleId,
       subjectType,
-      userId,
     };
 
     const values = {
+      groupId,
       id,
       entityType,
       related,
+      roleId,
+      userId,
     };
 
     const includeRelatedItems = [];
@@ -143,7 +151,7 @@ const MultiplePermissionDialog = withCapabilities(
                         name="userId"
                         value={state.userId}
                         items={renderSelectItems(users)}
-                        onChange={onValueChange}
+                        onChange={onChange}
                       />
                     </Divider>
                   )}
@@ -161,7 +169,7 @@ const MultiplePermissionDialog = withCapabilities(
                         name="roleId"
                         value={state.roleId}
                         items={renderSelectItems(roles)}
-                        onChange={onValueChange}
+                        onChange={onChange}
                       />
                     </Divider>
                   )}
@@ -179,7 +187,7 @@ const MultiplePermissionDialog = withCapabilities(
                         name="groupId"
                         value={state.groupId}
                         items={renderSelectItems(groups)}
-                        onChange={onValueChange}
+                        onChange={onChange}
                       />
                     </Divider>
                   )}
@@ -188,7 +196,7 @@ const MultiplePermissionDialog = withCapabilities(
               <FormGroup title={_('on')} flex="column">
                 <Divider>
                   <span>{typeName(getEntityType(state))}</span>
-                  <i>{entityName}</i>
+                  <EntityName>{entityName}</EntityName>
                   <Select
                     name="includeRelated"
                     value={state.includeRelated}
@@ -237,10 +245,15 @@ MultiplePermissionDialog.propTypes = {
   userId: PropTypes.id,
   users: PropTypes.array,
   visible: PropTypes.bool,
+  onChange: PropTypes.func,
   onClose: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
 };
 
+MultiplePermissionDialog.contextTypes = {
+  capabilities: PropTypes.capabilities.isRequired,
+};
+
 export default MultiplePermissionDialog;
 
 // vim: set ts=2 sw=2 tw=80: