GitHub app installation banner update and CTA location update

src/pages/OwnerPage/Header/HeaderBanners/GithubConfigBanner/GithubConfigBanner.jsx

@@ -20,14 +20,17 @@ const GithubConfigBanner = () => {
             Configure{' '}
             <A
               data-testid="codecovGithubApp-link"
-              to={{ pageName: 'codecovGithubApp' }}
+              to={{ pageName: 'codecovGithubAppSelectTarget' }}
             >
               Codecov&apos;s GitHub app
             </A>
           </h2>
         </BannerHeading>
         <BannerContent>
-          <p>Codecov will use the integration to post statuses and comments.</p>
+          <p>
+            Enable status posts, comments, improved rate limit handling, and
+            private repo management.
+          </p>
         </BannerContent>
       </Banner>
     </div>

src/pages/OwnerPage/Header/HeaderBanners/GithubConfigBanner/GithubConfigBanner.spec.jsx

@@ -30,7 +30,7 @@ describe('GithubConfigBanner', () => {
       })
 
       const body = screen.queryByText(
-        /Codecov will use the integration to post statuses and comments./
+        /Enable status posts, comments, improved rate limit handling, and private repo management./
       )
       expect(body).toBeInTheDocument()
     })
@@ -50,7 +50,7 @@ describe('GithubConfigBanner', () => {
       })
 
       const body = screen.queryByText(
-        /Codecov will use the integration to post statuses and comments./
+        /Enable status posts, comments, improved rate limit handling, and private repo management./
       )
       expect(body).not.toBeInTheDocument()
     })

src/services/navigation/useNavLinks/useStaticNavLinks.js

@@ -159,6 +159,12 @@ export function useStaticNavLinks() {
       text: 'Codecov Github App',
       openNewTab: true,
     },
+    codecovGithubAppSelectTarget: {
+      path: () => 'https://github.com/apps/codecov/installations/select_target',
+      isExternalLink: true,
+      text: 'Codecov Github App',
+      openNewTab: true,
+    },
     teamBot: {
       path: () => 'https://docs.codecov.com/docs/team-bot',
       isExternalLink: true,

src/services/navigation/useNavLinks/useStaticNavLinks.spec.js

@@ -50,6 +50,7 @@ describe('useStaticNavLinks', () => {
       ${links.uploader}                      | ${'https://docs.codecov.com/docs/codecov-uploader'}
       ${links.integrityCheck}                | ${'https://docs.codecov.com/docs/codecov-uploader#integrity-checking-the-uploader'}
       ${links.codecovGithubApp}              | ${'https://github.com/apps/codecov'}
+      ${links.codecovGithubAppSelectTarget}  | ${'https://github.com/apps/codecov/installations/select_target'}
       ${links.teamBot}                       | ${'https://docs.codecov.com/docs/team-bot'}
       ${links.runtimeInsights}               | ${'https://docs.codecov.com/docs/runtime-insights'}
       ${links.graphAuthorization}            | ${'https://docs.codecov.com/reference/authorization#about-graphs'}

src/ui/ContextSwitcher/ContextSwitcher.jsx

@@ -33,27 +33,6 @@ LoadMoreTrigger.propTypes = {
   intersectionRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 }
 
-function ModalSection({ ModalControl, ModalComponent }) {
-  const [showComponent, setShowComponent] = useState(false)
-  if (ModalControl && ModalComponent) {
-    return (
-      <>
-        <ModalControl onClick={() => setShowComponent(true)} />
-        {showComponent && (
-          <ModalComponent closeFn={() => setShowComponent(false)} />
-        )}
-      </>
-    )
-  }
-
-  return null
-}
-
-ModalSection.propTypes = {
-  ModalComponent: PropTypes.func,
-  ModalControl: PropTypes.func,
-}
-
 function ContextItem({ context, defaultOrgUsername, setToggle, owner }) {
   const { owner: contextOwner, pageName } = context
   const orgUsername = contextOwner?.username
@@ -141,8 +120,6 @@ function ContextSwitcher({
   currentUser,
   isLoading,
   onLoadMore,
-  ModalControl,
-  ModalComponent,
   activeContext,
 }) {
   const { provider } = useParams()
@@ -190,13 +167,18 @@ function ContextSwitcher({
         role="listbox"
         aria-labelledby="listbox-label"
       >
-        <li className="flex justify-between border-b border-ds-gray-secondary px-4 py-3 text-xs font-semibold">
-          <span>Switch context</span>
-          <ModalSection
-            ModalControl={ModalControl}
-            ModalComponent={ModalComponent}
-          />
-        </li>
+        {isGh ? (
+          <li className="flex justify-between border-b border-ds-gray-secondary px-4 py-3">
+            <A to={{ pageName: 'codecovAppInstallation' }}>
+              <Icon name="plus-circle" />
+              Add GitHub organization
+            </A>
+          </li>
+        ) : (
+          <li className="flex justify-between border-b border-ds-gray-secondary px-4 py-3 text-xs font-semibold">
+            <span>Switch context</span>
+          </li>
+        )}
         {contexts.map((context) => (
           <ContextItem
             defaultOrgUsername={defaultOrgUsername}
@@ -212,14 +194,6 @@ function ContextSwitcher({
           intersectionRef={intersectionRef}
           onLoadMore={onLoadMore}
         />
-        {isGh && (
-          <li className="px-4 py-2 text-ds-blue-darker">
-            <A to={{ pageName: 'codecovAppInstallation' }}>
-              <Icon name="plus-circle" />
-              Add GitHub organization
-            </A>
-          </li>
-        )}
       </ul>
     </div>
   )
@@ -239,14 +213,12 @@ ContextSwitcher.propTypes = {
   currentUser: PropTypes.shape({
     defaultOrgUsername: PropTypes.string,
   }),
-  onLoadMore: PropTypes.func,
-  isLoading: PropTypes.bool,
-  ModalComponent: PropTypes.func,
-  ModalControl: PropTypes.func,
   activeContext: PropTypes.shape({
     avatarUrl: PropTypes.string.isRequired,
     username: PropTypes.string.isRequired,
   }),
+  onLoadMore: PropTypes.func,
+  isLoading: PropTypes.bool,
 }
 
 export default ContextSwitcher

src/ui/ContextSwitcher/ContextSwitcher.spec.jsx

@@ -30,11 +30,6 @@ afterAll(() => {
   server.close()
 })
 
-// eslint-disable-next-line react/prop-types
-const ModalComponent = ({ closeFn }) => <div onClick={closeFn}>component</div>
-// eslint-disable-next-line react/prop-types
-const ModalControl = ({ onClick }) => <button onClick={onClick}>display</button>
-
 const wrapper =
   (initialEntries = '/gh') =>
   ({ children }) =>
@@ -104,8 +99,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -156,8 +149,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -217,8 +208,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -282,8 +271,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -340,8 +327,6 @@ describe('ContextSwitcher', () => {
             currentUser={{
               defaultOrgUsername: 'spotify',
             }}
-            ModalComponent={ModalComponent}
-            ModalControl={ModalControl}
             src="imageUrl"
             isLoading={true}
             error={null}
@@ -395,8 +380,6 @@ describe('ContextSwitcher', () => {
             currentUser={{
               defaultOrgUsername: 'spotify',
             }}
-            ModalComponent={ModalComponent}
-            ModalControl={ModalControl}
             src="imageUrl"
             isLoading={false}
             error={null}
@@ -456,8 +439,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -475,11 +456,48 @@ describe('ContextSwitcher', () => {
     })
   })
 
+  describe('when not on gh provider', () => {
+    afterEach(() => jest.restoreAllMocks())
+
+    it('does not render the add github org text', async () => {
+      setup()
+      render(
+        <ContextSwitcher
+          activeContext={{
+            username: 'laudna',
+            avatarUrl: 'http://127.0.0.1/avatar-url',
+          }}
+          contexts={[
+            {
+              owner: {
+                username: 'laudna',
+                avatarUrl: 'https://bitbucket.com/laudna.png?size=40',
+              },
+              pageName: 'provider',
+            },
+          ]}
+          currentUser={{
+            defaultOrgUsername: 'spotify',
+          }}
+          src="imageUrl"
+          isLoading={false}
+          error={null}
+        />,
+        {
+          wrapper: wrapper('/bb'),
+        }
+      )
+
+      const addGhOrgText = screen.queryByText(/Add GitHub organization/)
+      expect(addGhOrgText).not.toBeInTheDocument()
+    })
+  })
+
   describe('when custom modal component is passed', () => {
     afterEach(() => jest.restoreAllMocks())
 
     it('renders the modal component', async () => {
-      const { user } = setup()
+      setup()
       render(
         <ContextSwitcher
           activeContext={{
@@ -512,8 +530,6 @@ describe('ContextSwitcher', () => {
           currentUser={{
             defaultOrgUsername: 'spotify',
           }}
-          ModalComponent={ModalComponent}
-          ModalControl={ModalControl}
           src="imageUrl"
           isLoading={false}
           error={null}
@@ -522,16 +538,6 @@ describe('ContextSwitcher', () => {
           wrapper: wrapper(),
         }
       )
-
-      const modalControlButton = await screen.findByText('display')
-      expect(modalControlButton).toBeInTheDocument()
-      await user.click(modalControlButton)
-
-      const modalComponentText = await screen.findByText('component')
-      expect(modalComponentText).toBeInTheDocument()
-      await user.click(modalComponentText)
-
-      await waitFor(() => expect(modalComponentText).not.toBeInTheDocument())
     })
 
     describe('when user clicks on an org', () => {