Feat: Add dummy selectors to FailedTestsPage

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/BranchSelector.tsx

@@ -77,14 +77,14 @@ const BranchSelector = () => {
   }
 
   return (
-    <div className="md:w-64">
+    <div className="flex flex-col gap-1 pr-4 sm:w-52 lg:w-80">
       <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" />
         </span>
         Branch Context
       </h3>
-      <span className="min-w-64 text-sm">
+      <span className="min-w-52 text-sm">
         <Select
           // @ts-expect-error - Select has some TS issues because it's still written in JS
           dataMarketing="branch-selector-test-results-tab"

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.tsx

@@ -1,13 +1,128 @@
+import { useParams } from 'react-router-dom'
+
+import {
+  TIME_OPTION_VALUES,
+  TimeOption,
+  TimeOptions,
+} from 'pages/RepoPage/shared/constants'
+import { useLocationParams } from 'services/navigation'
+import { useRepoOverview } from 'services/repo'
+import A from 'ui/A'
+import MultiSelect from 'ui/MultiSelect'
+import Select from 'ui/Select'
+
 import BranchSelector from './BranchSelector'
 import FailedTestsTable from './FailedTestsTable'
 import { MetricsSection } from './MetricsSection'
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  branch?: string
+}
+
+const getDecodedBranch = (branch?: string) =>
+  !!branch ? decodeURIComponent(branch) : undefined
+
 function FailedTestsPage() {
+  const { params, updateParams } = useLocationParams({
+    search: '',
+    historicalTrend: '',
+  })
+  const { provider, owner, repo, branch } = useParams<URLParams>()
+
+  const { data: overview } = useRepoOverview({
+    provider,
+    owner,
+    repo,
+  })
+
+  const decodedBranch = getDecodedBranch(branch)
+  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
+
+  const value = TimeOptions.find(
+    // @ts-expect-error need to type out useLocationParams
+    (item) => item.value === params.historicalTrend
+  )
+
+  const defaultValue = TimeOptions.find(
+    (option) => option.value === TIME_OPTION_VALUES.LAST_3_MONTHS
+  )
+
   return (
-    <div className="flex flex-1 flex-col gap-4">
-      <BranchSelector />
-      <hr />
-      <MetricsSection />
+    <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-row justify-between">
+        <BranchSelector />
+        {selectedBranch === overview?.defaultBranch ? (
+          <>
+            <div className="flex flex-col gap-1 px-4">
+              <h3 className="text-sm font-semibold text-ds-gray-octonary">
+                Historical trend
+              </h3>
+              <div className="sm:w-52 lg:w-80">
+                <Select
+                  // @ts-expect-error Select is not typed
+                  dataMarketing="select-historical-trend"
+                  disabled={false}
+                  ariaName="Select historical trend"
+                  items={TimeOptions}
+                  value={value ?? defaultValue}
+                  onChange={(historicalTrend: TimeOption) =>
+                    updateParams({ historicalTrend: historicalTrend.value })
+                  }
+                  renderItem={({ label }: { label: string }) => label}
+                  renderSelected={({ label }: { label: string }) => label}
+                />
+              </div>
+              <A to={''} isExternal hook={'30-day-retention'}>
+                30 day retention
+              </A>
+            </div>
+            <div className="flex flex-col gap-1 px-4">
+              <h3 className="text-sm font-semibold text-ds-gray-octonary">
+                Test suites
+              </h3>
+              <div className="sm:w-52 lg:w-80">
+                <MultiSelect
+                  // @ts-expect-error MultiSelect is not typed
+                  dataMarketing="select-test-suites"
+                  ariaName="Select Test Suites"
+                  value={undefined}
+                  items={[1, 2, 3, 4]}
+                  renderItem={(item: any) => item}
+                  resourceName="Test Suites"
+                  onChange={() => {}}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 pl-4">
+              <h3 className="text-sm font-semibold text-ds-gray-octonary">
+                Flags
+              </h3>
+              <div className="sm:w-52 lg:w-80">
+                <MultiSelect
+                  // @ts-expect-error MultiSelect is not typed
+                  dataMarketing="select-flags"
+                  ariaName="Select Flags"
+                  value={undefined}
+                  items={[1, 2, 3, 4]}
+                  renderItem={(item: any) => item}
+                  resourceName="Flags"
+                  onChange={() => {}}
+                />
+              </div>
+            </div>
+          </>
+        ) : null}
+      </div>
+
+      {selectedBranch === overview?.defaultBranch ? (
+        <>
+          <hr />
+          <MetricsSection />
+        </>
+      ) : null}
       <FailedTestsTable />
     </div>
   )

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx

@@ -8,7 +8,7 @@ const TooltipWithIcon = ({ children }: { children: React.ReactNode }) => {
     <Tooltip delayDuration={0} skipDelayDuration={100}>
       <Tooltip.Root>
         <Tooltip.Trigger>
-          <div className="text-ds-gray-tertiary">
+          <div className="text-ds-gray-tertiary dark:text-ds-gray-quinary">
             <Icon name="informationCircle" size="sm" />
           </div>
         </Tooltip.Trigger>
@@ -31,7 +31,7 @@ const TotalTestsRunTimeCard = () => {
     <MetricCard>
       <MetricCard.Header>
         <MetricCard.Title className="flex items-center gap-2">
-          Total tests run time
+          Test run time
           <TooltipWithIcon>
             The total time it takes to run all your tests.
           </TooltipWithIcon>
@@ -43,7 +43,7 @@ const TotalTestsRunTimeCard = () => {
         <Badge variant="danger">+10%</Badge>
       </MetricCard.Content>
       <MetricCard.Description>
-        Increased by 12.5hr in the last 30 days
+        Increased by [12.5hr] in the last [30 days]
       </MetricCard.Description>
     </MetricCard>
   )
@@ -56,15 +56,14 @@ const SlowestTestsCard = () => {
         <MetricCard.Title className="flex items-center gap-2">
           Slowest tests
           <TooltipWithIcon>
-            The number of tests that take the longer than 100ms time to
-            complete.
+            The number of tests that take the longer than [100ms] to complete.
           </TooltipWithIcon>
         </MetricCard.Title>
       </MetricCard.Header>
 
       <MetricCard.Content>6</MetricCard.Content>
       <MetricCard.Description>
-        The total run time of the 6 tests is 2.5hr.
+        The slowest [6 tests] take [2.5hr] to run.
       </MetricCard.Description>
     </MetricCard>
   )
@@ -75,10 +74,10 @@ const TotalFlakyTestsCard = () => {
     <MetricCard>
       <MetricCard.Header>
         <MetricCard.Title className="flex items-center gap-2">
-          Total flaky tests
+          Flaky tests
           <TooltipWithIcon>
             The number of tests that transition from fail to pass or pass to
-            fail in the last 30 days.
+            fail in the last [30 days].
           </TooltipWithIcon>
         </MetricCard.Title>
       </MetricCard.Header>
@@ -87,7 +86,7 @@ const TotalFlakyTestsCard = () => {
         <Badge variant="success">-15%</Badge>
       </MetricCard.Content>
       <MetricCard.Description>
-        The total rerun time for flaky tests is 50hr.
+        *The total rerun time for flaky tests is [50hr].
       </MetricCard.Description>
     </MetricCard>
   )
@@ -98,7 +97,7 @@ const AverageFlakeRateCard = () => {
     <MetricCard>
       <MetricCard.Header>
         <MetricCard.Title className="flex items-center gap-2">
-          Average flake rate
+          Avg. flake rate
           <TooltipWithIcon>
             The percentage of tests that flake, based on how many times a test
             transitions from fail to pass or pass to fail on a given branch and
@@ -111,7 +110,7 @@ const AverageFlakeRateCard = () => {
         <Badge variant="success">-35%</Badge>
       </MetricCard.Content>
       <MetricCard.Description>
-        On average, a flaky test ran 20 times before it passed.
+        On average, a flaky test ran [20] times before it passed.
       </MetricCard.Description>
     </MetricCard>
   )
@@ -122,16 +121,16 @@ const TotalFailuresCard = () => {
     <MetricCard>
       <MetricCard.Header>
         <MetricCard.Title className="flex items-center gap-2">
-          Total failures
+          Failures
           <TooltipWithIcon>
-            The number of failures indicates errors that caused the tests to
-            fail.
+            The number of failures indicate the number of errors that caused the
+            tests to fail.
           </TooltipWithIcon>
         </MetricCard.Title>
       </MetricCard.Header>
       <MetricCard.Content>6</MetricCard.Content>
       <MetricCard.Description>
-        Recent failures across all branches.
+        The number of test failures across all branches.
       </MetricCard.Description>
     </MetricCard>
   )
@@ -142,7 +141,7 @@ const TotalSkippedTestsCard = () => {
     <MetricCard>
       <MetricCard.Header>
         <MetricCard.Title className="flex items-center gap-2">
-          Total skipped tests
+          Skipped tests
           <TooltipWithIcon>
             The number of tests that were skipped in the last 30 days.
           </TooltipWithIcon>
@@ -151,7 +150,7 @@ const TotalSkippedTestsCard = () => {
 
       <MetricCard.Content>55</MetricCard.Content>
       <MetricCard.Description>
-        Total skipped tests across all branches.
+        The number of skipped tests in your test suite.
       </MetricCard.Description>
     </MetricCard>
   )
@@ -171,7 +170,7 @@ function MetricsSection() {
       </div>
       <div className="flex flex-col gap-3">
         <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
-          Improve CI Run Efficiency
+          Improve Test Performance
         </p>
         <div className="flex">
           <TotalFlakyTestsCard />