Update wiki sidebar
What does this MR do and why?
- Truncate page names
- Remove button hover style
- Remove double border on sidebar
- Add button to view all pages
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
How to set up and validate locally
- http://127.0.0.1:3000/gitlab-org/gitlab-test/-/wikis/home
- Test out a wiki with existing pages
- Test out a wiki with no pages yet (go to create form)
Links
Merge request reports
Activity
changed milestone to %17.1
added UX UX Paper Cuts frontend maintenanceusability typemaintenance labels
assigned to @annabeldunstone
- A deleted user
added backend label
1 Warning This merge request contains lines with testid selectors. Please ensure e2e:package-and-test
job is run.testid
selectorsThe following changed lines in this MR contain
testid
selectors:app/views/shared/wikis/_sidebar.html.haml
+ = render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, variant: :link, href: wiki_path(@wiki, action: :pages), button_options: { data: { testid: 'view-all-pages-button' }, class: '' }) do - = link_button_to wiki_path(@wiki, action: :pages), data: { testid: 'view-all-pages-button' }, block: true do
app/views/shared/wikis/_sidebar_wiki_page.html.haml
- .gl-relative.gl-display-flex.gl-align-items-center.js-wiki-list-toggle.wiki-list{ data: { testid: 'wiki-list' } } - = link_to wiki_path, data: { testid: 'wiki-page-link', qa_page_name: wiki_page.human_title } do + .gl-relative.gl-flex.gl-items-center.js-wiki-list-toggle.wiki-list.gl-px-3.gl-rounded-base{ data: { testid: 'wiki-list' } } + = link_to wiki_path, class: 'gl-str-truncated', data: { testid: 'wiki-page-link', qa_page_name: wiki_page.human_title } do
app/views/shared/wikis/_wiki_directory.html.haml
- .gl-relative.gl-display-flex.gl-align-items-center.js-wiki-list-toggle.wiki-list{ data: { testid: 'wiki-list' } }< - = link_to wiki_path, data: { testid: 'wiki-dir-page-link', qa_page_name: wiki_directory.title } do + .gl-relative.gl-flex.gl-items-center.js-wiki-list-toggle.wiki-list.gl-px-3.gl-rounded-base.gl-cursor-pointer{ data: { testid: 'wiki-list' } }< + = link_to wiki_path, data: { testid: 'wiki-dir-page-link', qa_page_name: wiki_directory.title }, class: 'gl-str-truncated ' do
If the
e2e:package-and-test
job in theqa
stage has run automatically, please ensure the tests are passing. If the job has not run, please start themanual:e2e-test-pipeline-generate
job in theprepare
stage and ensure the tests infollow-up:e2e:package-and-test-ee
pipeline are passing.For the list of known failures please refer to the latest pipeline triage issue.
If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.
Reviewer roulette
Category Reviewer Maintainer backend @atiwari71
(UTC+5.5, 5.5 hours ahead of author)
@nmilojevic1
(UTC+2, 2 hours ahead of author)
frontend @aalakkad
(UTC+3, 3 hours ahead of author)
@janis
(UTC+2, 2 hours ahead of author)
test for spec/features/*
@atiwari71
(UTC+5.5, 5.5 hours ahead of author)
Maintainer review is optional for test for spec/features/*
Please check reviewer's status!
Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
Tailwind CSS
Legacy utils
The following files contain legacy utils:
-
app/views/shared/wikis/_sidebar_wiki_page.html.haml
gl-rounded-base
gl-str-truncated
-
app/views/shared/wikis/_wiki_directory.html.haml
gl-rounded-base
gl-str-truncated
Use the Tailwind documentation to find the Tailwind equivalent to these legacy utils. If the Tailwind equivalent is not available it is okay to use the legacy util for now. The Tailwind equivalent will be made available when the corresponding migration issue in &13521 (closed) is completed.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Danger-
added pipelinetier-1 label
added groupknowledge label
added devopsplan sectiondev labels
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits b3797abe and d05564a2
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.3 MB 4.3 MB - -0.0 % mainChunk 3.3 MB 3.3 MB - 0.0 %
Note: We do not have exact data for b3797abe. So we have used data from: e30edd46.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
Danger- Resolved by Annabel Dunstone Gray
requested review from @jmiocene
- Resolved by Annabel Dunstone Gray
@himkp Before I add/update specs, are there any issues/edge cases with always showing the
View all pages
button on the sidebar?
- Resolved by Annabel Dunstone Gray
added 465 commits
-
0f13c906...cc9a7b5b - 463 commits from branch
master
- 4f22f98b - Update wiki sidebar
- caa667a3 - Rename all pages -> sitemap
-
0f13c906...cc9a7b5b - 463 commits from branch
requested review from @himkp
- Resolved by Himanshu Kapoor
@annabeldunstone One prominent issue with the sidebar is that it is hard to know which page is a child page and which one is a parent. Consider the page structure in your screenshot:
Wiki page structure Rendered sidebar Sidebar ├─ A very long wiki name a very... ├─ RangeMap ├─ Caches Explained │ └─ Basic Utilities ├─ Home │ ├─ First step │ └─ Second step └─ test empty page
The above structure is just an assumption as I cannot tell if
First step
,Second step
andtest empty page
are on the same level or not.I think the root problem here is that the chevron is to the left of a folder name, and it does not appear for a page that has no children. This can be solved easily if we align the chevron to the right. This is also how we do it on the main sidebar on the left:
What do you think?
Edited by Himanshu Kapoor
added 231 commits
-
caa667a3...f53be62c - 229 commits from branch
master
- 582b9d6c - Update wiki sidebar
- 164f4d90 - Rename all pages -> sitemap
-
caa667a3...f53be62c - 229 commits from branch
- Resolved by Annabel Dunstone Gray
- Resolved by Annabel Dunstone Gray
- Resolved by Annabel Dunstone Gray
- Resolved by Annabel Dunstone Gray
- A deleted user
added documentation label
added 154 commits
-
1121f5c0...1842b313 - 150 commits from branch
master
- dbe84fc5 - Update wiki sidebar
- b4646cbf - Rename all pages -> sitemap
- f978dce9 - Update design of wiki sidebar
- 67e2b076 - Collapse/expand items on row click
Toggle commit list-
1121f5c0...1842b313 - 150 commits from branch
- Resolved by Annabel Dunstone Gray
added pipeline:mr-approved label
- Resolved by Himanshu Kapoor
@himkp
, thanks for approving this merge request.This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break
master
, a new pipeline will be started shortly.Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.
added pipelinetier-3 label and removed pipelinetier-1 label