Skip to content

[frontend] Migrate away from deprecated Grid #3787

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

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

Conversation

imnasnainaec
Copy link
Collaborator

@imnasnainaec imnasnainaec commented May 7, 2025

Notes for review:

  • In most places, replaced <Grid> with <Grid2>, <Stack>, <Box>, <div>, or nothing, as fit the design need.
  • <Stack direction="row"> can be used in place of <Grid2> when we don't want the items in the row to wrap to a second row in a narrow window
  • Replaced the <Grid>/<List> combo with a <Table> in DomainStatistics & UserStatistics components
  • <Card> layout was made more consistent across InvalidLink, Login, Signup, ResetRequest, & PasswordReset
  • Moved Save and Cancel buttons from bottom of CharInv into child component CharacterEntry at top
  • Do a side-by-side visual comparison between this and master (on QA) to make sure appearance is (roughly) the same or (subjectively) improved on all edited components
  • Try each edited component with various window widths > 300px (we don't care about narrower than that)
  • Click "Forgot password?" on the Login page to test ResetRequest; initiate a password reset and click the link sent to your email to test PasswordReset; change a character in the token within that url to test InvalidLink
  • To test UploadImage and ViewImageDialog (respectively):
    • go to project settings > "Users" tab > "Manage speakers", add a speaker, click the + preceding the speaker name, select "Upload image consent"
    • click the "Browse" button and select any image file from your computer, click the "Save" button, click the image icon preceding the speaker name (where the + used to be)
  • Test *Completed components by clicking a completed goal tile in Data Cleanup under "You've completed:"
    • For CharInvCompleted, first go to Data Cleanup > Create Character Inventory, click on any character tile with multiple occurrences, and do a Find & Replace
    • For MergeDupsCompleted, first go to Data Cleanup > Merge Duplicates, and merge and/or delete words in various combinations
    • For WordCard and ReviewEntriesCompleted, first go to Data Cleanup > Review Entries and edit several entries, including adding multiple semantic domains to a sense
  • Test SiteSettings by logging in with a site admin (https://github.com/sillsdev/TheCombine?tab=readme-ov-file#grant-admin-rights), then click your avatar to open the UserMenu and the top option will be "Site Settings"

This change is Reviewable

Copy link

codecov bot commented May 7, 2025

Codecov Report

Attention: Patch coverage is 54.30464% with 69 lines in your changes missing coverage. Please review.

Project coverage is 72.90%. Comparing base (8c6b909) to head (723d34f).

Files with missing lines Patch % Lines
...rc/components/ProjectSettings/ProjectLanguages.tsx 65.38% 8 Missing and 1 partial ⚠️
...onents/DataEntry/DataEntryTable/NewEntry/index.tsx 33.33% 6 Missing ⚠️
src/components/InvalidLink/index.tsx 0.00% 4 Missing ⚠️
...s/ProjectSettings/ProjectSchedule/DateSelector.tsx 0.00% 4 Missing ⚠️
...ts/SiteSettings/UserManagement/ConfirmDeletion.tsx 0.00% 4 Missing ⚠️
...oals/CharacterInventory/CharInv/CharacterEntry.tsx 77.77% 4 Missing ⚠️
...riesTable/Cells/EditCell/EditSensesCardContent.tsx 55.55% 4 Missing ⚠️
src/components/Buttons/UndoButton.tsx 25.00% 3 Missing ⚠️
src/components/Login/Login.tsx 50.00% 3 Missing ⚠️
src/components/PasswordReset/ResetPage.tsx 50.00% 3 Missing ⚠️
... and 15 more
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3787      +/-   ##
==========================================
- Coverage   72.92%   72.90%   -0.03%     
==========================================
  Files         286      286              
  Lines       10771    10764       -7     
  Branches     1340     1344       +4     
==========================================
- Hits         7855     7847       -8     
- Misses       2516     2518       +2     
+ Partials      400      399       -1     
Flag Coverage Δ
backend 81.91% <ø> (ø)
frontend 65.81% <54.30%> (-0.06%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@imnasnainaec imnasnainaec changed the title Start migration away from deprecated Grid [frontend] Migrate away from deprecated Grid May 9, 2025
@imnasnainaec imnasnainaec marked this pull request as ready for review May 12, 2025 14:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant