From 1f6c7fc0dc4f26a89f95f3d35397c9eabb25afaf Mon Sep 17 00:00:00 2001 From: PostHog Code Date: Wed, 6 May 2026 16:40:29 +0000 Subject: [PATCH 1/2] feat: add Slack tab to settings linking to PostHog Web Adds a Slack tab in the settings sidebar that explains the integration and links to the project-level Slack integration page in PostHog Web, since the integration isn't yet configurable from PostHog Code itself. Generated-By: PostHog Code Task-Id: 510f78f8-695d-4c28-95e9-e309b049158a --- .../settings/components/SettingsDialog.tsx | 5 +++ .../components/sections/SlackSettings.tsx | 38 +++++++++++++++++++ .../settings/stores/settingsDialogStore.ts | 1 + 3 files changed, 44 insertions(+) create mode 100644 apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx diff --git a/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx b/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx index dc35eadc2..c2d76c1ab 100644 --- a/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx +++ b/apps/code/src/renderer/features/settings/components/SettingsDialog.tsx @@ -23,6 +23,7 @@ import { Keyboard, Palette, SignOut, + SlackLogo, TrafficSignal, TreeStructure, Wrench, @@ -40,6 +41,7 @@ import { PersonalizationSettings } from "./sections/PersonalizationSettings"; import { PlanUsageSettings } from "./sections/PlanUsageSettings"; import { ShortcutsSettings } from "./sections/ShortcutsSettings"; import { SignalSourcesSettings } from "./sections/SignalSourcesSettings"; +import { SlackSettings } from "./sections/SlackSettings"; import { UpdatesSettings } from "./sections/UpdatesSettings"; import { WorkspacesSettings } from "./sections/WorkspacesSettings"; import { WorktreesSettings } from "./sections/worktrees/WorktreesSettings"; @@ -69,6 +71,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [ { id: "claude-code", label: "Claude Code", icon: }, { id: "shortcuts", label: "Shortcuts", icon: }, { id: "github", label: "GitHub", icon: }, + { id: "slack", label: "Slack", icon: }, { id: "signals", @@ -90,6 +93,7 @@ const CATEGORY_TITLES: Record = { "claude-code": "Claude Code", shortcuts: "Shortcuts", github: "GitHub", + slack: "Slack integration", signals: "Signals", updates: "Updates", @@ -107,6 +111,7 @@ const CATEGORY_COMPONENTS: Record = { "claude-code": ClaudeCodeSettings, shortcuts: ShortcutsSettings, github: GitHubSettings, + slack: SlackSettings, signals: SignalSourcesSettings, updates: UpdatesSettings, diff --git a/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx new file mode 100644 index 000000000..6a41e9ccc --- /dev/null +++ b/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx @@ -0,0 +1,38 @@ +import { useAuthStateValue } from "@features/auth/hooks/authQueries"; +import { openUrlInBrowser } from "@features/integrations/hooks/useGithubUserConnect"; +import { ArrowSquareOutIcon } from "@phosphor-icons/react"; +import { Button, Flex, Text } from "@radix-ui/themes"; +import { getPostHogUrl } from "@utils/urls"; + +export function SlackSettings() { + const projectId = useAuthStateValue((s) => s.projectId); + const cloudRegion = useAuthStateValue((s) => s.cloudRegion); + + const slackSettingsUrl = projectId + ? getPostHogUrl( + `/project/${projectId}/settings/project-posthog-code#integration-posthog-code-slack`, + cloudRegion, + ) + : null; + + return ( + + + Connect Slack to PostHog Code to kick off tasks like pull requests + directly from Slack. + + + + + + ); +} diff --git a/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts b/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts index b17c8ce59..046baf1df 100644 --- a/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts +++ b/apps/code/src/renderer/features/settings/stores/settingsDialogStore.ts @@ -11,6 +11,7 @@ export type SettingsCategory = | "claude-code" | "shortcuts" | "github" + | "slack" | "signals" | "updates" | "advanced"; From bd1f8a76fcf98055fdfa2ac757285bf3cc24066b Mon Sep 17 00:00:00 2001 From: PostHog Code Date: Wed, 6 May 2026 17:01:19 +0000 Subject: [PATCH 2/2] chore: address Greptile review on Slack settings - Move openUrlInBrowser out of the GitHub hook into its own utility module so SlackSettings (and any future caller) doesn't depend on a feature-specific file. - Wrap the disabled "Manage in PostHog Web" button in a Tooltip explaining why it's disabled when the user has no active project. Generated-By: PostHog Code Task-Id: 510f78f8-695d-4c28-95e9-e309b049158a --- .../hooks/useGithubUserConnect.ts | 10 +----- .../components/sections/GitHubSettings.tsx | 2 +- .../components/sections/SlackSettings.tsx | 34 ++++++++++++------- apps/code/src/renderer/utils/browser.ts | 9 +++++ 4 files changed, 33 insertions(+), 22 deletions(-) create mode 100644 apps/code/src/renderer/utils/browser.ts diff --git a/apps/code/src/renderer/features/integrations/hooks/useGithubUserConnect.ts b/apps/code/src/renderer/features/integrations/hooks/useGithubUserConnect.ts index 3a51b71d9..a9f362d0c 100644 --- a/apps/code/src/renderer/features/integrations/hooks/useGithubUserConnect.ts +++ b/apps/code/src/renderer/features/integrations/hooks/useGithubUserConnect.ts @@ -1,9 +1,9 @@ import { useOptionalAuthenticatedClient } from "@features/auth/hooks/authClient"; import { useAuthStateValue } from "@features/auth/hooks/authQueries"; import { useGitHubIntegrationCallback } from "@features/integrations/hooks/useGitHubIntegrationCallback"; -import { trpcClient } from "@renderer/trpc/client"; import { IS_DEV } from "@shared/constants/environment"; import { type QueryClient, useQueryClient } from "@tanstack/react-query"; +import { openUrlInBrowser } from "@utils/browser"; import { useCallback, useEffect, useRef, useState } from "react"; const POLL_INTERVAL_MS = 3_000; @@ -86,14 +86,6 @@ export function invalidateGithubQueries( void queryClient.invalidateQueries({ queryKey: ["github_login"] }); } -export async function openUrlInBrowser(url: string): Promise { - try { - await trpcClient.os.openExternal.mutate({ url }); - } catch { - window.open(url, "_blank", "noopener,noreferrer"); - } -} - export function useGithubUserConnect({ projectId }: Options): Result { const client = useOptionalAuthenticatedClient(); const cloudRegion = useAuthStateValue((s) => s.cloudRegion); diff --git a/apps/code/src/renderer/features/settings/components/sections/GitHubSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/GitHubSettings.tsx index 105e61f86..50679301b 100644 --- a/apps/code/src/renderer/features/settings/components/sections/GitHubSettings.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/GitHubSettings.tsx @@ -3,7 +3,6 @@ import { useAuthStateValue } from "@features/auth/hooks/authQueries"; import { describeGithubConnectError, invalidateGithubQueries, - openUrlInBrowser, useGithubUserConnect, } from "@features/integrations/hooks/useGithubUserConnect"; import { @@ -33,6 +32,7 @@ import type { UserGitHubIntegration } from "@renderer/api/posthogClient"; import { formatRelativeTimeLong } from "@renderer/utils/time"; import { toast } from "@renderer/utils/toast"; import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { openUrlInBrowser } from "@utils/browser"; import { useState } from "react"; const REPO_PREVIEW_COUNT = 3; diff --git a/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx index 6a41e9ccc..29641831e 100644 --- a/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/SlackSettings.tsx @@ -1,7 +1,7 @@ import { useAuthStateValue } from "@features/auth/hooks/authQueries"; -import { openUrlInBrowser } from "@features/integrations/hooks/useGithubUserConnect"; import { ArrowSquareOutIcon } from "@phosphor-icons/react"; -import { Button, Flex, Text } from "@radix-ui/themes"; +import { Button, Flex, Text, Tooltip } from "@radix-ui/themes"; +import { openUrlInBrowser } from "@utils/browser"; import { getPostHogUrl } from "@utils/urls"; export function SlackSettings() { @@ -15,6 +15,19 @@ export function SlackSettings() { ) : null; + const button = ( + + ); + return ( @@ -22,16 +35,13 @@ export function SlackSettings() { directly from Slack. - + {slackSettingsUrl ? ( + button + ) : ( + + {button} + + )} ); diff --git a/apps/code/src/renderer/utils/browser.ts b/apps/code/src/renderer/utils/browser.ts new file mode 100644 index 000000000..157a84f92 --- /dev/null +++ b/apps/code/src/renderer/utils/browser.ts @@ -0,0 +1,9 @@ +import { trpcClient } from "@renderer/trpc/client"; + +export async function openUrlInBrowser(url: string): Promise { + try { + await trpcClient.os.openExternal.mutate({ url }); + } catch { + window.open(url, "_blank", "noopener,noreferrer"); + } +}