Uh oh!
There was an error while loading. Please reload this page.
Dashboard widget config panel: auto-assign IDs, default titles, searchable Combobox dropdowns - #819
Merged
Merged
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ropdowns for dashboard widget config panel - Add ensureWidgetIds() to auto-fill missing widget IDs when entering edit mode - Set default widget title (e.g. "New Bar Chart") when creating widgets - WidgetConfigPanel now accepts availableObjects/availableFields props - Data source, category field, and value field use select dropdowns when metadata is available - Field selectors disabled when no object is selected (disabledWhen) - DashboardView passes metadata-derived objects/fields to WidgetConfigPanel Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…havior Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…names Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Optimize widget property panel for enhanced user experienceDashboard widget config panel: auto-assign IDs, default titles, dynamic object/field dropdownsFeb 24, 2026
hotlong
commented
Feb 24, 2026
Contributor
@copilot 仔细评估是否完成了所有的开发要求 |
…l switching tests - Replace select dropdowns with searchable Combobox component for Data Source, Category Field, and Value Field when metadata is available - Combobox supports real-time search, keyboard navigation (matching Airtable UX) - Field comboboxes disabled when no object is selected - Falls back to text inputs when no metadata is available (backward-compatible) - Add DashboardWithConfig panel switching tests - Update existing dropdown tests to match Combobox's role="combobox" structure Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
ContributorAuthor
经过仔细评估，以下是各项需求的完成状况： 一、Widget选中相关 ✅
二、新建Widget体验 ✅
三、属性编辑表单（对齐Airtable） ✅
四、面板结构一致性 ✅
五、测试 ✅
|
CopilotAI
changed the title
Dashboard widget config panel: auto-assign IDs, default titles, dynamic object/field dropdownsDashboard widget config panel: auto-assign IDs, default titles, searchable Combobox dropdownsFeb 24, 2026
hotlong
marked this pull request as ready for review
February 24, 2026 03:48
Uh oh!
There was an error while loading. Please reload this page.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the Dashboard widget configuration panel with three key improvements: auto-ID assignment for widgets, descriptive default titles for new widgets, and metadata-driven searchable dropdown controls for data source and field selection. The changes align with the goal stated in issue #818 to achieve Airtable-level UX for dashboard property configuration.
Changes:
- Widget ID stability via
ensureWidgetIds()auto-assigns unique IDs to widgets missing them on edit mode entry, preventing unclickable widgets - Default widget titles via
defaultWidgetTitle()generates descriptive titles (e.g., "New Bar Chart") instead of empty strings for better UX - Metadata-driven Combobox controls in
WidgetConfigPanelfor Data Source/Category Field/Value Field selectors with real-time search, replacing free-text inputs
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/plugin-dashboard/src/tests/ensureWidgetIds.test.tsx | New test suite (5 tests) validating widget ID auto-assignment logic, uniqueness, and data preservation |
| packages/plugin-dashboard/src/tests/WidgetConfigPanel.test.tsx | Added 5 tests for Combobox rendering vs input fallback, and disabled state based on object selection |
| packages/plugin-dashboard/src/tests/DashboardWithConfig.test.tsx | Added 2 tests for breadcrumb verification and onWidgetSave prop acceptance |
| packages/plugin-dashboard/src/WidgetConfigPanel.tsx | Refactored from static schema to dynamic buildWidgetSchema() with conditional Combobox vs input fields based on metadata availability; added availableObjects and availableFields props |
| apps/console/src/components/DashboardView.tsx | Added ensureWidgetIds() and defaultWidgetTitle() helpers; integrated metadata extraction for object/field dropdowns; wired new props to WidgetConfigPanel |
Comments suppressed due to low confidence (2)
packages/plugin-dashboard/src/WidgetConfigPanel.tsx:59
- Type duplication:
SelectOptiontype is defined here as{ value: string; label: string }, which is identical to theComboboxOptiontype already exported from@object-ui/components(imported Combobox component uses this type). Consider importing and usingComboboxOptioninstead of defining a duplicate type to maintain consistency and avoid future divergence.
export type SelectOption = { value: string; label: string };
packages/plugin-dashboard/src/tests/ensureWidgetIds.test.tsx:27
- Code duplication: The test duplicates the
ensureWidgetIdsandcreateWidgetIdfunctions fromapps/console/src/components/DashboardView.tsx. Following the established codebase pattern (e.g.,view-config-utils.tstested inview-config-schema.test.tsx), these helper functions should be extracted to a shared utility module (e.g.,apps/console/src/utils/dashboard-utils.ts) and exported from there. This would allow the implementation and tests to import the same code, eliminating duplication and ensuring tests validate the actual implementation rather than a copy.
/**
* Portable implementation of ensureWidgetIds — mirrors
* apps/console/src/components/DashboardView.tsx.
*/
let counter = 0;
function createWidgetId(): string {
counter += 1;
return `widget_test_${counter}`;
}
function ensureWidgetIds(schema: DashboardSchema): DashboardSchema {
if (!schema.widgets?.length) return schema;
const needsFix = schema.widgets.some((w) => !w.id);
if (!needsFix) return schema;
return {
...schema,
widgets: schema.widgets.map((w) => (w.id ? w : { ...w, id: createWidgetId() })),
};
}
| * Validates that widgets without IDs get auto-assigned unique IDs. | ||
| */ | ||
| import { describe, it, expect } from 'vitest'; |
There was a problem hiding this comment.
Missing beforeEach import from 'vitest'. The test uses beforeEach on line 30 to reset the counter, but it's not included in the import statement. This will cause the test to fail at runtime.
Suggested change
| import{describe,it,expect}from'vitest'; | |
| import{describe,it,expect,beforeEach}from'vitest'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dashboard property panel had three core UX gaps: widgets without IDs couldn't be selected in design mode, new widgets rendered blank config panels, and data binding fields were free-text inputs instead of metadata-driven dropdowns.
Widget ID stability
ensureWidgetIds()auto-assigns unique IDs to widgets missing them on edit mode entryNew widget defaults
defaultWidgetTitle(type)generates descriptive titles (e.g., "New Bar Chart") instead of empty stringsSearchable Combobox for object/field selectors
WidgetConfigPanelaccepts optionalavailableObjectsandavailableFieldspropsbuildWidgetSchema()renders Data Source / Category Field / Value Field as searchable Combobox controls (using the existing@object-ui/componentsCombobox with real-time search and keyboard navigation) viatype: 'custom'ConfigField render functions when metadata is available, falls back to text inputs otherwisedisabled={!draft.object})DashboardView metadata integration
objectsfromMetadataProvidercontextavailableFieldsreactively based on the selected widget'sobjectfieldTests
ensureWidgetIds(ID assignment, uniqueness, data preservation, no-op when IDs exist)Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.