From f560608dc1d2f3e764446bb86461ecd91175b2c1 Mon Sep 17 00:00:00 2001
From: JerrySentry <jerry.feng@sentry.io>
Date: Thu, 25 Apr 2024 16:13:03 -0400
Subject: [PATCH] Assortment of UI changes for coverage over time for
 components

---
 .../ComponentsTab/ComponentsTable.spec.jsx    |  3 ++
 .../routes/ComponentsTab/ComponentsTable.tsx  | 13 ++++-
 .../routes/ComponentsTab/hooks/query.ts       |  3 ++
 .../hooks/useComponentComparison.spec.tsx     |  6 +++
 .../hooks/useComponentComparison.tsx          |  5 ++
 .../SyncingBanner/SyncingBanner.spec.tsx      |  2 +-
 .../SyncingBanner/SyncingBanner.tsx           |  7 ++-
 .../TriggerSyncBanner/TriggerSyncBanner.tsx   |  5 +-
 .../BranchSelector/BranchSelector.spec.tsx    | 14 +++---
 .../Header/BranchSelector/BranchSelector.tsx  | 30 +++++++++--
 .../RepoPage/ComponentsTab/Header/Header.tsx  |  8 +--
 .../ComponentsTable/ComponentsTable.spec.tsx  |  8 ++-
 .../ComponentsTable/ComponentsTable.tsx       | 50 ++++++++++++++++++-
 .../DeleteComponentModal.spec.tsx             | 12 ++---
 .../DeleteComponentModal.tsx                  | 34 +++++++++----
 .../navigation/useNavLinks/useNavLinks.js     |  9 +++-
 src/services/repo/useActivateMeasurements.tsx |  9 +++-
 .../ComponentsNotConfigured.tsx               |  2 +-
 18 files changed, 175 insertions(+), 45 deletions(-)

diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.spec.jsx b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.spec.jsx
index 26d4b4697e..1cfc06835b 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.spec.jsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.spec.jsx
@@ -57,6 +57,9 @@ const mockPull = {
             },
           ],
         },
