Skip to content

feat(ui): add array cards and demos - #62

Open
moshloop wants to merge 5 commits into
mainfrom
feat/array-cards-and-demos
Open

feat(ui): add array cards and demos#62
moshloop wants to merge 5 commits into
mainfrom
feat/array-cards-and-demos

Conversation

@moshloop

Copy link
Copy Markdown
Member

What

  • Add x-array-display: "cards" for titled, always-expanded object-array editors.
  • Add reusable profile-authoring and query-browser demos with Storybook and kitchen-sink coverage.
  • Preserve query diagnostics and support copying complete diagnostic reports.

Notes

  • Align inline array items with the form label/value grid and share item-row controls across displays.

Add a full JSONPath playground for uncapped browsing, row switching, source-aware evaluation, and match previews. Improve tree picker stacking, viewport fitting, footer actions, and lazy-node loading so nested selectors remain usable in dialogs and constrained layouts.
Add reusable endpoint, 1Password, and secret form controls alongside richer combobox options.
Support date-range and exact-value filters, query pagination/provider diagnostics, and task execution details.
Expose the new models, components, and helpers through the shared package exports.

BREAKING CHANGE: SecretKeySelector now requires 1Password loaders when the onepassword source is enabled.
… workspaces

Add reusable query browsing, sampling, and OpenSearch query-building flows for profile creation and editing. Introduce a schema-configured profile editor route with column management, previews, JSONPath selection, YAML editing, parameter validation, and row-limit controls. Cover the new models, components, integrations, and authoring workflows with focused tests and Storybook coverage.
Add `x-array-display: "cards"` for titled, always-expanded object-array editors using the existing `x-item` summary configuration. Also keep inline array items aligned with the form's label/value grid and share item-row controls across displays.
Expose profile authoring and query browsing through reusable package/demo surfaces, with Storybook and kitchen-sink coverage. Preserve provider error diagnostics through query execution and let users copy complete diagnostic reports without expanding details.
@moshloop
moshloop enabled auto-merge (rebase) August 11, 2026 10:27
@coderabbitai

coderabbitai Bot commented Aug 11, 2026

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 160 files, which is 60 over the limit of 100.

To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch.

Upgrade to a paid plan to raise the limit.

This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 74a285f9-c714-4cfb-8b31-f74b2fa885e9

📥 Commits

