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

Assortment of UI changes for coverage over time for components #2809

Merged
merged 5 commits into from
Apr 26, 2024

Conversation

JerrySentry
Copy link
Contributor

@JerrySentry JerrySentry commented Apr 25, 2024

Description

fixes: codecov/engineering-team#1639

  • Add a link to redirect from components tab on PR page to components tab on Repo page
  • Add latest commit under the branch selector
  • Disable the branch dropdown box on the not_configured/enable/backfilling views
  • When clicking "Enable component analytics" button it should reload the page (which would bring it to backfilling view)
  • Fix padding on the dropdowns section. The padding between the vertical line and dropdown and padding between the dropdown label and dropbown
  • Add table headers when showing the not_configured/enable/backfilling views
  • Last Uploaded table header row values should align to the left
  • The delete component modal message is not correct
  • Add a aria-label = "delete-{component_id}" to the trash can icon to delete
  • Update the message from 24 hour to 1 hour on the backfilling view

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. In 2022 this entity acquired Codecov and as result Sentry is going to need some rights from me in order to utilize my contributions in this PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

@@ -35,6 +35,50 @@ interface ComponentsTableHelper {
delete: React.ReactElement | null
}

Copy link
Contributor Author

@JerrySentry JerrySentry Apr 25, 2024

Choose a reason for hiding this comment

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

This adds the table headers (without the actual data) when in the state of either not configured, activate measurements, or is backfilling. Because we want to show the table headers and then the corresponding messages.

