[FC-0036] Refined taxonomy details page

[ChrisChV]

Description

This PR fixes the issues listed in openedx/modular-learning#186

Screenshots

Testing instructions

• Run the taxonomy-sample-data script.
• Go to taxonomy list and click on a taxonomy to see the taxonomy details page.

1. The table header has been removed (so "Showing 7 of 7" no longer appears).

• Verify that the header has been removed

2. The table displays up to 100 parent tags at a time. Pagination is only required if there are more than 100 parent tags.

• Check Flat Taxonomy and verify that the table shows 100 parent tags and there is pagination footer.
• Check TwoLevelTaxonomy and verify that there is not pagination footer.

The "expand all" link and the up/down arrows have been moved to the far right of the table.

• Verify this style.

Support information

• Github issue: [Tagging] Refined Taxonomy Detail Page modular-learning#186
• Internal ticket: FAL-3641

[openedx-webhooks]

Thanks for the pull request, @ChrisChV! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.28%. Comparing base (0fc0ce0) to head (5b69ba4).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #833   +/-   ##
=======================================
  Coverage   89.28%   89.28%           
=======================================
  Files         551      551           
  Lines        9740     9747    +7     
  Branches     2101     2103    +2     
=======================================
+ Hits         8696     8703    +7     
  Misses        996      996           
  Partials       48       48           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yusuf-musleh]

👍 Looks great, great work @ChrisChV !

Just left a small suggestion below, but I also had a question.

When flipping through the pagination of a taxonomy, like the Flat Taxonomy, the page number at the bottom updates as expect, however the result number is always Showing 100 of 5000. regardless of which page we are on. Is this intended behavior? As opposed to have it display something like Showing 101-200 of 5000 for example. I'm not sure if it is within the scope of this PR or requirements in general.

• I tested this: I followed the test instructions, confirmed that the table header is no longer there, confirmed that pagination footer only shows up when there are more than 100 taxonomies and that it works, and confirmed that the "expand all" and up/down arrows are correctly on the right side for the table.
• I read through the code
• I checked for accessibility issues
• Includes documentation
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository.

[yusuf-musleh]

Just a suggestion that I think might help avoid any issues that would be hard to spot when needing to update/add queryparams in the future.

Suggested change

	const getTagListApiUrl = (taxonomyId, page, pageSize) => new URL(
	`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page=${page + 1}&page_size=${pageSize}`,
	getApiBaseUrl(),
	).href;
	const getTagListApiUrl = (taxonomyId, page, pageSize) => {
	const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl());
	url.searchParams.append('page', page + 1);
	url.searchParams.append('page_size', pageSize);
	return url.href;
	};

[ChrisChV]

Thanks!

[ChrisChV]

When flipping through the pagination of a taxonomy, like the Flat Taxonomy, the page number at the bottom updates as expect, however the result number is always Showing 100 of 5000. regardless of which page we are on. Is this intended behavior? As opposed to have it display something like Showing 101-200 of 5000 for example. I'm not sure if it is within the scope of this PR or requirements in general.

I think is out of the scope of this ticket. I have tried it with main and it has the same issue. CC @bradenmacdonald

[bradenmacdonald]

Perhaps we are not using DataTable correctly? If you look at the code, it is supposed to show something like "101-200": https://github.com/openedx/paragon/blob/7e4a81f9f2350c54362baa852c75dc32c2c2694e/src/DataTable/RowStatus.jsx#L24

[bradenmacdonald]

If it's a bug in Paragon it's out of scope, but if it's our error on this page, please fix it here.

[ChrisChV]

@bradenmacdonald Issue fixed here 45980ba
The bug also involved updating paragon, but it has already been updated here #818
CC @yusuf-musleh

[bradenmacdonald]

Great, thanks for figuring that out @ChrisChV :)

[xitij2000]

Just small bits of feedback about using flex instead of float and using the url paramater building approach @yusuf-musleh pointed out.

[xitij2000]

I think instead of this you should be able to use d-flex justify-content-end for the first one and use display:flex; justify-content: flex-end for the second.

IMO using float can sometimes cause issues since it breaks the normal flow of the document.

[ChrisChV]

Thanks @xitij2000! I think it's ready for merge

[ChrisChV]

Thanks @xitij2000! I think it's ready for merge

[ChrisChV]

Thanks @xitij2000! I think it's ready for merge

[openedx-webhooks]

@ChrisChV 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.