Skip to content

Improve UI/copy for per-package error messages #192

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
mcmire merged 4 commits into from
Jan 7, 2026
Merged

Improve UI/copy for per-package error messages #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a7f83c4
Fix ESLint config
mcmire Jan 7, 2026
6482092
Improve UI/copy for per-package error messages
mcmire Jan 7, 2026
9db4e78
Merge branch 'main' into improve-per-package-error-messages
mcmire Jan 7, 2026
abb289f
Fix typo
mcmire Jan 7, 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
37 changes: 26 additions & 11 deletions src/ui/DependencyErrorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ type DependencyErrorSectionProps = {
title: string;
items: string[];
setSelections: React.Dispatch<React.SetStateAction<Record<string, string>>>;
description: string;
errorSubject: string;
errorDetails: React.ReactNode;
};

/**
Expand All @@ -12,19 +13,22 @@ type DependencyErrorSectionProps = {
* @param props.title - The title of the section.
* @param props.items - The missing dependents or dependencies.
* @param props.setSelections - Updates data around packages selected for the release.
* @param props.description - Describes the error.
* @param props.errorSubject - Summarizes the error.
* @param props.errorDetails - Explains more about the error and how the user
* can fix it.
* @returns The section component.
*/
export function DependencyErrorSection({
title,
items,
setSelections,
description,
errorSubject,
errorDetails,
}: DependencyErrorSectionProps) {
return (
<div className="text-red-800">
<div className="mt-4 pt-4 border-t border-red-200">
<div className="flex justify-between items-center mb-2">
<p className="font-semibold">{title}:</p>
<p className="text-lg font-semibold text-red-700">{title}</p>
<button
onClick={() => {
setSelections((prev) => ({
Expand All @@ -43,20 +47,31 @@ export function DependencyErrorSection({
Skip All
</button>
</div>
<p className="text-sm mb-2">{description}</p>
<ul className="list-disc ml-4">
<p className="mb-2">{errorSubject}</p>
<details className="bg-blue-50 border border-blue-200 rounded p-2 my-4 w-fit text-sm [&:open]:w-auto">
<summary className="text-blue-800 font-semibold hover:underline cursor-pointer">
Read more
</summary>
<div className="mt-2 ml-4">{errorDetails}</div>
</details>
<ul className="list-disc">
{items.map((dep) => (
<li key={dep} className="flex justify-between items-center mb-2">
<span
onClick={() => {
<li
key={dep}
className="flex justify-between items-center mb-2 text-gray-700"
>
<a
href="#"
onClick={(event) => {
event.preventDefault();
document
.getElementById(`package-${dep}`)
?.scrollIntoView({ behavior: 'smooth' });
}}
className="cursor-pointer hover:underline"
>
{dep}
</span>
</a>
<button
onClick={() =>
setSelections((prev) => ({
Expand Down
112 changes: 81 additions & 31 deletions src/ui/PackageItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ export function PackageItem({
}`}
>
<div className="flex items-start gap-3">
<div className="pt-1">
{showCheckbox && (
{showCheckbox && (
<div className="pt-1">
<input
type="checkbox"
checked={isSelected}
Expand All @@ -101,8 +101,8 @@ export function PackageItem({
${isSelected ? 'text-blue-600' : 'text-gray-300'}
`}
/>
)}
</div>
</div>
)}
<div className="flex-1">
<h2 className="text-xl font-semibold">{pkg.name}</h2>
<div className="flex items-center justify-between">
Expand Down Expand Up @@ -145,33 +145,83 @@ export function PackageItem({
</div>

{packageDependencyErrors[pkg.name] && (
<div className="mt-2 p-3 bg-red-50 border border-red-200 rounded">
<div className="flex-grow">
{packageDependencyErrors[pkg.name].missingDependencies.length >
0 && (
<DependencyErrorSection
title="Missing Dependencies"
items={packageDependencyErrors[pkg.name].missingDependencies}
setSelections={setSelections}
description={`The following packages are dependencies or peer dependencies of ${pkg.name}. Because they may have introduced new changes that ${pkg.name} is now using, you need to verify whether to include them in the release.

To do this, look at the change history for each package and compare it with the change history for ${pkg.name}. If ${pkg.name} uses any new changes from a package, then you need to include it by bumping its version. If you have confirmed that the changes to a package do not affect ${pkg.name}, you may omit it from the release by choosing "Skip" instead.`}
/>
)}
{packageDependencyErrors[pkg.name].missingDependentNames.length >
0 && (
<div className="mt-4">
<DependencyErrorSection
title="Missing Dependents"
items={
packageDependencyErrors[pkg.name].missingDependentNames
}
setSelections={setSelections}
description={`Because ${pkg.name} is being released with a new major version, to prevent peer dependency warnings in consuming projects, all of the following packages which list ${pkg.name} as a peer dependency need to be included in the release. Please choose new versions for these packages. If for some reason you feel it is safe to omit a package you may choose "Skip".`}
/>
</div>
)}
</div>
<div className="flex-grow flex flex-col gap-2">
{packageDependencyErrors[pkg.name].missingDependencies.length > 0 && (
<DependencyErrorSection
title="Missing Dependencies"
items={packageDependencyErrors[pkg.name].missingDependencies}
setSelections={setSelections}
errorSubject={`You've included ${pkg.name} in the release. However, this package has direct or peer dependencies which have unreleased changes, and you may need to include them as well.`}
errorDetails={
<>
<p className="mb-2">
To resolve these errors, you need to look at the changelog
or commit history for {pkg.name} (and possibly each
dependency listed below) to make the following decision:
</p>
<ul className="list-disc ml-8 mt-2">
<li className="mb-2">
<span className="font-semibold">
Did a dependency introduce a new feature that {pkg.name}{' '}
now uses? If so, you need to include the dependency in
the release by bumping its version.
</span>
</li>
<li>
Once you've verified that changes to a dependency do not
affect {pkg.name}, you may omit it from the release by
pressing "Skip".
</li>
</ul>
</>
}
/>
)}
{packageDependencyErrors[pkg.name].missingDependentNames.length >
0 && (
<DependencyErrorSection
title="Missing Peer Dependents"
items={packageDependencyErrors[pkg.name].missingDependentNames}
setSelections={setSelections}
errorSubject={`You've bumped ${pkg.name} by a major version, indicating that there are breaking changes. However, this package has peer dependents (that is, other packages that list this one as a peer dependency) that you should include in the release.`}
errorDetails={
<>
<p className="mb-2">
If a package has a peer dependency on other package, it
means that a project which declares the first package as a
dependency must also declare the second one in order for the
first one to function correctly, and the version used for
the second package must satisfy the requested version range.
If this is not the case, a peer dependency warning will
appear when dependencies are installed. (For instance, if{' '}
<code className="font-mono">@metamask/foo-controller</code>{' '}
has a peer dependency on{' '}
<code className="font-mono">@metamask/bar-controller</code>{' '}
^1.0.0, then if{' '}
<code className="font-mono">@metamask/foo-controller</code>{' '}
is present in a client's{' '}
<code className="font-mono">package.json</code>,{' '}
<code className="font-mono">@metamask/bar-controller</code>{' '}
1.x must also be present.)
</p>
<p className="mb-2">
If you release a new major version of {pkg.name}, and you
upgrade it in a client, and you don't release any of the
peer dependents listed below, you will receive a peer
dependency warning, because all of the peer dependents
expect the client to be using the previous version, and now
that requirement is no longer satisfied.
</p>
<p>
<span className="font-semibold">
To fix this, you need to navigate to each of the
dependents and include them in the release.
</span>
</p>
</>
}
/>
)}
</div>
)}

Expand Down
Loading