Skip to content

Add dolt_tests to workbench #630

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
merged 35 commits into from
Sep 23, 2025
Merged

Add dolt_tests to workbench #630

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
0e78a39
initial test page display functionality
eric-richardson1 Sep 3, 2025
6fc6c4a
initial run tests functionality
eric-richardson1 Sep 5, 2025
ac39cdb
run tests working
eric-richardson1 Sep 12, 2025
46abe0e
Merge branch 'main' into eric/dolt-test
eric-richardson1 Sep 12, 2025
73c167b
smaller fixes
eric-richardson1 Sep 12, 2025
ddb6213
run tests before PR merge + more UX improvements
eric-richardson1 Sep 15, 2025
c205b85
more ux improvements and updating PR merge page
eric-richardson1 Sep 17, 2025
e0b9ab3
file structure refactor and cleanup
eric-richardson1 Sep 17, 2025
fc5c5e7
Address UI feedback
eric-richardson1 Sep 18, 2025
58745c4
more UI feedback
eric-richardson1 Sep 18, 2025
b8d9711
run prettier
eric-richardson1 Sep 18, 2025
7932781
run prettier - graphql server
eric-richardson1 Sep 18, 2025
a76ffa2
remove unused imports
eric-richardson1 Sep 18, 2025
3649ff6
more styling improvements
eric-richardson1 Sep 18, 2025
63a9c52
get rid of inline styling
eric-richardson1 Sep 18, 2025
7d10988
factor out statusUtils class
eric-richardson1 Sep 18, 2025
e2629e1
prettier
eric-richardson1 Sep 18, 2025
8dfc499
fix linter warnings
eric-richardson1 Sep 18, 2025
d214da9
UI improvements
eric-richardson1 Sep 18, 2025
2c325f2
decrease button spacing
eric-richardson1 Sep 18, 2025
6912709
run prettier
eric-richardson1 Sep 18, 2025
ccb1545
remove debug logs
eric-richardson1 Sep 18, 2025
4b59d4b
use blur events for updating assertion value
eric-richardson1 Sep 18, 2025
dfbf42e
prettier
eric-richardson1 Sep 18, 2025
cc9be6c
fix graphql-server feedback
eric-richardson1 Sep 22, 2025
f544e7c
use context instead of a massive hook, refactor some event handlers
eric-richardson1 Sep 23, 2025
5c46682
run prettier
eric-richardson1 Sep 23, 2025
3b943f5
fix ci errors
eric-richardson1 Sep 23, 2025
0034fe1
hide dolt_tests for doltgres
eric-richardson1 Sep 23, 2025
067ce12
add proper error handling
eric-richardson1 Sep 23, 2025
99b2a5f
Update web/renderer/components/pageComponents/DatabasePage/ForTests/c…
eric-richardson1 Sep 23, 2025
ca6d784
Update web/renderer/components/pageComponents/DatabasePage/index.tsx
eric-richardson1 Sep 23, 2025
fc81c29
Update web/renderer/components/pageComponents/DatabasePage/ForTests/T…
eric-richardson1 Sep 23, 2025
2addd3c
fix ci
eric-richardson1 Sep 23, 2025
993aba2
remove dead code
eric-richardson1 Sep 23, 2025
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
4 changes: 2 additions & 2 deletions web/renderer/components/DatabaseNav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function DatabaseNav(props: Props) {

function Inner(props: Props) {
const { isDolt, isPostgres } = useDatabaseDetails();

return (
<div data-cy="db-page-header-nav" className={css.headerNav}>
<Tooltip id="disabled-database-nav-item" />
Expand All @@ -36,7 +36,7 @@ function Inner(props: Props) {
if (tab === "Tests" && isDolt && isPostgres) {
return null;
}

const item = <NavItem {...props} key={tab} name={tab} i={i} />;
if (tab === "Database") {
return item;
Expand Down
51 changes: 48 additions & 3 deletions web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,15 +275,17 @@ function TestResultsListItem({

function TestResults({ params }: { params: RefParams }) {
const [testResults, setTestResults] = useState<TestResult[]>([]);
const [runTests] = useRunTestsLazyQuery();
const { data } = useTestListQuery({
const [runTestError, setRunTestError] = useState<string | null>(null);
Copy link
Collaborator

Choose a reason for hiding this comment

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

useApolloError might simplify some of the type casting below

const [runTests, { error: runTestsError }] = useRunTestsLazyQuery();
const { data, loading, error } = useTestListQuery({
variables: {
databaseName: params.databaseName,
refName: params.refName,
},
});

const handleRunTests = useCallback(async () => {
setRunTestError(null);
try {
const result = await runTests({
variables: {
Expand All @@ -292,12 +294,50 @@ function TestResults({ params }: { params: RefParams }) {
},
});

if (result.error) {
console.error("Error running tests:", result.error);
Copy link
Collaborator

Choose a reason for hiding this comment

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

You don't need to console the error if you're displaying the error

setRunTestError(result.error.message);
setTestResults([]);
return;
}

setTestResults(result.data?.runTests.list ?? []);
} catch {
} catch (err) {
console.error("Error running tests:", err);
setRunTestError(
err instanceof Error ? err.message : "Failed to run tests",
);
setTestResults([]);
}
}, [runTests, params.databaseName, params.refName]);

if (loading) {
return (
<div className={css.testResultsOuter}>
<SmallLoader.WithText text="Loading tests..." loaded={false} />
</div>
);
}

if (error) {
console.error("Error loading test list:", error);
return (
<div className={css.testResultsOuter}>
<div className={css.testResultsContainer}>
<div className={css.testResultsTop}>
<span style={{ color: "red" }}>
Failed to load tests: {error.message}
</span>
Comment on lines +328 to +330
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should use ErrorMsg for styling

</div>
</div>
</div>
);
}

if (runTestsError) {
console.error("Run Tests query error:", runTestsError);
}
Comment on lines +337 to +339
Copy link
Collaborator

Choose a reason for hiding this comment

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

Don't need this


if (!data?.tests.list || data.tests.list.length === 0) {
return null;
}
Expand Down Expand Up @@ -338,6 +378,11 @@ function TestResults({ params }: { params: RefParams }) {
[css.testResultsTestsOrange]: orange,
})}
>
{(runTestError || runTestsError) && (
<div style={{ color: "red", padding: "8px" }}>
Error running tests: {runTestError || runTestsError?.message}
</div>
Comment on lines +382 to +384
Copy link
Collaborator

Choose a reason for hiding this comment

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

Here too. And should generally avoid using inline styling like this and use classes instead

)}
<ul>
{testResults.length > 0 ? (
testResults.map(test => (
Expand Down
8 changes: 8 additions & 0 deletions web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,14 @@
@apply text-center text-lg m-6;
}

.errorContainer {
@apply text-center m-6;
}

.errorText {
@apply text-red-600 text-lg;
}

.fieldInput {
@apply w-full p-2 border border-stone-100 rounded text-sm;
}
Expand Down
46 changes: 28 additions & 18 deletions web/renderer/components/pageComponents/DatabasePage/ForTests/TestList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ export default function TestList({ params }: Props) {
groupedTests,
sortedGroupEntries,
emptyGroups,
testsLoading,
testsError,
setState,
handleRunAll,
handleHashNavigation,
Expand Down Expand Up @@ -66,26 +68,28 @@ export default function TestList({ params }: Props) {
<div className={css.container}>
<div className={css.top}>
<h1>Tests</h1>
<div className={css.actionArea}>
<div className={css.createActions}>
<HideForNoWritesWrapper params={params}>
<CreateDropdown
onCreateGroup={() => setShowNewGroupModal(true)}
/>
</HideForNoWritesWrapper>
<Link {...workingDiff(params)}>
<Button>Commit</Button>
</Link>
</div>
{!testsLoading && !testsError && (
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should put all of this in an Inner component and use this pattern that we use in other components:

if (loading) return <Loader />
if (error) return <ErrorMsg />
return <div>{...inner test stuff that relies on query results}</div>

There's also a QueryHandler util component that does this for you

<div className={css.actionArea}>
<div className={css.createActions}>
<HideForNoWritesWrapper params={params}>
<CreateDropdown
onCreateGroup={() => setShowNewGroupModal(true)}
/>
</HideForNoWritesWrapper>
<Link {...workingDiff(params)}>
<Button>Commit</Button>
</Link>
</div>

<div className={css.primaryActions}>
{tests.length > 0 && (
<Button onClick={handleRunAll} className={css.runAllButton}>
Run All
</Button>
)}
<div className={css.primaryActions}>
{tests.length > 0 && (
<Button onClick={handleRunAll} className={css.runAllButton}>
Run All
</Button>
)}
</div>
</div>
</div>
)}
</div>

<NewGroupModal
Expand Down Expand Up @@ -125,6 +129,12 @@ export default function TestList({ params }: Props) {
)}
</div>
</div>
) : testsError ? (
<div className={css.errorContainer}>
<p className={css.errorText}>Failed to load tests: {testsError}</p>
</div>
) : testsLoading ? (
<p className={css.loading}>Loading tests...</p>
) : (
<p className={css.noTests}>No tests found</p>
)}
Expand Down
Loading
Loading