added grow option to multiselect

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [Unreleased]
 
 ### Added
+- Added grow option to multiselect component [#1485](https://github.com/greenbone/gsa/pull/1485)
 - Add LogoutIcon [#1481](https://github.com/greenbone/gsa/pull/1481)
 - Added a component "SeverityValuesGroup" enabling user choose the relation they want [#1477](https://github.com/greenbone/gsa/pull/1477)
 - Added filter keywords owner, host, cvss base score, vulnerability and location to filter dialog on results page [#1472](https://github.com/greenbone/gsa/pull/1472)

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

@@ -113,7 +113,10 @@ exports[`MultiSelect component tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 250px;
 }
 

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

@@ -87,7 +87,10 @@ exports[`Select component tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

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

@@ -292,7 +292,10 @@ exports[`SelectContainer tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 100px;
 }
 

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

@@ -87,7 +87,10 @@ exports[`TimezoneSelect tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 230px;
 }
 

gsa/src/web/components/form/multiselect.js

@@ -176,6 +176,7 @@ class MultiSelect extends React.Component {
       items,
       menuPosition = 'adjust',
       width = DEFAULT_WIDTH,
+      grow,
     } = this.props;
 
     const {search, selectedItems} = this.state;
@@ -208,6 +209,7 @@ class MultiSelect extends React.Component {
               {...getRootProps({}, {suppressRefError: true})}
               className={className}
               width={width}
+              grow={grow}
             >
               <Box
                 isOpen={isOpen}
@@ -275,6 +277,7 @@ class MultiSelect extends React.Component {
 
 MultiSelect.propTypes = {
   disabled: PropTypes.bool,
+  grow: PropTypes.number,
   items: PropTypes.arrayOf(PropTypes.object),
   menuPosition: PropTypes.oneOf(['left', 'right', 'adjust']),
   name: PropTypes.string,

gsa/src/web/components/form/selectelements.js

@@ -222,6 +222,7 @@ Menu.propTypes = {
 export const SelectContainer = styled.div`
   display: flex;
   flex-direction: column;
+  flex-grow: ${props => props.grow}
   position: relative;
   width: ${props => props.width};
 `;

gsa/src/web/components/powerfilter/__tests__/__snapshots__/relationselector.js.snap

@@ -87,7 +87,10 @@ exports[`Relation Selector Tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

gsa/src/web/components/powerfilter/__tests__/__snapshots__/severityvaluesgroup.js.snap

@@ -187,7 +187,10 @@ exports[`Severity Values Group Tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

gsa/src/web/components/powerfilter/__tests__/__snapshots__/sortbygroup.js.snap

@@ -187,7 +187,10 @@ exports[`SortByGroup tests should render 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

gsa/src/web/entities/__tests__/__snapshots__/tagsdialog.js.snap

@@ -512,7 +512,10 @@ exports[`TagsDialog dialog component tests should disable tag selection when no
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 230px;
 }
 
@@ -1219,7 +1222,10 @@ exports[`TagsDialog dialog component tests should render dialog 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 230px;
 }
 

gsa/src/web/pages/tickets/__tests__/__snapshots__/createdialog.js.snap

@@ -441,7 +441,10 @@ exports[`CreateTicketDialog component tests should render dialog 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

gsa/src/web/pages/tickets/__tests__/__snapshots__/editdialog.js.snap

@@ -441,7 +441,10 @@ exports[`EditTicketDialog component tests should render dialog 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: relative;
+  -webkit-box-flex: position:relative;
+  -webkit-flex-grow: position:relative;
+  -ms-flex-positive: position:relative;
+  flex-grow: position:relative;
   width: 180px;
 }
 

gsa/src/web/pages/tickets/createdialog.js

@@ -53,7 +53,6 @@ const CreateTicketDialog = ({
         <FormGroup title={_('Assign To User')}>
           <Select
             name="userId"
-            grow="1"
             value={values.userId}
             items={renderSelectItems(users)}
             onChange={onUserIdChange}