New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

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

@@ -0,0 +1,153 @@
+import { useState } from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import IntegrationService from "services/integration";
+// hooks
+import useToast from "hooks/use-toast";
+import useIntegrationPopup from "hooks/use-integration-popup";
+// ui
+import { DangerButton, Loader, PrimaryButton } from "components/ui";
+// icons
+import GithubLogo from "public/services/github.png";
+import SlackLogo from "public/services/slack.png";
+// types
+import { IAppIntegration, IWorkspaceIntegration } from "types";
+// fetch-keys
+import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+
+type Props = {
+  integration: IAppIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    installed:
+      "Activate GitHub integrations on individual projects to sync with specific repositories.",
+    notInstalled: "Connect with GitHub with your Plane workspace to sync project issues.",
+  },
+  slack: {
+    logo: SlackLogo,
+    installed: "Activate Slack integrations on individual projects to sync with specific channels.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project issues.",
+  },
+};
+
+export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup(integration.provider);
+
+  const { data: workspaceIntegrations } = useSWR(
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
+    () =>
+      workspaceSlug
+        ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
+        : null
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = workspaceIntegrations?.find(
+      (i) => i.integration === integration.id
+    )?.id;
+
+    setDeletingIntegration(true);
+
+    await IntegrationService.deleteWorkspaceIntegration(
+      workspaceSlug as string,
+      workspaceIntegrationId ?? ""
+    )
+      .then(() => {
+        mutate<IWorkspaceIntegration[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "success",
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = workspaceIntegrations?.find(
+    (i: any) => i.integration_detail.id === integration.id
+  );
+
+  return (
+    <div className="flex items-center justify-between gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5">
+      <div className="flex items-start gap-4">
+        <div className="h-12 w-12 flex-shrink-0">
+          <Image
+            src={integrationDetails[integration.provider].logo}
+            alt={`${integration.title} Logo`}
+          />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-4 text-xl font-semibold">
+            {integration.title}
+            {workspaceIntegrations ? (
+              isInstalled ? (
+                <span className="flex items-center gap-1 text-sm font-normal text-green-500">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500" /> Installed
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 text-sm font-normal text-custom-text-200">
+                  <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-custom-background-80" />{" "}
+                  Not Installed
+                </span>
+              )
+            ) : null}
+          </h3>
+          <p className="text-sm text-custom-text-200">
+            {workspaceIntegrations
+              ? isInstalled
+                ? integrationDetails[integration.provider].installed
+                : integrationDetails[integration.provider].notInstalled
+              : "Loading..."}
+          </p>
+        </div>
+      </div>
+
+      {workspaceIntegrations ? (
+        isInstalled ? (
+          <DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration}>
+            {deletingIntegration ? "Removing..." : "Remove installation"}
+          </DangerButton>
+        ) : (
+          <PrimaryButton onClick={startAuth} loading={isInstalling}>
+            {isInstalling ? "Installing..." : "Add installation"}
+          </PrimaryButton>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </div>
+  );
+};