feat: initial installation flow

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -6,6 +6,7 @@ import { useWorkspace } from "@app/context";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { EncryptionTab } from "./components/EncryptionTab";
+import { NotificationTab } from "./components/NotificationSection";
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
 import { WebhooksTab } from "./components/WebhooksTab";
 
@@ -19,6 +20,7 @@ export const ProjectSettingsPage = () => {
       key: "tab-project-encryption",
       isHidden: currentWorkspace?.version !== ProjectVersion.V3
     },
+    { name: "Notification", key: "tab-project-notification" },
     { name: "Webhooks", key: "tab-project-webhooks" }
   ];
 
@@ -56,6 +58,9 @@ export const ProjectSettingsPage = () => {
                 <EncryptionTab />
               </Tab.Panel>
             )}
+            <Tab.Panel>
+              <NotificationTab />
+            </Tab.Panel>
             <Tab.Panel>
               <WebhooksTab />
             </Tab.Panel>

frontend/src/views/Settings/ProjectSettingsPage/components/NotificationSection/NotificationTab.tsx

@@ -0,0 +1,37 @@
+import { useRouter } from "next/router";
+
+import { Button } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { fetchSlackInstallUrl } from "@app/hooks/api/slack/queries";
+
+export const NotificationTab = () => {
+  const { currentWorkspace } = useWorkspace();
+  const router = useRouter();
+  const [isConnectToSlackLoading, setIsConnectToSlackLoading] = useToggle(false);
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex justify-between">
+        <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Slack Integration</h2>
+      </div>
+
+      <p className="mb-4 text-gray-400">
+        This integration allows you send notifications to your Slack workspace in response to events
+        in your project.
+      </p>
+      <Button
+        isLoading={isConnectToSlackLoading}
+        onClick={async () => {
+          setIsConnectToSlackLoading.on();
+          const slackInstallUrl = await fetchSlackInstallUrl(currentWorkspace?.id);
+          if (slackInstallUrl) {
+            router.push(slackInstallUrl);
+          }
+        }}
+      >
+        Connect to Slack
+      </Button>
+    </div>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/NotificationSection/index.tsx

@@ -0,0 +1 @@
+export * from "./NotificationTab";