snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/integration/github/select-repository.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { useParams } from "next/navigation";
+import useSWRInfinite from "swr/infinite";
+import type { IWorkspaceIntegration } from "@plane/types";
+// services
+// ui
+import { CustomSearchSelect } from "@plane/ui";
+// helpers
+import { truncateText } from "@plane/utils";
+import { ProjectService } from "@/services/project";
+// types
+
+type Props = {
+  integration: IWorkspaceIntegration;
+  value: any;
+  label: string | React.ReactNode;
+  onChange: (repo: any) => void;
+  characterLimit?: number;
+};
+
+const projectService = new ProjectService();
+
+export function SelectRepository(props: Props) {
+  const { integration, value, label, onChange, characterLimit = 25 } = props;
+  // router
+  const { workspaceSlug } = useParams();
+
+  const getKey = (pageIndex: number) => {
+    if (!workspaceSlug || !integration) return;
+
+    return `${process.env.VITE_API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-integrations/${
+      integration.id
+    }/github-repositories/?page=${++pageIndex}`;
+  };
+
+  const fetchGithubRepos = async (url: string) => {
+    const data = await projectService.getGithubRepositories(url);
+
+    return data;
+  };
+
+  const { data: paginatedData, size, setSize, isValidating } = useSWRInfinite(getKey, fetchGithubRepos);
+
+  let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
+  userRepositories = userRepositories.filter((data) => data?.id);
+
+  const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
+
+  const options =
+    userRepositories.map((repo) => ({
+      value: repo.id,
+      query: repo.full_name,
+      content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
+    })) ?? [];
+
+  if (userRepositories.length < 1) return null;
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      options={options}
+      onChange={(val: string) => {
+        const repo = userRepositories.find((repo) => repo.id === val);
+
+        onChange(repo);
+      }}
+      label={label}
+      footerOption={
+        <>
+          {userRepositories && options.length < totalCount && (
+            <button
+              type="button"
+              className="w-full p-1 text-center text-10 text-secondary hover:bg-layer-1"
+              onClick={() => setSize(size + 1)}
+              disabled={isValidating}
+            >
+              {isValidating ? "Loading..." : "Click to load more..."}
+            </button>
+          )}
+        </>
+      }
+      optionsClassName="w-48"
+    />
+  );
+}

apps/web/core/components/integration/single-integration-card.tsx

