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.

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

feat(gnoweb): make test files & non-gno files on $source be in a collapsible sections #4063

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

matijamarjanovic
Copy link
Contributor

@matijamarjanovic matijamarjanovic commented Apr 5, 2025

implementation of #4034

  • sorts the string slice containing file names that is returned by using abci query in webclient_html.go; this results in the file sorting in the right section of the $source page
  • categorizes the files in 3 different categories in view_source.go in 3 different categories: gno files, test files and non-gno files (README.md is in gno files since it is expected to be on the top always and the files are received sorted)
  • introduces new ui element toc_source.html which replaces the toc_generic.html on the $source page which kind of defeats the purpose of the "toc_generic" name because it is not generic anymore but I didn't want to rename it to avoid confusion - please let me know if needed

in the issue mentioned there was a request that there non-gno files be adressed, which they are in this PR, but the abci query doesn't seem to return any non-gno files from the package except README.md

Screenshots

before:
image

after:
image
image

cc: @alexiscolin

@github-actions github-actions bot added the 📦 ⛰️ gno.land Issues or PRs gno.land package related label Apr 5, 2025
@Gno2D2 Gno2D2 requested review from alexiscolin and gfanton April 5, 2025 21:20
@Gno2D2 Gno2D2 added the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Apr 5, 2025
@Gno2D2
Copy link
Collaborator

Gno2D2 commented Apr 5, 2025

🛠 PR Checks Summary

All Automated Checks passed. ✅

Manual Checks (for Reviewers):
  • IGNORE the bot requirements for this PR (force green CI check)
  • The pull request description provides enough details
Read More

🤖 This bot helps streamline PR reviews by verifying automated checks and providing guidance for contributors and reviewers.

✅ Automated Checks (for Contributors):

🟢 Maintainers must be able to edit this pull request (more info)
🟢 Changes related to gnoweb must be reviewed by its codeowners
🟢 Pending initial approval by a review team member, or review from tech-staff

☑️ Contributor Actions:
  1. Fix any issues flagged by automated checks.
  2. Follow the Contributor Checklist to ensure your PR is ready for review.
    • Add new tests, or document why they are unnecessary.
    • Provide clear examples/screenshots, if necessary.
    • Update documentation, if required.
    • Ensure no breaking changes, or include BREAKING CHANGE notes.
    • Link related issues/PRs, where applicable.
☑️ Reviewer Actions:
  1. Complete manual checks for the PR, including the guidelines and additional checks if applicable.
📚 Resources:
Debug
Automated Checks
Maintainers must be able to edit this pull request (more info)

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 The pull request was created from a fork (head branch repo: matijamarjanovic/gno)

Then

🟢 Requirement satisfied
└── 🟢 Maintainer can modify this pull request

Changes related to gnoweb must be reviewed by its codeowners

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 A changed file matches this pattern: ^gno.land/pkg/gnoweb/ (filename: gno.land/pkg/gnoweb/components/layout_test.go)

Then

🟢 Requirement satisfied
└── 🟢 Or
    ├── 🟢 This user reviewed pull request: alexiscolin
    └── 🟢 This user reviewed pull request: gfanton

Pending initial approval by a review team member, or review from tech-staff

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 The base branch matches this pattern: ^master$
    └── 🟢 Not (🔴 Pull request author is a member of the team: tech-staff)

Then

🟢 Requirement satisfied
└── 🟢 If
    ├── 🟢 Condition
    │   └── 🟢 Or
    │       ├── 🔴 At least 1 user(s) of the organization reviewed the pull request (with state "APPROVED")
    │       ├── 🟢 At least 1 user(s) of the team tech-staff reviewed pull request
    │       └── 🔴 This pull request is a draft
    └── 🟢 Then
        └── 🟢 Not (🔴 This label is applied to pull request: review/triage-pending)

Manual Checks
**IGNORE** the bot requirements for this PR (force green CI check)

If

🟢 Condition met
└── 🟢 On every pull request

Can be checked by

  • Any user with comment edit permission
The pull request description provides enough details

If

🟢 Condition met
└── 🟢 And
    ├── 🟢 Not (🔴 Pull request author is a member of the team: core-contributors)
    └── 🟢 Not (🔴 Pull request author is user: dependabot[bot])

Can be checked by

  • team core-contributors

Copy link

codecov bot commented Apr 5, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

@matijamarjanovic matijamarjanovic changed the title feat(gnoweb): make test files & non-gno files on $source be in a collapsible section feat(gnoweb): make test files & non-gno files on $source be in a collapsible sections Apr 5, 2025
@alexiscolin
Copy link
Member

Cool. I think I'm gonna add one for two more stuffs in the review tomorrow but it looks good.

Comment on lines 24 to 26
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
Copy link
Member

Choose a reason for hiding this comment

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

Could you move this icon to the icon svg spritesheet with the other icons (icons.html)? So we will be able to reuse it?

Copy link
Member

Choose a reason for hiding this comment

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

