Skip to content

fix: UBGTC-70 #723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ranjith-sg wants to merge 4 commits into
base: minor/bgtc
Choose a base branch
from
Open

fix: UBGTC-70 #723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d3bffa8
fix: UBGTC-70
Mar 16, 2026
ae0238b
fix: UBGTC-84
Mar 23, 2026
a715443
fix: component box UBGTC-70
Apr 8, 2026
5779dce
fix: UBGTC-93 and translation
Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/AdvancedSearchButton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { Component } from 'react';
import mainStyle from './style.css';
import SvgSearchIcon from '@material-ui/icons/Search';
import styles from '../StandardButton/styles.css';
import Text from '../Text';
import classnames from 'classnames';

export class AdvancedSearchButton extends Component {
Expand All @@ -12,7 +13,7 @@ export class AdvancedSearchButton extends Component {
<button className={classnames(styles.defaultBtn, mainStyle.defaultButton)} onClick={this.props.onClick}>
<span className={mainStyle.iconWrap}>
<SvgSearchIcon color='action' style={{display: 'flex', height: '20px'}} />
</span> Advanced Search </button>
</span> <Text>Advanced Search</Text></button>
</div>

);
Expand Down
3 changes: 2 additions & 1 deletion components/GridMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
import Popover from '@material-ui/core/Popover';
import classnames from 'classnames';
import Checkbox from '../Input/Checkbox';
import Text from '../Text';
import style from './style.css';

import { closest } from '../../utils/dom';
Expand Down Expand Up @@ -133,7 +134,7 @@ export default class GlobalMenu extends Component {
</MenuItem>
</div>)}
<div className={style.columnWrap}>
<label className={style.menuLabel}> Manage Columns </label>
<label className={style.menuLabel}><Text>Manage Columns</Text> </label>
{this.getItems()}
</div>
</MenuList>
Expand Down
12 changes: 6 additions & 6 deletions components/GridToolBox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,21 +487,21 @@ class GridToolBox extends Component {
}) !== undefined) || (!this.state.showFiltersPopup && !this.props.filterAutoFetch && Object.keys(this.state.filters).length > 0);

return (
<div className={classnames(style.toolbarWrap, style.table, style.fixedHeight)}>
<div className={classnames(style.toolbarElement, style.label, labelClass, style.tableCell)} onClick={toggle}>
<div className={classnames(style.toolbarWrap, style.flex, style.fixedHeight)}>
<div className={classnames(style.toolbarElement, style.label, labelClass, style.flexItem)} onClick={toggle}>
{leftSide}
</div>
<div className={classnames(style.pullRight, style.tableCell)} >
<div className={classnames(style.toolbarElementsContainer, style.fixedHeight)}>
<div className={classnames(style.pullRight, style.flexItem2)} style={{minWidth: 'calc(100% - 480px)'}} >
<div className={classnames(style.toolbarElementsContainer, style.fixedHeight)} style={{width: '100%'}}>
<div onKeyUp={this.onPressEnter} className={style.toolbarElement}>
<div tabIndex={-1} className={style.wrapFilters}>
<div tabIndex={-1} className={classnames(style.flex, style.alignStart, style.wrapFilters)}>
{filterElements.map((el, i) => {
const incrementNum = (el.type === filterElementTypes.datePickerBetween || el.type === filterElementTypes.dateTimePickerBetween) ? 2 : 1; // datePicker has two input fields
filtersNumber += incrementNum;
if (filtersNumber <= this.props.maxVisibleInputs) {
const filter = this.renderFilter(el);
return filter && (
<div key={i} className={classnames(style.toolbarElement, style.tableCell, el.type === 'iframeInput' && style.iframeWrap)} style={el.styles}>
<div key={i} className={classnames(style.toolbarElement, style.flexItem, style.min150, el.type === 'iframeInput' && style.iframeWrap)} style={el.styles}>
<div className={style.minWidthed}>
{filter}
</div>
Expand Down
163 changes: 44 additions & 119 deletions components/GridToolBox/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

.toolbarWrap {
width: 100%;
overflow: hidden;
}

.fixedHeight {
Expand All @@ -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;
}
Expand All @@ -41,6 +56,8 @@
.toolbarWrap .label {
text-align: left;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}

.toolbarWrap .link {
Expand All @@ -55,8 +72,8 @@
}

.toolbarWrap .pullRight {
float: right;
text-align: right;
display: flex;
align-items: center;
}

.toolbarWrap .noRightMargin {
Expand Down Expand Up @@ -153,129 +170,37 @@
}

.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;
}
.flex {
display: flex;
align-items: center;
}

.alignStart {
align-items: start !important;
}

.flexItem1 {
flex: 1
}

.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;
}
.flexItem2 {
flex: 2
}

.min150 {
min-width: 150px;
}
32 changes: 29 additions & 3 deletions components/Input/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand All @@ -142,7 +156,7 @@ export class Dropdown extends Component {
</MenuItem>
);

data.forEach((item, i) => {
filteredData.forEach((item, i) => {
menuItems.push(
<MenuItem
className={ddstyles.dropdownMenuItemWrap}
Expand Down Expand Up @@ -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}
Expand Down
21 changes: 19 additions & 2 deletions components/Input/MultiSelectDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -67,7 +72,7 @@ class MultiSelectDropdown extends Dropdown {
];

if (data.length) {
menuItems = [
menuItems = searchQuery ? [] : [
<MenuItem
className={ddstyles.multiSelectDropdownMenuItemWrap}
onClick={this.handleClick}
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
Loading