Merge branch 'rvinnakota/refactor-commitdetailfileexp' of https://git…

…hub.com/codecov/gazebo into rvinnakota/refactor-commitdetailfileexp

src/old_ui/Card/Card.jsx

@@ -1,9 +1,48 @@
 import cs from 'classnames'
+import PropTypes from 'prop-types'
 
-const cardClassName = 'border border-ds-gray-secondary bg-white rounded-md '
+const baseStyles = {
+  header: 'text-2xl bold mb-4',
+  footer: 'border-t border-ds-gray-secondary p-4',
+}
+
+// TODO: Make a card variant that creates a divisor bw entries, see Card from PullRequestPage
+const variantClasses = {
+  default: 'border border-ds-gray-secondary rounded p-6',
+  large: 'border border-ds-gray-secondary rounded p-12',
+  upgradeForm: 'border border-ds-gray-secondary rounded p-12',
+  cancel: 'border border-codecov-red px-12 py-10',
+  old: 'border border-ds-gray-secondary bg-white rounded-md',
+}
+
+// TODO: enhance as per https://github.com/codecov/gazebo/pull/1433#discussion_r918864691
+function Card({
+  children,
+  header,
+  footer,
+  variant = 'default',
+  className = '',
+}) {
+  return (
+    <article className={cs(variantClasses[variant], className)}>
+      {header && <div className={baseStyles.header}>{header}</div>}
+      {children}
+      {footer && <div className={baseStyles.footer}>{footer}</div>}
+    </article>
+  )
+}
 
-function Card({ children, className = '' }) {
-  return <div className={cs(cardClassName, className)}>{children}</div>
+Card.propTypes = {
+  header: PropTypes.node,
+  footer: PropTypes.node,
+  variant: PropTypes.oneOf([
+    'default',
+    'large',
+    'cancel',
+    'upgradeForm',
+    'old',
+  ]),
+  className: PropTypes.string,
 }
 
 export default Card

src/old_ui/Card/Card.spec.jsx

@@ -17,4 +17,26 @@ describe('Card', () => {
       expect(tab).toBeInTheDocument()
     })
   })
+
+  describe('when rendered with header', () => {
+    beforeEach(() => {
+      setup({ children: 'hello', header: <h1>hola</h1> })
+    })
+
+    it('renders the header', () => {
+      const tab = screen.getByText(/hola/)
+      expect(tab).toBeInTheDocument()
+    })
+  })
+
+  describe('when rendered with footer', () => {
+    beforeEach(() => {
+      setup({ children: 'hello', footer: <h1>bonjour</h1> })
+    })
+
+    it('renders the header', () => {
+      const tab = screen.getByText(/bonjour/)
+      expect(tab).toBeInTheDocument()
+    })
+  })
 })

src/old_ui/Modal/Modal.jsx