+        head: {
+          branchName: 'abc',
+        },
       },
     },
   },
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.tsx b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.tsx
index 43a9991152..2163a95615 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/ComponentsTable.tsx
@@ -10,6 +10,7 @@ import qs, { type ParsedQs } from 'qs'
 import { useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 
+import A from 'ui/A'
 import Spinner from 'ui/Spinner'
 import TotalsNumber from 'ui/TotalsNumber'
 
@@ -132,7 +133,17 @@ export default function ComponentsTable() {
 
   return (
     <>
-      <div className="my-2 flex flex-row-reverse">
+      <div className="flex w-full items-center justify-between px-5 py-2">
+        <A
+          hook="components"
+          to={{
+            pageName: 'componentsTab',
+            options: { branch: data?.pull?.head?.branchName },
+          }}
+          isExternal
+        >
+          View components over time
+        </A>
         <ComponentsSelector />
       </div>
       <div className="tableui">
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/query.ts b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/query.ts
index 6c48f14ffb..bc87cc1930 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/query.ts
+++ b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/query.ts
@@ -40,6 +40,9 @@ export const query = `
                 message
               }
             }
+            head {
+              branchName
+            }
           }
         }
         ... on NotFoundError {
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.spec.tsx b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.spec.tsx
index 5c03551b39..c8699d1a7a 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.spec.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.spec.tsx
@@ -28,6 +28,9 @@ const mockResponse = {
             },
           ],
         },
+        head: {
+          branchName: 'abc',
+        },
       },
     },
   },
@@ -139,6 +142,9 @@ describe('useComponentComparison', () => {
                   },
                 ],
               },
+              head: {
+                branchName: 'abc',
+              },
             },
           })
         )
diff --git a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.tsx b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.tsx
index 80d5a77d5d..89788acac5 100644
--- a/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.tsx
+++ b/src/pages/PullRequestPage/PullCoverage/routes/ComponentsTab/hooks/useComponentComparison.tsx
@@ -51,6 +51,11 @@ const RepositorySchema = z.object({
         MissingHeadCommitSchema,
         MissingHeadReportSchema,
       ]),
+      head: z
+        .object({
+          branchName: z.string().nullable(),
+        })
+        .nullable(),
     })
     .nullable(),
 })
diff --git a/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.spec.tsx b/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.spec.tsx
index 28a3580e86..855f31f1ef 100644
--- a/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.spec.tsx
@@ -26,7 +26,7 @@ describe('SyncingBanner', () => {
     it('renders heading and content components', () => {
       render(<SyncingBanner />, { wrapper })
       const historicalDataTextLong = screen.getByText(
-        'It might take up to 24 hours to view your data.'
+        'It might take up to 1 hour to view your data.'
       )
       expect(historicalDataTextLong).toBeInTheDocument()
     })
diff --git a/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.tsx b/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.tsx
index 594ba57f19..63e3b75981 100644
--- a/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.tsx
+++ b/src/pages/RepoPage/ComponentsTab/BackfillBanners/SyncingBanner/SyncingBanner.tsx
@@ -1,11 +1,14 @@
 import Spinner from 'ui/Spinner'
 
+import { LoadingTable } from '../../subroute/ComponentsTable/ComponentsTable'
+
 function SyncingBanner() {
   return (
-    <div className="mt-12 grid gap-4">
+    <div className="grid gap-4 pt-4">
+      <LoadingTable></LoadingTable>
       <div className="flex flex-col items-center gap-1">
         <Spinner />
-        <p>It might take up to 24 hours to view your data.</p>
+        <p>It might take up to 1 hour to view your data.</p>
       </div>
     </div>
   )
diff --git a/src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx b/src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
index 3618b71faa..66dd606c6e 100644
--- a/src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
+++ b/src/pages/RepoPage/ComponentsTab/BackfillBanners/TriggerSyncBanner/TriggerSyncBanner.tsx
@@ -3,6 +3,8 @@ import { useParams } from 'react-router-dom'
 import { MEASUREMENT_TYPE, useActivateMeasurements } from 'services/repo'
 import Button from 'ui/Button'
 
+import { LoadingTable } from '../../subroute/ComponentsTable/ComponentsTable'
+
 type URLParams = {
   provider: string
   owner: string
@@ -19,7 +21,8 @@ function TriggerSyncBanner() {
   })
 
   return (
-    <div className="mt-12 grid gap-4">
+    <div className="grid gap-4 pt-4">
+      <LoadingTable></LoadingTable>
       <div className="flex flex-col items-center gap-1">
         <p>No data to display</p>
         <p>You will need to enable components to see related coverage data.</p>
diff --git a/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.spec.tsx b/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.spec.tsx
index 493a293bce..04e3c981b9 100644
--- a/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.spec.tsx
@@ -203,7 +203,7 @@ describe('BranchSelector', () => {
   describe('with populated data', () => {
     it('renders the branch selector', async () => {
       const { queryClient } = setup()
-      render(<BranchSelector />, {
+      render(<BranchSelector isDisabled={false} />, {
         wrapper: wrapper(queryClient),
       })
 
@@ -213,7 +213,7 @@ describe('BranchSelector', () => {
 
     it('renders default branch as selected branch', async () => {
       const { queryClient } = setup()
-      render(<BranchSelector />, {
+      render(<BranchSelector isDisabled={false} />, {
         wrapper: wrapper(queryClient),
       })
 
@@ -226,7 +226,7 @@ describe('BranchSelector', () => {
     describe('user selects a branch', () => {
       it('updates params with selected branch', async () => {
         const { user, queryClient } = setup()
-        render(<BranchSelector />, {
+        render(<BranchSelector isDisabled={false} />, {
           wrapper: wrapper(queryClient),
         })
 
@@ -258,7 +258,7 @@ describe('BranchSelector', () => {
           isIntersecting: true,
         })
 
-        render(<BranchSelector />, {
+        render(<BranchSelector isDisabled={false} />, {
           wrapper: wrapper(queryClient),
         })
 
@@ -281,7 +281,7 @@ describe('BranchSelector', () => {
           isIntersecting: true,
         })
 
-        render(<BranchSelector />, {
+        render(<BranchSelector isDisabled={false} />, {
           wrapper: wrapper(queryClient),
         })
 
@@ -298,7 +298,7 @@ describe('BranchSelector', () => {
   describe('user searches for branch', () => {
     it('calls the api with the search value', async () => {
       const { mockSearching, user, queryClient } = setup()
-      render(<BranchSelector />, {
+      render(<BranchSelector isDisabled={false} />, {
         wrapper: wrapper(queryClient),
       })
 
@@ -319,7 +319,7 @@ describe('BranchSelector', () => {
       const { queryClient } = setup({
         nullOverview: true,
       })
-      render(<BranchSelector />, {
+      render(<BranchSelector isDisabled={false} />, {
         wrapper: wrapper(queryClient),
       })
 
diff --git a/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.tsx b/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.tsx
index a16b25c1d2..f519014896 100644
--- a/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.tsx
+++ b/src/pages/RepoPage/ComponentsTab/Header/BranchSelector/BranchSelector.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom'
 import { Branch, useBranch, useBranches } from 'services/branches'
 import { useLocationParams } from 'services/navigation'
 import { useRepoOverview } from 'services/repo'
+import A from 'ui/A'
 import Icon from 'ui/Icon'
 import Select from 'ui/Select'
 
@@ -21,7 +22,11 @@ const defaultQueryParams = {
 const getDecodedBranch = (branch?: string) =>
   !!branch ? decodeURIComponent(branch) : undefined
 
-const BranchSelector: React.FC = () => {
+interface BranchSelectorProps {
+  isDisabled: boolean | undefined
+}
+
+const BranchSelector: React.FC<BranchSelectorProps> = ({ isDisabled }) => {
   const { provider, owner, repo, branch } = useParams<URLParams>()
   const { params, updateParams } = useLocationParams(defaultQueryParams)
   const [branchSearchTerm, setBranchSearchTerm] = useState<string>('')
@@ -48,7 +53,10 @@ const BranchSelector: React.FC = () => {
   })
 
   const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
+
+  // @ts-expect-error
+  const selectedBranch =
+    decodedBranch || params.branch || overview?.defaultBranch || ''
 
   const { data: searchBranchValue } = useBranch({
     provider,
@@ -70,7 +78,7 @@ const BranchSelector: React.FC = () => {
   }
 
   return (
-    <div className="md:w-[16rem]">
+    <div className="flex flex-col justify-between gap-2 p-4 sm:py-0 md:w-[16rem]">
       <h3 className="flex items-center gap-1 text-sm font-semibold text-ds-gray-octonary">
         <span className="text-ds-gray-quinary">
           <Icon name="branch" size="sm" variant="developer" />
@@ -97,8 +105,24 @@ const BranchSelector: React.FC = () => {
             }
           }}
           onSearch={(term: string) => setBranchSearchTerm(term)}
+          disabled={isDisabled}
         />
       </span>
+      {selection?.head?.commitid && (
+        <p className="text-xs">
+          <span className="font-bold">Source:</span> latest commit{' '}
+          <A
+            to={{
+              pageName: 'commit',
+              options: { commit: selection?.head?.commitid },
+            }}
+            isExternal={false}
+            hook="components-latest-commit"
+          >
+            {selection?.head?.commitid.slice(0, 7)}
+          </A>
+        </p>
+      )}
     </div>
   )
 }
diff --git a/src/pages/RepoPage/ComponentsTab/Header/Header.tsx b/src/pages/RepoPage/ComponentsTab/Header/Header.tsx
index f775f6d29f..fe5e2fcfc1 100644
--- a/src/pages/RepoPage/ComponentsTab/Header/Header.tsx
+++ b/src/pages/RepoPage/ComponentsTab/Header/Header.tsx
@@ -60,8 +60,8 @@ const Header = ({
   return (
     <div className="flex flex-col justify-end divide-y divide-solid divide-ds-gray-secondary">
       <div className="grid w-2/3 divide-y divide-solid divide-ds-gray-secondary sm:w-full sm:grid-cols-2 sm:divide-x sm:divide-y-0 md:grid-cols-4">
-        <BranchSelector />
-        <div className="md:w-[16rem]">
+        <BranchSelector isDisabled={controlsDisabled} />
+        <div className="flex flex-col justify-between gap-2 p-4 sm:py-0">
           <h3 className="text-sm font-semibold text-ds-gray-octonary">
             Configured components
           </h3>
@@ -73,7 +73,7 @@ const Header = ({
             <A to={{ pageName: 'components' }}>Learn more</A>
           </p>
         </div>
-        <div className="md:w-[16rem]">
+        <div className="flex flex-col gap-2 p-4 sm:py-0">
           <h3 className="text-sm font-semibold text-ds-gray-octonary">
             Historical trend
           </h3>
@@ -91,7 +91,7 @@ const Header = ({
             renderSelected={({ label }: { label: string }) => label}
           />
         </div>
-        <div className="md:w-[16rem]">
+        <div className="flex flex-col gap-2 p-4 sm:py-0">
           <h3 className="text-sm font-semibold text-ds-gray-octonary">
             Show by
           </h3>
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
index 6cd633554a..ad7fb9dc11 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.spec.tsx
@@ -275,9 +275,7 @@ describe('ComponentsTable', () => {
       const { user } = setup({})
       render(<ComponentsTable />, { wrapper: wrapper() })
 
-      const trashIconButtons = await screen.findAllByRole('button', {
-        name: /trash/,
-      })
+      const trashIconButtons = await screen.findAllByTestId('delete-component')
       expect(trashIconButtons).toHaveLength(3)
 
       const [firstIcon] = trashIconButtons
@@ -287,8 +285,8 @@ describe('ComponentsTable', () => {
         }
       })
 
-      const deleteComponentModalText = await screen.findByText(
-        'Delete Component'
+      const deleteComponentModalText = await screen.findByTestId(
+        'delete-component-modal'
       )
       expect(deleteComponentModalText).toBeInTheDocument()
 
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
index 5938cc9dd8..a01d6efcc1 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/ComponentsTable.tsx
@@ -35,6 +35,50 @@ interface ComponentsTableHelper {
   delete: React.ReactElement | null
 }
 
+export const LoadingTable = () => {
+  const data = useMemo(() => [], [])
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="tableui">
+      <table>
+        <colgroup>
+          <col className="@sm/table:w-4/12" />
+          <col className="@sm/table:w-3/12" />
+          <col className="@sm/table:w-3/12" />
+          <col className="@sm/table:w-2/12" />
+          <col className="@sm/table:w-3/12" />
+        </colgroup>
+        <thead data-testid="header-row">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  <div
+                    className={cs('flex flex-row', {
+                      'justify-end':
+                        header.id !== 'name' && header.id !== 'lastUploaded',
+                    })}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+      </table>
+    </div>
+  )
+}
+
 const columnHelper = createColumnHelper<ComponentsTableHelper>()
 
 const columns = [
@@ -125,7 +169,7 @@ function createTableData({
         />
       ),
       lastUploaded: (
-        <span className="flex justify-end">
+        <span className="flex justify-start">
           {lastUploaded ? formatTimeToNow(lastUploaded) : ''}
         </span>
       ),
@@ -135,6 +179,7 @@ function createTableData({
             data-testid="delete-component"
             onClick={() => setModalInfo({ componentId: name, showModal: true })}
             className="text-ds-gray-tertiary hover:text-ds-gray-senary"
+            aria-label={'delete ' + name}
           >
             <Icon size="md" name="trash" variant="outline" />
           </button>
@@ -199,7 +244,8 @@ const ComponentTable = memo(function Table({
                 >
                   <div
                     className={cs('flex flex-row', {
-                      'justify-end': header.id !== 'name',
+                      'justify-end':
+                        header.id !== 'name' && header.id !== 'lastUploaded',
                     })}
                   >
                     {flexRender(
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
index 57a8732287..49802145b2 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.spec.tsx
@@ -70,12 +70,12 @@ describe('DeleteComponentModal', () => {
       const messagePartOne = await screen.findByText(/This will remove the/)
       expect(messagePartOne).toBeInTheDocument()
       const messagePartTwo = await screen.findByText(
-        /component from the reports in app. You will also need to remove this component in your CI and codecov.yaml to stop uploads./
+        /It will take some time to reflect this deletion./
       )
       expect(messagePartTwo).toBeInTheDocument()
 
-      const componentId = await screen.findByText(/component-123/)
-      expect(componentId).toBeInTheDocument()
+      const componentId = await screen.findAllByText(/component-123/)
+      expect(componentId).toHaveLength(3)
     })
 
     it('renders delete and cancel buttons', async () => {
@@ -90,7 +90,7 @@ describe('DeleteComponentModal', () => {
         }
       )
       const deleteButton = await screen.findByRole('button', {
-        name: /Delete component/,
+        name: /Remove/,
       })
       expect(deleteButton).toBeInTheDocument()
       const cancelButton = await screen.findByRole('button', { name: /Cancel/ })
@@ -108,7 +108,7 @@ describe('DeleteComponentModal', () => {
           wrapper,
         }
       )
-      const title = await screen.findByText(/Delete Component/)
+      const title = await screen.findByTestId(/remove-component-123/)
       expect(title).toBeInTheDocument()
     })
   })
@@ -129,7 +129,7 @@ describe('DeleteComponentModal', () => {
       )
 
       const deleteButton = await screen.findByRole('button', {
-        name: /Delete component/,
+        name: /Remove/,
       })
       await user.click(deleteButton)
       await waitFor(() => expect(closeModal).toHaveBeenCalled())
diff --git a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
index f27de16b1b..5ec3862f65 100644
--- a/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
+++ b/src/pages/RepoPage/ComponentsTab/subroute/ComponentsTable/DeleteComponentModal/DeleteComponentModal.tsx
@@ -17,14 +17,29 @@ const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
       onClose={closeModal}
       hasCloseButton={true}
       size="small"
-      title={<span className="text-lg">Delete Component</span>}
+      title={
+        <span data-testid={`remove-${componentId}`} className="text-lg">
+          Remove <span className="italic">{componentId}</span>
+        </span>
+      }
       body={
-        <p>
-          This will remove the{' '}
-          <span className="font-semibold">{componentId}</span> component from
-          the reports in app. You will also need to remove this component in
-          your CI and codecov.yaml to stop uploads.
-        </p>
+        <div>
+          <p>
+            This will remove the historical data of{' '}
+            <span className="font-semibold italic">{componentId}</span>{' '}
+            component in the app and we can’t retrieve the data.
+          </p>
+          <br></br>
+          <p>
+            <span className="font-semibold">Action required:</span> You’ll need
+            to remove{' '}
+            <span className="font-semibold italic">{componentId}</span>{' '}
+            component in your yaml file otherwise you’ll still see it in this
+            table.
+          </p>
+          <br></br>
+          <p>It will take some time to reflect this deletion.</p>
+        </div>
       }
       footer={
         <div className="flex gap-2">
@@ -38,7 +53,7 @@ const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
           </button>
           <div>
             <Button
-              hook="update-default-org"
+              hook="delete-component-modal"
               variant="danger"
               to={undefined}
               disabled={false}
@@ -48,8 +63,9 @@ const DeleteComponentModal = ({ isOpen, closeModal, componentId }: Props) => {
                 mutate({ componentId })
                 closeModal()
               }}
+              data-testid="delete-component-modal"
             >
-              Delete component
+              Remove
             </Button>
           </div>
         </div>
diff --git a/src/services/navigation/useNavLinks/useNavLinks.js b/src/services/navigation/useNavLinks/useNavLinks.js
index b40cd5b660..9e069a0553 100644
--- a/src/services/navigation/useNavLinks/useNavLinks.js
+++ b/src/services/navigation/useNavLinks/useNavLinks.js
@@ -382,12 +382,17 @@ export function useNavLinks() {
     },
     componentsTab: {
       path: (
-        { provider = p, owner = o, repo = r } = {
+        { provider = p, owner = o, repo = r, branch = undefined } = {
           provider: p,
           owner: o,
           repo: r,
         }
-      ) => `/${provider}/${owner}/${repo}/components`,
+      ) => {
+        if (branch) {
+          return `/${provider}/${owner}/${repo}/components?branch=${branch}`
+        }
+        return `/${provider}/${owner}/${repo}/components`
+      },
       isExternalLink: false,
       text: 'Components',
     },
diff --git a/src/services/repo/useActivateMeasurements.tsx b/src/services/repo/useActivateMeasurements.tsx
index 5befc707b9..f9755b1157 100644
--- a/src/services/repo/useActivateMeasurements.tsx
+++ b/src/services/repo/useActivateMeasurements.tsx
@@ -94,6 +94,11 @@ export function useActivateMeasurements({
 
       queryClient.invalidateQueries([
         'BackfillFlagMemberships',
+        provider,
+        owner,
+        repo,
+      ])
+      queryClient.invalidateQueries([
         'BackfillComponentMemberships',
         provider,
         owner,
@@ -101,9 +106,11 @@ export function useActivateMeasurements({
       ])
     },
     onError: () => {
+      const measurement =
+        measurementType === 'FLAG_COVERAGE' ? 'flag' : 'component'
       renderToast({
         type: 'error',
-        title: 'Error activating flag measurements',
+        title: 'Error activating ' + measurement + ' measurements',
         content:
           'Please try again. If the error persists please contact support',
         options: {
diff --git a/src/shared/ComponentsNotConfigured/ComponentsNotConfigured.tsx b/src/shared/ComponentsNotConfigured/ComponentsNotConfigured.tsx
index 83411e7c18..8c445afa5f 100644
--- a/src/shared/ComponentsNotConfigured/ComponentsNotConfigured.tsx
+++ b/src/shared/ComponentsNotConfigured/ComponentsNotConfigured.tsx
@@ -2,7 +2,7 @@ import Button from 'ui/Button'
 
 function ComponentsNotConfigured() {
   return (
-    <div className="mt-12 grid gap-4">
+    <div className="grid gap-4 pt-4">
       <div className="flex flex-col items-center gap-1">
         <p>No data to display</p>
         <p>