Skip to content

fix: Optimize data browser cell context menu grouping and readability #3141

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

Merged
mtrezza merged 3 commits into from
Jan 23, 2026
Merged

fix: Optimize data browser cell context menu grouping and readability #3141

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
6db7adb
fix
mtrezza Jan 23, 2026
abbf3d2
fix
mtrezza Jan 23, 2026
c7b6036
fix
mtrezza Jan 23, 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
92 changes: 47 additions & 45 deletions src/components/BrowserCell/BrowserCell.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,47 +316,56 @@ export default class BrowserCell extends Component {
const { onEditSelectedRow, readonly } = this.props;
const contextMenuOptions = [];

const setFilterContextMenuOption = this.getSetFilterContextMenuOption(constraints);
setFilterContextMenuOption && contextMenuOptions.push(setFilterContextMenuOption);

const addFilterContextMenuOption = this.getAddFilterContextMenuOption(constraints);
addFilterContextMenuOption && contextMenuOptions.push(addFilterContextMenuOption);

// Group 1: Navigation
const relatedObjectsContextMenuOption = this.getRelatedObjectsContextMenuOption();
relatedObjectsContextMenuOption && contextMenuOptions.push(relatedObjectsContextMenuOption);

const relatedTextFieldsContextMenuOption = this.getRelatedTextFieldsContextMenuOption();
relatedTextFieldsContextMenuOption && contextMenuOptions.push(relatedTextFieldsContextMenuOption);
!relatedObjectsContextMenuOption && relatedTextFieldsContextMenuOption && contextMenuOptions.push(relatedTextFieldsContextMenuOption);

const relatedNumberFieldsContextMenuOption = this.getRelatedNumberFieldsContextMenuOption();
relatedNumberFieldsContextMenuOption && contextMenuOptions.push(relatedNumberFieldsContextMenuOption);
!relatedObjectsContextMenuOption && !relatedTextFieldsContextMenuOption && relatedNumberFieldsContextMenuOption && contextMenuOptions.push(relatedNumberFieldsContextMenuOption);

// Group 2: Filter
const addFilterContextMenuOption = this.getAddFilterContextMenuOption(constraints);
const setFilterContextMenuOption = this.getSetFilterContextMenuOption(constraints);

if (addFilterContextMenuOption || setFilterContextMenuOption) {
if (contextMenuOptions.length > 0) {
contextMenuOptions.push({ type: 'separator' });
}
addFilterContextMenuOption && contextMenuOptions.push(addFilterContextMenuOption);
setFilterContextMenuOption && contextMenuOptions.push(setFilterContextMenuOption);
}

// Group 3: Row Action
const hasEditRow = !readonly && onEditSelectedRow;

if (hasEditRow) {
if (contextMenuOptions.length > 0) {
contextMenuOptions.push({ type: 'separator' });
}

!readonly &&
onEditSelectedRow &&
contextMenuOptions.push({
text: 'Edit row',
callback: () => {
const { objectId, onEditSelectedRow } = this.props;
onEditSelectedRow(true, objectId);
},
});

if (this.props.type === 'Pointer') {
onEditSelectedRow &&
contextMenuOptions.push({
text: 'Open pointer in new tab',
callback: () => {
const { value, onPointerCmdClick } = this.props;
onPointerCmdClick(value);
},
});
}

// Group 4: Automation
const { className, objectId, field, scripts = [], rowValue } = this.props;
const { validScripts, validator } = getValidScripts(scripts, className, field);
const addToConfigOption = this.getAddToConfigContextMenuOption();

if ((validScripts.length && onEditSelectedRow) || addToConfigOption) {
if (contextMenuOptions.length > 0) {
contextMenuOptions.push({ type: 'separator' });
}

if (validScripts.length) {
onEditSelectedRow &&
if (validScripts.length && onEditSelectedRow) {
contextMenuOptions.push({
text: 'Scripts',
items: validScripts.map(script => {
Expand All @@ -374,18 +383,11 @@ export default class BrowserCell extends Component {
};
}),
});
}

// Sort menu items alphabetically by text
contextMenuOptions.sort((a, b) => a.text.localeCompare(b.text));
}

// Add separator and "Add to config parameter..." after the sorted items
const addToConfigOption = this.getAddToConfigContextMenuOption();
if (addToConfigOption && contextMenuOptions.length > 0) {
contextMenuOptions.push({ type: 'separator' });
contextMenuOptions.push(addToConfigOption);
} else if (addToConfigOption) {
contextMenuOptions.push(addToConfigOption);
if (addToConfigOption) {
contextMenuOptions.push(addToConfigOption);
}
}

return contextMenuOptions;
Expand All @@ -410,7 +412,7 @@ export default class BrowserCell extends Component {
getSetFilterContextMenuOption(constraints) {
if (constraints) {
return {
text: 'Set filter...',
text: 'Set filter',
items: constraints.map(constraint => {
const definition = Filters.Constraints[constraint];
const copyableValue = String(this.copyableValue);
Expand All @@ -436,7 +438,7 @@ export default class BrowserCell extends Component {
getAddFilterContextMenuOption(constraints) {
if (constraints && this.props.filters && this.props.filters.size > 0) {
return {
text: 'Add filter...',
text: 'Add filter',
items: constraints.map(constraint => {
const definition = Filters.Constraints[constraint];
const text = `${this.props.field} ${definition.name}${
Expand All @@ -452,7 +454,7 @@ export default class BrowserCell extends Component {
}

/**
* Returns "Get related records from..." context menu item if cell holds a Pointer
* Returns "Related records" context menu item if cell holds a Pointer
* or objectId and there's a class in relation.
* Groups fields by class name in a hierarchical submenu structure.
*/
Expand All @@ -463,14 +465,14 @@ export default class BrowserCell extends Component {
(value && value.className) || (this.props.field === 'objectId' && this.props.className);
if (pointerClassName) {
const relatedRecordsMenuItem = {
text: 'Get related records from...',
text: 'Related records',
items: [],
};

// Group fields by class name for hierarchical navigation
schema.data
.get('classes')
.sortBy((v, k) => k)
.sortBy((_v, k) => k)
.forEach((cl, className) => {
const classFields = [];

Expand Down Expand Up @@ -510,7 +512,7 @@ export default class BrowserCell extends Component {
}

/**
* Returns "Get related records from..." context menu item if cell holds a String value
* Returns "Related records" context menu item if cell holds a String value
* and there are classes with String type fields to filter by.
* Groups fields by class name in a hierarchical submenu structure.
*/
Expand All @@ -524,14 +526,14 @@ export default class BrowserCell extends Component {
}

const relatedRecordsMenuItem = {
text: 'Get related records from...',
text: 'Related records',
items: [],
};

// Group fields by class name for hierarchical navigation
schema.data
.get('classes')
.sortBy((v, k) => k)
.sortBy((_v, k) => k)
.forEach((cl, className) => {
const classFields = [];

Expand Down Expand Up @@ -576,7 +578,7 @@ export default class BrowserCell extends Component {
}

/**
* Returns "Get related records from..." context menu item if cell holds a Number value
* Returns "Related records" context menu item if cell holds a Number value
* and there are classes with Number type fields to filter by.
* Groups fields by class name in a hierarchical submenu structure.
*/
Expand All @@ -589,14 +591,14 @@ export default class BrowserCell extends Component {
}

const relatedRecordsMenuItem = {
text: 'Get related records from...',
text: 'Related records',
items: [],
};

// Group fields by class name for hierarchical navigation
schema.data
.get('classes')
.sortBy((v, k) => k)
.sortBy((_v, k) => k)
.forEach((cl, className) => {
const classFields = [];

Expand Down Expand Up @@ -651,7 +653,7 @@ export default class BrowserCell extends Component {
}

return {
text: 'Add to config parameter...',
text: 'Add to config parameter',
items: arrayConfigParams.map(param => ({
text: param.name,
callback: () => {
Expand Down
13 changes: 8 additions & 5 deletions src/dashboard/Data/Browser/DataBrowser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1106,14 +1106,17 @@ export default class DataBrowser extends React.Component {

const menuItems = [];

// Add "Get related records from..." menu item
// Group 1: Navigation
const relatedRecordsMenuItem = this.getRelatedObjectsMenuItemForPanel(objectId, className);
if (relatedRecordsMenuItem) {
menuItems.push(relatedRecordsMenuItem);
}

// Add Scripts menu if there are valid scripts
// Group 4: Automation
if (validScripts.length && this.props.onEditSelectedRow) {
if (menuItems.length > 0) {
menuItems.push({ type: 'separator' });
}
menuItems.push({
text: 'Scripts',
items: validScripts.map(script => {
Expand Down Expand Up @@ -1175,7 +1178,7 @@ export default class DataBrowser extends React.Component {
// Build context menu items
const menuItems = [
{
text: 'Add to config parameter...',
text: 'Add to config parameter',
items: arrayParams.map(param => ({
text: param.name,
callback: () => {
Expand All @@ -1198,13 +1201,13 @@ export default class DataBrowser extends React.Component {
}

const relatedRecordsMenuItem = {
text: 'Get related records from...',
text: 'Related records',
items: [],
};

schema.data
.get('classes')
.sortBy((v, k) => k)
.sortBy((_v, k) => k)
.forEach((cl, className) => {
const classFields = [];

Expand Down
Loading