From 2e719cfb80e4d3d9b82008ac4d89da2a5cd878ea Mon Sep 17 00:00:00 2001
From: Denise Li <dli@squareup.com>
Date: Tue, 17 Sep 2024 20:03:23 -0400
Subject: [PATCH] chore: remove Page.Header console component (#2712)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part 1 of https://github.com/TBD54566975/ftl/issues/2490

Deletes the `Page.Header` component, which is an artifact of a bygone
era.

Since the timeline page also had a time range filter embedded in the
header, I moved that over to the left-hand-side filter panel. It just
need a tiny bit of resizing to fit.

<img width="342" alt="Screenshot 2024-09-17 at 4 29 45 PM"
src="https://github.com/user-attachments/assets/5769f782-1407-45ba-a6be-bcd1515ad506">
<img width="371" alt="Screenshot 2024-09-17 at 4 36 51 PM"
src="https://github.com/user-attachments/assets/a9ad948c-eb07-4b4b-899d-47c15df56bbc">

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../src/features/console/ConsolePage.tsx      |  2 -
 .../src/features/timeline/TimelinePage.tsx    |  5 +-
 .../timeline/filters/TimelineTimeControls.tsx | 26 +++++-----
 frontend/console/src/layout/Page.tsx          | 48 -------------------
 4 files changed, 15 insertions(+), 66 deletions(-)

diff --git a/frontend/console/src/features/console/ConsolePage.tsx b/frontend/console/src/features/console/ConsolePage.tsx
index b547c8746d..71ec658c3b 100644
--- a/frontend/console/src/features/console/ConsolePage.tsx
+++ b/frontend/console/src/features/console/ConsolePage.tsx
@@ -1,4 +1,3 @@
-import { CubeIcon } from 'hugeicons-react'
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
@@ -25,7 +24,6 @@ export const ConsolePage = () => {
 
   return (
     <Page>
-      <Page.Header icon={<CubeIcon />} title='Console' />
       <Page.Body className='flex h-full'>
         <ResizablePanels
           mainContent={<GraphPane onTapped={setSelectedNode} />}
diff --git a/frontend/console/src/features/timeline/TimelinePage.tsx b/frontend/console/src/features/timeline/TimelinePage.tsx
index 5aadeaa494..1655e24f33 100644
--- a/frontend/console/src/features/timeline/TimelinePage.tsx
+++ b/frontend/console/src/features/timeline/TimelinePage.tsx
@@ -1,4 +1,3 @@
-import { ListViewIcon } from 'hugeicons-react'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Page } from '../../layout'
@@ -35,11 +34,9 @@ export const TimelinePage = () => {
   return (
     <SidePanelProvider>
       <Page>
-        <Page.Header icon={<ListViewIcon className='size-5' />} title='Events'>
-          <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
-        </Page.Header>
         <Page.Body className='flex'>
           <div className='sticky top-0 flex-none overflow-y-auto'>
+            <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
             <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
           </div>
           <div className='flex-grow overflow-y-scroll'>
diff --git a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
index 07bfbf7d57..82a3562b0e 100644
--- a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
+++ b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -101,20 +101,22 @@ export const TimelineTimeControls = ({
   const olderThan = newerThan ? Timestamp.fromDate(new Date(newerThan.toDate().getTime() - selected.value)) : undefined
   return (
     <>
-      <div className='flex items-center h-6'>
-        {newerThan && (
-          <span title={`${formatTimestampShort(olderThan)} - ${formatTimestampShort(newerThan)}`} className='text-xs font-roboto-mono mr-2 text-gray-400'>
-            {formatTimestampTime(olderThan)} - {formatTimestampTime(newerThan)}
-          </span>
-        )}
-
+      {newerThan && (
+        <div
+          title={`${formatTimestampShort(olderThan)} - ${formatTimestampShort(newerThan)}`}
+          className='text-xs font-roboto-mono mr-2 text-gray-400 pl-4 mt-2'
+        >
+          {formatTimestampTime(olderThan)} - {formatTimestampTime(newerThan)}
+        </div>
+      )}
+      <div className='flex items-center h-6 pl-2 mt-2'>
         <Listbox value={selected} onChange={handleRangeChanged}>
-          <div className='relative w-40 mr-2 mt-0.5 items-center'>
+          <div className='relative w-full mr-1 mt-0.5 items-center'>
             <ListboxButton
-              className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-3 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
+              className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-2 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
             >
               <span className='block truncate'>{selected.label}</span>
-              <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
+              <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1'>
                 <UnfoldLessIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
               </span>
             </ListboxButton>
@@ -165,14 +167,14 @@ export const TimelineTimeControls = ({
             <button
               type='button'
               onClick={handleTimeBackward}
-              className={`relative inline-flex items-center rounded-l-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
+              className={`relative inline-flex items-center rounded-l-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
             >
               <Backward02Icon className='w-4 h-4' />
             </button>
             <button
               type='button'
               onClick={handleTimeForward}
-              className={`relative -ml-px inline-flex items-center rounded-r-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
+              className={`relative -ml-px inline-flex items-center rounded-r-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
             >
               <Forward02Icon className='w-4 h-4' />
             </button>
diff --git a/frontend/console/src/layout/Page.tsx b/frontend/console/src/layout/Page.tsx
index 7e07c9fb98..78e30c2290 100644
--- a/frontend/console/src/layout/Page.tsx
+++ b/frontend/console/src/layout/Page.tsx
@@ -1,52 +1,6 @@
-import { ArrowRight02Icon } from 'hugeicons-react'
 import type React from 'react'
 import { classNames } from '../utils'
 
-interface Breadcrumb {
-  label: string
-  link?: string
-}
-
-const Header = ({
-  icon,
-  title,
-  children,
-  breadcrumbs,
-  className,
-}: {
-  icon?: React.ReactNode
-  title: string
-  children?: React.ReactNode
-  breadcrumbs?: Breadcrumb[]
-  className?: string
-}) => {
-  return (
-    <div className={classNames(className, 'flex-none w-full z-10 shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70')}>
-      <div className='flex items-center'>
-        <span className='mt-1 text-indigo-500 mr-2 mb-1 h-5 w-5'>{icon}</span>
-        {breadcrumbs && breadcrumbs.length > 0 && (
-          <nav className='flex pr-2' aria-label='Breadcrumb'>
-            <ol className='flex items-center space-x-2'>
-              {breadcrumbs.map((crumb, index) => (
-                <li key={index}>
-                  <div className='flex items-center'>
-                    <a href={crumb.link || '#'} className='text-lg mr-2 hover:text-indigo-500'>
-                      {crumb.label}
-                    </a>
-                    <ArrowRight02Icon className='mt-0.5 h-5 w-5' />
-                  </div>
-                </li>
-              ))}
-            </ol>
-          </nav>
-        )}
-        <span className='text-lg'>{title}</span>
-      </div>
-      {children}
-    </div>
-  )
-}
-
 const Body: React.FC<{
   className?: string
   style?: React.CSSProperties
@@ -64,7 +18,6 @@ export const Page: React.FC<{
   style?: React.CSSProperties
   children?: React.ReactNode
 }> & {
-  Header: typeof Header
   Body: typeof Body
 } = ({ className, style, children }) => {
   return (
@@ -74,5 +27,4 @@ export const Page: React.FC<{
   )
 }
 
-Page.Header = Header
 Page.Body = Body