Skip to content

Add DataGrip instructions to contributing README#2352

Closed
dimaMachina wants to merge 1 commit intomainfrom
prd-5713
Closed

Add DataGrip instructions to contributing README#2352
dimaMachina wants to merge 1 commit intomainfrom
prd-5713

Conversation

@dimaMachina
Copy link
Copy Markdown
Collaborator

No description provided.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Feb 25, 2026

⚠️ No Changeset found

Latest commit: 3f65bf4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented Feb 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
agents-api Building Building Preview, Comment Feb 25, 2026 0:37am
agents-docs Building Building Preview, Comment Feb 25, 2026 0:37am
agents-manage-ui Building Building Preview, Comment Feb 25, 2026 0:37am

Request Review

Copy link
Copy Markdown
Contributor

@claude claude Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Review Summary

(4) Total Issues | Risk: Medium

🟠⚠️ Major (2) 🟠⚠️

Inline Comments:

  • 🟠 Major: mdx-components.tsx:89 Missing width/height on images causes CLS (Cumulative Layout Shift)
  • 🟠 Major: index.mdx:9 Missing prerequisite about running pnpm setup-dev before following the guide

🟡 Minor (2) 🟡

Inline Comments:

  • 🟡 Minor: mdx-components.tsx:91 Missing fallback alt text when props.alt is falsy
  • 🟡 Minor: index.mdx:64 Missing link to conceptual manage-database documentation explaining Dolt branches

💭 Consider (4) 💭

💭 1) index.mdx Novel image syntax pattern

Issue: The <>![alt](./path.png)</> syntax (fragment-wrapped markdown images with relative paths) is used exclusively in this file and doesn't appear anywhere else in the documentation.

Why: Other docs use the <Image src="/path" /> component with absolute paths from the public directory. This establishes a new undocumented pattern that may confuse future documentation authors.

Fix: Consider either (a) documenting this as the new preferred pattern for co-located images, or (b) using the established <Image> component pattern with images in public/images/.

Refs:

💭 2) index.mdx:5 Non-standard keywords frontmatter field

Issue: This file introduces a keywords frontmatter field that isn't present in any peer contributing docs.

Why: The other contributing docs (overview.mdx, manage-database.mdx, etc.) use only title, sidebarTitle, description, and icon. Adding keywords here creates inconsistency.

Fix: Either remove keywords to match peer conventions, or if SEO keywords are desired, add them consistently across contributing docs.

💭 3) index.mdx:56-62 "Go to DDL" step lacks explanation

Issue: Step 6 instructs users to click "Go to DDL" without explaining what DDL means or why this step is helpful.

Why: Contributors unfamiliar with DataGrip may not understand the purpose of this step in the workflow.

Fix: Add a brief explanation: "This opens the schema definition view where you can explore table structures and relationships."

💭 4) index.mdx Consider mentioning pnpm db:studio as alternative

Issue: The guide doesn't mention that pnpm db:studio exists as a lighter-weight alternative for quick database inspection.

Why: Contributors may not need a full IDE setup for simple queries. Mentioning the simpler option helps them choose the right tool.

Fix: Consider adding a note at the top: "For quick inspection, you can also use pnpm db:studio. This guide is for contributors who prefer a full SQL IDE with features like schema navigation and DDL viewing."


🚫 REQUEST CHANGES

Summary: Good documentation addition that complements the existing manage-database docs! The two major issues should be addressed before merging: (1) the mdx-components.tsx change needs width/height defaults to prevent layout shift, and (2) the guide needs a prerequisite callout about running pnpm setup-dev first. The minor and consider items would improve clarity but aren't blockers.

Discarded (2)
Location Issue Reason Discarded
mdx-components.tsx:91-98 Alt text duplication between alt attribute and figcaption Common pattern in documentation; screen readers handle this appropriately. The visible caption serves sighted users while alt serves assistive technology.
index.mdx:71 Branch naming confusion with hyphens in project ID After investigation, activities-planner appears to be a valid project ID format. The underscore delimiters are clear.
Reviewers (4)
Reviewer Returned Main Findings Consider While You're Here Inline Comments Pending Recs Discarded
pr-review-frontend 3 0 0 0 2 0 1
pr-review-docs 4 0 1 0 2 0 0
pr-review-consistency 5 0 2 0 0 0 0
pr-review-product 3 0 1 0 0 0 1
Total 15 0 4 0 4 0 2

