fix: UBGTC-70

components/GridToolBox/style.css

@@ -3,7 +3,6 @@
 
 .toolbarWrap {
     width: 100%;
-    overflow: hidden;
 }
 
 .fixedHeight {
@@ -24,12 +23,28 @@
     justify-content: space-between;
 }
 
-.toolbarWrap>div,
+.tableButtonsShowed .pullRight {
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.tableButtonsShowed .spacer {
+    display: flex;
+    align-items: center;
+}
+
+/* Keep .tableCell for non-toolbarWrap usages elsewhere */
 .tableCell {
     display: table-cell;
     vertical-align: middle;
 }
 
+/* Override table-cell for direct children of the flex toolbar row */
+.toolbarWrap.table > div {
+    display: flex;
+    align-items: center;
+}
+
 .toolbarWrap .toolbarElement {
     padding-right: 20px;
 }
@@ -41,6 +56,8 @@
 .toolbarWrap .label {
     text-align: left;
     white-space: nowrap;
+    flex-shrink: 1;
+    min-width: 0;
 }
 
 .toolbarWrap .link {
@@ -55,8 +72,8 @@
 }
 
 .toolbarWrap .pullRight {
-    float: right;
-    text-align: right;
+    display: flex;
+    align-items: center;
 }
 
 .toolbarWrap .noRightMargin {
@@ -153,129 +170,17 @@
 }
 
 .filterActionWrap {
-    flex-grow: 1;
-    margin-left: 20px;
-}
-
-.filterActionWrap button {
-    float: right;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: 20px;
 }
 
 .iframeWrap {
-    width: 13rem;;
+    width: 13rem;
 }
 
 .wrapFilters {
     outline: none;
 }
 
-@media only screen and (min-device-width: 280px) and (max-device-width:  1365px) {
-    .toolbarWrap .minWidthed {
-        min-width: auto;
-    }
-
-    .table {
-        padding-top: 10px;
-    }
-  }
-
-
-@media only screen and (min-device-width: 930px) and (max-device-width:  1365px) {
-    .toolbarWrap .minWidthed {
-        min-width: auto;
-    }
-
-    .table {
-        height: auto;
-        padding-top: 10px;
-        flex-direction: column;
-        padding-bottom: 10px;
-    }
-
-    .toolbarWrap .toolbarElement {
-        padding-bottom: 10px;
-    }
-
-    .toolbarElementsContainer {
-        display: flex;
-        flex-direction: row;
-    }
-  }
-
-  @media only screen and (min-device-width: 670px) and (max-device-width: 929px) {
-    .table {
-        height: auto;
-        padding-bottom: 10px;
-        flex-direction: column;
-    }
-
-    .toolbarWrap .toolbarElement {
-        padding-right: 0px;
-        padding-bottom: 10px;
-    }
-
-    .toolbarElementsContainer {
-        flex-direction: column;
-        height: auto;
-    }
-
-  }
-
-
-  @media only screen and (min-device-width: 280px) and (max-device-width: 669px) {
-    .toolbarWrap .toolbarElement {
-        padding-right: 0px;
-        padding-bottom: 10px;
-    }
-
-    .toolbarElementsContainer {
-        flex-direction: column;
-        height: auto;
-    }
-}
-
-@media only screen and (min-device-width: 280px) and (max-device-width: 420px) {
-    .table {
-        width: 55%;
-        height: auto;
-        flex-direction: column;
-        align-items: flex-start;
-        padding-bottom: 5px;
-    }
-}
-
-@media only screen and (min-device-width: 421px) and (max-device-width: 429px) {
-    .table {
-        width: 48%;
-        height: auto;
-        flex-direction: column;
-        padding-bottom: 5px;
-    }
-
-    .toolbarWrap .pullRight {
-text-align: -webkit-center;
-    }
-}
-
-
-@media only screen and (min-device-width: 430px) and (max-device-width: 589px) {
-    .table {
-        width: 70%;
-        height: auto;
-        flex-direction: column;
-        padding-bottom: 5px;
-    }
-
-    .toolbarWrap .pullRight {
-        text-align: -webkit-center;
-            }
-}
-
-@media only screen and (min-device-width: 590px) and (max-device-width: 669px) {
-    .table {
-        width: 80%;
-        height: auto;
-        flex-direction: column;
-        padding-bottom: 5px;
-    }
-}

components/Input/Dropdown.js

@@ -17,12 +17,14 @@ export class Dropdown extends Component {
         this.state = {
             open: false,
             value: props.defaultSelected || this.props.placeholderValue,
-            valid: {isValid: this.props.isValid, errorMessage: this.props.errorMessage}
+            valid: {isValid: this.props.isValid, errorMessage: this.props.errorMessage},
+            searchQuery: ''
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleOpen = this.handleOpen.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        this.handleSearchChange = this.handleSearchChange.bind(this);
     }
 
     static propTypes = {
@@ -97,7 +99,11 @@ export class Dropdown extends Component {
     }
 
     handleOpen(event) {
-        this.setState({open: true, anchorEl: event.currentTarget});
+        this.setState({open: true, anchorEl: event.currentTarget, searchQuery: ''});
+    }
+
+    handleSearchChange(event) {
+        this.setState({searchQuery: event.target.value});
     }
 
     handleClose(event) {
@@ -127,9 +133,17 @@ export class Dropdown extends Component {
 
     getMenuItems(width) {
         const { data, placeholder, canSelectPlaceholder, cssStyle, mergeStyles } = this.props;
+        const { searchQuery } = this.state;
         const ddstyles = mergeStyles ? Object.assign({}, style, mergeStyles) : cssStyle || style;
         const menuItems = [];
 
+        const filteredData = searchQuery
+            ? data.filter(item => {
+                const name = this.getTitle(item.name);
+                return name && String(name).toLowerCase().includes(searchQuery.toLowerCase());
+            })
+            : data;
+
         menuItems.push(
             <MenuItem
                 className={ddstyles.dropdownMenuItemWrap}
@@ -142,7 +156,7 @@ export class Dropdown extends Component {
             </MenuItem>
         );
 
-        data.forEach((item, i) => {
+        filteredData.forEach((item, i) => {
             menuItems.push(
                 <MenuItem
                     className={ddstyles.dropdownMenuItemWrap}
@@ -195,6 +209,18 @@ export class Dropdown extends Component {
                     transformOrigin={{horizontal: 'left', vertical: 'top'}}
                 >
                     <Box maxHeight={300} width={rootElementWidth}>
+                        {this.props.data.length > 10 && (
+                            <div className={ddstyles.dropdownSearchWrap}>
+                                <input
+                                    autoFocus
+                                    type='text'
+                                    className={ddstyles.dropdownSearch}
+                                    value={this.state.searchQuery}
+                                    onChange={this.handleSearchChange}
+                                    onClick={e => e.stopPropagation()}
+                                />
+                            </div>
+                        )}
                         <MenuList
                             open={this.state.open}
                             value={this.state.value}

components/Input/MultiSelectDropdown.js

@@ -52,8 +52,13 @@ class MultiSelectDropdown extends Dropdown {
 
     getMenuItems() {
         const {data, placeholder, cssStyle, mergeStyles, defaultSelected} = this.props;
+        const { searchQuery } = this.state;
         const ddstyles = mergeStyles ? Object.assign({}, style, mergeStyles) : cssStyle || style;
 
+        const filteredData = searchQuery
+            ? data.filter(item => item.name && String(item.name).toLowerCase().includes(searchQuery.toLowerCase()))
+            : data;
+
         let menuItems = [
             <MenuItem
                 disabled
@@ -67,7 +72,7 @@ class MultiSelectDropdown extends Dropdown {
         ];
 
         if (data.length) {
-            menuItems = [
+            menuItems = searchQuery ? [] : [
                 <MenuItem
                     className={ddstyles.multiSelectDropdownMenuItemWrap}
                     onClick={this.handleClick}
@@ -84,7 +89,7 @@ class MultiSelectDropdown extends Dropdown {
                     key='2-ddfg'
                 />
             ];
-            data.forEach((item) => {
+            filteredData.forEach((item) => {
                 const isChecked = (data.length === defaultSelected.length || defaultSelected.findIndex(d => d.key === item.key) > -1);
                 menuItems.push(
                     <MenuItem
@@ -143,6 +148,18 @@ class MultiSelectDropdown extends Dropdown {
                     transformOrigin={{horizontal: 'left', vertical: 'top'}}
                 >
                     <Box maxHeight={300} width={rootElementWidth}>
+                        {this.props.data.length > 10 && (
+                            <div className={ddstyles.dropdownSearchWrap}>
+                                <input
+                                    autoFocus
+                                    type='text'
+                                    className={ddstyles.dropdownSearch}
+                                    value={this.state.searchQuery}
+                                    onChange={this.handleSearchChange}
+                                    onClick={e => e.stopPropagation()}
+                                />
+                            </div>
+                        )}
                         <MenuList className={ddstyles.multiSelectDropdownMenu}>
                             {this.state.open && this.getMenuItems()}
                         </MenuList>

components/Input/style.css

@@ -495,3 +495,22 @@ div [data-reactroot] div [style*="color: rgb(255, 64, 129)"] {
     overflow-x: hidden !important;
     text-overflow: ellipsis;
 }
+
+.dropdownSearchWrap {
+    padding: 5px 8px;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 1;
+    border-bottom: 1px solid #D6D6D6;
+}
+
+.dropdownSearch {
+    width: 100%;
+    height: 30px;
+    border: 1px solid #D6D6D6;
+    padding: 10px 8px;
+    box-sizing: border-box;
+    font-size: 14px;
+    outline: none;
+}

components/Layout/verticalStyles.css

@@ -4,13 +4,15 @@
 }
 
 .vertical {
-    overflow: hidden;
+    overflow-x: visible;
     width: 100%;
+    min-width: 0;
 }
 
 .innerContent {
     height: 100%;
-    overflow: hidden;
+    overflow-x: visible;
     display: flex;
     flex-direction: column;
+    min-width: 0;
 }

components/Tab/MultiTab.js

@@ -90,16 +90,25 @@ export default class MultiTab extends Component {
                 ref={(element) => { this.rootElement = element; }}
                 data-type={multiTab}
             >
-                <Link
-                    onClick={this.onClick}
-                    to={tab.routeName}
-                    params={tab.routeParams}
-                    className={classNames(className, styles.navigationTab)}
-                    activeClassName={styles.navigationTabActive}
-                >
-                    <Text>{tab.title}</Text>
-                    {this.props.rightArrowIcon && <span className={styles.navigationMultiTabArrow} />}
-                </Link>
+                {tab.routeName
+                    ? <Link
+                            onClick={this.onClick}
+                            to={tab.routeName}
+                            params={tab.routeParams}
+                            className={classNames(className, styles.navigationTab)}
+                            activeClassName={styles.navigationTabActive}
+                    >
+                        <Text>{tab.title}</Text>
+                        {this.props.rightArrowIcon && <span className={styles.navigationMultiTabArrow} />}
+                    </Link>
+                    : <span
+                            onClick={this.onClick}
+                            className={classNames(className, styles.navigationTab)}
+                    >
+                        <Text>{tab.title}</Text>
+                        {this.props.rightArrowIcon && <span className={styles.navigationMultiTabArrow} />}
+                    </span>
+                }
                 <Menu
                     fields={menuItems}
                     open={this.state.menuToggled}