@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR, { mutate } from "swr";
+import { TickCircleOutline } from "@makeplane/propel/icons";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
+// ui
+import { Loader } from "@plane/ui";
+// assets
+import GithubLogo from "@/app/assets/services/github.png?url";
+import SlackLogo from "@/app/assets/services/slack.png?url";
+// constants
+import { WORKSPACE_INTEGRATIONS } from "@plane/constants";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUserPermissions } from "@/hooks/store/user";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { IntegrationService } from "@/services/integrations";
+
+type Props = {
+  integration: IAppIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    installed: "Activate GitHub on individual projects to sync with specific repositories.",
+    notInstalled: "Connect with GitHub with your Plane workspace to sync project work items.",
+  },
+  slack: {
+    logo: SlackLogo,
+    installed: "Activate Slack on individual projects to sync with specific channels.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project work items.",
+  },
+};
+
+// services
+const integrationService = new IntegrationService();
+
+export const SingleIntegrationCard = observer(function SingleIntegrationCard({ integration }: Props) {
+  // states
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { config } = useInstance();
+  const { allowPermissions } = useUserPermissions();
+
+  const isUserAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const { isMobile } = usePlatformOS();
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup({
+    provider: integration.provider,
+    github_app_name: config?.github_app_name || "",
+    slack_client_id: config?.slack_client_id || "",
+  });
+
+  const { data: workspaceIntegrations } = useSWR(workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null, () =>
+    workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = Array.isArray(workspaceIntegrations)
+      ? workspaceIntegrations.find((i) => i.integration === integration.id)?.id
+      : undefined;
+
+    setDeletingIntegration(true);
+
+    await integrationService
+      .deleteWorkspaceIntegration(workspaceSlug, workspaceIntegrationId ?? "")
+      .then(() => {
+        mutate<IWorkspaceIntegration[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = Array.isArray(workspaceIntegrations)
+    ? workspaceIntegrations.find((i: IWorkspaceIntegration) => i.integration_detail.id === integration.id)
+    : undefined;
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
+      <div className="flex items-start gap-4">
+        <div className="h-10 w-10 flex-shrink-0">
+          <img
+            src={integrationDetails[integration.provider].logo}
+            className="h-full w-full object-cover"
+            alt={`${integration.title} Logo`}
+          />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-2 text-body-xs-medium">
+            {integration.title}
+            {workspaceIntegrations
+              ? isInstalled && <TickCircleOutline className="h-3.5 w-3.5 fill-transparent text-success-primary" />
+              : null}
+          </h3>
+          <p className="text-body-xs-regular text-secondary">
+            {workspaceIntegrations
+              ? isInstalled
+                ? integrationDetails[integration.provider].installed
+                : integrationDetails[integration.provider].notInstalled
+              : "Loading..."}
+          </p>
+        </div>
+      </div>
+
+      {workspaceIntegrations ? (
+        isInstalled ? (
+          <Tooltip
+            label={!isUserAdmin ? "You don't have permission to perform this" : ""}
+            layout="stacked"
+            disabled={isUserAdmin || isMobile}
+          >
+            <Button
+              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
+              variant="error-fill"
+              onClick={() => {
+                if (!isUserAdmin) return;
+                handleRemoveIntegration();
+              }}
+              disabled={!isUserAdmin}
+              loading={deletingIntegration}
+            >
+              {deletingIntegration ? "Uninstalling..." : "Uninstall"}
+            </Button>
+          </Tooltip>
+        ) : (
+          <Tooltip
+            label={!isUserAdmin ? "You don't have permission to perform this" : ""}
+            layout="stacked"
+            disabled={isUserAdmin || isMobile}
+          >
+            <Button
+              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
+              variant="primary"
+              onClick={() => {
+                if (!isUserAdmin) return;
+                startAuth();
+              }}
+              loading={isInstalling}
+            >
+              {isInstalling ? "Installing..." : "Install"}
+            </Button>
+          </Tooltip>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="32px" width="64px" />
+        </Loader>
+      )}
+    </div>
+  );
+});

apps/web/core/components/integration/slack/select-channel.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR, { mutate } from "swr";
+// types
+import type { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
+// ui
+import { Loader } from "@plane/ui";
+// fetch-keys
+import { SLACK_CHANNEL_INFO } from "@plane/constants";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+// services
+import { AppInstallationService } from "@/services/app_installation.service";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+const appInstallationService = new AppInstallationService();
+
+export const SelectChannel = observer(function SelectChannel({ integration }: Props) {
+  // store hooks
+  const { config } = useInstance();
+  // states
+  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
+  const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  // FIXME:
+  const { startAuth } = useIntegrationPopup({
+    provider: "slackChannel",
+    stateParams: integration.id,
+    // github_app_name: instance?.config?.github_client_id || "",
+    slack_client_id: config?.slack_client_id || "",
+  });
+
+  const { data: projectIntegration } = useSWR(
+    workspaceSlug && projectId && integration.id ? SLACK_CHANNEL_INFO(workspaceSlug, projectId) : null,
+    () =>
+      workspaceSlug && projectId && integration.id
+        ? appInstallationService.getSlackChannelDetail(workspaceSlug, projectId, integration.id)
+        : null
+  );
+
+  useEffect(() => {
+    if (projectId && projectIntegration && projectIntegration.length > 0) {
+      const projectSlackIntegrationCheck: ISlackIntegration | undefined = projectIntegration.find(
+        (_slack: ISlackIntegration) => _slack.project === projectId
+      );
+      if (projectSlackIntegrationCheck) {
+        setSlackChannel(() => projectSlackIntegrationCheck);
+        setSlackChannelAvailabilityToggle(true);
+      }
+    }
+  }, [projectIntegration, projectId]);
+
+  const handleDelete = async () => {
+    if (!workspaceSlug || !projectId) return;
+    if (projectIntegration.length === 0) return;
+    mutate(SLACK_CHANNEL_INFO(workspaceSlug?.toString(), projectId?.toString()), (prevData: any) => {
+      if (!prevData) return;
+      return prevData.id !== integration.id;
+    }).then(() => {
+      setSlackChannelAvailabilityToggle(false);
+      setSlackChannel(null);
+    });
+    appInstallationService
+      .removeSlackChannel(workspaceSlug, projectId, integration.id, slackChannel?.id)
+      .catch((err) => console.error(err));
+  };
+
+  const handleAuth = async () => {
+    await startAuth();
+  };
+
+  return (
+    <>
+      {projectIntegration ? (
+        <button
+          type="button"
+          className={`bg-gray-700 relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`}
+          role="switch"
+          aria-checked
+          onClick={() => {
+            slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={`shadow inline-block h-2 w-2 transform self-center rounded-full bg-white ring-0 transition duration-200 ease-in-out ${
+              slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
+            }`}
+          />
+        </button>
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </>
+  );
+});