Skip to content
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

fix: group creation form theme #110

Merged
merged 2 commits into from
Dec 4, 2024
Merged

fix: group creation form theme #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54d6b9d
fix: group creation form theme
fmorency Dec 3, 2024
75f2025
fix: duplicate property
fmorency Dec 3, 2024
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
33 changes: 19 additions & 14 deletions components/groups/forms/groups/ConfirmationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,25 +106,27 @@
<div className="space-y-6">
{/* Group Information */}
<div>
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Group Information</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">
Group Information
</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<div className="bg-base-300 p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Voting period</label>
<div className="dark:text-[#FFFFFF99]">
<div className="text-gray-500 dark:text-gray-400">
{secondsToHumanReadable(Number(formData.votingPeriod.seconds))}
</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px] ">
<div className="bg-base-300 p-4 rounded-[12px] ">
<label className="text-sm dark:text-[#FFFFFF66]">Qualified Majority</label>
<div className="dark:text-[#FFFFFF99]">
<div className="text-gray-500 dark:text-gray-400">
{formData.votingThreshold} / {formData.members.length}
</div>
</div>
</div>
<div className="mt-4 dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-[12px]">
<div className="mt-4 bg-base-300 p-4 rounded-[12px]">
<label className="text-sm dark:text-[#FFFFFF66]">Description</label>
<div
className="overflow-hidden text-ellipsis whitespace-nowrap dark:text-[#FFFFFF99]"
className="overflow-hidden text-ellipsis whitespace-nowrap text-gray-500 dark:text-gray-400"
title={formData.description}
>
{formData.description.length > 200
Expand All @@ -136,13 +138,13 @@

{/* Authors */}
<div className="max-h-28 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Authors</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">Authors</h2>
<div className=" grid grid-cols-3 gap-4">
{Array.isArray(formData.authors) ? (
formData.authors.map((author, index) => (
<div
key={index}
className="dark:bg-[#2A2A38] bg-[#FFFFFF] dark:text-[#FFFFFF99] p-4 rounded-lg flex items-center"
className="bg-base-300 text-gray-500 dark:text-gray-400 p-4 rounded-lg flex items-center"

Check warning on line 147 in components/groups/forms/groups/ConfirmationForm.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/forms/groups/ConfirmationForm.tsx#L147 

Added line #L147 was not covered by tests
>
{author.trim().startsWith('manifest1') ? (
<TruncatedAddressWithCopy address={author.trim()} slice={14} />
Expand All @@ -152,7 +154,7 @@
</div>
))
) : (
<div className="bg-[#2A2A38] p-4 dark:text-[#FFFFFF99] rounded-lg flex items-center">
<div className="bg-[#2A2A38] p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Replace hardcoded background color with Tailwind class

The background color #2A2A38 is hardcoded while other similar elements use the bg-base-300 class. Consider using Tailwind classes for consistency.

-<div className="bg-[#2A2A38] p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">
+<div className="bg-base-300 p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="bg-[#2A2A38] p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">
<div className="bg-base-300 p-4 text-gray-500 dark:text-gray-400 rounded-lg flex items-center">

{formData.authors.trim().startsWith('manifest1') ? (
<TruncatedAddressWithCopy address={formData.authors.trim()} slice={14} />
) : (
Expand All @@ -165,14 +167,14 @@

{/* Members */}
<div className="max-h-44 overflow-y-auto">
<h2 className="text-xl font-semibold mb-4 dark:text-[#FFFFFF99]">Members</h2>
<h2 className="text-xl font-semibold mb-4 text-gray-500 dark:text-gray-400">Members</h2>
<div className="grid grid-cols-3 gap-4">
{formData.members.map((member, index) => (
<div key={index} className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<div key={index} className="bg-base-300 p-4 rounded-lg">
<div className="text-sm dark:text-[#FFFFFF66]">Address</div>
<TruncatedAddressWithCopy address={member.address} slice={14} />
<div className="text-sm dark:text-[#FFFFFF66] mt-2">Name</div>
<div className="dark:text-[#FFFFFF99]">{member.name}</div>
<div className="text-gray-500 dark:text-gray-400">{member.name}</div>
</div>
))}
</div>
Expand All @@ -182,7 +184,10 @@
{/* Buttons */}
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white w-[calc(50%-12px)]"
>
Back: Member Info
</button>
<button
Expand Down
2 changes: 1 addition & 1 deletion components/groups/forms/groups/GroupDetailsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ export default function GroupDetails({

<div className="flex gap-6 mt-6 mx-auto w-full">
<Link href="/groups" legacyBehavior>
<button className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button className="btn btn-neutral dark:text-white text-black py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<span className="hidden sm:inline">Back: Groups Page</span>
<span className="sm:hidden">Back: Groups</span>
</button>
Expand Down
7 changes: 5 additions & 2 deletions components/groups/forms/groups/GroupPolicyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function GroupPolicyForm({
<div className="lg:flex mx-auto">
<div className="flex items-center mx-auto w-full dark:bg-[#FFFFFF0F] bg-[#FFFFFFCC] p-[24px] rounded-[24px]">
<div className="w-full">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] dark:text-[#FFFFFF99] dark:border-[#FFFFFF99] border-b-[black] pb-4">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] text-gray-500 dark:text-gray-400 dark:border-gray-400 border-gray-500 border-b-[black] pb-4">
Group Policy
</h1>
<Formik
Expand Down Expand Up @@ -183,7 +183,10 @@ export default function GroupPolicyForm({
</div>
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
>
Back: Group Details
</button>
<button
Expand Down
9 changes: 6 additions & 3 deletions components/groups/forms/groups/MemberInfoForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function MemberInfoForm({
<div className="lg:flex mx-auto">
<div className="flex items-center mx-auto w-full dark:bg-[#FFFFFF0F] bg-[#FFFFFFCC] p-[24px] rounded-[24px]">
<div className="w-full">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] dark:text-[#FFFFFF99] dark:border-[#FFFFFF99] border-b-[black] pb-4">
<h1 className="mb-4 text-xl font-extrabold tracking-tight sm:mb-6 leading-tight border-b-[0.5px] text-gray-500 dark:text-gray-400 dark:border-gray-400 border-gray-500 border-b-[black] pb-4">
Member Info
</h1>
<Formik
Expand Down Expand Up @@ -78,7 +78,7 @@ export default function MemberInfoForm({
{values.members.map((member, index) => (
<div
key={index}
className="flex relative flex-row dark:bg-[#FFFFFF0A] bg-[#FFFFFF] p-4 gap-2 mb-4 rounded-lg items-end"
className="flex relative flex-row bg-base-300 p-4 gap-2 mb-4 rounded-lg items-end"
>
{index > 0 && (
<div className=" absolute -top-2 left-2 text-xs">
Expand Down Expand Up @@ -269,7 +269,10 @@ export default function MemberInfoForm({
</div>

<div className="flex gap-6 mt-6 mx-auto w-full">
<button onClick={prevStep} className="btn btn-neutral py-2.5 sm:py-3.5 w-[calc(50%-12px)]">
<button
onClick={prevStep}
className="btn btn-neutral text-black dark:text-white py-2.5 sm:py-3.5 w-[calc(50%-12px)]"
>
Back: Group Details
</button>
<button
Expand Down
31 changes: 16 additions & 15 deletions components/groups/forms/groups/Success.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@
const renderAuthors = () => {
if (Array.isArray(formData.authors)) {
return formData.authors.map((author, index) => (
<div
key={index}
className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg flex items-center"
>
<div key={index} className="bg-base-300 p-4 rounded-lg flex items-center">

Check warning on line 17 in components/groups/forms/groups/Success.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/forms/groups/Success.tsx#L17 

Added line #L17 was not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Test coverage exists but needs enhancement for renderAuthors edge cases

The Success component already has test coverage in components/groups/forms/groups/__tests__/Success.test.tsx, but it only partially covers the renderAuthors functionality:

  • ✓ Tests the array case with manifest addresses
  • ❌ Missing test for single author case
  • ❌ Missing test for non-manifest address formats
  • ❌ Missing test for empty/whitespace handling

Add the following test cases to Success.test.tsx:

  • Single author rendering
  • Non-manifest address format
  • Author string with leading/trailing whitespace
  • Empty authors array
🔗 Analysis chain

Add test coverage for author rendering logic

The renderAuthors function handles both array and single author cases, but lacks test coverage. This is critical functionality that should be tested to prevent regressions.

Would you like me to help generate test cases for the author rendering scenarios?

Also applies to: 27-27

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for existing tests
rg -l "renderAuthors|Success.test" --type ts --type tsx

Length of output: 85

Script:

#!/bin/bash
# Check for existing tests with correct file extensions
rg -l "renderAuthors|Success.test" -t ts -t jsx -t tsx

# Find all test files in the components directory
fd ".*\.(test|spec)\.(ts|tsx|jsx)$" components/

# Look for Success component test files specifically
fd "Success\.(test|spec)\.(ts|tsx|jsx)$" components/

Length of output: 2510

Script:

#!/bin/bash
# Check the content of the existing Success test file
cat components/groups/forms/groups/__tests__/Success.test.tsx

# Look for renderAuthors function implementation
ast-grep --pattern 'function renderAuthors' -l ts,tsx

Length of output: 1828

Script:

#!/bin/bash
# Look for renderAuthors function with correct ast-grep syntax
ast-grep --pattern 'const renderAuthors = $_'

# Check the Success component implementation
cat components/groups/forms/groups/Success.tsx

Length of output: 6657

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 17-17: components/groups/forms/groups/Success.tsx#L17
Added line #L17 was not covered by tests

{author.trim().startsWith('manifest') ? (
<TruncatedAddressWithCopy address={author.trim()} slice={14} />
) : (
Expand All @@ -27,7 +24,7 @@
));
} else {
return (
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg flex items-center">
<div className="bg-base-300 p-4 rounded-lg flex items-center">
{formData.authors.trim().startsWith('manifest') ? (
<TruncatedAddressWithCopy address={formData.authors.trim()} slice={14} />
) : (
Expand All @@ -50,11 +47,11 @@

<div className="space-y-6">
<p className="text-lg mb-2">Your transaction was successfully signed and broadcasted.</p>
<p className="text-md text-gray-400 mb-6">
<p className="text-md text-gray-500 dark:text-gray-400 mb-6">
You may now interact with your group by adding members, submitting or voting on
proposals, and changing group parameters.
</p>
<div className="text-md text-gray-400 mb-6 flex-col flex gap-2 ">
<div className="text-md text-gray-500 dark:text-gray-400 mb-6 flex-col flex gap-2 ">
<span>Remember to fund your group by sending tokens to the policy address </span>
<TruncatedAddressWithCopy address={recentGroup?.policies[0].address} slice={24} />
</div>
Expand All @@ -63,12 +60,14 @@
<div>
<h2 className="text-xl font-semibold mb-4">Group Information</h2>
<div className="grid grid-cols-2 gap-4">
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<label className="text-sm text-gray-400">Voting period</label>
<div className="bg-base-300 p-4 rounded-lg">
<label className="text-sm text-gray-500 dark:text-gray-400">Voting period</label>
<div>{secondsToHumanReadable(Number(formData.votingPeriod.seconds))}</div>
</div>
<div className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<label className="text-sm text-gray-400">Qualified Majority</label>
<div className="bg-base-300 p-4 rounded-lg">
<label className="text-sm text-gray-500 dark:text-gray-400">
Qualified Majority
</label>
<div>
{formData.votingThreshold} / {formData.members.length}
</div>
Expand All @@ -87,10 +86,10 @@
<h2 className="text-xl font-semibold mb-4">Members</h2>
<div className="grid grid-cols-3 gap-4">
{formData.members.map((member, index) => (
<div key={index} className="dark:bg-[#2A2A38] bg-[#FFFFFF] p-4 rounded-lg">
<div className="text-sm text-gray-400">Address</div>
<div key={index} className="bg-base-300 p-4 rounded-lg">
<div className="text-sm text-gray-500 dark:text-gray-400">Address</div>
<TruncatedAddressWithCopy address={member.address} slice={14} />
<div className="text-sm text-gray-400 mt-2">Name</div>
<div className="text-sm text-gray-500 dark:text-gray-400 mt-2">Name</div>
<div>{member.name}</div>
</div>
))}
Expand All @@ -100,7 +99,9 @@
</div>
<div className="flex gap-6 mt-6 mx-auto w-full">
<Link href="/groups" className="w-[calc(50%-12px)]">
<button className="btn btn-neutral w-full text-white">Back to Groups Page</button>
<button className="btn btn-neutral text-black dark:text-white w-full">
Back to Groups Page
</button>
</Link>
<Link
href={`/groups${recentGroup?.policies[0]?.address ? `?policyAddress=${recentGroup.policies[0].address}` : ''}`}
Expand Down
Loading