Merge pull request #481 from smiclea/fix-options-layout

Fix mapping screens and embedded required layouts

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}