(Hotfix): Slack app installation flow (#9162)

Co-authored-by: openhands <openhands@all-hands.dev>
2026-01-08 22:38:05 -05:00 · 2025-06-16 15:33:43 -04:00
parent 2c4ecd02f7
commit 1f90086030
14 changed files with 110 additions and 37 deletions
--- a/docs/usage/cloud/slack-installation.mdx
+++ b/docs/usage/cloud/slack-installation.mdx
@@ -5,15 +5,38 @@ description: This guide walks you through installing the OpenHands Slack app.

 ## Prerequisites

- You are a slack workspace admin
 - Access to OpenHands Cloud

 ## Installation Steps

-1. Log in to [OpenHands Cloud](https://app.all-hands.dev)
-2. Click the button below to OpenHands Slack App <a target="_blank" href="https://slack.com/oauth/v2/authorize?client_id=7477886716822.8729519890534&scope=app_mentions:read,chat:write,users:read,channels:history,groups:history,mpim:history,im:history&user_scope=channels:history,groups:history,im:history,mpim:history"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" /></a>
-3. In the top right corner, select the workspace to install the OpenHands Slack app.
-4. Review permissions and click allow
+<AccordionGroup>
+<Accordion title="Install Slack App (only for Slack admins/owners)">
+
+  **This step is for Slack admins/owners**
+
+  1. Make sure you have permissions to install Apps to your workspace.
+  2. Click the button below to install OpenHands Slack App <a target="_blank" href="https://slack.com/oauth/v2/authorize?client_id=7477886716822.8729519890534&scope=app_mentions:read,chat:write,users:read,channels:history,groups:history,mpim:history,im:history&user_scope=channels:history,groups:history,im:history,mpim:history"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" /></a>
+  3. In the top right corner, select the workspace to install the OpenHands Slack app.
+  4. Review permissions and click allow.
+
+</Accordion>
+
+<Accordion title="Authorize Slack App (for all Slack workspace members)">
+
+  **Make sure your Slack workspace admin/owner has installed OpenHands Slack App first**
+
+  Every user in the slack workspace (including admins/owners) must link their Cloud OpenHands account to the OpenHands Slack App. To do this
+  1. Visit [integrations settings](https://app.all-hands.dev/settings/integrations) in OpenHands Cloud.
+  2. Click the button "Install Slack App".
+  3. In the top right corner, select the workspace to install the OpenHands Slack app.
+  4. Review permissions and click allow.
+
+  Depending on the workspace settings, you may need approval from your slack admin to authorize the Slack App.
+
+</Accordion>
+
+</AccordionGroup>
+

 ## Working With the Slack App

--- a/frontend/tests/components/features/home/repo-connector.test.tsx
+++ b/frontend/tests/components/features/home/repo-connector.test.tsx
@@ -31,7 +31,7 @@ const renderRepoConnector = () => {
        },
        {
          Component: () => <div data-testid="git-settings-screen" />,
-          path: "/settings/git",
+          path: "/settings/integrations",
        },
      ],
    },
--- a/frontend/tests/routes/git-settings.test.tsx
+++ b/frontend/tests/routes/git-settings.test.tsx
@@ -35,13 +35,13 @@ const queryClient = new QueryClient();
 const GitSettingsRouterStub = createRoutesStub([
  {
    Component: GitSettingsScreen,
-    path: "/settings/github",
+    path: "/settings/integrations",
  },
 ]);

 const renderGitSettingsScreen = () => {
  const { rerender, ...rest } = render(
-    <GitSettingsRouterStub initialEntries={["/settings/github"]} />,
+    <GitSettingsRouterStub initialEntries={["/settings/integrations"]} />,
    {
      wrapper: ({ children }) => (
        <QueryClientProvider client={queryClient}>
@@ -54,7 +54,7 @@ const renderGitSettingsScreen = () => {
  const rerenderGitSettingsScreen = () =>
    rerender(
      <QueryClientProvider client={queryClient}>
-        <GitSettingsRouterStub initialEntries={["/settings/github"]} />
+        <GitSettingsRouterStub initialEntries={["/settings/integrations"]} />
      </QueryClientProvider>,
    );

--- a/frontend/tests/routes/secrets-settings.test.tsx
+++ b/frontend/tests/routes/secrets-settings.test.tsx
@@ -31,7 +31,7 @@ const RouterStub = createRoutesStub([
      },
      {
        Component: () => <div data-testid="git-settings-screen" />,
-        path: "/settings/git",
+        path: "/settings/integrations",
      },
    ],
  },
--- a/frontend/tests/routes/settings-with-payment.test.tsx
+++ b/frontend/tests/routes/settings-with-payment.test.tsx
@@ -30,7 +30,7 @@ vi.mock("react-i18next", async () => {
    useTranslation: () => ({
      t: (key: string) => {
        const translations: Record<string, string> = {
-          "SETTINGS$NAV_GIT": "Git",
+          "SETTINGS$NAV_INTEGRATIONS": "Integrations",
          "SETTINGS$NAV_APPLICATION": "Application",
          "SETTINGS$NAV_CREDITS": "Credits",
          "SETTINGS$NAV_API_KEYS": "API Keys",
@@ -61,7 +61,7 @@ describe("Settings Billing", () => {
        },
        {
          Component: () => <div data-testid="git-settings-screen" />,
-          path: "/settings/git",
+          path: "/settings/integrations",
        },
        {
          Component: () => <div data-testid="user-settings-screen" />,
--- a/frontend/tests/routes/settings.test.tsx
+++ b/frontend/tests/routes/settings.test.tsx
@@ -14,7 +14,7 @@ vi.mock("react-i18next", async () => {
    useTranslation: () => ({
      t: (key: string) => {
        const translations: Record<string, string> = {
-          SETTINGS$NAV_GIT: "Git",
+          SETTINGS$NAV_INTEGRATIONS: "Integrations",
          SETTINGS$NAV_APPLICATION: "Application",
          SETTINGS$NAV_CREDITS: "Credits",
          SETTINGS$NAV_API_KEYS: "API Keys",
@@ -49,7 +49,7 @@ describe("Settings Screen", () => {
        },
        {
          Component: () => <div data-testid="git-settings-screen" />,
-          path: "/settings/git",
+          path: "/settings/integrations",
        },
        {
          Component: () => <div data-testid="application-settings-screen" />,
@@ -79,7 +79,7 @@ describe("Settings Screen", () => {
  };

  it("should render the navbar", async () => {
-    const sectionsToInclude = ["llm", "git", "application", "secrets"];
+    const sectionsToInclude = ["llm", "integrations", "application", "secrets"];
    const sectionsToExclude = ["api keys", "credits"];
    const getConfigSpy = vi.spyOn(OpenHands, "getConfig");
    // @ts-expect-error - only return app mode
@@ -111,7 +111,7 @@ describe("Settings Screen", () => {
      APP_MODE: "saas",
    });
    const sectionsToInclude = [
-      "git",
+      "integrations",
      "application",
      "credits",
      "secrets",
--- a/frontend/src/components/features/home/connect-to-provider-message.tsx
+++ b/frontend/src/components/features/home/connect-to-provider-message.tsx
@@ -10,7 +10,10 @@ export function ConnectToProviderMessage() {
  return (
    <div className="flex flex-col gap-4">
      <p>{t("HOME$CONNECT_PROVIDER_MESSAGE")}</p>
-      <Link data-testid="navigate-to-settings-button" to="/settings/git">
+      <Link
+        data-testid="navigate-to-settings-button"
+        to="/settings/integrations"
+      >
        <BrandButton type="button" variant="primary" isDisabled={isLoading}>
          {!isLoading && t("SETTINGS$TITLE")}
          {isLoading && t("HOME$LOADING")}
--- a/frontend/src/components/features/settings/git-settings/install-slack-app-anchor.tsx
+++ b/frontend/src/components/features/settings/git-settings/install-slack-app-anchor.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { BrandButton } from "../brand-button";
+
+export function InstallSlackAppAnchor() {
+  const { t } = useTranslation();
+
+  return (
+    <a
+      data-testid="install-slack-app-button"
+      href="https://slack.com/oauth/v2/authorize?client_id=7477886716822.8729519890534&scope=app_mentions:read,chat:write,users:read,channels:history,groups:history,mpim:history,im:history&user_scope=channels:history,groups:history,im:history,mpim:history"
+      target="_blank"
+      rel="noreferrer noopener"
+      className="py-9"
+    >
+      <BrandButton type="button" variant="secondary">
+        {t(I18nKey.SLACK$INSTALL_APP)}
+      </BrandButton>
+    </a>
+  );
+}
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -80,7 +80,7 @@ export enum I18nKey {
  ANALYTICS$CONFIRM_PREFERENCES = "ANALYTICS$CONFIRM_PREFERENCES",
  SETTINGS$SAVING = "SETTINGS$SAVING",
  SETTINGS$SAVE_CHANGES = "SETTINGS$SAVE_CHANGES",
-  SETTINGS$NAV_GIT = "SETTINGS$NAV_GIT",
+  SETTINGS$NAV_INTEGRATIONS = "SETTINGS$NAV_INTEGRATIONS",
  SETTINGS$NAV_APPLICATION = "SETTINGS$NAV_APPLICATION",
  SETTINGS$NAV_CREDITS = "SETTINGS$NAV_CREDITS",
  SETTINGS$NAV_SECRETS = "SETTINGS$NAV_SECRETS",
@@ -174,6 +174,7 @@ export enum I18nKey {
  GITHUB$TOKEN_INVALID = "GITHUB$TOKEN_INVALID",
  BUTTON$DISCONNECT = "BUTTON$DISCONNECT",
  GITHUB$CONFIGURE_REPOS = "GITHUB$CONFIGURE_REPOS",
+  SLACK$INSTALL_APP = "SLACK$INSTALL_APP",
  COMMON$CLICK_FOR_INSTRUCTIONS = "COMMON$CLICK_FOR_INSTRUCTIONS",
  LLM$SELECT_MODEL_PLACEHOLDER = "LLM$SELECT_MODEL_PLACEHOLDER",
  LLM$MODEL = "LLM$MODEL",
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -1279,21 +1279,21 @@
        "de": "Änderungen speichern",
        "uk": "Зберегти зміни"
    },
-    "SETTINGS$NAV_GIT": {
-        "en": "Git",
-        "ja": "Git",
-        "zh-CN": "Git",
-        "zh-TW": "Git",
-        "ko-KR": "Git",
-        "no": "Git",
-        "it": "Git",
-        "pt": "Git",
-        "es": "Git",
-        "ar": "Git",
-        "fr": "Git",
-        "tr": "Git",
-        "de": "Git",
-        "uk": "Git"
+    "SETTINGS$NAV_INTEGRATIONS": {
+        "en": "Integrations",
+        "ja": "統合",
+        "zh-CN": "集成",
+        "zh-TW": "整合",
+        "ko-KR": "통합",
+        "no": "Integrasjoner",
+        "it": "Integrazioni",
+        "pt": "Integrações",
+        "es": "Integraciones",
+        "ar": "التكامل",
+        "fr": "Intégrations",
+        "tr": "Entegrasyonlar",
+        "de": "Integrationen",
+        "uk": "Інтеграції"
    },
    "SETTINGS$NAV_APPLICATION": {
        "en": "Application",
@@ -2783,6 +2783,22 @@
        "de": "GitHub-Repositories konfigurieren",
        "uk": "Налаштування репозиторіїв Github"
    },
+    "SLACK$INSTALL_APP": {
+        "en": "Install OpenHands Slack App",
+        "ja": "OpenHands Slackアプリをインストール",
+        "zh-CN": "安装 OpenHands Slack 应用",
+        "zh-TW": "安裝 OpenHands Slack 應用程式",
+        "ko-KR": "OpenHands Slack 앱 설치",
+        "no": "Installer OpenHands Slack-app",
+        "it": "Installa l'app Slack di OpenHands",
+        "pt": "Instalar aplicativo Slack do OpenHands",
+        "es": "Instalar aplicación Slack de OpenHands",
+        "ar": "تثبيت تطبيق OpenHands Slack",
+        "fr": "Installer l'application Slack OpenHands",
+        "tr": "OpenHands Slack uygulamasını yükle",
+        "de": "OpenHands Slack-App installieren",
+        "uk": "Встановити додаток OpenHands Slack"
+    },
    "COMMON$CLICK_FOR_INSTRUCTIONS": {
        "en": "Click here for instructions",
        "ja": "手順はこちらをクリック",
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -13,7 +13,7 @@ export default [
      index("routes/llm-settings.tsx"),
      route("mcp", "routes/mcp-settings.tsx"),
      route("user", "routes/user-settings.tsx"),
-      route("git", "routes/git-settings.tsx"),
+      route("integrations", "routes/git-settings.tsx"),
      route("app", "routes/app-settings.tsx"),
      route("billing", "routes/billing.tsx"),
      route("secrets", "routes/secrets-settings.tsx"),
--- a/frontend/src/routes/git-settings.tsx
+++ b/frontend/src/routes/git-settings.tsx
@@ -7,6 +7,7 @@ import { useLogout } from "#/hooks/mutation/use-logout";
 import { GitHubTokenInput } from "#/components/features/settings/git-settings/github-token-input";
 import { GitLabTokenInput } from "#/components/features/settings/git-settings/gitlab-token-input";
 import { ConfigureGitHubRepositoriesAnchor } from "#/components/features/settings/git-settings/configure-github-repositories-anchor";
+import { InstallSlackAppAnchor } from "#/components/features/settings/git-settings/install-slack-app-anchor";
 import { I18nKey } from "#/i18n/declaration";
 import {
  displayErrorToast,
@@ -103,6 +104,10 @@ function GitSettingsScreen() {
            <ConfigureGitHubRepositoriesAnchor slug={config.APP_SLUG!} />
          )}

+          {shouldRenderExternalConfigureButtons && !isLoading && (
+            <InstallSlackAppAnchor />
+          )}
+
          {!isSaas && (
            <GitHubTokenInput
              name="github-token-input"
--- a/frontend/src/routes/secrets-settings.tsx
+++ b/frontend/src/routes/secrets-settings.tsx
@@ -84,7 +84,11 @@ function SecretsSettingsScreen() {
      )}

      {shouldRenderConnectToGitButton && (
-        <Link to="/settings/git" data-testid="connect-git-button" type="button">
+        <Link
+          to="/settings/integrations"
+          data-testid="connect-git-button"
+          type="button"
+        >
          <BrandButton type="button" variant="secondary">
            Connect a Git provider to manage secrets
          </BrandButton>
--- a/frontend/src/routes/settings.tsx
+++ b/frontend/src/routes/settings.tsx
@@ -16,7 +16,7 @@ function SettingsScreen() {

  const saasNavItems = [
    { to: "/settings/user", text: t("SETTINGS$NAV_USER") },
-    { to: "/settings/git", text: t("SETTINGS$NAV_GIT") },
+    { to: "/settings/integrations", text: t("SETTINGS$NAV_INTEGRATIONS") },
    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
    { to: "/settings/billing", text: t("SETTINGS$NAV_CREDITS") },
    { to: "/settings/secrets", text: t("SETTINGS$NAV_SECRETS") },
@@ -26,7 +26,7 @@ function SettingsScreen() {
  const ossNavItems = [
    { to: "/settings", text: t("SETTINGS$NAV_LLM") },
    { to: "/settings/mcp", text: t("SETTINGS$NAV_MCP") },
-    { to: "/settings/git", text: t("SETTINGS$NAV_GIT") },
+    { to: "/settings/integrations", text: t("SETTINGS$NAV_INTEGRATIONS") },
    { to: "/settings/app", text: t("SETTINGS$NAV_APPLICATION") },
    { to: "/settings/secrets", text: t("SETTINGS$NAV_SECRETS") },
  ];