@@ -15,7 +15,7 @@ function Modal({ isOpen, onClose, children, title, ...rest }) {
       overlayClassName="fixed inset-0 bg-gray-900 bg-opacity-75"
       {...rest}
     >
-      <Card className="w-1/2 p-8">
+      <Card variant="old" className="w-1/2 p-8">
         <header className="mb-4 flex items-center justify-between">
           <h2 className="text-2xl">{title}</h2>
           <Button variant="text" onClick={onClose} aria-label="Close">

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
+import Card from 'old_ui/Card'
 import A from 'ui/A'
-import Card from 'ui/Card'
 
 import ErasePersonalAccountButton from './ErasePersonalAccountButton'
 

src/pages/AccountSettings/tabs/Profile/DeletionCard/DeletionCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-import Card from 'ui/Card'
+import Card from 'old_ui/Card'
 
 import ErasePersonalAccountButton from './ErasePersonalAccountButton'
 

src/pages/AccountSettings/tabs/Profile/NameEmailCard/NameEmailCard.jsx

@@ -55,7 +55,7 @@ function NameEmailCard({ currentUser, provider }) {
   }
 
   return (
-    <Card className="p-10">
+    <Card variant="old" className="p-10">
       {/* Define the field first and the submit/title after so the TAB order makes sense for accessibility but we reverse the two so it looks like the correct UI */}
       <form onSubmit={handleSubmit(submit)} className="flex flex-col gap-8">
         <div className="flex items-center justify-between">

src/pages/PlanPage/subRoutes/CancelPlanPage/subRoutes/DowngradePlan/DowngradePlan.jsx

@@ -1,8 +1,8 @@
 import { useLayoutEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
+import Card from 'old_ui/Card'
 import { useAccountDetails } from 'services/account'
-import Card from 'ui/Card'
 import Icon from 'ui/Icon'
 
 import CancelButton from './CancelButton'

src/pages/PlanPage/subRoutes/InvoicesPage/InvoiceCard.jsx

@@ -20,7 +20,10 @@ function InvoiceCard({ invoice }) {
   const { invoiceDetailsPage } = useNavLinks()
 
   return (
-    <Card className="mt-4 flex items-center justify-between px-4 py-6 text-sm">
+    <Card
+      variant="old"
+      className="mt-4 flex items-center justify-between px-4 py-6 text-sm"
+    >
       <div>
         Invoice on {format(fromUnixTime(invoice.created), 'MMMM do yyyy')}
       </div>

src/pages/RepoPage/CoverageTab/subroute/Sunburst/hooks/useSunburstChart.js

@@ -1,4 +1,5 @@
-import { useParams } from 'react-router-dom'
+import qs from 'qs'
+import { useLocation , useParams } from 'react-router-dom'
 
 import { useSunburstCoverage } from 'services/charts'
 import { useRepoOverview } from 'services/repo'
@@ -11,12 +12,26 @@ const useSunburstChart = () => {
     owner,
   })
 
+  const location = useLocation()
+  const queryParams = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+    depth: 1,
+  })
+
+  const flags = queryParams?.flags
+  const components = queryParams?.components
+
   const currentBranch = branch
     ? decodeURIComponent(branch)
     : overview?.defaultBranch
 
   return useSunburstCoverage(
-    { provider, owner, repo, query: { branch: currentBranch } },
+    {
+      provider,
+      owner,
+      repo,
+      query: { branch: currentBranch, flags, components },
+    },
     {
       enabled: !!currentBranch,
       suspense: false,

src/pages/RepoPage/CoverageTab/subroute/Sunburst/hooks/useSunburstChart.spec.js

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, rest } from 'msw'
 import { setupServer } from 'msw/node'
+import qs from 'qs'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import useSunburstChart from './useSunburstChart'
@@ -55,6 +56,9 @@ const overviewMock = {
 
 describe('useSunburstChart', () => {
   const mockDetectedBranch = jest.fn()
+  const mockDetectedFlags = jest.fn()
+  const mockDetectedComponents = jest.fn()
+
   function setup({
     repoOverviewData,
     coverageTreeRes,
@@ -68,6 +72,9 @@ describe('useSunburstChart', () => {
         '/internal/:provider/:owner/:repo/coverage/tree',
         (req, res, ctx) => {
           mockDetectedBranch(req.url.searchParams.get('branch'))
+          mockDetectedFlags(req.url.searchParams.getAll('flags'))
+          mockDetectedComponents(req.url.searchParams.get('components'))
+
           return res(
             ctx.status(coverageTreeStatus),
             ctx.json({ data: coverageTreeRes })
@@ -164,4 +171,32 @@ describe('useSunburstChart', () => {
       )
     })
   })
+
+  describe('if flags and components are in the url', () => {
+    beforeEach(() => {
+      setup({
+        repoOverviewData: overviewMock,
+        coverageTreeRes: treeMock,
+        coverageTreeStatus: 200,
+      })
+    })
+    afterEach(() => jest.resetAllMocks())
+
+    it('query uses flags and components', async () => {
+      const queryString = qs.stringify(
+        { flags: ['flag-1', 'flag-2'], components: ['components-1'] },
+        { addQueryPrefix: true }
+      )
+      renderHook(() => useSunburstChart(), {
+        wrapper: wrapper([`/critical-role/c3/bells-hells${queryString}`]),
+      })
+
+      await waitFor(() =>
+        expect(mockDetectedFlags).toHaveBeenCalledWith(['flag-1', 'flag-2'])
+      )
+      await waitFor(() =>
+        expect(mockDetectedComponents).toHaveBeenCalledWith('components-1')
+      )
+    })
+  })
 })

src/services/charts/useSunburstCoverage.js → src/services/charts/useSunburstCoverage.ts

@@ -3,18 +3,36 @@ import { useQuery } from '@tanstack/react-query'
 import Api from 'shared/api'
 import { providerToInternalProvider } from 'shared/utils'
 
-function getSunburstCoverage({ provider, owner, repo }) {
+interface SunburstCoverageArgs {
+  provider: string
+  owner: string
+  repo: string
+  query?: {
+    branch?: string
+    flags?: string[]
+    components?: string[]
+  }
+  signal?: AbortSignal
+}
+
+function getSunburstCoverage({ provider, owner, repo }: SunburstCoverageArgs) {
   const internalProvider = providerToInternalProvider(provider)
   return `/${internalProvider}/${owner}/${repo}/coverage/tree`
 }
 
-function fetchSunburstCoverage({ provider, owner, query, repo, signal }) {
+function fetchSunburstCoverage({
+  provider,
+  owner,
+  repo,
+  query,
+  signal,
+}: SunburstCoverageArgs) {
   const path = getSunburstCoverage({ provider, owner, repo })
   return Api.get({ path, provider, query, signal })
 }
 
 export function useSunburstCoverage(
-  { provider, owner, repo, query },
+  { provider, owner, repo, query }: SunburstCoverageArgs,
   opts = {}
 ) {
   return useQuery({