chore(PageHeader): delete title param (#19688)

PostHog · Jan 11, 2024 · f6e3d3d · f6e3d3d
1 parent b6fb89a
commit f6e3d3d
Show file tree

Hide file tree

Showing 49 changed files with 18 additions and 239 deletions.
diff --git a/frontend/src/layout/ErrorProjectUnavailable.tsx b/frontend/src/layout/ErrorProjectUnavailable.tsx
@@ -8,7 +8,7 @@ export function ErrorProjectUnavailable(): JSX.Element {
 
     return (
         <div>
-            <PageHeader title="Project Unavailable" />
+            <PageHeader />
             <p>
                 {projectCreationForbiddenReason
                     ? "Switch to a project that you have access to. If you need a new project or access to an existing one that's private, ask a team member with administrator permissions."

diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -7,7 +7,6 @@ import { DraggableToNotebookProps } from 'scenes/notebooks/AddToNotebook/Draggab
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
 
 interface PageHeaderProps {
-    title?: string | JSX.Element
     caption?: string | JSX.Element | null | false
     buttons?: JSX.Element | false
     tabbedPage?: boolean // Whether the page has tabs for secondary navigation

diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx
@@ -67,32 +67,6 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
         <div className="action-edit-container">
             <Form logic={actionEditLogic} props={logicProps} formKey="action" enableFormOnSubmit>
                 <PageHeader
-                    title={
-                        <Field name="name">
-                            {({ value, onChange }) => (
-                                <EditableField
-                                    name="name"
-                                    value={value || ''}
-                                    placeholder={`Name this action`}
-                                    onChange={
-                                        !id
-                                            ? onChange
-                                            : undefined /* When creating a new action, change value on type */
-                                    }
-                                    onSave={(value) => {
-                                        onChange(value)
-                                        submitAction()
-                                        /* When clicking 'Save' on an `EditableField`, save the form too */
-                                    }}
-                                    mode={!id ? 'edit' : undefined /* When creating a new action, maintain edit mode */}
-                                    minLength={1}
-                                    maxLength={400} // Sync with action model
-                                    data-attr={`action-name-${id ? 'edit' : 'create'}`}
-                                    className="action-name"
-                                />
-                            )}
-                        </Field>
-                    }
                     caption={
                         <>
                             <Field name="description">

diff --git a/frontend/src/scenes/apps/AppMetricsScene.tsx b/frontend/src/scenes/apps/AppMetricsScene.tsx
@@ -8,7 +8,6 @@ import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { appMetricsSceneLogic } from 'scenes/apps/appMetricsSceneLogic'
 import { PluginImage } from 'scenes/plugins/plugin/PluginImage'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
-import { PluginTags } from 'scenes/plugins/tabs/apps/components'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import { ActivityScope, AppMetricsTab } from '~/types'
@@ -39,16 +38,6 @@ export function AppMetrics(): JSX.Element {
                 )}
                 <div className="flex-1">
                     <PageHeader
-                        title={
-                            pluginConfig ? (
-                                <span className="flex items-center gap-2">
-                                    {pluginConfig.plugin_info.name}
-                                    <PluginTags plugin={pluginConfig.plugin_info} />
-                                </span>
-                            ) : (
-                                <LemonSkeleton />
-                            )
-                        }
                         caption={pluginConfig ? 'An overview of metrics and exports for this app.' : undefined}
                         buttons={
                             pluginConfig?.plugin ? (

diff --git a/frontend/src/scenes/apps/FrontendAppScene.tsx b/frontend/src/scenes/apps/FrontendAppScene.tsx
@@ -5,17 +5,11 @@ import { frontendAppSceneLogic } from 'scenes/apps/frontendAppSceneLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 
 export function FrontendAppScene(): JSX.Element {
-    const { Component, appConfig, breadcrumbs } = useValues(frontendAppSceneLogic)
+    const { Component, appConfig } = useValues(frontendAppSceneLogic)
 
     return (
         <>
-            <PageHeader
-                title={
-                    (breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length - 1]?.name) ||
-                    appConfig?.name ||
-                    'App Loading...'
-                }
-            />
+            <PageHeader />
             {Component ? <Component {...appConfig} /> : <SpinnerOverlay />}
         </>
     )

diff --git a/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx b/frontend/src/scenes/batch_exports/BatchExportEditScene.tsx
@@ -3,7 +3,7 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import { BatchExportsEditForm } from './BatchExportEditForm'
-import { batchExportsEditLogic, BatchExportsEditLogicProps } from './batchExportEditLogic'
+import { BatchExportsEditLogicProps } from './batchExportEditLogic'
 import { batchExportsEditSceneLogic } from './batchExportEditSceneLogic'
 
 export const scene: SceneExport = {
@@ -16,11 +16,10 @@ export const scene: SceneExport = {
 
 export function BatchExportsEditScene(): JSX.Element {
     const { id } = useValues(batchExportsEditSceneLogic)
-    const { isNew } = useValues(batchExportsEditLogic({ id }))
 
     return (
         <>
-            <PageHeader title={`${isNew ? 'New' : 'Edit'} batch export`} />
+            <PageHeader />
 
             <div className="my-8" />
 

diff --git a/frontend/src/scenes/batch_exports/BatchExportScene.tsx b/frontend/src/scenes/batch_exports/BatchExportScene.tsx
@@ -404,11 +404,6 @@ export function BatchExportScene(): JSX.Element {
     return (
         <>
             <PageHeader
-                title={
-                    <span className="flex items-center gap-2">
-                        {batchExportConfig?.name ?? (batchExportConfigLoading ? 'Loading...' : 'Missing')}
-                    </span>
-                }
                 buttons={
                     batchExportConfig ? (
                         <>

diff --git a/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx b/frontend/src/scenes/batch_exports/BatchExportsListScene.tsx
@@ -17,7 +17,6 @@ export function BatchExportsListScene(): JSX.Element {
     return (
         <>
             <PageHeader
-                title="Batch Exports"
                 buttons={
                     <>
                         <LemonButton type="primary" to={urls.batchExportNew()}>

diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx
@@ -29,7 +29,7 @@ export const scene: SceneExport = {
 }
 
 export function BillingPageHeader(): JSX.Element {
-    return <PageHeader title="Billing &amp; usage" />
+    return <PageHeader />
 }
 
 export function Billing(): JSX.Element {

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -43,7 +43,6 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
         <div className="cohort">
             <Form id="cohort" logic={cohortEditLogic} props={logicProps} formKey="cohort" enableFormOnSubmit>
                 <PageHeader
-                    title={isNewCohort ? 'New cohort' : cohort.name || 'Untitled'}
                     buttons={
                         <div className="flex items-center gap-2">
                             {isNewCohort ? (

diff --git a/frontend/src/scenes/dashboard/DashboardHeader.tsx b/frontend/src/scenes/dashboard/DashboardHeader.tsx
@@ -9,7 +9,6 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { SharingModal } from 'lib/components/Sharing/SharingModal'
 import { SubscribeButton, SubscriptionsModal } from 'lib/components/Subscriptions/SubscriptionsModal'
 import { privilegeLevelToName } from 'lib/constants'
-import { IconLock } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
@@ -119,33 +118,6 @@ export function DashboardHeader(): JSX.Element | null {
             )}
 
             <PageHeader
-                title={
-                    <div className="flex items-center">
-                        <EditableField
-                            name="name"
-                            value={dashboard?.name || (dashboardLoading ? 'Loading…' : '')}
-                            placeholder="Name this dashboard"
-                            onSave={
-                                dashboard
-                                    ? (value) => updateDashboard({ id: dashboard.id, name: value, allowUndo: true })
-                                    : undefined
-                            }
-                            saveOnBlur={true}
-                            minLength={1}
-                            maxLength={400} // Sync with Dashboard model
-                            mode={!canEditDashboard ? 'view' : undefined}
-                            notice={
-                                dashboard && !canEditDashboard
-                                    ? {
-                                          icon: <IconLock />,
-                                          tooltip: DASHBOARD_CANNOT_EDIT_MESSAGE,
-                                      }
-                                    : undefined
-                            }
-                            data-attr="dashboard-name"
-                        />
-                    </div>
-                }
                 buttons={
                     dashboardMode === DashboardMode.Edit ? (
                         <LemonButton

diff --git a/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx b/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx
@@ -45,7 +45,6 @@ export function Dashboards(): JSX.Element {
             <DuplicateDashboardModal />
             <DeleteDashboardModal />
             <PageHeader
-                title="Dashboards"
                 buttons={
                     <LemonButton
                         data-attr={'new-dashboard'}

diff --git a/frontend/src/scenes/data-management/DataManagementScene.tsx b/frontend/src/scenes/data-management/DataManagementScene.tsx
@@ -200,7 +200,6 @@ export function DataManagementScene(): JSX.Element {
     return (
         <>
             <PageHeader
-                title="Data Management"
                 caption="Use data management to organize events that come into PostHog. Reduce noise, clarify usage, and help collaborators get the most value from your data."
                 tabbedPage
                 buttons={<>{tabs[tab].buttons}</>}

diff --git a/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx b/frontend/src/scenes/data-management/definition/DefinitionEdit.tsx
@@ -25,7 +25,6 @@ export function DefinitionEdit(props: DefinitionEditLogicProps): JSX.Element {
     return (
         <Form logic={definitionEditLogic} props={props} formKey="definition">
             <PageHeader
-                title={`Edit ${isProperty ? 'Property' : 'Event'} Definition`}
                 buttons={
                     <>
                         <LemonButton

diff --git a/frontend/src/scenes/data-management/definition/DefinitionView.tsx b/frontend/src/scenes/data-management/definition/DefinitionView.tsx
@@ -69,17 +69,6 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
             ) : (
                 <>
                     <PageHeader
-                        title={
-                            <EditableField
-                                name="name"
-                                value={getPropertyLabel(definition.name) || ''}
-                                placeholder={`Name this ${singular}`}
-                                mode="view"
-                                minLength={1}
-                                maxLength={400} // Sync with action model
-                                data-attr="definition-name-view"
-                            />
-                        }
                         caption={
                             <>
                                 <EditableField

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx
@@ -1,5 +1,5 @@
 import { IconDatabase } from '@posthog/icons'
-import { LemonButton, LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { DatabaseTableTree, TreeItem } from 'lib/components/DatabaseTableTree/DatabaseTableTree'
@@ -114,14 +114,6 @@ export function DataWarehouseExternalScene(): JSX.Element {
     return (
         <div>
             <PageHeader
-                title={
-                    <div className="flex items-center gap-2">
-                        Data Warehouse
-                        <LemonTag type="warning" className="uppercase">
-                            Beta
-                        </LemonTag>
-                    </div>
-                }
                 buttons={
                     <>
                         {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE_VIEWS] && (

diff --git a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx
@@ -18,7 +18,6 @@ export function DataWarehouseTable(): JSX.Element {
     return (
         <>
             <PageHeader
-                title={'New table'}
                 buttons={
                     <div className="flex items-center gap-2">
                         <LemonButton

diff --git a/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx b/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx
@@ -47,14 +47,6 @@ export function DataWarehouseSettingsScene(): JSX.Element {
     return (
         <div>
             <PageHeader
-                title={
-                    <div className="flex items-center gap-2">
-                        Data Warehouse
-                        <LemonTag type="warning" className="uppercase">
-                            Beta
-                        </LemonTag>
-                    </div>
-                }
                 buttons={
                     <LemonButton
                         type="primary"

diff --git a/frontend/src/scenes/debug/DebugScene.tsx b/frontend/src/scenes/debug/DebugScene.tsx
@@ -52,7 +52,6 @@ export function DebugScene(): JSX.Element {
     return (
         <div className="QueryScene">
             <PageHeader
-                title="Query Debugger"
                 buttons={
                     <>
                         <LemonButton active={!!query2} onClick={() => (query2 ? setQuery2('') : setQuery2(query1))}>

diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
@@ -68,7 +68,6 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
     return (
         <Form id="early-access-feature" formKey="earlyAccessFeature" logic={earlyAccessFeatureLogic}>
             <PageHeader
-                title={isNewEarlyAccessFeature ? 'New feature release' : earlyAccessFeature.name}
                 buttons={
                     !earlyAccessFeatureLoading ? (
                         earlyAccessFeature.stage != EarlyAccessFeatureStage.GeneralAvailability &&

diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeatures.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeatures.tsx
@@ -36,14 +36,6 @@ export function EarlyAccessFeatures(): JSX.Element {
     return (
         <>
             <PageHeader
-                title={
-                    <div className="flex items-center gap-2">
-                        Early Access Management
-                        <LemonTag type="warning" className="uppercase">
-                            Beta
-                        </LemonTag>
-                    </div>
-                }
                 caption={
                     !showIntro && (
                         <>

diff --git a/frontend/src/scenes/events/Events.tsx b/frontend/src/scenes/events/Events.tsx
@@ -13,7 +13,7 @@ export const scene: SceneExport = {
 export function Events(): JSX.Element {
     return (
         <>
-            <PageHeader title={'Event explorer'} />
+            <PageHeader />
             <div className="non-3000 pt-4 border-t" />
             <AndroidRecordingsPromptBanner context={'events'} />
             <EventsScene />

diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -150,7 +150,7 @@ export function Experiment(): JSX.Element {
     if (!hasAvailableFeature(AvailableFeature.EXPERIMENTATION)) {
         return (
             <>
-                <PageHeader title="Experiments" />
+                <PageHeader />
                 <ExperimentsPayGate />
             </>
         )
@@ -177,7 +177,6 @@ export function Experiment(): JSX.Element {
                         className="space-y-4 experiment-form"
                     >
                         <PageHeader
-                            title={editingExistingExperiment ? 'Edit experiment' : 'New experiment'}
                             buttons={
                                 <div className="flex items-center gap-2">
                                     <LemonButton

diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx
@@ -156,7 +156,6 @@ export function Experiments(): JSX.Element {
     return (
         <div>
             <PageHeader
-                title={<div className="flex items-center">A/B testing</div>}
                 buttons={
                     hasAvailableFeature(AvailableFeature.EXPERIMENTATION) ? (
                         <LemonButton type="primary" data-attr="create-experiment" to={urls.experiment('new')}>

diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -243,7 +243,6 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                         className="space-y-4"
                     >
                         <PageHeader
-                            title={isNewFeatureFlag ? 'New feature flag' : featureFlag.key || 'Untitled'}
                             buttons={
                                 <div className="flex items-center gap-2">
                                     <LemonButton
@@ -484,26 +483,6 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                     notebookProps={{
                                         href: urls.featureFlag(id),
                                     }}
-                                    title={
-                                        <div className="flex items-center gap-2 mb-2">
-                                            {featureFlag.key || 'Untitled'}
-                                            <CopyToClipboardInline
-                                                explicitValue={featureFlag.key}
-                                                iconStyle={{ color: 'var(--muted-alt)' }}
-                                            />
-                                            <div className="flex">
-                                                {featureFlag.active ? (
-                                                    <LemonTag type="success" className="uppercase">
-                                                        Enabled
-                                                    </LemonTag>
-                                                ) : (
-                                                    <LemonTag type="default" className="uppercase">
-                                                        Disabled
-                                                    </LemonTag>
-                                                )}
-                                            </div>
-                                        </div>
-                                    }
                                     caption={
                                         <>
                                             <span>{featureFlag.name || <i>Description (optional)</i>}</span>

diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -373,7 +373,6 @@ export function FeatureFlags(): JSX.Element {
     return (
         <div className="feature_flags">
             <PageHeader
-                title="Feature Flags"
                 buttons={
                     <LemonButton type="primary" to={urls.featureFlag('new')} data-attr="new-feature-flag">
                         New feature flag