Reviewing files that changed from the base of the PR and between f357471 and 0db690f.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (160)
  • apps/kitchen-sink/src/demo-catalog.tsx
  • apps/kitchen-sink/src/demos/JSONPathFieldDemo.tsx
  • apps/kitchen-sink/src/demos/ProfilesDemo.tsx
  • apps/kitchen-sink/src/demos/QueryBrowserDemo.tsx
  • apps/kitchen-sink/src/demos/examples.test.tsx
  • apps/kitchen-sink/tsconfig.json
  • apps/kitchen-sink/vite.config.ts
  • apps/playground/package.json
  • packages/ui/package.json
  • packages/ui/src/components.ts
  • packages/ui/src/components/Combobox.trailing.test.tsx
  • packages/ui/src/components/ComboboxMenu.tsx
  • packages/ui/src/components/EndpointSelector.model.test.ts
  • packages/ui/src/components/EndpointSelector.model.ts
  • packages/ui/src/components/FilterBar.tsx
  • packages/ui/src/components/JSONPathField.stories.tsx
  • packages/ui/src/components/JSONPathField.tsx
  • packages/ui/src/components/JSONPathPlayground.test.tsx
  • packages/ui/src/components/JSONPathPlayground.tsx
  • packages/ui/src/components/JsonSchemaForm.stories.tsx
  • packages/ui/src/components/JsonSchemaForm.test.tsx
  • packages/ui/src/components/OnePasswordSelector.model.test.ts
  • packages/ui/src/components/OnePasswordSelector.model.ts
  • packages/ui/src/components/OnePasswordSelector.test.tsx
  • packages/ui/src/components/OnePasswordSelector.tsx
  • packages/ui/src/components/SecretFormField.tsx
  • packages/ui/src/components/SecretKeySelector.stories.tsx
  • packages/ui/src/components/SecretKeySelector.test.tsx
  • packages/ui/src/components/SecretKeySelector.tsx
  • packages/ui/src/components/TreePickerField.test.tsx
  • packages/ui/src/components/TreePickerField.tsx
  • packages/ui/src/components/combobox-types.ts
  • packages/ui/src/components/filter-bar-utils.ts
  • packages/ui/src/components/jotai-bindings-core.ts
  • packages/ui/src/components/json-schema-form-accordion-array.tsx
  • packages/ui/src/components/json-schema-form-array-inline.test.tsx
  • packages/ui/src/components/json-schema-form-array.tsx
  • packages/ui/src/components/json-schema-form-cards-array.test.tsx
  • packages/ui/src/components/json-schema-form-cards-array.tsx
  • packages/ui/src/components/json-schema-form-item-row.tsx
  • packages/ui/src/components/json-schema-form-render.tsx
  • packages/ui/src/components/json-schema-form-resolve.ts
  • packages/ui/src/components/json-schema-form-types.ts
  • packages/ui/src/components/jsonPathTree.test.ts
  • packages/ui/src/components/jsonPathTree.ts
  • packages/ui/src/components/secret-form-extension.test.tsx
  • packages/ui/src/components/secret-form-extension.ts
  • packages/ui/src/data.ts
  • packages/ui/src/data/DataTable.stories.tsx
  • packages/ui/src/data/ObjectGraph.test.tsx
  • packages/ui/src/data/TaskExecDetails.tsx
  • packages/ui/src/data/TaskProgress.test.tsx
  • packages/ui/src/data/TaskProgress.tsx
  • packages/ui/src/data/TaskSnapshot.ts
  • packages/ui/src/data/TreeNode.tsx
  • packages/ui/src/data/data-table-filter-values.ts
  • packages/ui/src/data/data-table-server-filters.test.ts
  • packages/ui/src/data/data-table-server-filters.ts
  • packages/ui/src/data/diagnostics/ErrorDetails.test.tsx
  • packages/ui/src/data/diagnostics/ErrorDetails.tsx
  • packages/ui/src/data/diagnostics/error-diagnostics.ts
  • packages/ui/src/data/query-browser/QueryBrowser.editor.ts
  • packages/ui/src/data/query-browser/QueryBrowser.paging.test.tsx
  • packages/ui/src/data/query-browser/QueryBrowser.stories.tsx
  • packages/ui/src/data/query-browser/QueryBrowser.test.tsx
  • packages/ui/src/data/query-browser/QueryBrowser.tsx
  • packages/ui/src/data/query-browser/QueryBrowser.types.ts
  • packages/ui/src/data/query-browser/QueryBrowserDiagnosticsPanel.tsx
  • packages/ui/src/data/query-browser/QueryBrowserResults.tsx
  • packages/ui/src/data/query-browser/index.ts
  • packages/ui/src/data/task-exec-details.ts
  • packages/ui/src/profiles.ts
  • packages/ui/src/profiles/.widen.py
  • packages/ui/src/profiles/ProfileEditor.stories.tsx
  • packages/ui/src/profiles/catalogTree.tsx
  • packages/ui/src/profiles/connectionBrowserModel.test.ts
  • packages/ui/src/profiles/connectionBrowserModel.ts
  • packages/ui/src/profiles/connectionQueryWorkspace.test.tsx
  • packages/ui/src/profiles/connectionQueryWorkspace.tsx
  • packages/ui/src/profiles/connectionQueryWorkspaceModel.ts
  • packages/ui/src/profiles/esFieldValues.test.ts
  • packages/ui/src/profiles/esFieldValues.ts
  • packages/ui/src/profiles/esParamMappingModel.test.ts
  • packages/ui/src/profiles/esParamMappingModel.ts
  • packages/ui/src/profiles/esParamMappingPill.tsx
  • packages/ui/src/profiles/esParamOperandExtension.tsx
  • packages/ui/src/profiles/esQueryBuilder.test.tsx
  • packages/ui/src/profiles/esQueryBuilder.tsx
  • packages/ui/src/profiles/esQueryBuilderExtension.tsx
  • packages/ui/src/profiles/esQueryBuilderForm.ts
  • packages/ui/src/profiles/esQueryBuilderModel.test.ts
  • packages/ui/src/profiles/esQueryBuilderModel.ts
  • packages/ui/src/profiles/esQueryClauseGroup.test.tsx
  • packages/ui/src/profiles/esQueryClauseGroup.tsx
  • packages/ui/src/profiles/esQueryCompile.ts
  • packages/ui/src/profiles/esQueryConditionRow.test.tsx
  • packages/ui/src/profiles/esQueryConditionRow.tsx
  • packages/ui/src/profiles/esQueryGroupModel.ts
  • packages/ui/src/profiles/esQueryOccur.ts
  • packages/ui/src/profiles/esQueryOperandEditors.tsx
  • packages/ui/src/profiles/esQueryOperandModel.test.ts
  • packages/ui/src/profiles/esQueryOperandModel.ts
  • packages/ui/src/profiles/esQueryOperators.test.ts
  • packages/ui/src/profiles/esQueryOperators.ts
  • packages/ui/src/profiles/esQueryOutputEditor.tsx
  • packages/ui/src/profiles/esQueryOutputModel.ts
  • packages/ui/src/profiles/esQueryPreview.tsx
  • packages/ui/src/profiles/esQuerySortEditor.tsx
  • packages/ui/src/profiles/esQuerySortModel.ts
  • packages/ui/src/profiles/esValueCombobox.test.tsx
  • packages/ui/src/profiles/esValueCombobox.tsx
  • packages/ui/src/profiles/jsonPathSample.ts
  • packages/ui/src/profiles/jsonPathSampleRow.test.ts
  • packages/ui/src/profiles/jsonPathSampleRow.tsx
  • packages/ui/src/profiles/profileApi.ts
  • packages/ui/src/profiles/profileBuilder.css
  • packages/ui/src/profiles/profileBuilder.test.ts
  • packages/ui/src/profiles/profileBuilder.tsx
  • packages/ui/src/profiles/profileBuilderExtension.tsx
  • packages/ui/src/profiles/profileBuilderWorkspace.tsx
  • packages/ui/src/profiles/profileColumnModel.ts
  • packages/ui/src/profiles/profileColumnPicker.tsx
  • packages/ui/src/profiles/profileEditor.tsx
  • packages/ui/src/profiles/profileEditorModel.test.ts
  • packages/ui/src/profiles/profileEditorModel.ts
  • packages/ui/src/profiles/profileEditorPreview.tsx
  • packages/ui/src/profiles/profileEditorRail.tsx
  • packages/ui/src/profiles/profileEditorRaw.test.tsx
  • packages/ui/src/profiles/profileEditorRaw.tsx
  • packages/ui/src/profiles/profileEditorRoutes.ts
  • packages/ui/src/profiles/profileEditorSections.tsx
  • packages/ui/src/profiles/profileFieldEditor.tsx
  • packages/ui/src/profiles/profileFieldGrid.tsx
  • packages/ui/src/profiles/profileFieldManager.tsx
  • packages/ui/src/profiles/profileFieldState.test.tsx
  • packages/ui/src/profiles/profileFieldState.ts
  • packages/ui/src/profiles/profileFieldTypes.ts
  • packages/ui/src/profiles/profileParamModel.test.ts
  • packages/ui/src/profiles/profileParamModel.ts
  • packages/ui/src/profiles/profileWizard.test.tsx
  • packages/ui/src/profiles/profileWizard.tsx
  • packages/ui/src/profiles/profileWizardHelp.ts
  • packages/ui/src/profiles/profileWizardModel.ts
  • packages/ui/src/profiles/profileWizardQueryStep.test.tsx
  • packages/ui/src/profiles/profileWizardQueryStep.tsx
  • packages/ui/src/profiles/profileWizardSteps.tsx
  • packages/ui/src/profiles/profileYaml.ts
  • packages/ui/src/profiles/prometheusResults.tsx
  • packages/ui/src/profiles/queryRowLimits.test.tsx
  • packages/ui/src/profiles/queryRowLimits.tsx
  • packages/ui/src/profiles/queryRowLimitsModel.ts
  • packages/ui/src/profiles/queryTargetPicker.test.tsx
  • packages/ui/src/profiles/queryTargetPicker.tsx
  • packages/ui/src/profiles/testSchema.ts
  • packages/ui/src/rpc/FilterForm.tsx
  • packages/ui/src/rpc/formMetadata.test.ts
  • packages/ui/src/rpc/formMetadata.ts
  • packages/ui/src/rpc/types.ts
  • packages/ui/vite.config.ts
  • pnpm-workspace.yaml

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Comment thread packages/ui/src/components/EndpointSelector.model.ts Dismissed
*/
export function configureProfiles(options: { basePath?: string; schema: ProfileSchema }): void {
if (options.basePath !== undefined) {
const trimmed = options.basePath.trim().replace(/\/+$/, "");
Comment on lines +201 to +210
const slug = Array.from(name.trim().toLowerCase())
.map((character) =>
/[a-z0-9]/.test(character)
? character
: /[ ._/-]/.test(character)
? "-"
: "",
)
.join("")
.replace(/^-+|-+$/g, "");
Comment thread packages/ui/src/profiles/profileYaml.ts Dismissed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants