feat: New components not configrued layout (#2752)

src/pages/RepoPage/ComponentsTab/ComponentsTab.jsx

@@ -3,9 +3,7 @@ import { Redirect, useParams } from 'react-router-dom'
 import { SentryRoute } from 'sentry'
 
 import { useRepoSettingsTeam } from 'services/repo'
-import { useRepoFlagsSelect } from 'services/repo/useRepoFlagsSelect'
 import { TierNames, useTier } from 'services/tier'
-import ComponentsNotConfigured from 'shared/ComponentsNotConfigured'
 
 import blurredTable from './assets/blurredTable.png'
 import BackfillBanners from './BackfillBanners/BackfillBanners'
@@ -24,12 +22,7 @@ const showComponentsTable = ({
   return componentsMeasurementsActive && componentsMeasurementsBackfilled
 }
 
-const showComponentsData = ({ componentsData }) => {
-  return componentsData && componentsData?.length > 0
-}
-
 function ComponentsTab() {
-  const { data: componentsData } = useRepoFlagsSelect()
   const { provider, owner, repo } = useParams()
   const { data: tierData } = useTier({ owner, provider })
   const { data: repoSettings } = useRepoSettingsTeam()
@@ -49,10 +42,6 @@ function ComponentsTab() {
     return <TimescaleDisabled />
   }
 
-  if (!showComponentsData({ componentsData })) {
-    return <ComponentsNotConfigured />
-  }
-
   return (
     <div className="mx-4 flex flex-col gap-4 md:mx-0">
       <Header

src/pages/RepoPage/ComponentsTab/ComponentsTab.spec.jsx

@@ -310,23 +310,6 @@ describe('Components Tab', () => {
     })
   })
 
-  describe('when rendered with no components', () => {
-    beforeEach(() => {
-      setup({
-        data: backfillDataNotStarted,
-        flags: [[], []],
-      })
-    })
-
-    it('renders empty state message', async () => {
-      render(<ComponentsTab />, { wrapper })
-      const componentsText = await screen.findByText(
-        /The Components feature is not yet configured/
-      )
-      expect(componentsText).toBeInTheDocument()
-    })
-  })
-
   describe('when rendered without timescale enabled', () => {
     beforeEach(() => {
       setup({

src/pages/RepoPage/ComponentsTab/Header/Header.jsx

@@ -12,7 +12,6 @@ import Icon from 'ui/Icon'
 import MultiSelect from 'ui/MultiSelect'
 import Select from 'ui/Select'
 
-
 const Header = ({ controlsDisabled, children }) => {
   const [selectedComponents, setSelectedComponents] = useState([])
   const [search, setSearch] = useState()

src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx

@@ -341,13 +341,11 @@ describe('ComponentsTable', () => {
         setup({ noData: true })
       })
 
-      it('renders expected empty state message', async () => {
+      it('renders expected no data message', async () => {
         render(<ComponentsTable />, { wrapper: wrapper() })
 
-        const errorMessage = await screen.findByText(
-          /There was a problem getting components data/
-        )
-        expect(errorMessage).toBeInTheDocument()
+        const noData = await screen.findByText(/No data to display/)
+        expect(noData).toBeInTheDocument()
       })
     })
 

src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx

@@ -14,6 +14,7 @@ import { useInView } from 'react-intersection-observer'
 import { useParams } from 'react-router-dom'
 
 import { useRepoConfig } from 'services/repo/useRepoConfig'
+import ComponentsNotConfigured from 'shared/ComponentsNotConfigured'
 import { determineProgressColor } from 'shared/utils/determineProgressColor'
 import A from 'ui/A'
 import CoverageProgress from 'ui/CoverageProgress'
@@ -309,9 +310,7 @@ function ComponentsTable() {
       />
       {!tableData?.length && !isLoading && (
         <p className="flex flex-1 justify-center">
-          {isSearching
-            ? 'No results found'
-            : 'There was a problem getting components data'}
+          {isSearching ? 'No results found' : <ComponentsNotConfigured />}
         </p>
       )}
       {isFetchingNextPage ? <Loader /> : null}

src/shared/ComponentsNotConfigured/ComponentsNotConfigured.spec.tsx

@@ -12,30 +12,20 @@ describe('ComponentsNotConfigured', () => {
   )
 
   describe('when rendered', () => {
-    it('shows message', () => {
+    it('renders the no data message', () => {
       render(<ComponentsNotConfigured />, { wrapper })
-      expect(
-        screen.getByText(/The Components feature is not yet configured/)
-      ).toBeInTheDocument()
-    })
 
-    it('renders link', () => {
-      render(<ComponentsNotConfigured />, { wrapper })
-      const componentssAnchor = screen.getByRole('link', {
-        name: /help your team today/i,
-      })
-      expect(componentssAnchor).toHaveAttribute(
-        'href',
-        'https://docs.codecov.com/docs/components'
-      )
+      const noDataMessage = screen.getByText('No data to display')
+      expect(noDataMessage).toBeInTheDocument()
     })
 
-    it('renders empty state image', () => {
+    it('renders the configure components button', () => {
       render(<ComponentsNotConfigured />, { wrapper })
-      const componentsMarketingImg = screen.getByRole('img', {
-        name: /Components feature not configured/,
+
+      const configureComponentsButton = screen.getByRole('link', {
+        name: 'Get started with components external-link.svg',
       })
-      expect(componentsMarketingImg).toBeInTheDocument()
+      expect(configureComponentsButton).toBeInTheDocument()
     })
   })
 })

src/shared/ComponentsNotConfigured/ComponentsNotConfigured.tsx

@@ -1,25 +1,24 @@
-import componentManagement from 'assets/flagManagement.svg'
-import A from 'ui/A'
+import Button from 'ui/Button'
 
 function ComponentsNotConfigured() {
   return (
-    <div className="mt-8 flex flex-col items-center justify-center gap-2 text-base text-ds-gray-octonary">
-      <div className="flex min-w-[60%] flex-col justify-center gap-2 text-center">
-        <img
-          alt="Components feature not configured"
-          className="mx-auto mb-8 w-screen"
-          src={componentManagement}
-        />
-        <span className="font-semibold">
-          The Components feature is not yet configured{' '}
-        </span>
-        <span>
-          Learn how components can{' '}
-          <A hook="components" to={{ pageName: 'components' }} isExternal>
-            help your team today
-          </A>
-          .
-        </span>
+    <div className="mt-12 grid gap-4">
+      <div className="flex flex-col items-center gap-1">
+        <p>No data to display</p>
+        <p>
+          You will need to configure components in your yaml file to view the
+          list of your components here.
+        </p>
+      </div>
+      <div className="flex flex-col items-center">
+        <Button
+          hook="configure-components"
+          variant="primary"
+          disabled={false}
+          to={{ pageName: 'components' }}
+        >
+          Get started with components
+        </Button>
       </div>
     </div>
   )