From fd7fc7938cf63405e83adb3646d93f5977c1e936 Mon Sep 17 00:00:00 2001 From: Adam Leith Date: Mon, 8 Sep 2025 16:47:35 +0100 Subject: [PATCH] chore(plux): fixed product icons (#37718) --- .../ProjectTree/TreeSearchField.tsx | 3 +- .../panel-layout/ProjectTree/defaultTree.tsx | 219 ++++++++++++------ .../ProjectTree/projectTreeDataLogic.tsx | 8 +- .../layout/panel-layout/ProjectTree/utils.tsx | 7 +- .../scenes/components/SceneTitleSection.tsx | 24 +- .../components/CommandBar/searchBarLogic.ts | 6 +- .../components/PropertyFilterIcon.tsx | 6 +- frontend/src/queries/schema.json | 83 +++++-- frontend/src/queries/schema/schema-general.ts | 62 +++-- .../scenes/activity/explore/EventsScene.tsx | 1 - .../scenes/activity/live/LiveEventsTable.tsx | 1 - .../src/scenes/annotations/Annotations.tsx | 1 - frontend/src/scenes/cohorts/CohortEdit.tsx | 2 - frontend/src/scenes/cohorts/Cohorts.tsx | 1 - .../src/scenes/dashboard/DashboardHeader.tsx | 1 - .../dashboard/dashboards/Dashboards.tsx | 1 - .../data-management/comments/Comments.tsx | 4 +- .../events/EventDefinitionsTable.tsx | 1 - .../properties/PropertyDefinitionsTable.tsx | 1 - .../src/scenes/experiments/ExperimentForm.tsx | 1 - .../experiments/ExperimentView/Info.tsx | 1 - .../src/scenes/experiments/Experiments.tsx | 1 - .../src/scenes/feature-flags/FeatureFlag.tsx | 1 - .../src/scenes/feature-flags/FeatureFlags.tsx | 1 - frontend/src/scenes/groups/Groups.tsx | 2 - .../src/scenes/heatmaps/HeatmapsBrowser.tsx | 1 - .../src/scenes/insights/InsightPageHeader.tsx | 3 +- .../src/scenes/new-tab/newTabSceneLogic.tsx | 71 ++++-- .../notebooks/Nodes/NotebookNodeBacklink.tsx | 4 +- frontend/src/scenes/persons/PersonsScene.tsx | 1 - .../scenes/saved-insights/SavedInsights.tsx | 3 +- frontend/src/scenes/scenes.ts | 2 +- .../SessionRecordingsPlaylistScene.tsx | 3 +- frontend/src/scenes/surveys/SurveyEdit.tsx | 1 - frontend/src/scenes/surveys/SurveyView.tsx | 1 - frontend/src/scenes/surveys/Surveys.tsx | 1 - .../scenes/toolbar-launch/ToolbarLaunch.tsx | 1 - .../web-analytics/WebAnalyticsScene.tsx | 1 - .../settings/MarketingAnalyticsSettings.tsx | 1 - frontend/src/styles/base.scss | 2 +- frontend/src/types.ts | 7 +- .../actions/frontend/pages/ActionEdit.tsx | 2 - products/actions/frontend/pages/Actions.tsx | 1 - products/actions/manifest.tsx | 14 +- products/cohorts/manifest.tsx | 11 +- products/dashboards/manifest.tsx | 10 +- products/data_warehouse/manifest.tsx | 6 +- .../frontend/EarlyAccessFeature.tsx | 1 - .../frontend/EarlyAccessFeatures.tsx | 1 - products/early_access_features/manifest.tsx | 18 +- .../frontend/ErrorTrackingScene.tsx | 3 +- products/error_tracking/manifest.tsx | 11 +- products/experiments/manifest.tsx | 10 +- products/feature_flags/manifest.tsx | 8 +- products/links/manifest.tsx | 9 +- .../frontend/LLMAnalyticsScene.tsx | 3 +- products/llm_analytics/manifest.tsx | 7 +- products/logs/manifest.tsx | 7 +- products/messaging/manifest.tsx | 10 +- products/notebooks/manifest.tsx | 5 +- products/product_analytics/manifest.tsx | 32 ++- products/replay/manifest.tsx | 13 +- .../frontend/RevenueAnalyticsScene.tsx | 3 +- .../settings/RevenueAnalyticsSettings.tsx | 6 +- products/revenue_analytics/manifest.tsx | 11 +- products/surveys/manifest.tsx | 10 +- products/tasks/frontend/TaskTracker.tsx | 1 - products/tasks/manifest.tsx | 8 +- .../frontend/UserInterviews.tsx | 1 - products/user_interviews/manifest.tsx | 8 +- products/web_analytics/manifest.tsx | 5 +- tsconfig.json | 1 + 72 files changed, 476 insertions(+), 302 deletions(-) diff --git a/frontend/src/layout/panel-layout/ProjectTree/TreeSearchField.tsx b/frontend/src/layout/panel-layout/ProjectTree/TreeSearchField.tsx index d6afcb7508..0796f373a2 100644 --- a/frontend/src/layout/panel-layout/ProjectTree/TreeSearchField.tsx +++ b/frontend/src/layout/panel-layout/ProjectTree/TreeSearchField.tsx @@ -9,6 +9,7 @@ import { fileSystemTypes } from '~/products' import { FileSystemType } from '~/types' import { panelLayoutLogic } from '../panelLayoutLogic' +import { iconForType } from './defaultTree' import { projectTreeLogic } from './projectTreeLogic' const missingProductTypes: { value: string; label: string; icon?: React.ReactNode; flag?: string }[] = [ @@ -24,7 +25,7 @@ const productTypesMapped = [ ([key, value]): { value: string; label: string; icon: React.ReactNode; flag?: string } => ({ value: value.filterKey || key, label: value.name, - icon: value.icon, + icon: iconForType(value.iconType), flag: value.flag, }) ), diff --git a/frontend/src/layout/panel-layout/ProjectTree/defaultTree.tsx b/frontend/src/layout/panel-layout/ProjectTree/defaultTree.tsx index 22e2454ae1..fd5c29133e 100644 --- a/frontend/src/layout/panel-layout/ProjectTree/defaultTree.tsx +++ b/frontend/src/layout/panel-layout/ProjectTree/defaultTree.tsx @@ -5,29 +5,36 @@ import { IconApp, IconApps, IconBook, - IconChevronRight, + IconBug, IconCursor, + IconDashboard, IconDatabase, + IconExternal, + IconFlask, IconFunnels, IconGraph, - IconHandMoney, IconHogQL, IconLifecycle, IconLive, + IconMessage, + IconNotebook, IconNotification, + IconPeople, IconPieChart, IconPiggyBank, IconPlug, IconRetention, + IconRewindPlay, + IconRocket, IconServer, IconStickiness, + IconToggle, IconTrends, IconUserPaths, IconWarning, } from '@posthog/icons' import { FEATURE_FLAGS } from 'lib/constants' -import { IconCohort } from 'lib/lemon-ui/icons' import { urls } from 'scenes/urls' import { @@ -41,110 +48,160 @@ import { FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-ge import { FileSystemIconColor, PipelineStage, PipelineTab } from '~/types' const iconTypes: Record = { - ai: { - icon: , - iconColor: ['var(--color-product-max-ai-light)'], + dashboard: { + icon: , + iconColor: ['var(--color-product-dashboards-light)'], }, - cursor: { - icon: , + llm_analytics: { + icon: , + iconColor: ['var(--color-product-llm-analytics-light)'], + }, + product_analytics: { + icon: , + iconColor: ['var(--color-product-product-analytics-light)'], + }, + revenue_analytics: { + icon: , + iconColor: ['var(--color-product-revenue-analytics-light)', 'var(--color-product-revenue-analytics-dark)'], + }, + web_analytics: { + icon: , + iconColor: ['var(--color-product-web-analytics-light)', 'var(--color-product-web-analytics-dark)'], + }, + sql_editor: { + icon: , + iconColor: ['var(--color-product-data-warehouse-light)'], + }, + error_tracking: { + icon: , + iconColor: ['var(--color-product-error-tracking-light)', 'var(--color-product-error-tracking-dark)'], }, heatmap: { icon: , iconColor: ['var(--color-product-heatmaps-light)', 'var(--color-product-heatmaps-dark)'], }, - database: { - icon: , - iconColor: ['var(--color-product-data-warehouse-light)'], + session_replay: { + icon: , + iconColor: ['var(--color-product-session-replay-light)', 'var(--color-product-session-replay-dark)'], }, - definitions: { - icon: , + survey: { + icon: , + iconColor: ['var(--color-product-surveys-light)'], }, - folder: { - icon: , + user_interview: { + icon: , + iconColor: ['var(--color-product-user-interviews-light)'], }, - handMoney: { - icon: , + task: { + icon: , }, - live: { + logs: { icon: , iconColor: ['var(--color-product-logs-light)'], }, - notification: { - icon: , - iconColor: ['var(--product-notification-light)'], + early_access_feature: { + icon: , + iconColor: [ + 'var(--color-product-early-access-features-light)', + 'var(--color-product-early-access-features-dark)', + ], }, - pieChart: { - icon: , - iconColor: ['var(--color-product-web-analytics-light)', 'var(--color-product-web-analytics-dark)'], + experiment: { + icon: , + iconColor: ['var(--color-product-experiments-light)'], }, - piggyBank: { - icon: , - iconColor: ['var(--color-product-revenue-analytics-light)', 'var(--color-product-revenue-analytics-dark)'], + feature_flag: { + icon: , + iconColor: ['var(--color-product-feature-flags-light)'], }, - plug: { + data_pipeline: { icon: , iconColor: ['var(--color-product-data-pipeline-light)'], }, - sql: { - icon: , + data_warehouse: { + icon: , iconColor: ['var(--color-product-data-warehouse-light)'], }, - warning: { + link: { + icon: , + iconColor: ['var(--color-product-links-light)', 'var(--color-product-links-dark)'], + }, + messaging: { + icon: , + iconColor: ['var(--color-product-messaging-light)', 'var(--color-product-messaging-dark)'], + }, + notebook: { + icon: , + }, + action: { + icon: , + }, + comment: { + icon: , + }, + annotation: { + icon: , + }, + event_definition: { + icon: , + }, + property_definition: { + icon: , + }, + ingestion_warning: { icon: , }, - errorTracking: { - icon: , - iconColor: ['var(--color-product-error-tracking-light)', 'var(--color-product-error-tracking-dark)'], + person: { + icon: , }, - insightFunnel: { + cohort: { + icon: , + }, + group: { + icon: , + }, + insight_funnel: { icon: , iconColor: ['var(--color-insight-funnel-light)'], }, - insightTrends: { + insight_trend: { icon: , iconColor: ['var(--color-insight-trends-light)'], }, - insightRetention: { + insight_retention: { icon: , iconColor: ['var(--color-insight-retention-light)'], }, - insightUserPaths: { + insight_user_path: { icon: , iconColor: ['var(--color-insight-user-paths-light)', 'var(--color-user-paths-dark)'], }, - insightLifecycle: { + insight_lifecycle: { icon: , iconColor: ['var(--color-insight-lifecycle-light)'], }, - insightStickiness: { + insight_stickiness: { icon: , iconColor: ['var(--color-insight-stickiness-light)'], }, - insightHogQL: { + insight_hogql: { icon: , iconColor: ['var(--color-insight-sql-light)'], }, - cohort: { - icon: , - }, - insight: { - icon: , - iconColor: ['var(--color-product-product-analytics-light)'], - }, } const getIconColor = (type?: string, colorOverride?: FileSystemIconColor): FileSystemIconColor => { - // Get the official icon color - const iconTypeColor = type && iconTypes[type as keyof typeof iconTypes]?.iconColor - - // fallback: Get the file system color + // Manifest color takes precedence const fileSystemColor = (fileSystemTypes as unknown as Record)[ type as keyof typeof fileSystemTypes ]?.iconColor + // Fallback to iconTypes if no manifest color is provided + const iconTypeColor = type && iconTypes[type as keyof typeof iconTypes]?.iconColor + // If we have a color override, use it - // Otherwise, use the official icon color, then the file system color and finally if all else is undefined use the inherited default color - const color = colorOverride ?? iconTypeColor ?? fileSystemColor ?? ['currentColor', 'currentColor'] + // Otherwise, use the above colors in order of precedence + const color = colorOverride ?? fileSystemColor ?? iconTypeColor ?? ['currentColor', 'currentColor'] return color.length === 1 ? [color[0], color[0]] : (color as FileSystemIconColor) } @@ -177,7 +234,7 @@ export const ProductIconWrapper = ({ type, children, colorOverride }: ProductIco ) } -export function iconForType(type?: string, colorOverride?: FileSystemIconColor): JSX.Element { +export function iconForType(type?: FileSystemIconType, colorOverride?: FileSystemIconColor): JSX.Element { if (!type) { return ( @@ -186,12 +243,12 @@ export function iconForType(type?: string, colorOverride?: FileSystemIconColor): ) } - // Then check fileSystemTypes - if (type in fileSystemTypes && fileSystemTypes[type as keyof typeof fileSystemTypes]?.icon) { - const IconElement = fileSystemTypes[type as keyof typeof fileSystemTypes].icon + // Check if the type exists in fileSystemTypes manifest and resolve iconType from there + const fileSystemType = fileSystemTypes[type as keyof typeof fileSystemTypes] + if (fileSystemType?.iconType && fileSystemType.iconType in iconTypes) { return ( - - {IconElement} + + {iconTypes[fileSystemType.iconType as keyof typeof iconTypes].icon} ) } @@ -228,21 +285,29 @@ export const getDefaultTreeNew = (): FileSystemImport[] => path: `Data/Source`, type: 'hog_function/source', href: urls.pipelineNodeNew(PipelineStage.Source), + icon: , + iconColor: ['var(--color-product-data-pipeline-light)'] as FileSystemIconColor, }, { path: `Data/Destination`, type: 'hog_function/destination', href: urls.pipelineNodeNew(PipelineStage.Destination), + icon: , + iconColor: ['var(--color-product-data-pipeline-light)'] as FileSystemIconColor, }, { path: `Data/Transformation`, type: 'hog_function/transformation', href: urls.pipelineNodeNew(PipelineStage.Transformation), + icon: , + iconColor: ['var(--color-product-data-pipeline-light)'] as FileSystemIconColor, }, { path: `Data/Site app`, type: 'hog_function/site_app', href: urls.pipelineNodeNew(PipelineStage.SiteApp), + icon: , + iconColor: ['var(--color-product-data-pipeline-light)'] as FileSystemIconColor, }, ].sort((a, b) => a.path.localeCompare(b.path, undefined, { sensitivity: 'accent' })) @@ -251,31 +316,31 @@ export const getDefaultTreeData = (): FileSystemImport[] => [ { path: 'Event definitions', category: 'Definitions', - iconType: 'definitions', + iconType: 'event_definition', href: urls.eventDefinitions(), }, { path: 'Property definitions', category: 'Definitions', - iconType: 'definitions', + iconType: 'property_definition', href: urls.propertyDefinitions(), }, { path: 'Annotations', category: 'Metadata', - iconType: 'notification', + iconType: 'annotation', href: urls.annotations(), }, { path: 'Comments', category: 'Metadata', - iconType: 'notification', + iconType: 'comment', href: urls.comments(), }, { path: 'Ingestion warnings', category: 'Pipeline', - iconType: 'warning', + iconType: 'ingestion_warning', href: urls.ingestionWarnings(), flag: FEATURE_FLAGS.INGESTION_WARNINGS_ENABLED, }, @@ -283,21 +348,21 @@ export const getDefaultTreeData = (): FileSystemImport[] => [ path: `Sources`, category: 'Pipeline', type: 'hog_function/source', - iconType: 'plug', + iconType: 'data_pipeline', href: urls.pipeline(PipelineTab.Sources), } as FileSystemImport, { path: `Transformations`, category: 'Pipeline', type: 'hog_function/transformation', - iconType: 'plug', + iconType: 'data_pipeline', href: urls.pipeline(PipelineTab.Transformations), } as FileSystemImport, { path: `Destinations`, category: 'Pipeline', type: 'hog_function/destination', - iconType: 'plug', + iconType: 'data_pipeline', href: urls.pipeline(PipelineTab.Destinations), } as FileSystemImport, ] @@ -309,31 +374,41 @@ export const getDefaultTreeProducts = (): FileSystemImport[] => path: 'Dashboards', category: 'Analytics', type: 'dashboard', + iconType: 'dashboard' as FileSystemIconType, + iconColor: ['var(--color-product-dashboards-light)'] as FileSystemIconColor, href: urls.dashboards(), }, { path: 'Notebooks', category: 'Tools', type: 'notebook', + iconType: 'notebook' as FileSystemIconType, href: urls.notebooks(), }, { path: `Data pipelines`, category: 'Tools', type: 'hog_function', - iconType: 'plug', + iconType: 'data_pipeline' as FileSystemIconType, + iconColor: ['var(--color-product-data-pipeline-light)'] as FileSystemIconColor, href: urls.pipeline(), } as FileSystemImport, { path: `SQL editor`, category: 'Analytics', type: 'sql', + iconType: 'sql_editor' as FileSystemIconType, + iconColor: ['var(--color-product-data-warehouse-light)'] as FileSystemIconColor, href: urls.sqlEditor(), } as FileSystemImport, { path: 'Heatmaps', category: 'Behavior', - iconType: 'heatmap', + iconType: 'heatmap' as FileSystemIconType, + iconColor: [ + 'var(--color-product-heatmaps-light)', + 'var(--color-product-heatmaps-dark)', + ] as FileSystemIconColor, href: urls.heatmaps(), flag: FEATURE_FLAGS.HEATMAPS_UI, tags: ['alpha'], @@ -355,14 +430,14 @@ export const getDefaultTreePersons = (): FileSystemImport[] => [ { path: 'Persons', category: 'People', - iconType: 'cohort', + iconType: 'person' as FileSystemIconType, href: urls.persons(), visualOrder: 10, }, { path: 'Cohorts', category: 'People', - type: 'cohort', + type: 'cohort' as FileSystemIconType, href: urls.cohorts(), visualOrder: 20, }, diff --git a/frontend/src/layout/panel-layout/ProjectTree/projectTreeDataLogic.tsx b/frontend/src/layout/panel-layout/ProjectTree/projectTreeDataLogic.tsx index 40f16db028..8e1a3eea97 100644 --- a/frontend/src/layout/panel-layout/ProjectTree/projectTreeDataLogic.tsx +++ b/frontend/src/layout/panel-layout/ProjectTree/projectTreeDataLogic.tsx @@ -34,7 +34,7 @@ import { } from '~/layout/panel-layout/ProjectTree/utils' import { FEATURE_FLAGS } from '~/lib/constants' import { groupsModel } from '~/models/groupsModel' -import { FileSystemEntry, FileSystemImport } from '~/queries/schema/schema-general' +import { FileSystemEntry, FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-general' import { UserBasicType } from '~/types' import type { projectTreeDataLogicType } from './projectTreeDataLogicType' @@ -571,7 +571,7 @@ export const projectTreeDataLogic = kea([ { path: 'Groups', category: 'Groups', - iconType: 'cohort', + iconType: 'group', href: urls.groups(0), visualOrder: 30, }, @@ -579,7 +579,7 @@ export const projectTreeDataLogic = kea([ : Array.from(groupTypes.values()).map((groupType) => ({ path: capitalizeFirstLetter(aggregationLabel(groupType.group_type_index).plural), category: 'Groups', - iconType: 'cohort', + iconType: 'group', href: urls.groups(groupType.group_type_index), visualOrder: 30 + groupType.group_type_index, })) @@ -594,7 +594,7 @@ export const projectTreeDataLogic = kea([ path: shortcut.path, type: shortcut.type, category: 'Saved Views', - iconType: 'database' as const, + iconType: 'group' as FileSystemIconType, href: shortcut.href || '', visualOrder: 100, shortcut: true, diff --git a/frontend/src/layout/panel-layout/ProjectTree/utils.tsx b/frontend/src/layout/panel-layout/ProjectTree/utils.tsx index dd5aca9d81..05b203d9cc 100644 --- a/frontend/src/layout/panel-layout/ProjectTree/utils.tsx +++ b/frontend/src/layout/panel-layout/ProjectTree/utils.tsx @@ -5,7 +5,7 @@ import { TreeDataItem } from 'lib/lemon-ui/LemonTree/LemonTree' import { SearchHighlightMultiple } from '~/layout/navigation-3000/components/SearchHighlight' import { RecentResults, SearchResults } from '~/layout/panel-layout/ProjectTree/projectTreeLogic' -import { FileSystemEntry, FileSystemImport } from '~/queries/schema/schema-general' +import { FileSystemEntry, FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-general' import { UserBasicType } from '~/types' import { iconForType } from './defaultTree' @@ -101,7 +101,10 @@ export function convertFileSystemEntryToTreeDataItem({ const displayName = const user: UserBasicType | undefined = item.meta?.created_by ? users?.[item.meta.created_by] : undefined - const icon = iconForType('iconType' in item ? item.iconType : item.type) + const icon = iconForType( + ('iconType' in item ? item.iconType : undefined) || (item.type as FileSystemIconType), + 'iconColor' in item ? item.iconColor : undefined + ) const node: TreeDataItem = { id: nodeId, name: itemName, diff --git a/frontend/src/layout/scenes/components/SceneTitleSection.tsx b/frontend/src/layout/scenes/components/SceneTitleSection.tsx index 3f3f73275f..54d922ff54 100644 --- a/frontend/src/layout/scenes/components/SceneTitleSection.tsx +++ b/frontend/src/layout/scenes/components/SceneTitleSection.tsx @@ -11,20 +11,16 @@ import { TextareaPrimitive } from 'lib/ui/TextareaPrimitive/TextareaPrimitive' import { WrappingLoadingSkeleton } from 'lib/ui/WrappingLoadingSkeleton/WrappingLoadingSkeleton' import { cn } from 'lib/utils/css-classes' -import { fileSystemTypes } from '~/products' +import { FileSystemIconType } from '~/queries/schema/schema-general' import { FileSystemIconColor } from '~/types' import '../../panel-layout/ProjectTree/defaultTree' -import { ProductIconWrapper } from '../../panel-layout/ProjectTree/defaultTree' -import { iconForType } from '../../panel-layout/ProjectTree/defaultTree' +import { ProductIconWrapper, iconForType } from '../../panel-layout/ProjectTree/defaultTree' type ResourceType = { to?: string - tooltip?: string /** example: 'action' */ - type: keyof typeof fileSystemTypes | string - /** example: 'actions' */ - typePlural: string + type: FileSystemIconType | string /** If your resource type matches a product in fileSystemTypes, you can use this to override the icon */ forceIcon?: JSX.Element /** If your resource type matches a product in fileSystemTypes, you can use this to override the product's icon color */ @@ -85,7 +81,7 @@ export function SceneTitleSection({ {resourceType.forceIcon} ) : ( - iconForType(resourceType.type) + iconForType(resourceType.type ? (resourceType.type as FileSystemIconType) : undefined) ) return (
@@ -114,14 +110,6 @@ export function SceneTitleSection({
{description !== null && (description || canEdit) && (
- {/* */} Read the docs @@ -147,7 +135,7 @@ export function SceneTitleSection({ diff --git a/frontend/src/lib/components/CommandBar/searchBarLogic.ts b/frontend/src/lib/components/CommandBar/searchBarLogic.ts index aaa417366a..67c1dd3ebf 100644 --- a/frontend/src/lib/components/CommandBar/searchBarLogic.ts +++ b/frontend/src/lib/components/CommandBar/searchBarLogic.ts @@ -10,7 +10,7 @@ import { urls } from 'scenes/urls' import { getDefaultTreeProducts, iconForType } from '~/layout/panel-layout/ProjectTree/defaultTree' import { groupsModel } from '~/models/groupsModel' -import { FileSystemImport } from '~/queries/schema/schema-general' +import { FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-general' import { Group, InsightShortId, PersonType, SearchResponse, SearchableEntity } from '~/types' import { commandBarLogic } from './commandBarLogic' @@ -57,7 +57,9 @@ function rankProductTreeItems(treeItems: FileSystemImport[], query: string): Tre result_id: item.href || item.path, extra_fields: { ...item, - icon: item.iconType ? iconForType(item.iconType) : iconForType(item.type), + icon: item.iconType + ? iconForType(item.iconType as FileSystemIconType) + : iconForType(item.type as FileSystemIconType), description: `Category: ${item.category}`, }, rank, diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx index cac0e1a344..01e37e6d4e 100644 --- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx @@ -1,7 +1,7 @@ -import { IconBuilding, IconPerson, IconPiggyBank } from '@posthog/icons' +import { IconBuilding, IconPeople, IconPerson, IconPiggyBank } from '@posthog/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' -import { IconCohort, IconUnverifiedEvent } from 'lib/lemon-ui/icons' +import { IconUnverifiedEvent } from 'lib/lemon-ui/icons' import { PropertyFilterType } from '~/types' @@ -22,7 +22,7 @@ export function PropertyFilterIcon({ type }: { type?: PropertyFilterType }): JSX case 'cohort': return ( - + ) case 'group': diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json index 9b505afc62..e33c2ddecf 100644 --- a/frontend/src/queries/schema.json +++ b/frontend/src/queries/schema.json @@ -12209,32 +12209,65 @@ "required": ["id", "path"], "type": "object" }, + "FileSystemIconColor": { + "anyOf": [ + { + "items": { + "type": "string" + }, + "maxItems": 1, + "minItems": 1, + "type": "array" + }, + { + "items": { + "type": "string" + }, + "maxItems": 2, + "minItems": 2, + "type": "array" + } + ] + }, "FileSystemIconType": { "enum": [ - "plug", - "cohort", - "insight", - "definitions", - "warning", - "errorTracking", - "ai", - "cursor", + "dashboard", + "llm_analytics", + "product_analytics", + "revenue_analytics", + "sql_editor", + "web_analytics", + "error_tracking", "heatmap", - "database", - "folder", - "handMoney", - "live", - "notification", - "pieChart", - "piggyBank", - "sql", - "insightFunnel", - "insightTrends", - "insightRetention", - "insightUserPaths", - "insightLifecycle", - "insightStickiness", - "insightHogQL" + "session_replay", + "survey", + "user_interview", + "early_access_feature", + "experiment", + "feature_flag", + "data_pipeline", + "data_warehouse", + "task", + "link", + "logs", + "messaging", + "notebook", + "action", + "comment", + "annotation", + "event_definition", + "property_definition", + "ingestion_warning", + "person", + "cohort", + "group", + "insight_funnel", + "insight_trend", + "insight_retention", + "insight_user_path", + "insight_lifecycle", + "insight_stickiness", + "insight_hogql" ], "type": "string" }, @@ -12260,6 +12293,10 @@ "description": "Object's URL", "type": "string" }, + "iconColor": { + "$ref": "#/definitions/FileSystemIconColor", + "description": "Color of the icon" + }, "iconType": { "$ref": "#/definitions/FileSystemIconType" }, diff --git a/frontend/src/queries/schema/schema-general.ts b/frontend/src/queries/schema/schema-general.ts index c0df8308bc..036711ec58 100644 --- a/frontend/src/queries/schema/schema-general.ts +++ b/frontend/src/queries/schema/schema-general.ts @@ -20,6 +20,7 @@ import { ExperimentHoldoutType, ExperimentMetricGoal, ExperimentMetricMathType, + FileSystemIconColor, FilterLogicalOperator, FilterType, FunnelConversionWindowTimeUnit, @@ -2354,30 +2355,43 @@ export interface FileSystemEntry { } export type FileSystemIconType = - | 'plug' - | 'cohort' - | 'insight' - | 'definitions' - | 'warning' - | 'errorTracking' - | 'ai' - | 'cursor' + | 'dashboard' + | 'llm_analytics' + | 'product_analytics' + | 'revenue_analytics' + | 'sql_editor' + | 'web_analytics' + | 'error_tracking' | 'heatmap' - | 'database' - | 'folder' - | 'handMoney' - | 'live' - | 'notification' - | 'pieChart' - | 'piggyBank' - | 'sql' - | 'insightFunnel' - | 'insightTrends' - | 'insightRetention' - | 'insightUserPaths' - | 'insightLifecycle' - | 'insightStickiness' - | 'insightHogQL' + | 'session_replay' + | 'survey' + | 'user_interview' + | 'early_access_feature' + | 'experiment' + | 'feature_flag' + | 'data_pipeline' + | 'data_warehouse' + | 'task' + | 'link' + | 'logs' + | 'messaging' + | 'notebook' + | 'action' + | 'comment' + | 'annotation' + | 'event_definition' + | 'property_definition' + | 'ingestion_warning' + | 'person' + | 'cohort' + | 'group' + | 'insight_funnel' + | 'insight_trend' + | 'insight_retention' + | 'insight_user_path' + | 'insight_lifecycle' + | 'insight_stickiness' + | 'insight_hogql' export interface FileSystemImport extends Omit { id?: string iconType?: FileSystemIconType @@ -2390,6 +2404,8 @@ export interface FileSystemImport extends Omit { protocol?: string /** Category label to place this under */ category?: string + /** Color of the icon */ + iconColor?: FileSystemIconColor } export interface PersistedFolder { diff --git a/frontend/src/scenes/activity/explore/EventsScene.tsx b/frontend/src/scenes/activity/explore/EventsScene.tsx index 093206be60..2d047c2eeb 100644 --- a/frontend/src/scenes/activity/explore/EventsScene.tsx +++ b/frontend/src/scenes/activity/explore/EventsScene.tsx @@ -48,7 +48,6 @@ export function EventsScene({ tabId }: { tabId?: string } = {}): JSX.Element { description="A catalog of all user interactions with your app or website." resourceType={{ type: RESOURCE_TYPE, - typePlural: 'events', forceIcon: , }} /> diff --git a/frontend/src/scenes/activity/live/LiveEventsTable.tsx b/frontend/src/scenes/activity/live/LiveEventsTable.tsx index 0a8e26cbf9..da1e01e940 100644 --- a/frontend/src/scenes/activity/live/LiveEventsTable.tsx +++ b/frontend/src/scenes/activity/live/LiveEventsTable.tsx @@ -105,7 +105,6 @@ export function LiveEventsTable(): JSX.Element { description="Real-time events from your app or website." resourceType={{ type: 'live events', - typePlural: 'live events', forceIcon: , }} /> diff --git a/frontend/src/scenes/annotations/Annotations.tsx b/frontend/src/scenes/annotations/Annotations.tsx index 23bf8cd898..0adee77100 100644 --- a/frontend/src/scenes/annotations/Annotations.tsx +++ b/frontend/src/scenes/annotations/Annotations.tsx @@ -154,7 +154,6 @@ export function Annotations(): JSX.Element { description="Annotations allow you to mark when certain changes happened so you can easily see how they impacted your metrics." resourceType={{ type: 'annotation', - typePlural: 'annotations', forceIcon: , }} /> diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx index 8743953e21..394933e925 100644 --- a/frontend/src/scenes/cohorts/CohortEdit.tsx +++ b/frontend/src/scenes/cohorts/CohortEdit.tsx @@ -224,8 +224,6 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element { resourceType={{ to: urls.cohorts(), type: RESOURCE_TYPE, - typePlural: 'cohorts', - tooltip: 'Go to all cohorts', }} isLoading={cohortLoading} onNameChange={(value) => { diff --git a/frontend/src/scenes/cohorts/Cohorts.tsx b/frontend/src/scenes/cohorts/Cohorts.tsx index 1a404f3394..d68236cf8c 100644 --- a/frontend/src/scenes/cohorts/Cohorts.tsx +++ b/frontend/src/scenes/cohorts/Cohorts.tsx @@ -173,7 +173,6 @@ export function Cohorts(): JSX.Element { description="A catalog of identified persons and your created cohorts." resourceType={{ type: RESOURCE_TYPE, - typePlural: 'cohorts', }} docsURL="https://posthog.com/docs/data/cohorts" /> diff --git a/frontend/src/scenes/dashboard/DashboardHeader.tsx b/frontend/src/scenes/dashboard/DashboardHeader.tsx index 4a19619093..169ca9e577 100644 --- a/frontend/src/scenes/dashboard/DashboardHeader.tsx +++ b/frontend/src/scenes/dashboard/DashboardHeader.tsx @@ -643,7 +643,6 @@ export function DashboardHeader(): JSX.Element | null { description={dashboard?.description} resourceType={{ type: 'dashboard', - typePlural: 'dashboards', }} onNameChange={(value) => updateDashboard({ id: dashboard?.id, name: value, allowUndo: true })} onDescriptionChange={(value) => diff --git a/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx b/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx index 7040e06413..a7cc987e21 100644 --- a/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx +++ b/frontend/src/scenes/dashboard/dashboards/Dashboards.tsx @@ -76,7 +76,6 @@ export function Dashboards(): JSX.Element { description="Create and manage your dashboards" resourceType={{ type: 'dashboard', - typePlural: 'dashboards', }} /> diff --git a/frontend/src/scenes/data-management/comments/Comments.tsx b/frontend/src/scenes/data-management/comments/Comments.tsx index f29c4c09bc..df047ae115 100644 --- a/frontend/src/scenes/data-management/comments/Comments.tsx +++ b/frontend/src/scenes/data-management/comments/Comments.tsx @@ -1,7 +1,7 @@ import { useActions, useValues } from 'kea' import { useEffect } from 'react' -import { IconNotification, IconTrash } from '@posthog/icons' +import { IconTrash } from '@posthog/icons' import { LemonButton, LemonInput, LemonSelect } from '@posthog/lemon-ui' import { MemberSelect } from 'lib/components/MemberSelect' @@ -132,8 +132,6 @@ export function Comments(): JSX.Element { description="Comments allow you to provide context and discussions on various elements in PostHog." resourceType={{ type: 'comment', - typePlural: 'comments', - forceIcon: , }} /> diff --git a/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx b/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx index e21755b488..2afd666c64 100644 --- a/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx +++ b/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx @@ -135,7 +135,6 @@ export function EventDefinitionsTable(): JSX.Element { description="Event definitions are a way to define events that can be used in your app or website." resourceType={{ type: 'event', - typePlural: 'events', forceIcon: , }} /> diff --git a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx index a92d95820e..7560129ac1 100644 --- a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx +++ b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx @@ -84,7 +84,6 @@ export function PropertyDefinitionsTable(): JSX.Element { description="Properties are additional fields you can configure to be sent along with an event capture." resourceType={{ type: 'property', - typePlural: 'properties', forceIcon: , }} /> diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx index 008db79f05..c5cb7b9f30 100644 --- a/frontend/src/scenes/experiments/ExperimentForm.tsx +++ b/frontend/src/scenes/experiments/ExperimentForm.tsx @@ -59,7 +59,6 @@ const ExperimentFormFields = (): JSX.Element => { description={null} resourceType={{ type: 'experiment', - typePlural: 'experiments', }} canEdit onNameChange={(name) => { diff --git a/frontend/src/scenes/experiments/ExperimentView/Info.tsx b/frontend/src/scenes/experiments/ExperimentView/Info.tsx index 08e87c2bc0..aed3fc7d27 100644 --- a/frontend/src/scenes/experiments/ExperimentView/Info.tsx +++ b/frontend/src/scenes/experiments/ExperimentView/Info.tsx @@ -118,7 +118,6 @@ export function Info(): JSX.Element { description={null} resourceType={{ type: 'experiment', - typePlural: 'experiments', }} isLoading={experimentLoading} onNameChange={(name) => updateExperiment({ name })} diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx index 56b0c3c694..eb67350673 100644 --- a/frontend/src/scenes/experiments/Experiments.tsx +++ b/frontend/src/scenes/experiments/Experiments.tsx @@ -424,7 +424,6 @@ export function Experiments(): JSX.Element { docsURL="https://posthog.com/docs/experiments/installation?utm_medium=in-product&utm_campaign=new-experiment" resourceType={{ type: 'experiment', - typePlural: 'experiments', }} /> diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx index 078cb129ac..7842bc1831 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx @@ -757,7 +757,6 @@ export function FeatureFlag({ id }: FeatureFlagLogicProps): JSX.Element { description={featureFlag.name} resourceType={{ type: 'feature_flag', - typePlural: 'Feature flags', }} /> diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx index 96af77399c..479dc3d476 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlags.tsx @@ -587,7 +587,6 @@ export function FeatureFlags(): JSX.Element { description="Use feature flags to safely deploy and roll back new features in an easy-to-manage way. Roll variants out to certain groups, a percentage of users, or everyone all at once." resourceType={{ type: 'feature_flag', - typePlural: 'Feature flags', }} /> diff --git a/frontend/src/scenes/groups/Groups.tsx b/frontend/src/scenes/groups/Groups.tsx index 2460820111..e670c61d99 100644 --- a/frontend/src/scenes/groups/Groups.tsx +++ b/frontend/src/scenes/groups/Groups.tsx @@ -55,7 +55,6 @@ export function Groups({ groupTypeIndex }: { groupTypeIndex: GroupTypeIndex }): description="Associate events with a group or entity - such as a company, community, or project. Analyze these events as if they were sent by that entity itself. Great for B2B, marketplaces, and more." resourceType={{ type: groupTypeName, - typePlural: groupTypeNamePlural, forceIcon: , }} /> @@ -95,7 +94,6 @@ export function Groups({ groupTypeIndex }: { groupTypeIndex: GroupTypeIndex }): description={`A catalog of all ${groupTypeNamePlural} for this project`} resourceType={{ type: groupTypeName, - typePlural: groupTypeNamePlural, forceIcon: , }} /> diff --git a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx index 3f0917084e..480560e07d 100644 --- a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx +++ b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx @@ -310,7 +310,6 @@ export function HeatmapsBrowser(): JSX.Element { description="See where users are clicking on your website." resourceType={{ type: 'heatmap', - typePlural: 'Heatmaps', }} /> diff --git a/frontend/src/scenes/insights/InsightPageHeader.tsx b/frontend/src/scenes/insights/InsightPageHeader.tsx index e123afd7d2..e0c186fd16 100644 --- a/frontend/src/scenes/insights/InsightPageHeader.tsx +++ b/frontend/src/scenes/insights/InsightPageHeader.tsx @@ -856,8 +856,7 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In name={defaultInsightName || ''} description={insight?.description || ''} resourceType={{ - type: 'insight', - typePlural: 'insights', + type: 'product_analytics', }} onNameChange={(name) => { setInsightMetadata({ name }) diff --git a/frontend/src/scenes/new-tab/newTabSceneLogic.tsx b/frontend/src/scenes/new-tab/newTabSceneLogic.tsx index c6727d2e38..80a9b16a1e 100644 --- a/frontend/src/scenes/new-tab/newTabSceneLogic.tsx +++ b/frontend/src/scenes/new-tab/newTabSceneLogic.tsx @@ -1,20 +1,24 @@ -import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea' +import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea' import { router } from 'kea-router' import { IconDatabase, IconHogQL } from '@posthog/icons' +import { featureFlagLogic } from 'lib/logic/featureFlagLogic' + import { + ProductIconWrapper, getDefaultTreeData, getDefaultTreeNew, getDefaultTreeProducts, iconForType, } from '~/layout/panel-layout/ProjectTree/defaultTree' +import { FileSystemIconType, FileSystemImport } from '~/queries/schema/schema-general' import type { newTabSceneLogicType } from './newTabSceneLogicType' export interface ItemsGridItem { category: string - types: { name: string; icon?: JSX.Element; href?: string }[] + types: { name: string; icon?: JSX.Element; href?: string; flag?: string }[] } export interface ItemsGridItemSingle { @@ -22,9 +26,26 @@ export interface ItemsGridItemSingle { type: { name: string; icon?: JSX.Element; href?: string } } +function getIconForFileSystemItem(fs: FileSystemImport): JSX.Element { + // If the item has a direct icon property, use it with color wrapper + if ('icon' in fs && fs.icon) { + return ( + + {fs.icon} + + ) + } + + // Fall back to iconForType for iconType or type + return iconForType('iconType' in fs ? fs.iconType : (fs.type as FileSystemIconType), fs.iconColor) +} + export const newTabSceneLogic = kea([ path(['scenes', 'new-tab', 'newTabSceneLogic']), props({} as { tabId?: string }), + connect(() => ({ + values: [featureFlagLogic, ['featureFlags']], + })), key((props) => props.tabId || 'default'), actions({ setSearch: (search: string) => ({ search }), @@ -59,41 +80,53 @@ export const newTabSceneLogic = kea([ }), selectors({ itemsGrid: [ - () => [], - (): ItemsGridItem[] => { + (s) => [s.featureFlags], + (featureFlags): ItemsGridItem[] => { const newInsightItems = getDefaultTreeNew() .filter(({ path }) => path.startsWith('Insight/')) .map((fs) => ({ href: fs.href, - name: fs.path.substring(8), - icon: iconForType(fs.iconType), + name: 'new ' + fs.path.substring(8), + icon: getIconForFileSystemItem(fs), + flag: fs.flag, })) + .filter(({ flag }) => !flag || featureFlags[flag as keyof typeof featureFlags]) const newDataItems = getDefaultTreeNew() .filter(({ path }) => path.startsWith('Data/')) .map((fs) => ({ href: fs.href, name: 'Data ' + fs.path.substring(5).toLowerCase(), - icon: iconForType(fs.iconType), + icon: getIconForFileSystemItem(fs), + flag: fs.flag, })) + .filter(({ flag }) => !flag || featureFlags[flag as keyof typeof featureFlags]) const newOtherItems = getDefaultTreeNew() .filter(({ path }) => !path.startsWith('Insight/') && !path.startsWith('Data/')) .map((fs) => ({ href: fs.href, - name: fs.path, - icon: iconForType(fs.iconType), + name: 'new ' + fs.path, + icon: getIconForFileSystemItem(fs), + flag: fs.flag, })) + .filter(({ flag }) => !flag || featureFlags[flag as keyof typeof featureFlags]) - const products = getDefaultTreeProducts().map((fs) => ({ - href: fs.href, - name: fs.path, - icon: iconForType(fs.iconType), - })) + const products = getDefaultTreeProducts() + .map((fs) => ({ + href: fs.href, + name: fs.path, + icon: getIconForFileSystemItem(fs), + flag: fs.flag, + })) + .filter(({ flag }) => !flag || featureFlags[flag as keyof typeof featureFlags]) - const data = getDefaultTreeData().map((fs) => ({ - href: fs.href, - name: fs.path, - icon: iconForType(fs.iconType), - })) + const data = getDefaultTreeData() + .map((fs) => ({ + href: fs.href, + name: fs.path, + icon: getIconForFileSystemItem(fs), + flag: fs.flag, + })) + .filter(({ flag }) => !flag || featureFlags[flag as keyof typeof featureFlags]) const queryTree: ItemsGridItem[] = [ { diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx index ebbb20ef64..807e469668 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeBacklink.tsx @@ -14,6 +14,7 @@ import { IconLive, IconLogomark, IconNotebook, + IconPeople, IconPerson, IconPlaylist, IconRewindPlay, @@ -21,7 +22,6 @@ import { import { Link } from '@posthog/lemon-ui' import api from 'lib/api' -import { IconCohort } from 'lib/lemon-ui/icons' import { urls } from 'scenes/urls' import { openNotebook } from '~/models/notebooksModel' @@ -112,7 +112,7 @@ const BACKLINK_MAP: BackLinkMapper[] = [ { type: 'cohorts', regex: new RegExp(urls.cohort('(.+)')), - icon: , + icon: , getTitle: async (path: string) => { const id = path.split('/')[2] const cohort = await api.cohorts.get(Number(id)) diff --git a/frontend/src/scenes/persons/PersonsScene.tsx b/frontend/src/scenes/persons/PersonsScene.tsx index 67c6ac9e8f..b89e10907a 100644 --- a/frontend/src/scenes/persons/PersonsScene.tsx +++ b/frontend/src/scenes/persons/PersonsScene.tsx @@ -80,7 +80,6 @@ export function PersonsScene({ tabId }: { tabId?: string } = {}): JSX.Element { description="A catalog of all the people behind your events" resourceType={{ type: 'person', - typePlural: 'persons', forceIcon: , }} docsURL="https://posthog.com/docs/data/persons" diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx index f4c09e6c3e..9f18ee68ec 100644 --- a/frontend/src/scenes/saved-insights/SavedInsights.tsx +++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx @@ -795,8 +795,7 @@ export function SavedInsights(): JSX.Element { name="Product analytics" description="Track, analyze, and experiment with user behavior." resourceType={{ - type: 'insight', - typePlural: 'insights', + type: 'product_analytics', }} /> diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index 545a4c3c9f..e0b91af727 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -156,7 +156,7 @@ export const sceneConfigurations: Record = { [Scene.Login]: { onlyUnauthenticated: true }, [Scene.Max]: { projectBased: true, name: 'Max', layout: 'app-raw', hideProjectNotice: true }, [Scene.MoveToPostHogCloud]: { name: 'Move to PostHog Cloud', hideProjectNotice: true }, - [Scene.NewTab]: { projectBased: true, name: 'New tab' }, + [Scene.NewTab]: { projectBased: true, name: 'New tab', hideProjectNotice: true, layout: 'app-raw' }, [Scene.Notebook]: { projectBased: true, hideProjectNotice: true, diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx index c2dc38f447..c571902cff 100644 --- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx +++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx @@ -208,8 +208,7 @@ export function SessionRecordingsPlaylistScene(): JSX.Element { name={playlist.name || ''} description={playlist.description || ''} resourceType={{ - type: 'session_recording_playlist', - typePlural: 'Session Recordings', + type: 'session_replay', }} onNameChange={(name) => { updatePlaylist({ name }) diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx index 443d399e7e..0b3e70fdd9 100644 --- a/frontend/src/scenes/surveys/SurveyEdit.tsx +++ b/frontend/src/scenes/surveys/SurveyEdit.tsx @@ -288,7 +288,6 @@ export default function SurveyEdit(): JSX.Element { description={survey.description} resourceType={{ type: 'survey', - typePlural: 'surveys', }} canEdit onNameChange={(name) => setSurveyValue('name', name)} diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx index f55ccfe4b6..a7cd852e43 100644 --- a/frontend/src/scenes/surveys/SurveyView.tsx +++ b/frontend/src/scenes/surveys/SurveyView.tsx @@ -348,7 +348,6 @@ export function SurveyView({ id }: { id: string }): JSX.Element { description={survey.description} resourceType={{ type: 'survey', - typePlural: 'surveys', }} canEdit onNameChange={(name) => updateSurvey({ id, name })} diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx index a16c407ade..b3256e77de 100644 --- a/frontend/src/scenes/surveys/Surveys.tsx +++ b/frontend/src/scenes/surveys/Surveys.tsx @@ -168,7 +168,6 @@ function Surveys(): JSX.Element { description="Create surveys to collect feedback from your users" resourceType={{ type: 'survey', - typePlural: 'surveys', }} docsURL="https://posthog.com/docs/surveys?utm_medium=in-product&utm_campaign=new-survey" /> diff --git a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.tsx b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.tsx index b1a09d5b68..5350302a64 100644 --- a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.tsx +++ b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.tsx @@ -72,7 +72,6 @@ export function ToolbarLaunch(): JSX.Element { description="PostHog toolbar launches PostHog right in your app or website." resourceType={{ type: 'toolbar', - typePlural: 'toolbar', forceIcon: , }} docsURL="https://posthog.com/docs/toolbar" diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsScene.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsScene.tsx index 6baaf753cf..aad4792842 100644 --- a/frontend/src/scenes/web-analytics/WebAnalyticsScene.tsx +++ b/frontend/src/scenes/web-analytics/WebAnalyticsScene.tsx @@ -20,7 +20,6 @@ export function WebAnalyticsScene(): JSX.Element { description="Analyze your web analytics data to understand website performance and user behavior." resourceType={{ type: 'web', - typePlural: 'Web analytics', forceIcon: , forceIconColorOverride: [ 'var(--color-product-web-analytics-light)', diff --git a/frontend/src/scenes/web-analytics/tabs/marketing-analytics/frontend/components/settings/MarketingAnalyticsSettings.tsx b/frontend/src/scenes/web-analytics/tabs/marketing-analytics/frontend/components/settings/MarketingAnalyticsSettings.tsx index 442c75e93d..95df0ef6ea 100644 --- a/frontend/src/scenes/web-analytics/tabs/marketing-analytics/frontend/components/settings/MarketingAnalyticsSettings.tsx +++ b/frontend/src/scenes/web-analytics/tabs/marketing-analytics/frontend/components/settings/MarketingAnalyticsSettings.tsx @@ -24,7 +24,6 @@ export function MarketingAnalyticsSettings({ hideTitle = false }: { hideTitle?: description={null} resourceType={{ type: 'marketing', - typePlural: 'marketing', forceIcon: , }} /> diff --git a/frontend/src/styles/base.scss b/frontend/src/styles/base.scss index a6de9c5ab3..53d227dbc1 100644 --- a/frontend/src/styles/base.scss +++ b/frontend/src/styles/base.scss @@ -326,7 +326,7 @@ --color-product-error-tracking-dark: rgb(247 165 1); --color-product-surveys-light: rgb(243 84 84); --color-product-data-warehouse-light: rgb(133 103 255); - --color-product-max-ai-light: rgb(182 42 217); + --color-product-llm-analytics-light: rgb(182 42 217); --color-product-links-light: rgb(143 7 255); --color-product-revenue-analytics-light: rgb(52 175 102); --color-product-revenue-analytics-dark: rgb(54 196 111); diff --git a/frontend/src/types.ts b/frontend/src/types.ts index c47933b5d2..03563798d3 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -51,6 +51,7 @@ import type { ExperimentMetric, ExperimentTrendsQuery, ExternalDataSourceType, + FileSystemIconType, FileSystemImport, HogQLQuery, HogQLQueryModifiers, @@ -5597,15 +5598,17 @@ export interface CoreMemory { export type FileSystemIconColor = [string] | [string, string] export interface FileSystemType { - icon?: JSX.Element href?: (ref: string) => string - iconColor?: FileSystemIconColor // Visual name of the product name: string // Flag to determine if the product is enabled flag?: string // Used to filter the tree items by product filterKey?: string + // Icon type of the icon + iconType?: FileSystemIconType + // Color of the icon + iconColor?: FileSystemIconColor } export interface ProductManifest { diff --git a/products/actions/frontend/pages/ActionEdit.tsx b/products/actions/frontend/pages/ActionEdit.tsx index 87e324b9b7..822b9609ad 100644 --- a/products/actions/frontend/pages/ActionEdit.tsx +++ b/products/actions/frontend/pages/ActionEdit.tsx @@ -326,8 +326,6 @@ export function ActionEdit({ action: loadedAction, id, actionLoading }: ActionEd resourceType={{ to: urls.actions(), type: RESOURCE_TYPE, - tooltip: 'Go to all actions', - typePlural: 'actions', }} markdown={true} isLoading={actionLoading} diff --git a/products/actions/frontend/pages/Actions.tsx b/products/actions/frontend/pages/Actions.tsx index 3c6e227bdd..784a468d24 100644 --- a/products/actions/frontend/pages/Actions.tsx +++ b/products/actions/frontend/pages/Actions.tsx @@ -24,7 +24,6 @@ export function Actions(): JSX.Element { description="Combine several related events into one, which you can then analyze in insights and dashboards as if it were a single event." resourceType={{ type: 'action', - typePlural: 'actions', }} docsURL="https://posthog.com/docs/data/actions" /> diff --git a/products/actions/manifest.tsx b/products/actions/manifest.tsx index 171b5e2772..136b7111c1 100644 --- a/products/actions/manifest.tsx +++ b/products/actions/manifest.tsx @@ -1,8 +1,8 @@ -import { IconCursor } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ActionType, ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { ActionType, FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Actions', @@ -47,9 +47,10 @@ export const manifest: ProductManifest = { fileSystemTypes: { action: { name: 'Action', - icon: , href: (ref: string) => urls.action(ref), filterKey: 'action', + iconType: 'action' as FileSystemIconType, + iconColor: ['var(--color-product-actions-light)'] as FileSystemIconColor, }, }, treeItemsNew: [ @@ -57,14 +58,17 @@ export const manifest: ProductManifest = { type: 'action', path: 'Action', href: urls.createAction(), + iconType: 'action' as FileSystemIconType, + iconColor: ['var(--color-product-actions-light)'] as FileSystemIconColor, }, ], treeItemsMetadata: [ { path: 'Actions', category: 'Definitions', - iconType: 'cursor', href: urls.actions(), + iconType: 'action' as FileSystemIconType, + iconColor: ['var(--color-product-actions-light)'] as FileSystemIconColor, }, ], } diff --git a/products/cohorts/manifest.tsx b/products/cohorts/manifest.tsx index 30bb24089d..d01808f89f 100644 --- a/products/cohorts/manifest.tsx +++ b/products/cohorts/manifest.tsx @@ -1,8 +1,8 @@ -import { IconPeople } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Cohorts', @@ -13,9 +13,10 @@ export const manifest: ProductManifest = { fileSystemTypes: { cohort: { name: 'Cohort', - icon: , + iconType: 'cohort' as FileSystemIconType, href: (ref: string) => urls.cohort(ref), filterKey: 'cohort', + iconColor: ['var(--color-product-cohorts-light)'] as FileSystemIconColor, }, }, treeItemsNew: [ @@ -23,6 +24,8 @@ export const manifest: ProductManifest = { path: `Cohort`, type: 'cohort', href: urls.cohort('new'), + iconType: 'cohort' as FileSystemIconType, + iconColor: ['var(--color-product-cohorts-light)'] as FileSystemIconColor, }, ], treeItemsProducts: [], diff --git a/products/dashboards/manifest.tsx b/products/dashboards/manifest.tsx index 12f3b3ddae..122de58668 100644 --- a/products/dashboards/manifest.tsx +++ b/products/dashboards/manifest.tsx @@ -1,10 +1,10 @@ import { combineUrl } from 'kea-router' -import { IconDashboard } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Dashboards', @@ -24,7 +24,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { dashboard: { name: 'Dashboard', - icon: , + iconType: 'dashboard' as FileSystemIconType, href: (ref: string) => urls.dashboard(ref), iconColor: ['var(--color-product-dashboards-light)'], filterKey: 'dashboard', @@ -35,6 +35,8 @@ export const manifest: ProductManifest = { path: `Dashboard`, type: 'dashboard', href: urls.dashboards() + '#newDashboard=modal', + iconType: 'dashboard' as FileSystemIconType, + iconColor: ['var(--color-product-dashboards-light)'] as FileSystemIconColor, }, ], } diff --git a/products/data_warehouse/manifest.tsx b/products/data_warehouse/manifest.tsx index 42049eaaa8..403aeeb4e6 100644 --- a/products/data_warehouse/manifest.tsx +++ b/products/data_warehouse/manifest.tsx @@ -1,7 +1,8 @@ import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '~/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' +import { FileSystemIconColor, ProductManifest } from '~/types' export const manifest: ProductManifest = { name: 'Data Warehouse', @@ -24,9 +25,10 @@ export const manifest: ProductManifest = { { path: 'Data Warehouse', category: 'Tools', - iconType: 'database', href: urls.dataWarehouse(), flag: FEATURE_FLAGS.DATA_WAREHOUSE_SCENE, + iconType: 'data_warehouse' as FileSystemIconType, + iconColor: ['var(--color-product-data-warehouse-light)'] as FileSystemIconColor, }, ], } diff --git a/products/early_access_features/frontend/EarlyAccessFeature.tsx b/products/early_access_features/frontend/EarlyAccessFeature.tsx index 5707925888..23514e9bd1 100644 --- a/products/early_access_features/frontend/EarlyAccessFeature.tsx +++ b/products/early_access_features/frontend/EarlyAccessFeature.tsx @@ -284,7 +284,6 @@ export function EarlyAccessFeature({ id }: EarlyAccessFeatureLogicProps): JSX.El description={earlyAccessFeature.description} resourceType={{ type: 'early_access_feature', - typePlural: 'Early access features', }} canEdit onNameChange={(value) => { diff --git a/products/early_access_features/frontend/EarlyAccessFeatures.tsx b/products/early_access_features/frontend/EarlyAccessFeatures.tsx index e8d13dae94..436efad1c5 100644 --- a/products/early_access_features/frontend/EarlyAccessFeatures.tsx +++ b/products/early_access_features/frontend/EarlyAccessFeatures.tsx @@ -42,7 +42,6 @@ export function EarlyAccessFeatures(): JSX.Element { description="Allow your users to individually enable or disable features that are in public beta." resourceType={{ type: 'early_access_feature', - typePlural: 'Early access features', }} /> diff --git a/products/early_access_features/manifest.tsx b/products/early_access_features/manifest.tsx index 0dfd89ac18..7a1d791d3c 100644 --- a/products/early_access_features/manifest.tsx +++ b/products/early_access_features/manifest.tsx @@ -1,8 +1,8 @@ -import { IconRocket } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Early access features', @@ -36,7 +36,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { early_access_feature: { name: 'Early access feature', - icon: , + iconType: 'early_access_feature' as FileSystemIconType, href: (ref: string) => urls.earlyAccessFeature(ref), iconColor: [ 'var(--color-product-early-access-features-light)', @@ -50,6 +50,11 @@ export const manifest: ProductManifest = { path: `Early access feature`, type: 'early_access_feature', href: urls.earlyAccessFeature('new'), + iconType: 'early_access_feature' as FileSystemIconType, + iconColor: [ + 'var(--color-product-early-access-features-light)', + 'var(--color-product-early-access-features-dark)', + ] as FileSystemIconColor, }, ], treeItemsProducts: [ @@ -58,6 +63,11 @@ export const manifest: ProductManifest = { category: 'Features', type: 'early_access_feature', href: urls.earlyAccessFeatures(), + iconType: 'early_access_feature' as FileSystemIconType, + iconColor: [ + 'var(--color-product-early-access-features-light)', + 'var(--color-product-early-access-features-dark)', + ] as FileSystemIconColor, }, ], } diff --git a/products/error_tracking/frontend/ErrorTrackingScene.tsx b/products/error_tracking/frontend/ErrorTrackingScene.tsx index a6cc59a92c..951ddb3492 100644 --- a/products/error_tracking/frontend/ErrorTrackingScene.tsx +++ b/products/error_tracking/frontend/ErrorTrackingScene.tsx @@ -180,8 +180,7 @@ const Header = (): JSX.Element => { name="Error tracking" description="Track and analyze errors in your website or application to understand and fix issues." resourceType={{ - type: 'errorTracking', - typePlural: 'Error Tracking', + type: 'error_tracking', }} /> diff --git a/products/error_tracking/manifest.tsx b/products/error_tracking/manifest.tsx index eab8428127..adf77c9d94 100644 --- a/products/error_tracking/manifest.tsx +++ b/products/error_tracking/manifest.tsx @@ -2,7 +2,9 @@ import { combineUrl } from 'kea-router' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Error tracking', @@ -62,7 +64,12 @@ export const manifest: ProductManifest = { { path: 'Error tracking', category: 'Behavior', - iconType: 'errorTracking', + type: 'error_tracking', + iconType: 'error_tracking' as FileSystemIconType, + iconColor: [ + 'var(--color-product-error-tracking-light)', + 'var(--color-product-error-tracking-dark)', + ] as FileSystemIconColor, href: urls.errorTracking(), }, ], diff --git a/products/experiments/manifest.tsx b/products/experiments/manifest.tsx index dc600bc759..6d344a2467 100644 --- a/products/experiments/manifest.tsx +++ b/products/experiments/manifest.tsx @@ -1,11 +1,9 @@ -import { IconFlask } from '@posthog/icons' - import { toParams } from 'lib/utils' import { urls } from 'scenes/urls' import { ExperimentMetric } from '~/queries/schema/schema-general' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Experiments', @@ -29,7 +27,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { experiment: { name: 'Experiment', - icon: , + iconType: 'experiment', href: (ref: string) => urls.experiment(ref), iconColor: ['var(--color-product-experiments-light)'], filterKey: 'experiment', @@ -40,6 +38,8 @@ export const manifest: ProductManifest = { path: `Experiment`, type: 'experiment', href: urls.experiment('new'), + iconType: 'experiment', + iconColor: ['var(--color-product-experiments-light)'] as FileSystemIconColor, }, ], treeItemsProducts: [ @@ -48,6 +48,8 @@ export const manifest: ProductManifest = { category: 'Features', type: 'experiment', href: urls.experiments(), + iconType: 'experiment', + iconColor: ['var(--color-product-experiments-light)'] as FileSystemIconColor, }, ], } diff --git a/products/feature_flags/manifest.tsx b/products/feature_flags/manifest.tsx index 42499fc6f5..2a2364465d 100644 --- a/products/feature_flags/manifest.tsx +++ b/products/feature_flags/manifest.tsx @@ -1,8 +1,6 @@ -import { IconToggle } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Feature Flags', @@ -14,7 +12,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { feature_flag: { name: 'Feature flag', - icon: , + iconType: 'feature_flag', href: (ref: string) => urls.featureFlag(ref), iconColor: ['var(--color-product-feature-flags-light)'], filterKey: 'feature_flag', @@ -25,6 +23,8 @@ export const manifest: ProductManifest = { path: `Feature flag`, type: 'feature_flag', href: urls.featureFlag('new'), + iconType: 'feature_flag', + iconColor: ['var(--color-product-feature-flags-light)'] as FileSystemIconColor, }, ], treeItemsProducts: [ diff --git a/products/links/manifest.tsx b/products/links/manifest.tsx index 55aa4d4910..b97d41a1fd 100644 --- a/products/links/manifest.tsx +++ b/products/links/manifest.tsx @@ -1,9 +1,8 @@ -import { IconExternal } from '@posthog/icons' - import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '~/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' +import { FileSystemIconColor, ProductManifest } from '~/types' export const manifest: ProductManifest = { name: 'Links', @@ -36,7 +35,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { link: { name: 'Link', - icon: , + iconType: 'link' as FileSystemIconType, href: (ref: string) => urls.link(ref), iconColor: ['var(--color-product-links-light)'], filterKey: 'link', @@ -48,6 +47,8 @@ export const manifest: ProductManifest = { path: `Link`, type: 'link', href: urls.link('new'), + iconType: 'link' as FileSystemIconType, + iconColor: ['var(--color-product-links-light)'] as FileSystemIconColor, flag: FEATURE_FLAGS.LINKS, }, ], diff --git a/products/llm_analytics/frontend/LLMAnalyticsScene.tsx b/products/llm_analytics/frontend/LLMAnalyticsScene.tsx index 9e863a20a4..03152f3a4b 100644 --- a/products/llm_analytics/frontend/LLMAnalyticsScene.tsx +++ b/products/llm_analytics/frontend/LLMAnalyticsScene.tsx @@ -341,8 +341,7 @@ export function LLMAnalyticsScene(): JSX.Element { name="LLM Analytics" description="Analyze and understand your LLM usage and performance." resourceType={{ - type: 'ai', - typePlural: 'LLM Analytics', + type: 'llm_analytics', }} /> diff --git a/products/llm_analytics/manifest.tsx b/products/llm_analytics/manifest.tsx index cc084e2ecc..3a80323c91 100644 --- a/products/llm_analytics/manifest.tsx +++ b/products/llm_analytics/manifest.tsx @@ -2,7 +2,9 @@ import { combineUrl } from 'kea-router' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'LLM Analytics', @@ -112,7 +114,8 @@ export const manifest: ProductManifest = { { path: 'LLM analytics', category: 'Analytics', - iconType: 'ai', + iconType: 'llm_analytics' as FileSystemIconType, + iconColor: ['var(--color-product-llm-analytics-light)'] as FileSystemIconColor, href: urls.llmAnalyticsDashboard(), }, ], diff --git a/products/logs/manifest.tsx b/products/logs/manifest.tsx index 789e7ca68a..a024c2b703 100644 --- a/products/logs/manifest.tsx +++ b/products/logs/manifest.tsx @@ -1,7 +1,9 @@ import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconType } from '~/queries/schema/schema-general' + +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Logs', @@ -25,7 +27,8 @@ export const manifest: ProductManifest = { { path: 'Logs', category: 'Tools', - iconType: 'live', + iconType: 'logs' as FileSystemIconType, + iconColor: ['var(--color-product-logs-light)'] as FileSystemIconColor, href: urls.logs(), flag: FEATURE_FLAGS.LOGS, tags: ['alpha'], diff --git a/products/messaging/manifest.tsx b/products/messaging/manifest.tsx index bf805f68c7..0ee339a989 100644 --- a/products/messaging/manifest.tsx +++ b/products/messaging/manifest.tsx @@ -1,9 +1,7 @@ -import { IconCursor } from '@posthog/icons' - import { FEATURE_FLAGS, PRODUCT_VISUAL_ORDER } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' import type { MessagingSceneTab } from './frontend/MessagingScene' export const manifest: ProductManifest = { @@ -53,8 +51,8 @@ export const manifest: ProductManifest = { fileSystemTypes: { messaging: { name: 'Campaign', - icon: , - iconColor: ['var(--color-product-messaging-light)'], + iconType: 'messaging', + iconColor: ['var(--color-product-messaging-light)'] as FileSystemIconColor, href: (ref: string) => urls.messagingCampaign(ref), filterKey: 'messaging', }, @@ -68,6 +66,8 @@ export const manifest: ProductManifest = { category: 'Tools', tags: ['alpha'], flag: FEATURE_FLAGS.MESSAGING, + iconType: 'messaging', + iconColor: ['var(--color-product-messaging-light)'] as FileSystemIconColor, }, ], } diff --git a/products/notebooks/manifest.tsx b/products/notebooks/manifest.tsx index 70238cc986..8de80e2c9d 100644 --- a/products/notebooks/manifest.tsx +++ b/products/notebooks/manifest.tsx @@ -1,5 +1,3 @@ -import { IconNotebook } from '@posthog/icons' - import { urls } from 'scenes/urls' import { ProductManifest } from '../../frontend/src/types' @@ -14,7 +12,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { notebook: { name: 'Notebook', - icon: , + iconType: 'notebook', href: (ref: string) => urls.notebook(ref), filterKey: 'notebook', }, @@ -24,6 +22,7 @@ export const manifest: ProductManifest = { path: `Notebook`, type: 'notebook', href: urls.notebook('new'), + iconType: 'notebook', }, ], } diff --git a/products/product_analytics/manifest.tsx b/products/product_analytics/manifest.tsx index fa0363f3d9..1e961d5ddf 100644 --- a/products/product_analytics/manifest.tsx +++ b/products/product_analytics/manifest.tsx @@ -1,7 +1,5 @@ import { combineUrl } from 'kea-router' -import { IconGraph } from '@posthog/icons' - import { AlertType } from 'lib/components/Alerts/types' import { INSIGHT_VISUAL_ORDER } from 'lib/constants' import { urls } from 'scenes/urls' @@ -9,7 +7,13 @@ import { urls } from 'scenes/urls' import { DashboardFilter, HogQLFilters, HogQLVariable, Node, NodeKind } from '~/queries/schema/schema-general' import { isDataTableNode, isDataVisualizationNode, isHogQLQuery } from '~/queries/utils' -import { DashboardType, InsightShortId, InsightType, ProductManifest } from '../../frontend/src/types' +import { + DashboardType, + FileSystemIconColor, + InsightShortId, + InsightType, + ProductManifest, +} from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Product Analytics', @@ -77,7 +81,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { insight: { name: 'Insight', - icon: , + iconType: 'product_analytics', href: (ref: string) => urls.insightView(ref as InsightShortId), iconColor: ['var(--color-product-product-analytics-light)'], filterKey: 'insight', @@ -88,42 +92,48 @@ export const manifest: ProductManifest = { path: `Insight/Trends`, type: 'insight', href: urls.insightNew({ type: InsightType.TRENDS }), - iconType: 'insightTrends', + iconType: 'insight_trend', + iconColor: ['var(--color-insight-trends-light)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.trends, }, { path: `Insight/Funnel`, type: 'insight', href: urls.insightNew({ type: InsightType.FUNNELS }), - iconType: 'insightFunnel', + iconType: 'insight_funnel', + iconColor: ['var(--color-insight-funnel-light)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.funnel, }, { path: `Insight/Retention`, type: 'insight', href: urls.insightNew({ type: InsightType.RETENTION }), - iconType: 'insightRetention', + iconType: 'insight_retention', + iconColor: ['var(--color-insight-retention-light)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.retention, }, { path: `Insight/User paths`, type: 'insight', href: urls.insightNew({ type: InsightType.PATHS }), - iconType: 'insightUserPaths', + iconType: 'insight_user_path', + iconColor: ['var(--color-insight-user-paths-light)', 'var(--color-user-paths-dark)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.paths, }, { path: `Insight/Stickiness`, type: 'insight', href: urls.insightNew({ type: InsightType.STICKINESS }), - iconType: 'insightStickiness', + iconType: 'insight_stickiness', + iconColor: ['var(--color-insight-stickiness-light)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.stickiness, }, { path: `Insight/Lifecycle`, type: 'insight', href: urls.insightNew({ type: InsightType.LIFECYCLE }), - iconType: 'insightLifecycle', + iconType: 'insight_lifecycle', + iconColor: ['var(--color-insight-lifecycle-light)'] as FileSystemIconColor, visualOrder: INSIGHT_VISUAL_ORDER.lifecycle, }, ], @@ -133,6 +143,8 @@ export const manifest: ProductManifest = { category: 'Analytics', type: 'insight', href: urls.insights(), + iconType: 'product_analytics', + iconColor: ['var(--color-product-product-analytics-light)'] as FileSystemIconColor, }, ], } diff --git a/products/replay/manifest.tsx b/products/replay/manifest.tsx index bea280223b..97bd079377 100644 --- a/products/replay/manifest.tsx +++ b/products/replay/manifest.tsx @@ -1,10 +1,8 @@ import { combineUrl } from 'kea-router' -import { IconRewindPlay } from '@posthog/icons' - import { urls } from 'scenes/urls' -import { ProductManifest, RecordingUniversalFilters, ReplayTabs } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest, RecordingUniversalFilters, ReplayTabs } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Replay', @@ -28,7 +26,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { session_recording_playlist: { name: 'Replay playlist', - icon: , + iconType: 'session_replay', href: (ref: string) => urls.replayPlaylist(ref), iconColor: ['var(--color-product-session-replay-light)', 'var(--color-product-session-replay-dark)'], filterKey: 'session_recording_playlist', @@ -39,6 +37,11 @@ export const manifest: ProductManifest = { path: `Replay playlist`, type: 'session_recording_playlist', href: urls.replayPlaylist('new'), + iconType: 'session_replay', + iconColor: [ + 'var(--color-product-session-replay-light)', + 'var(--color-product-session-replay-dark)', + ] as FileSystemIconColor, }, ], treeItemsProducts: [ @@ -47,6 +50,8 @@ export const manifest: ProductManifest = { category: 'Behavior', href: urls.replay(ReplayTabs.Home), type: 'session_recording_playlist', + iconType: 'session_replay', + iconColor: ['var(--color-product-session-replay-light)', 'var(--color-product-session-replay-dark)'], }, ], } diff --git a/products/revenue_analytics/frontend/RevenueAnalyticsScene.tsx b/products/revenue_analytics/frontend/RevenueAnalyticsScene.tsx index c66daa940a..c622471406 100644 --- a/products/revenue_analytics/frontend/RevenueAnalyticsScene.tsx +++ b/products/revenue_analytics/frontend/RevenueAnalyticsScene.tsx @@ -51,8 +51,7 @@ export function RevenueAnalyticsScene(): JSX.Element { name={PRODUCT_NAME} description={PRODUCT_DESCRIPTION} resourceType={{ - type: PRODUCT_THING_NAME, - typePlural: PRODUCT_NAME, + type: 'revenue_analytics', }} /> diff --git a/products/revenue_analytics/frontend/settings/RevenueAnalyticsSettings.tsx b/products/revenue_analytics/frontend/settings/RevenueAnalyticsSettings.tsx index 148c84c8e0..c574b16fc5 100644 --- a/products/revenue_analytics/frontend/settings/RevenueAnalyticsSettings.tsx +++ b/products/revenue_analytics/frontend/settings/RevenueAnalyticsSettings.tsx @@ -1,7 +1,7 @@ import { useValues } from 'kea' import { useRef, useState } from 'react' -import { IconHandMoney, IconPlus } from '@posthog/icons' +import { IconPlus } from '@posthog/icons' import { LemonTabs, Link } from '@posthog/lemon-ui' import { BaseCurrency } from 'lib/components/BaseCurrency/BaseCurrency' @@ -54,9 +54,7 @@ export function RevenueAnalyticsSettings(): JSX.Element { name="Revenue" description={introductionDescription} resourceType={{ - type: 'revenue', - typePlural: 'revenue events', - forceIcon: , + type: 'revenue_analytics', }} /> diff --git a/products/revenue_analytics/manifest.tsx b/products/revenue_analytics/manifest.tsx index c60844e7df..b130f6d61e 100644 --- a/products/revenue_analytics/manifest.tsx +++ b/products/revenue_analytics/manifest.tsx @@ -1,8 +1,7 @@ -import { IconPiggyBank } from '@posthog/icons' - import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' +import { FileSystemIconType } from '~/queries/schema/schema-general' import { ProductManifest } from '~/types' export const manifest: ProductManifest = { @@ -35,7 +34,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { revenue: { name: 'Revenue', - icon: , + iconType: 'revenue_analytics' as FileSystemIconType, href: () => urls.revenueAnalytics(), iconColor: ['var(--color-product-revenue-analytics-light)', 'var(--color-product-revenue-analytics-dark)'], filterKey: 'revenue', @@ -45,14 +44,16 @@ export const manifest: ProductManifest = { { path: 'Revenue settings', category: 'Definitions', - iconType: 'handMoney', + iconType: 'revenue_analytics' as FileSystemIconType, + iconColor: ['var(--color-product-revenue-analytics-light)', 'var(--color-product-revenue-analytics-dark)'], href: urls.revenueSettings(), flag: FEATURE_FLAGS.REVENUE_ANALYTICS, }, { path: 'Marketing settings', category: 'Definitions', - iconType: 'definitions', + iconType: 'revenue_analytics' as FileSystemIconType, + iconColor: ['var(--color-product-revenue-analytics-light)', 'var(--color-product-revenue-analytics-dark)'], href: urls.marketingAnalytics(), flag: FEATURE_FLAGS.WEB_ANALYTICS_MARKETING, }, diff --git a/products/surveys/manifest.tsx b/products/surveys/manifest.tsx index 9a4d9ba51d..8795f95b49 100644 --- a/products/surveys/manifest.tsx +++ b/products/surveys/manifest.tsx @@ -1,9 +1,7 @@ -import { IconMessage } from '@posthog/icons' - import { SurveysTabs } from 'scenes/surveys/surveysLogic' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Surveys', @@ -16,7 +14,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { survey: { name: 'Survey', - icon: , + iconType: 'survey', href: (ref: string) => urls.survey(ref), iconColor: ['var(--color-product-surveys-light)'], filterKey: 'survey', @@ -27,6 +25,8 @@ export const manifest: ProductManifest = { path: `Survey`, type: 'survey', href: urls.survey('new'), + iconType: 'survey', + iconColor: ['var(--color-product-surveys-light)'] as FileSystemIconColor, }, ], treeItemsProducts: [ @@ -35,6 +35,8 @@ export const manifest: ProductManifest = { category: 'Behavior', type: 'survey', href: urls.surveys(), + iconType: 'survey', + iconColor: ['var(--color-product-surveys-light)'] as FileSystemIconColor, }, ], } diff --git a/products/tasks/frontend/TaskTracker.tsx b/products/tasks/frontend/TaskTracker.tsx index d62c983f65..48ea25aeb2 100644 --- a/products/tasks/frontend/TaskTracker.tsx +++ b/products/tasks/frontend/TaskTracker.tsx @@ -60,7 +60,6 @@ export function TaskTracker(): JSX.Element { description="Manage and track development tasks across all PostHog products" resourceType={{ type: 'task', - typePlural: 'tasks', }} /> diff --git a/products/tasks/manifest.tsx b/products/tasks/manifest.tsx index 4f57451648..12f6d7e804 100644 --- a/products/tasks/manifest.tsx +++ b/products/tasks/manifest.tsx @@ -1,9 +1,7 @@ -import { IconBug } from '@posthog/icons' - import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Tasks', @@ -26,7 +24,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { task: { name: 'Task', - icon: , + iconType: 'task', href: () => urls.taskTracker(), iconColor: ['var(--product-tasks-light)', 'var(--product-tasks-dark)'], filterKey: 'task', @@ -41,6 +39,8 @@ export const manifest: ProductManifest = { type: 'task', href: urls.taskTracker(), flag: FEATURE_FLAGS.TASKS, + iconType: 'task', + iconColor: ['var(--product-tasks-light)', 'var(--product-tasks-dark)'] as FileSystemIconColor, }, ], } diff --git a/products/user_interviews/frontend/UserInterviews.tsx b/products/user_interviews/frontend/UserInterviews.tsx index 4549a0d766..2867f3a7d7 100644 --- a/products/user_interviews/frontend/UserInterviews.tsx +++ b/products/user_interviews/frontend/UserInterviews.tsx @@ -35,7 +35,6 @@ export function UserInterviews(): JSX.Element { description="Make full use of user interviews by recording them with PostHog." resourceType={{ type: 'user_interview', - typePlural: 'User interviews', }} /> diff --git a/products/user_interviews/manifest.tsx b/products/user_interviews/manifest.tsx index 58f8b67e76..4fc180a7a1 100644 --- a/products/user_interviews/manifest.tsx +++ b/products/user_interviews/manifest.tsx @@ -1,9 +1,7 @@ -import { IconChat } from '@posthog/icons' - import { FEATURE_FLAGS } from 'lib/constants' import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'User interviews', @@ -32,7 +30,7 @@ export const manifest: ProductManifest = { fileSystemTypes: { user_interview: { name: 'User interview', - icon: , + iconType: 'user_interview', href: (ref: string) => urls.userInterview(ref), iconColor: ['var(--color-product-user-interviews-light)'], filterKey: 'user_interview', @@ -47,6 +45,8 @@ export const manifest: ProductManifest = { type: 'user_interview', flag: FEATURE_FLAGS.USER_INTERVIEWS, tags: ['alpha'], + iconType: 'user_interview', + iconColor: ['var(--color-product-user-interviews-light)'] as FileSystemIconColor, }, ], } diff --git a/products/web_analytics/manifest.tsx b/products/web_analytics/manifest.tsx index de92c05cac..8c5c35ca2e 100644 --- a/products/web_analytics/manifest.tsx +++ b/products/web_analytics/manifest.tsx @@ -1,6 +1,6 @@ import { urls } from 'scenes/urls' -import { ProductManifest } from '../../frontend/src/types' +import { FileSystemIconColor, ProductManifest } from '../../frontend/src/types' export const manifest: ProductManifest = { name: 'Web Analytics', @@ -15,7 +15,8 @@ export const manifest: ProductManifest = { { path: 'Web analytics', category: 'Analytics', - iconType: 'pieChart', + iconType: 'web_analytics', + iconColor: ['var(--color-product-web-analytics-light)'] as FileSystemIconColor, href: urls.webAnalytics(), }, ], diff --git a/tsconfig.json b/tsconfig.json index 7ea293dcc0..01d0d71887 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "scenes/*": ["src/scenes/*"], "@posthog/lemon-ui": ["@posthog/lemon-ui/src/index"], "@posthog/lemon-ui/*": ["@posthog/lemon-ui/src/*"], + "@posthog/icons": ["node_modules/@posthog/icons"], "storybook/*": ["../.storybook/*"], "@posthog/ee/exports": ["../ee/exports", "@posthog/ee/exports"], "~/*": ["src/*"],