Fix mapping screens and embedded required layouts

Fixes storage and network mapping screen layout issues when using long
instances name.

Fixes embedded required field symbol layout (embedded fields are the
ones rendered inside properties table for object type fields).

src/components/atoms/TextInput/TextInput.jsx

@@ -30,7 +30,7 @@ const Required = styled.div`
   position: absolute;
   width: 8px;
   height: 8px;
-  right: -16px;
+  right: ${props => props.right}px;
   top: 12px;
   background: url('${requiredImage}') center no-repeat;
 `
@@ -107,7 +107,7 @@ type Props = {
   disabledLoading?: boolean,
 }
 const TextInput = (props: Props) => {
-  const { _ref, value, onChange, showClose, onCloseClick, disabled, disabledLoading } = props
+  const { _ref, value, onChange, showClose, onCloseClick, disabled, disabledLoading, embedded } = props
   let actualDisabled = disabled || disabledLoading
   let input
   return (
@@ -121,7 +121,7 @@ const TextInput = (props: Props) => {
         {...props}
         disabled={actualDisabled}
       />
-      {props.required ? <Required /> : null}
+      {props.required ? <Required right={embedded ? -24 : -16} /> : null}
       <Close
         data-test-id="textInput-close"
         show={showClose && value !== '' && value !== undefined}

src/components/molecules/AutocompleteDropdown/AutocompleteDropdown.jsx

@@ -49,7 +49,7 @@ const Required = styled.div`
   position: absolute;
   width: 8px;
   height: 8px;
-  right: -16px;
+  right: ${props => props.right}px;
   top: 12px;
   background: url('${requiredImage}') center no-repeat;
 `
@@ -455,7 +455,7 @@ class AutocompleteDropdown extends React.Component<Props, State> {
           disabledLoading={this.props.disabledLoading}
           embedded={this.props.embedded}
         />
-        {this.props.required ? <Required /> : null}
+        {this.props.required ? <Required right={this.props.embedded ? -24 : -16} /> : null}
         {this.renderList()}
       </Wrapper>
     )

src/components/molecules/AutocompleteDropdown/story.jsx

@@ -60,6 +60,7 @@ type State = {
 }
 type Props = {
   items: { value: string, label: string }[],
+  required?: boolean,
 }
 class Wrapper extends React.Component<Props, State> {
   state = {
@@ -72,6 +73,7 @@ class Wrapper extends React.Component<Props, State> {
         items={this.props.items}
         selectedItem={this.state.selectedItem}
         onChange={selectedItem => { this.setState({ selectedItem }) }}
+        required={this.props.required}
         onInputChange={(value, filteredItems) => {
           if (filteredItems.length === 0) {
             console.log('input value', value)
@@ -89,3 +91,6 @@ storiesOf('AutocompleteDropdown', module)
   .add('short list', () => (
     <Wrapper items={itemsShort} />
   ))
+  .add('required', () => (
+    <Wrapper items={itemsShort} required />
+  ))

src/components/molecules/Dropdown/Dropdown.jsx

@@ -45,7 +45,7 @@ const Required = styled.div`
   position: absolute;
   width: 8px;
   height: 8px;
-  right: -16px;
+  right: ${props => props.right}px;
   top: 12px;
   background: url('${requiredImage}') center no-repeat;
   ${props => props.disabledLoading ? StyleProps.animations.disabledLoading : ''}
@@ -503,7 +503,12 @@ class Dropdown extends React.Component<Props, State> {
           value={buttonValue()}
           onClick={() => this.handleButtonClick()}
         />
-        {this.props.required ? <Required disabledLoading={this.props.disabledLoading} /> : null}
+        {this.props.required ? (
+          <Required
+            disabledLoading={this.props.disabledLoading}
+            right={this.props.embedded ? -24 : -16}
+          />
+        ) : null}
         {this.renderList()}
       </Wrapper>
     )

src/components/molecules/Dropdown/story.jsx

@@ -82,6 +82,7 @@ class MultipleSelectionWrapper extends React.Component<Props, State> {
           }
         }}
         items={this.props.items}
+        {...this.props}
       />
     )
   }
@@ -92,6 +93,9 @@ storiesOf('Dropdown', module)
   .add('default', () => (
     <Wrapper />
   ))
+  .add('required', () => (
+    <Wrapper required />
+  ))
   .add('disabled', () => (
     <Wrapper disabled />
   ))

src/components/molecules/PropertiesTable/story.jsx

@@ -23,7 +23,8 @@ let properties = [
   { type: 'strict-boolean', name: 'prop-2', label: 'Strict Boolean' },
   { type: 'string', name: 'prop-3', label: 'String' },
   { type: 'string', name: 'prop-3a', label: 'String', required: true },
-  { type: 'string', enum: ['a', 'b', 'c'], name: 'prop-4', label: 'String enum' },
+  { type: 'string', enum: ['a', 'b', 'c'], name: 'prop-4', label: 'String enum', required: true },
+  { type: 'string', enum: ['a', 'b', 'c', 'a', 'b', 'c', 'a', 'b', 'c', 'a'], name: 'prop-5', label: 'String enum', required: true },
 ]
 
 class Wrapper extends React.Component<any, any> {

src/components/organisms/EditReplica/EditReplica.jsx

@@ -505,6 +505,7 @@ class EditReplica extends React.Component<Props, State> {
         storageMap={this.getStorageMap(endpointStore.storageBackends)}
         onChange={(s, t, type) => { this.handleStorageChange(s, t, type) }}
         style={{ padding: '32px 32px 0 32px', width: 'calc(100% - 64px)' }}
+        titleWidth={160}
       />
     )
   }
@@ -519,6 +520,7 @@ class EditReplica extends React.Component<Props, State> {
         onChange={(nic, network, secGroups) => { this.handleNetworkChange(nic, network, secGroups) }}
         selectedNetworks={this.getSelectedNetworks()}
         style={{ padding: '32px 32px 0 32px', width: 'calc(100% - 64px)' }}
+        titleWidth={160}
       />
     )
   }

src/components/organisms/WizardNetworks/WizardNetworks.jsx

@@ -67,7 +67,7 @@ const NetworkImage = styled.div`
   margin-right: 16px;
 `
 const NetworkTitle = styled.div`
-  width: 320px;
+  width: ${props => props.width}px;
 `
 const NetworkName = styled.div`
   font-size: 16px;
@@ -76,6 +76,7 @@ const NetworkSubtitle = styled.div`
   font-size: 12px;
   color: ${Palette.grayscale[5]};
   margin-top: 1px;
+  word-break: break-word;
 `
 const ArrowImage = styled.div`
   min-width: 32px;
@@ -121,6 +122,7 @@ type Props = {
   selectedNetworks: ?NetworkMap[],
   onChange: (nic: NicType, network: Network, securityGroups?: SecurityGroup[]) => void,
   style?: any,
+  titleWidth?: number,
 }
 @observer
 class WizardNetworks extends React.Component<Props> {
@@ -254,7 +256,7 @@ class WizardNetworks extends React.Component<Props> {
           return (
             <Nic key={nic.id} data-test-id="networkItem">
               <NetworkImage />
-              <NetworkTitle>
+              <NetworkTitle width={this.props.titleWidth || 320}>
                 <NetworkName data-test-id={`wNetworks-networkName-${nic.id}`}>{nic.network_name}</NetworkName>
                 {connectedTo.length ? (
                   <NetworkSubtitle data-test-id={`wNetworks-connectedTo-${nic.id}`}>

src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -79,7 +79,7 @@ const StorageImage = styled.div`
   margin-right: 16px;
 `
 const StorageTitle = styled.div`
-  width: 320px;
+  width: ${props => props.width}px;
 `
 const StorageName = styled.div`
   font-size: 16px;
@@ -89,6 +89,7 @@ const StorageSubtitle = styled.div`
   font-size: 12px;
   color: ${Palette.grayscale[5]};
   margin-top: 1px;
+  word-break: break-word;
 `
 const ArrowImage = styled.div`
   min-width: 32px;
@@ -147,6 +148,7 @@ export type Props = {
   storageMap: ?StorageMap[],
   onChange: (sourceStorage: Disk, targetStorage: StorageBackend, type: 'backend' | 'disk') => void,
   style?: any,
+  titleWidth?: number,
 }
 @observer
 class WizardStorage extends React.Component<Props> {
@@ -203,7 +205,7 @@ class WizardStorage extends React.Component<Props> {
             return (
               <StorageItem key={disk[diskFieldName]}>
                 <StorageImage backend={type === 'backend'} />
-                <StorageTitle>
+                <StorageTitle width={this.props.titleWidth || 320}>
                   <StorageName
                     data-test-id={`${TEST_ID}-${type}-source`}
                     title={diskNameParsed[1] ? disk[diskFieldName] : null}