616 add patch setction pr page team tier #2337
Conversation
…-patch-setction-pr-page-team-tier
| @@ -0,0 +1,66 @@ | |||
| import cs from 'classnames' | |||
There was a problem hiding this comment.
No new logic here, straight up copy-paste from what previously was Header
| @@ -0,0 +1,87 @@ | |||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | |||
There was a problem hiding this comment.
No new logic here, straight up copy-paste from what previously was Header.spec
| </span> | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-col justify-center gap-2 px-6"> |
There was a problem hiding this comment.
New logic that extends the normal header component from 64-73
| ciPassed: true, | ||
| }, | ||
| updatestamp: '2020-01-01T12:00:00.000000', | ||
| compareWithBase: { |
There was a problem hiding this comment.
Test is a "copy" of HeaderDefault.spec.jsx, only adding compareWithBase stuff
| }) | ||
| .nullable(), | ||
| updatestamp: z.string().nullable(), | ||
| compareWithBase: CompareWithBaseSchema.nullable(), |
There was a problem hiding this comment.
Hook is "identical" to usePullHeadData aside from the this field (and renaming the query and all that)
✅ Deploy Preview for gazebo-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| name: /Cool New Pull Request/, | ||
| }) | ||
| expect(title).toBeInTheDocument() | ||
| const header = await screen.findByText(/Header/) |
There was a problem hiding this comment.
We weren't mocking the header previously sooooo
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## main #2337 +/- ##
==========================================
- Coverage 97.42% 97.34% -0.09%
==========================================
Files 716 720 +4
Lines 8538 8573 +35
Branches 2048 2086 +38
==========================================
+ Hits 8318 8345 +27
- Misses 218 225 +7
- Partials 2 3 +1
... and 2 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Codecov Report
@@ Coverage Diff @@
## main #2337 +/- ##
==========================================
- Coverage 97.42% 97.34% -0.09%
==========================================
Files 716 720 +4
Lines 8538 8573 +35
Branches 2091 2055 -36
==========================================
+ Hits 8318 8345 +27
- Misses 217 226 +9
+ Partials 3 2 -1
... and 2 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Codecov Report
@@ Coverage Diff @@
## main #2337 +/- ##
==========================================
- Coverage 97.42% 97.34% -0.09%
==========================================
Files 716 720 +4
Lines 8538 8573 +35
Branches 2048 2098 +50
==========================================
+ Hits 8318 8345 +27
- Misses 218 225 +7
- Partials 2 3 +1
... and 2 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Codecov Report
@@ Coverage Diff @@
## main #2337 +/- ##
======================================
Coverage ? 97.34
======================================
Files ? 720
Lines ? 8573
Branches ? 2086
======================================
Hits ? 8345
Misses ? 225
Partials ? 3
Continue to review full report in Codecov by Sentry.
|
| const pull = data?.pull | ||
|
|
||
| return ( | ||
| <div className="flex flex-col justify-between gap-2 border-b border-ds-gray-secondary pb-2 text-xs md:flex-row"> |
There was a problem hiding this comment.
JW do we generally use CSS classes with attributes? In my experience it tends to be neater, more scalable, and maintains good separation of concerns. For example, this div could have a single className with relevant css attribs defined accordingly.
There was a problem hiding this comment.
With Gazebo we use tailwind css, https://tailwindcss.com/, which is a popular framework to style your markup; if you aren't familiar I urge to to check it out, it's pretty neat. I've found this to be a very nice + easy way to style your code and the more and more I've gotten to know tailwind syntax the more I value its power. We do have certain files with dedicated css files and their respective attributes (for example Table.css) that I think we use sparingly for code whose style we likely don't want to change.
I find using separate .css files does bring separation of concerns but it leads to an extra file for any file you have, which can be a bit extra for certain files that have very little styling to them. Tailwind's main advantage imo is it speeds up our development, so writing custom classes can be quite easy + fast. That's kinda my take, although I'll summon our css guru @terry-codecov for a more in depth answer as to why we opted for this choice
There was a problem hiding this comment.
Interesting thanks for the link.
| const CompareWithBaseSchema = z.discriminatedUnion('__typename', [ | ||
| ComparisonSchema, | ||
| ]) |
There was a problem hiding this comment.
You'll need to add in the other union types or else this could error out the whole page. I have already made the schemas should be in services/comparisons/schemas
| compareWithBase { | ||
| __typename | ||
| ... on Comparison { | ||
| patchTotals { | ||
| percentCovered | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Also here add in the spreads for the union types.
* feat: add header component for team tier customers * feat: converted Header.jsx to Header.tsx + tests * fix: add comparison schema types
* first pass, wheeeeeo * Sorting functionality * Update with tests * wrap up repos list: * Spelling correction (#2336) * 616 add patch setction pr page team tier (#2337) * feat: add header component for team tier customers * feat: converted Header.jsx to Header.tsx + tests * fix: add comparison schema types * fix: Filter out certain browser from sending events to Sentry (#2338) Filter out events for a given browser because they don't have all JS functions fully implemented causing issues that we cannot address. * feat: Hide Flag MultiSelect when on Team Plan on Commit Detail Page (#2327) We will need to hide the flag multi select on the commit detail page when the user is on the team plan as they are not an available feature to those users. GH codecov/engineering-team#687 * feat, ref: Disable Flag MultiSelect on Coverage Tab when on a Team Plan (#2329) Disable the flag multi-select on the coverage tab when users/orgs are on a team plan. GH codecov/engineering-team#685 * feat: Grab flags in IndirectChangesTable and pass along with request (#2335) Update indirect changes tab on the commit detail page to grab flags from the url params and pass along as query args. GH codecov/engineering-team#348 * feat: Update CommitDetailPage FilesChangedTable to pass along flags (#2334) Update the files changed tab on the commit detail page to grab flags url param and pass along as query args. GH codecov/engineering-team#347 * ref: Update TOS to work for service less users. (#2321) * Update with service less requests * Make sure hook supports service less * feat: Add Flag MultiSelect to CommitPageTabs (#2303) Add a feature flagged multi select to the CommitPageTabs component. GH codecov/engineering-team#344 * Add patch column to pulls table (#2308) * feat: add patch column to the pulls list page * uncomment development settings * feat: Create Team Plan Table for the Files Changed Table on the Commit Detail Page (#2309) Create new commit fetching hooks for the team plan, as well as creating a new table for files changed tab on the commit detail page for the new team plan. GH codecov/engineering-team#633 * Setup pull request page to pass around selected flags (#2282) * feat: setup pull request page to pass around selected flags in links * Feedback, fix passing links to files+folders, additional testing * fix file explorer test failing on href match due to new query param pass through * airplane commit, cant check local dev server: Resolve merge issues / tests + unify codebases missed of commitSHA and commitSha to just commitSha * Prevent multislect from collapsing + wire up PR details page to pass through flags links * Fix accidental removal of ref on usePrefetchPullFileEntry * Add patch column to pulls table (#2308) * feat: add patch column to the pulls list page * uncomment development settings * feat: Create Team Plan Table for the Files Changed Table on the Commit Detail Page (#2309) Create new commit fetching hooks for the team plan, as well as creating a new table for files changed tab on the commit detail page for the new team plan. GH codecov/engineering-team#633 --------- Co-authored-by: Adrian <adrian@codecov.io> Co-authored-by: nicholas-codecov <nicholas.deschenes@sentry.io> * chore: Remove segment from frontend (#2314) * Update with tests * test with support service less * adjust logic to handle original route * it's fine it works with no providers --------- Co-authored-by: nicholas-codecov <nicholas.deschenes@sentry.io> Co-authored-by: Adrian <adrian@codecov.io> Co-authored-by: Terry <87824812+terry-codecov@users.noreply.github.com> * restructure folders anticipating second header component for team tier (#2340) * feat: add hook for commit detail page team tier (#2341) * build: Update PostCSS (#2346) Update PostCSS dependency. * Migrate TextInput to TypeScript (#2342) * Migrate textinput to TS * Add story * formatting * organize imports * Connect flag selector to flags filter on PR details page (#2343) * feat: Update impacted files resolver for use pull, connect the flag selector to the api. * update missing logic as requested + unknown flags message to be aligned with repo overview design * Noticed the changing the pull query broke impacted files while smoke testing, dupicated the same compatibility work for the new resolver. * Refactor to use a impacted files enum as requested. * fix: Attempting to fix CommitDetailPage and RepoPage Tests (#2350) Addressing flaky tests in CommitDetailPage and RepoPage. * Add patch section commit detail page team tier (#2344) * restructure folders anticipating second header component for team tier * feat: add patch coverage section to commit detail page for team tier customer * fix: rename HeaderDefault to HeaderTeam for team file * Convert Sparkline to typescript (#2347) * Convert sparkline to typescript * Consistent type defs * better variable names * use enum * quick fixes * Update use memo * Update tests with getSortingOption * pull out the function of the test block --------- Co-authored-by: Joe Becher <joe@codecov.io> Co-authored-by: Adrian <adrian@codecov.io> Co-authored-by: nicholas-codecov <nicholas.deschenes@sentry.io> Co-authored-by: Terry <87824812+terry-codecov@users.noreply.github.com> Co-authored-by: Rohit Vinnakota <148245014+rohitvinnakota-codecov@users.noreply.github.com>
Description
We are displaying a variant header for customers in the team tier. This PR adds a new header component,
HeaderTeam, to display that, alongside a new hook,usePullHeadDataTeam.Notable Changes
PendoLinkinto its own folder - no code changesHeaderintoHeaderDefaultcomponent - created a folder where the component, test and hooks folder are now - now new logic in anything insideHeaderDefault, just repurposingHeader's previous functionalityHeaderTeam- pretty much a copy ofHeaderDefault+ the patch coverage bitHeaderto choose betweenHeaderDefault(what was previously inHeader, andHeaderTeamusePullHeadDataTeam, pretty much a copy ofusePullHeadDatawith extra fields to query patch coverageScreenshots
Link to Sample Entry
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.