img(props) {
const ComponentToUse = typeof props.src === 'object' ? NextImage : 'img';
const img = (
<ComponentToUse {...props} className="rounded-lg border border-border w-auto mx-auto" />
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 MAJOR: Missing width/height causes CLS

Issue: The new img handler doesn't pass through width/height props, unlike the Image component above (lines 79-80) which defaults to 1200×1200.

Why: Without explicit dimensions, images cause Cumulative Layout Shift (CLS) as they load. The new DataGrip guide has 8 images — users will see content jumping as each loads.

Fix:

Suggested change
<ComponentToUse {...props} className="rounded-lg border border-border w-auto mx-auto" />
<ComponentToUse {...props} width={props.width ?? 1200} height={props.height ?? 1200} className="rounded-lg border border-border w-auto mx-auto" />

Refs:

const img = (
<ComponentToUse {...props} className="rounded-lg border border-border w-auto mx-auto" />
);
if (!props.alt) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Minor: Missing fallback alt text

Issue: When props.alt is falsy, images render without any alt attribute. The Image component above (line 77) uses alt={props.alt ?? 'Image'} as a fallback.

Why: Images without alt are less accessible. While the DataGrip guide provides alt text for all images, future MDX authors may omit it.

Fix:

Suggested change
if (!props.alt) {
if (!props.alt) {
return <ComponentToUse {...props} alt="" width={props.width ?? 1200} height={props.height ?? 1200} className="rounded-lg border border-border w-auto mx-auto" />;

Refs:

icon: LuDatabase
---

<Steps>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 MAJOR: Missing prerequisite — pnpm setup-dev

Issue: The guide jumps straight into DataGrip setup without mentioning that the local manage database must be running first.

Why: Contributors following this guide without running pnpm setup-dev will hit connection failures at Step 4 ("Test Connection") with no explanation. The Doltgres database on port 5432 only exists after setup-dev runs.

Fix: Add a prerequisites callout before Step 1:

<Note>
Before starting, ensure you've completed the [contributor setup](/community/contributing/overview) and run `pnpm setup-dev` to start the local databases.
</Note>

<Steps>

Refs:

<>![Click go to DDL](./click-go-to-ddl.png)</>
</Step>
<Step>
## Check out a Dolt branch and run a query
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Minor: Missing link to conceptual documentation

Issue: This step introduces DOLT_CHECKOUT and the branch naming convention without linking to the existing manage-database.mdx page that explains why branch checkout is required.

Why: Contributors unfamiliar with Doltgres may not understand why this step is necessary. The conceptual page explains that each project has an isolated branch and connections default to main.

Fix: Add a brief explanation with a link:

## Check out a Dolt branch and run a query

The manage database uses [Doltgres branch isolation](/community/contributing/manage-database#branch-naming-convention). Each project has its own branch, so you must check out the correct branch before querying project data.

In the query console, check out the project branch first, then run your SQL.

Refs:

@github-actions github-actions Bot deleted a comment from claude Bot Feb 25, 2026
@itoqa
Copy link
Copy Markdown

itoqa Bot commented Feb 25, 2026

Ito Test Report ✅

17 test cases ran. 17 passed.

This test run verified PR #2352 which adds a new DataGrip contributing guide page and refactors the global img MDX component to wrap images with <figure>/<figcaption> elements when alt text is present. All 17 test cases passed successfully. The new DataGrip page loads correctly with all 8 step headings and 7 images rendering properly. The figure/figcaption wrappers display correctly with appropriate styling. Existing pages using the <Image> component remain unaffected by the global img component changes. The page performs well across dark mode, mobile viewports (375px and 768px), and shows good performance metrics (FCP 516ms, CLS 0.058).

✅ Passed (17)
Test Case Summary Timestamp Screenshot
ROUTE-1 Page loads at /community/contributing/connect-to-manage-database-datagrip with correct title, all 8 step headings, all 7 images loaded, and DataGrip download link pointing to jetbrains.com/datagrip/download. 0:43 ROUTE-1_0-43.png
ROUTE-2 DataGrip entry present in sidebar under Contributing section, positioned after Manage Database. Clicking sidebar link navigates correctly and renders full page content. 2:31 ROUTE-2_2-31.png
ROUTE-3 All 7 images wrapped in figure elements with figcaption containing alt text. Figcaptions have CSS classes mt-2 text-center text-sm. Image elements have rounded-lg border border-border w-auto mx-auto classes. 3:41 ROUTE-3_3-41.png
ROUTE-4 Existing pages using Image component (not markdown img) still render correctly. GIFs and PNGs on /community/contributing/overview and /overview load with original inline styles, no figure/figcaption wrappers. 5:50 ROUTE-4_5-50.png
ROUTE-5 Contributing section sidebar order correct: How to Start, Project Data Layer, Manage Database, DataGrip, Spans and Traces, Environment Configuration. 3:08 ROUTE-5_3-08.png
ROUTE-6 Page loads without 404 or build errors. Console shows only pre-existing third-party warnings, no hydration mismatches or TypeScript errors from PR changes. 7:20 ROUTE-6_7-20.png
EDGE-1 All 7 content images have alt text and all are correctly wrapped in figure/figcaption elements, confirming conditional logic works for images WITH alt text. 4:02 EDGE-1_4-02.png
EDGE-2 All 7 images use Next.js Image component (data-nimg=1, _next/image URL pattern, srcset present). Relative imports processed as static imports by fumadocs. 4:04 EDGE-2_4-04.png
EDGE-3 Images use Tailwind classes instead of old inline styles. Images display at natural width (not 100%), no horizontal scrollbar, borders visible with 8px border-radius. 4:05 EDGE-3_4-05.png
EDGE-4 JSX fragment wrappers (<>...</>) are transparent in DOM. No raw markdown text visible, all 7 images properly wrapped in FIGURE elements. 0:59 EDGE-4_0-59.png
EDGE-5 Direct URL navigation to DataGrip page works. Page loaded successfully with title visible, no 404 error. 0:02 EDGE-5_0-02.png
EDGE-6 3 code blocks present with syntax highlighting. SQL keywords in purple, string literals in pink, identifiers in dark blue. All code blocks have copy buttons. 1:38 EDGE-6_1-38.png
EDGE-7 Dark mode rendering verified. All 7 images visible, border-border adapts to dark theme (rgb(38,38,38)), figcaptions readable (rgb(235,235,235)). No visual artifacts. 8:04 EDGE-7_8-04.png
ADV-1 Page responsive at 375px (iPhone SE) and 768px (tablet). All 7 images scale correctly with w-auto, no horizontal scrollbar, figcaptions wrap properly, sidebar collapses to mobile menu. 10:05 ADV-1_10-05.png
ADV-2 All 7 image requests returned 200 OK via Next.js image optimization. No broken images, no image-related console errors. Figure/figcaption structure intact with lazy loading. 12:01 ADV-2_12-01.png
ADV-3 Page loads in 963ms with FCP at 516ms. CLS is 0.058 (good). All 7 images use lazy loading, async decoding, explicit dimensions, srcset, and Next.js Image optimization. 13:28 ADV-3_13-28.png
ADV-4 All 7 figcaptions render alt text as plain text content. innerHTML equals textContent, confirming React's default escaping is active. No HTML interpretation. 4:07 ADV-4_4-07.png
📋 View Recording

Screen Recording

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 9, 2026

This pull request has been automatically marked as stale because it has not had recent activity.
It will be closed in 7 days if no further activity occurs.

If this PR is still relevant:

  • Rebase it on the latest main branch
  • Add a comment explaining its current status
  • Request a review if it's ready

Thank you for your contributions!

@github-actions github-actions Bot added the stale label Mar 9, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This pull request has been automatically closed due to inactivity.

If you'd like to continue working on this, please:

  1. Create a new branch from the latest main
  2. Cherry-pick your commits or rebase your changes
  3. Open a new pull request

Thank you for your understanding!

@github-actions github-actions Bot closed this Mar 16, 2026
@github-actions github-actions Bot deleted the prd-5713 branch March 16, 2026 00:42
@dimaMachina dimaMachina restored the prd-5713 branch March 16, 2026 05:41
@dimaMachina dimaMachina reopened this Mar 16, 2026
@github-actions github-actions Bot removed the stale label Mar 17, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 2, 2026

This pull request has been automatically marked as stale because it has not had recent activity.
It will be closed in 7 days if no further activity occurs.

If this PR is still relevant:

  • Rebase it on the latest main branch
  • Add a comment explaining its current status
  • Request a review if it's ready

Thank you for your contributions!

@github-actions github-actions Bot added the stale label Apr 2, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This pull request has been automatically closed due to inactivity.

If you'd like to continue working on this, please:

  1. Create a new branch from the latest main
  2. Cherry-pick your commits or rebase your changes
  3. Open a new pull request

Thank you for your understanding!

@github-actions github-actions Bot closed this Apr 10, 2026
@github-actions github-actions Bot deleted the prd-5713 branch April 10, 2026 00:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant