616 add patch setction pr page team tier

src/pages/PullRequestPage/Header/Header.jsx

@@ -1,71 +1,23 @@
-import cs from 'classnames'
-import capitalize from 'lodash/capitalize'
 import { useParams } from 'react-router-dom'
 
-import { formatTimeToNow } from 'shared/utils/dates'
-import { getProviderPullURL } from 'shared/utils/provider'
-import A from 'ui/A'
-import CIStatusLabel from 'ui/CIStatus'
-import Icon from 'ui/Icon'
+import { TierNames, useTier } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
 
-import { usePullHeadData } from './hooks'
-import PendoLink from './PendoLink'
-
-const pullStateToColor = {
-  OPEN: 'bg-ds-primary-green',
-  CLOSED: 'bg-ds-primary-red',
-  MERGED: 'bg-ds-primary-purple',
-}
+import HeaderDefault from './HeaderDefault'
+import HeaderTeam from './HeaderTeam'
 
 function Header() {
-  const { provider, owner, repo, pullId } = useParams()
-  const { data } = usePullHeadData({ provider, owner, repo, pullId })
+  const { provider, owner } = useParams()
+  const { data: tierData } = useTier({ provider, owner })
+  const { multipleTiers } = useFlags({
+    multipleTiers: false,
+  })
+
+  if (multipleTiers && tierData === TierNames.TEAM) {
+    return <HeaderTeam />
+  }
 
-  return (
-    <div className="flex flex-col justify-between gap-2 border-b border-ds-gray-secondary pb-2 text-xs md:flex-row">
-      <div>
-        <h1 className="flex items-center gap-2 text-lg font-semibold">
-          {data?.pull?.title}
-          <span
-            className={cs(
-              'text-white font-bold px-3 py-0.5 text-xs rounded',
-              pullStateToColor[data?.pull?.state]
-            )}
-          >
-            {capitalize(data?.pull?.state)}
-          </span>
-        </h1>
-        <p className="flex items-center gap-2">
-          <span>
-            {data?.pull?.updatestamp &&
-              formatTimeToNow(data?.pull?.updatestamp)}{' '}
-            <span className="bold">{data?.pull?.author?.username}</span>{' '}
-            authored{' '}
-            {data?.pull?.pullId && (
-              <A
-                href={getProviderPullURL({
-                  provider,
-                  owner,
-                  repo,
-                  pullId: data?.pull?.pullId,
-                })}
-                hook="provider-pr-link"
-                isExternal={true}
-              >
-                #{data?.pull?.pullId}
-              </A>
-            )}
-          </span>
-          <CIStatusLabel ciPassed={data?.pull?.head?.ciPassed} />
-          <span className="flex items-center">
-            <Icon name="branch" variant="developer" size="sm" />
-            {data?.pull?.head?.branchName}
-          </span>
-        </p>
-      </div>
-      <PendoLink />
-    </div>
-  )
+  return <HeaderDefault />
 }
 
 export default Header

src/pages/PullRequestPage/Header/Header.spec.jsx

@@ -1,34 +1,18 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { TierNames } from 'services/tier'
+import { useFlags } from 'shared/featureFlags'
+
 import Header from './Header'
 
+jest.mock('./HeaderDefault', () => () => 'Default Header')
+jest.mock('./HeaderTeam', () => () => 'Team Header')
 jest.mock('shared/featureFlags')
 
-const mockPullData = {
-  owner: {
-    repository: {
-      __typename: 'Repository',
-      pull: {
-        pullId: 1,
-        title: 'Cool Pull Request',
-        state: 'OPEN',
-        author: {
-          username: 'cool-user',
-        },
-        head: {
-          branchName: 'cool-branch',
-          ciPassed: true,
-        },
-        updatestamp: '2020-01-01T12:00:00.000000',
-      },
-    },
-  },
-}
-
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -55,35 +39,56 @@ afterAll(() => {
 })
 
 describe('Header', () => {
-  function setup() {
+  function setup({ multipleTiers = false } = { multipleTiers: false }) {
+    useFlags.mockReturnValue({
+      multipleTiers,
+    })
+
     server.use(
-      graphql.query('PullHeadData', (req, res, ctx) =>
-        res(ctx.status(200), ctx.data(mockPullData))
-      )
+      graphql.query('OwnerTier', (req, res, ctx) => {
+        if (multipleTiers) {
+          return res(
+            ctx.status(200),
+            ctx.data({ owner: { plan: { tierName: TierNames.TEAM } } })
+          )
+        }
+        return res(
+          ctx.status(200),
+          ctx.data({ owner: { plan: { tierName: TierNames.PRO } } })
+        )
+      })
     )
   }
 
-  describe('when rendered', () => {
+  describe('when rendered and customer is not team tier', () => {
     beforeEach(() => {
-      setup()
+      setup({ multipleTiers: false })
     })
 
-    it('renders the pr overview', async () => {
+    it('renders the default header component', async () => {
       render(<Header />, { wrapper })
 
-      await waitFor(() => queryClient.isFetching)
-      await waitFor(() => !queryClient.isFetching)
+      const defaultHeader = await screen.findByText(/Default Header/)
+      expect(defaultHeader).toBeInTheDocument()
 
-      const heading = await screen.findByRole('heading', {
-        name: /Cool Pull Request/,
-      })
-      expect(heading).toBeInTheDocument()
+      const teamHeader = screen.queryByText(/Team Header/)
+      expect(teamHeader).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when rendered and customer has team tier', () => {
+    beforeEach(() => {
+      setup({ multipleTiers: true })
+    })
+
+    it('renders the team header component', async () => {
+      render(<Header />, { wrapper })
 
-      const open = await screen.findByText(/open/i)
-      expect(open).toBeInTheDocument()
+      const teamHeader = await screen.findByText(/Team Header/)
+      expect(teamHeader).toBeInTheDocument()
 
-      const prNumber = await screen.findByText(/#1/i)
-      expect(prNumber).toBeInTheDocument()
+      const defaultHeader = screen.queryByText(/Default Header/)
+      expect(defaultHeader).not.toBeInTheDocument()
     })
   })
 })

src/pages/PullRequestPage/Header/HeaderDefault/HeaderDefault.jsx

@@ -0,0 +1,66 @@
+import cs from 'classnames'
+import capitalize from 'lodash/capitalize'
+import { useParams } from 'react-router-dom'
+
+import { formatTimeToNow } from 'shared/utils/dates'
+import { getProviderPullURL } from 'shared/utils/provider'
+import A from 'ui/A'
+import CIStatusLabel from 'ui/CIStatus'
+import Icon from 'ui/Icon'
+
+import { usePullHeadData } from './hooks'
+
+import { pullStateToColor } from '../constants'
+import PendoLink from '../PendoLink'
+
+function HeaderDefault() {
+  const { provider, owner, repo, pullId } = useParams()
+  const { data } = usePullHeadData({ provider, owner, repo, pullId })
+
+  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">
+      <div>
+        <h1 className="flex items-center gap-2 text-lg font-semibold">
+          {pull?.title}
+          <span
+            className={cs(
+              'text-white font-bold px-3 py-0.5 text-xs rounded',
+              pullStateToColor[pull?.state]
+            )}
+          >
+            {capitalize(pull?.state)}
+          </span>
+        </h1>
+        <p className="flex items-center gap-2">
+          <span>
+            {pull?.updatestamp && formatTimeToNow(pull?.updatestamp)}{' '}
+            <span className="bold">{pull?.author?.username}</span> authored{' '}
+            {pull?.pullId && (
+              <A
+                href={getProviderPullURL({
+                  provider,
+                  owner,
+                  repo,
+                  pullId: pull?.pullId,
+                })}
+                hook="provider-pr-link"
+                isExternal={true}
+              >
+                #{pull?.pullId}
+              </A>
+            )}
+          </span>
+          <CIStatusLabel ciPassed={pull?.head?.ciPassed} />
+          <span className="flex items-center">
+            <Icon name="branch" variant="developer" size="sm" />
+            {pull?.head?.branchName}
+          </span>
+        </p>
+      </div>
+      <PendoLink />
+    </div>
+  )
+}
+export default HeaderDefault

src/pages/PullRequestPage/Header/HeaderDefault/HeaderDefault.spec.jsx

@@ -0,0 +1,87 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import Header from './HeaderDefault'
+
+const mockPullData = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      pull: {
+        pullId: 1,
+        title: 'Cool Pull Request',
+        state: 'OPEN',
+        author: {
+          username: 'cool-user',
+        },
+        head: {
+          branchName: 'cool-branch',
+          ciPassed: true,
+        },
+        updatestamp: '2020-01-01T12:00:00.000000',
+      },
+    },
+  },
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const server = setupServer()
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/test-org/test-repo/pull/12']}>
+      <Route path="/:provider/:owner/:repo/pull/:pullId">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+describe('Header', () => {
+  function setup() {
+    server.use(
+      graphql.query('PullHeadData', (req, res, ctx) =>
+        res(ctx.status(200), ctx.data(mockPullData))
+      )
+    )
+  }
+
+  describe('when rendered', () => {
+    beforeEach(() => {
+      setup()
+    })
+
+    it('renders the pr overview', async () => {
+      render(<Header />, { wrapper })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const heading = await screen.findByRole('heading', {
+        name: /Cool Pull Request/,
+      })
+      expect(heading).toBeInTheDocument()
+
+      const open = await screen.findByText(/open/i)
+      expect(open).toBeInTheDocument()
+
+      const prNumber = await screen.findByText(/#1/i)
+      expect(prNumber).toBeInTheDocument()
+    })
+  })
+})

src/pages/PullRequestPage/Header/HeaderDefault/index.js

@@ -0,0 +1 @@
+export { default } from './HeaderDefault'