@@ -382,12 +382,17 @@ export function useNavLinks() {
},
componentsTab: {
path: (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

In the navlink to go to components tab on repo page, add an optional query param to select the initial branch to load, this is used by PR page components table where it links to the repo page components table while keeping the associated branch of them PR.

@codecov-qa
Copy link

codecov-qa bot commented Apr 25, 2024

Codecov Report

Attention: Patch coverage is 95.23810% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 98.45%. Comparing base (577c127) to head (10f0ac7).

✅ All tests successful. No failed tests found ☺️

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2809      +/-   ##
==========================================
- Coverage   98.45%   98.45%   -0.01%     
==========================================
  Files         870      870              
  Lines       12632    12649      +17     
  Branches     3379     3327      -52     
==========================================
+ Hits        12437    12453      +16     
- Misses        191      192       +1     
  Partials        4        4              
Files Coverage Δ
...lCoverage/routes/ComponentsTab/ComponentsTable.tsx 100.00% <ø> (ø)
...e/PullCoverage/routes/ComponentsTab/hooks/query.ts 100.00% <ø> (ø)
...tes/ComponentsTab/hooks/useComponentComparison.tsx 100.00% <ø> (ø)
...ab/BackfillBanners/SyncingBanner/SyncingBanner.tsx 100.00% <ø> (ø)
...illBanners/TriggerSyncBanner/TriggerSyncBanner.tsx 100.00% <ø> (ø)
src/pages/RepoPage/ComponentsTab/Header/Header.tsx 100.00% <ø> (ø)
...tsTab/subroute/ComponentsTable/ComponentsTable.tsx 95.71% <100.00%> (+0.55%) ⬆️
...able/DeleteComponentModal/DeleteComponentModal.tsx 100.00% <ø> (ø)
src/services/navigation/useNavLinks/useNavLinks.js 99.14% <100.00%> (+0.01%) ⬆️
src/services/repo/useActivateMeasurements.tsx 100.00% <100.00%> (ø)
... and 2 more
Components Coverage Δ
Assets 55.55% <ø> (ø)
Layouts 97.25% <ø> (ø)
Pages 99.26% <92.85%> (-0.02%) ⬇️
Services 99.56% <100.00%> (+<0.01%) ⬆️
Shared 99.84% <ø> (ø)
UI 94.15% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 577c127...10f0ac7. Read the comment docs.

@codecov-notifications
Copy link

codecov-notifications bot commented Apr 25, 2024

Codecov Report

Attention: Patch coverage is 95.23810% with 1 lines in your changes are missing coverage. Please review.

✅ All tests successful. No failed tests found ☺️

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2809      +/-   ##
==========================================
- Coverage   98.45%   98.45%   -0.01%     
==========================================
  Files         870      870              
  Lines       12632    12649      +17     
  Branches     3384     3391       +7     
==========================================
+ Hits        12437    12453      +16     
- Misses        191      192       +1     
  Partials        4        4              
Files Coverage Δ
...lCoverage/routes/ComponentsTab/ComponentsTable.tsx 100.00% <ø> (ø)
...e/PullCoverage/routes/ComponentsTab/hooks/query.ts 100.00% <ø> (ø)
...tes/ComponentsTab/hooks/useComponentComparison.tsx 100.00% <ø> (ø)
...ab/BackfillBanners/SyncingBanner/SyncingBanner.tsx 100.00% <ø> (ø)
...illBanners/TriggerSyncBanner/TriggerSyncBanner.tsx 100.00% <ø> (ø)
src/pages/RepoPage/ComponentsTab/Header/Header.tsx 100.00% <ø> (ø)
...tsTab/subroute/ComponentsTable/ComponentsTable.tsx 95.71% <100.00%> (+0.55%) ⬆️
...able/DeleteComponentModal/DeleteComponentModal.tsx 100.00% <ø> (ø)
src/services/navigation/useNavLinks/useNavLinks.js 99.14% <100.00%> (+0.01%) ⬆️
src/services/repo/useActivateMeasurements.tsx 100.00% <100.00%> (ø)
... and 2 more
Components Coverage Δ
Assets 55.55% <ø> (ø)
Layouts 97.25% <ø> (ø)
Pages 99.26% <92.85%> (-0.02%) ⬇️
Services 99.56% <100.00%> (+<0.01%) ⬆️
Shared 99.84% <ø> (ø)
UI 94.15% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 577c127...10f0ac7. Read the comment docs.

Copy link

codecov-public-qa bot commented Apr 25, 2024

Codecov Report

Attention: Patch coverage is 95.23810% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 98.45%. Comparing base (577c127) to head (10f0ac7).

✅ All tests successful. No failed tests found ☺️

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2809      +/-   ##
==========================================
- Coverage   98.45%   98.45%   -0.01%     
==========================================
  Files         870      870              
  Lines       12632    12649      +17     
  Branches     3379     3386       +7     
==========================================
+ Hits        12437    12453      +16     
- Misses        191      192       +1     
  Partials        4        4              
Files Coverage Δ
...lCoverage/routes/ComponentsTab/ComponentsTable.tsx 100.00% <ø> (ø)
...e/PullCoverage/routes/ComponentsTab/hooks/query.ts 100.00% <ø> (ø)
...tes/ComponentsTab/hooks/useComponentComparison.tsx 100.00% <ø> (ø)
...ab/BackfillBanners/SyncingBanner/SyncingBanner.tsx 100.00% <ø> (ø)
...illBanners/TriggerSyncBanner/TriggerSyncBanner.tsx 100.00% <ø> (ø)
src/pages/RepoPage/ComponentsTab/Header/Header.tsx 100.00% <ø> (ø)
...tsTab/subroute/ComponentsTable/ComponentsTable.tsx 95.71% <100.00%> (+0.55%) ⬆️
...able/DeleteComponentModal/DeleteComponentModal.tsx 100.00% <ø> (ø)
src/services/navigation/useNavLinks/useNavLinks.js 99.14% <100.00%> (+0.01%) ⬆️
src/services/repo/useActivateMeasurements.tsx 100.00% <100.00%> (ø)
... and 2 more
Components Coverage Δ
Assets 55.55% <ø> (ø)
Layouts 97.25% <ø> (ø)
Pages 99.26% <92.85%> (-0.02%) ⬇️
Services 99.56% <100.00%> (+<0.01%) ⬆️
Shared 99.84% <ø> (ø)
UI 94.15% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 577c127...10f0ac7. Read the comment docs.

@@ -94,16 +94,23 @@ export function useActivateMeasurements({

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixes an issue where invalidateQueries was not being called correctly leading to 'BackfillComponentMemberships not being recalled.

@@ -17,14 +17,29 @@ const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
onClose={closeModal}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This file is all text changes for the delete confirmation modal.

Copy link

codecov bot commented Apr 25, 2024

Codecov Report

Attention: Patch coverage is 95.23810% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 77.22%. Comparing base (577c127) to head (10f0ac7).

✅ All tests successful. No failed tests found ☺️

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff            @@
##            main   #2809      +/-   ##
========================================
- Coverage   98.46   77.22   -21.24     
========================================
  Files        870     864       -6     
  Lines      12632   12634       +2     
  Branches    3384    3327      -57     
========================================
- Hits       12437    9756    -2681     
- Misses       191    2845    +2654     
- Partials       4      33      +29     
Files Coverage Δ
...lCoverage/routes/ComponentsTab/ComponentsTable.tsx 100.00% <ø> (ø)
...e/PullCoverage/routes/ComponentsTab/hooks/query.ts 100.00% <ø> (ø)
...tes/ComponentsTab/hooks/useComponentComparison.tsx 100.00% <ø> (ø)
...ab/BackfillBanners/SyncingBanner/SyncingBanner.tsx 100.00% <ø> (ø)
...illBanners/TriggerSyncBanner/TriggerSyncBanner.tsx 100.00% <ø> (ø)
src/pages/RepoPage/ComponentsTab/Header/Header.tsx 100.00% <ø> (ø)
...tsTab/subroute/ComponentsTable/ComponentsTable.tsx 95.71% <100.00%> (+0.55%) ⬆️
...able/DeleteComponentModal/DeleteComponentModal.tsx 100.00% <ø> (ø)
src/services/navigation/useNavLinks/useNavLinks.js 99.14% <100.00%> (+0.01%) ⬆️
src/services/repo/useActivateMeasurements.tsx 100.00% <100.00%> (ø)
... and 2 more

... and 194 files with indirect coverage changes

Components Coverage Δ
Assets 55.22% <ø> (-0.34%) ⬇️
Layouts 97.25% <ø> (ø)
Pages 61.99% <92.85%> (-37.29%) ⬇️
Services 96.61% <100.00%> (-2.96%) ⬇️
Shared 99.20% <ø> (-0.64%) ⬇️
UI 93.65% <ø> (-0.51%) ⬇️

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 577c127...10f0ac7. Read the comment docs.

@@ -125,7 +169,7 @@ function createTableData({
/>
),
lastUploaded: (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

align the Last Uploaded column to the left (because the values of this column are strings)

@@ -60,8 +60,8 @@ const Header = ({
return (
<div className="flex flex-col justify-end divide-y divide-solid divide-ds-gray-secondary">
<div className="grid w-2/3 divide-y divide-solid divide-ds-gray-secondary sm:w-full sm:grid-cols-2 sm:divide-x sm:divide-y-0 md:grid-cols-4">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixes padding of the header area.

@@ -97,8 +105,24 @@ const BranchSelector: React.FC = () => {
}
}}
onSearch={(term: string) => setBranchSearchTerm(term)}
disabled={isDisabled}
/>
</span>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Add the "latest commit" section under the branch selector.

Copy link
Contributor

Choose a reason for hiding this comment

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

nice!

@@ -132,7 +133,17 @@ export default function ComponentsTable() {

return (
<>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Add a link to the repo's component tab with the current PR's branch

@JerrySentry JerrySentry marked this pull request as ready for review April 25, 2024 20:28
@codecov-staging
Copy link

codecov-staging bot commented Apr 25, 2024

Bundle Report

Changes will increase total bundle size by 2.59kB ⬆️

Bundle name Size Change
gazebo-staging-array-push 6.46MB 2.59kB ⬆️

Copy link

codecov bot commented Apr 25, 2024

Bundle Report

Changes will increase total bundle size by 2.59kB ⬆️

Bundle name Size Change
gazebo-production-array-push 6.46MB 2.59kB ⬆️

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Apr 25, 2024

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Commit Created Cloud Enterprise
a68a143 Thu, 25 Apr 2024 20:37:43 GMT Expired Expired
10f0ac7 Fri, 26 Apr 2024 13:52:27 GMT Cloud Enterprise

Copy link
Contributor

@spalmurray-codecov spalmurray-codecov left a comment

Choose a reason for hiding this comment

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

Looks good! Couple nits, but approved. Your call on those!

@JerrySentry JerrySentry merged commit 9f18102 into main Apr 26, 2024
44 of 56 checks passed
@JerrySentry JerrySentry deleted the apr_24_cot_ui branch April 26, 2024 13:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI cleanup laundry list
3 participants