same for the other one in "Non-Gno Files Section"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done in fa42236. non-gno files section was replaced with ReadmeFile since mempackage seems to return that as the only non-.gno file

<details class="group">
<summary class="flex items-center cursor-pointer">
<h3 class="font-medium text-sm">Other Files</h3>
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-4 h-4 ml-1 rotate-180 my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">

let's remove animation (and transform ?)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated in fa42236 but removing the group-open: part prevents the icon from being rotated at all so I left it in if that is okay

{{ if .NonGnoFiles }}
<details class="group">
<summary class="flex items-center cursor-pointer">
<h3 class="font-medium text-sm">Other Files</h3>
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<h3 class="font-medium text-sm">Other Files</h3>
<h3 class="font-medium font-interVar text-100">Other Files</h3>

text-sm doesn't exist in our theme. Also, would be better to use another font for title

Copy link
Contributor Author

Choose a reason for hiding this comment

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

noted and implemented in fa42236

<details class="group">
<summary class="flex items-center cursor-pointer">
<h3 class="font-medium text-sm">Test Files</h3>
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-4 h-4 ml-1 group-open:rotate-180 my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">

Copy link
Contributor Author

Choose a reason for hiding this comment

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

implemented in fa42236

<summary class="flex items-center cursor-pointer">
<h3 class="font-medium text-sm">Other Files</h3>
<svg class="w-4 h-4 ml-1 transform group-open:rotate-180 transition-transform my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
Copy link
Member

Choose a reason for hiding this comment

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

We should place the arrow on the left side of the text to improve UX. This change helps users scan the content more quickly and consistently, as all related icons would be aligned on the same side.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

okay makes sense, but since i added the padding in c451d47 the icons aren't aligned anymore. still, i agree this is better and done it in fa42236

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<ul class="list-none space-y-2 pl-2 mt-2">
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<ul class="list-none space-y-2 pl-2 mt-2">
<ul class="list-none space-y-2 pl-5 mt-2">

For a better alignment

Copy link
Contributor Author

Choose a reason for hiding this comment

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

implemented in c451d47

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<ul class="list-none space-y-2 pl-2 mt-2">
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<ul class="list-none space-y-2 pl-2 mt-2">
<ul class="list-none space-y-2 pl-5 mt-2">

For a better alignement

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done in c451d47

result:
image

@@ -275,3 +277,50 @@ func (s *HTMLWebClient) FormatSource(w io.Writer, fileName string, src []byte) e
func (s *HTMLWebClient) WriteFormatterCSS(w io.Writer) error {
return s.Formatter.WriteCSS(w, s.chromaStyle)
}

// sortFiles sorts a slice of filenames according to predefined categories:
Copy link
Member

Choose a reason for hiding this comment

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

Have you considered replacing these numbers with named constants using iota?
Although the comments explain each number's meaning, using named constants would make the code self-doc, improve readability, and reduce the risk of errors due to misnaming.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I actually removed this sorting in 2c7b9ff as it is done in the view_sorce file as well

@alexiscolin
Copy link
Member

Nice work 👍 Thank you! Might be cool to add some gnoweb tests too.

@Gno2D2 Gno2D2 removed the review/triage-pending PRs opened by external contributors that are waiting for the 1st review label Apr 7, 2025
- get rid of items slice
- introuce a switch for better readability
- remove check if the file name contains test, only check for suffix
@leohhhn
Copy link
Contributor

leohhhn commented Apr 7, 2025

@alexiscolin @gfanton _filetest.gno files also should go in this "test" category, no?

@matijamarjanovic
Copy link
Contributor Author

matijamarjanovic commented Apr 7, 2025

Thank you for you reviews @gfanton @alexiscolin, I hope I covered everything, just for clearance this is the result:
image
image

also added some tests

Copy link
Member

@gfanton gfanton left a comment

Choose a reason for hiding this comment

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

Thanks for adding tests on rendering; that was unexpected but welcome.
Could you update them to use Testify?
After that, we should be all set on my end. Please ping me for a final review once you've updated to Testify.

Copy link
Member

Choose a reason for hiding this comment

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

please, use testify for asserting

Copy link
Contributor Author

Choose a reason for hiding this comment

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

implemented in 9370ea9

Copy link
Member

Choose a reason for hiding this comment

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

Use testify for assertion

Copy link
Contributor Author

Choose a reason for hiding this comment

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

9370ea9 as well

@matijamarjanovic
Copy link
Contributor Author

matijamarjanovic commented Apr 7, 2025

Thanks for adding tests on rendering; that was unexpected but welcome.

Yeah I figured it couldn't hurt to add them to everything and not just my code here + it helped me understand what's happening so I can be of more help in the future. Should be okay now, thanks

@matijamarjanovic matijamarjanovic requested a review from gfanton April 7, 2025 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 ⛰️ gno.land Issues or PRs gno.land package related
Projects
Status: In Progress
Status: In Review
Development

Successfully merging this pull request may close these issues.

5 participants