Skip to content
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

EPMRPP-83873 || autocomplete menu layout fix #3695

Merged
merged 3 commits into from
Dec 15, 2023
Merged

EPMRPP-83873 || autocomplete menu layout fix #3695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd088f7
EPMRPP-83873 || autocomplete menu layout fix
Vadim73i Dec 14, 2023
fbf6895
EPMRPP-83873 || code review fixes - 1
Vadim73i Dec 14, 2023
5da0e3c
EPMRPP-83873 || code review fixes - 2
Vadim73i Dec 14, 2023
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
5 changes: 5 additions & 0 deletions app/src/componentLibrary/attributeEditor/attributeEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
keyPlaceholder,
valuePlaceholder,
editorDefaultOpen,
autocompleteProps,
}) => {
const [keyTouched, setTouchKey] = useState(false);
const [valueTouched, setTouchValue] = useState(false);
Expand Down Expand Up @@ -77,7 +78,7 @@
useEffect(() => {
const { key, value } = attribute;
setState({ key, value, errors: getValidationErrors(key, value), isKeyEdited: false });
}, [attribute]);

Check warning on line 81 in app/src/componentLibrary/attributeEditor/attributeEditor.jsx

View workflow job for this annotation

GitHub Actions / build (14) 

React Hook useEffect has a missing dependency: 'getValidationErrors'. Either include it or remove the dependency array

Check warning on line 81 in app/src/componentLibrary/attributeEditor/attributeEditor.jsx

View workflow job for this annotation

GitHub Actions / build (14) 

React Hook useEffect has a missing dependency: 'getValidationErrors'. Either include it or remove the dependency array

const byKeyComparator = (attr, item, key, value) => attr.key === item && attr.value === value;

Expand Down Expand Up @@ -183,6 +184,7 @@
onInputChange={handleAttributeKeyInputChange}
optionVariant="key-variant"
menuClassName={cx('menu')}
{...autocompleteProps}
/>
</FieldErrorHint>
<div className={cx('separator')}>:</div>
Expand All @@ -207,6 +209,7 @@
isRequired
optionVariant="value-variant"
menuClassName={cx('menu')}
{...autocompleteProps}
/>
</FieldErrorHint>
<div className={cx('buttons')}>
Expand Down Expand Up @@ -244,6 +247,7 @@
keyPlaceholder: PropTypes.string,
valuePlaceholder: PropTypes.string,
editorDefaultOpen: PropTypes.bool,
autocompleteProps: PropTypes.object,
};
AttributeEditor.defaultProps = {
attributes: [],
Expand All @@ -258,4 +262,5 @@
keyPlaceholder: 'Key',
valuePlaceholder: 'Value',
editorDefaultOpen: false,
autocompleteProps: {},
};
4 changes: 4 additions & 0 deletions app/src/componentLibrary/attributeList/attributeList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const AttributeList = ({
editable,
attributesListClassname,
editorDefaultOpen,
autocompleteProps,
}) => {
const addNewAttrRef = useRef(null);
const attributesRefs = useRef(null);
Expand Down Expand Up @@ -258,6 +259,7 @@ export const AttributeList = ({
getURIKey={getURIKey}
getURIValue={getURIValue}
editorDefaultOpen={editorDefaultOpen}
autocompleteProps={autocompleteProps}
/>
)}
<div className={cx('attributes-wrapper')}>
Expand Down Expand Up @@ -351,6 +353,7 @@ AttributeList.propTypes = {
editable: PropTypes.bool,
attributesListClassname: PropTypes.string,
editorDefaultOpen: PropTypes.bool,
autocompleteProps: PropTypes.object,
};
AttributeList.defaultProps = {
attributes: [],
Expand All @@ -371,4 +374,5 @@ AttributeList.defaultProps = {
editable: true,
attributesListClassname: '',
editorDefaultOpen: false,
autocompleteProps: {},
};
5 changes: 4 additions & 1 deletion app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export class SingleAutocomplete extends Component {
refFunction: PropTypes.func,
stateReducer: PropTypes.func,
variant: autocompleteVariantType,
useFixedPositioning: PropTypes.bool,
};

static defaultProps = {
Expand Down Expand Up @@ -83,6 +84,7 @@ export class SingleAutocomplete extends Component {
refFunction: () => {},
stateReducer: (state, changes) => changes,
variant: 'light',
useFixedPositioning: false,
};

getOptionProps = (getItemProps, highlightedIndex, selectedItem) => ({ item, index, ...rest }) =>
Expand Down Expand Up @@ -126,6 +128,7 @@ export class SingleAutocomplete extends Component {
refFunction,
stateReducer,
variant,
useFixedPositioning,
...props
} = this.props;
return (
Expand Down Expand Up @@ -199,7 +202,7 @@ export class SingleAutocomplete extends Component {
</Reference>
<Popper
placement="bottom-start"
positionFixed
positionFixed={useFixedPositioning}
modifiers={{
preventOverflow: { escapeWithReference: true },
flip: {
Expand Down
1 change: 0 additions & 1 deletion app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
margin-bottom: 15px;
padding-right: 45px;
position: relative;
transform: translate(0px, 0px);
}

.dark {
Expand Down
1 change: 1 addition & 0 deletions ...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ const AddEditNotificationModal = ({
shown={isEditorShown}
changeValue={change}
attributesNote={formatMessage(messages.attributesNote)}
autocompleteProps={{ useFixedPositioning: true }}
/>
</FieldElement>
{attributesValue.length > 0 && (
Expand Down
Loading