From 66cae400d673e7344a6ac0f85f17b2e97e93bb77 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 9 Jul 2025 11:46:27 -0600
Subject: [PATCH] initial slack build out (no apis)

---
 .../(permissions)/dataset-groups/page.tsx     |  2 +-
 .../(permissions)/permission-groups/page.tsx  |  2 +-
 .../settings/(permissions)/users/page.tsx     |  2 +-
 .../(admin-only)/api-keys/page.tsx            |  2 +-
 .../(admin-only)/datasources/page.tsx         |  2 +-
 .../(admin-only)/integrations/page.tsx        | 18 +++++++++
 .../(admin-only)/security/page.tsx            | 24 ++++++------
 .../(restricted-width)/profile/page.tsx       |  2 +-
 .../integrations/SlackIntegrations.tsx        | 38 +++++++++++++++++++
 .../security/ApprovedEmailDomains.tsx         |  6 +--
 .../features/security/InviteLinks.tsx         |  4 +-
 .../security/WorkspaceRestrictions.tsx        |  5 +--
 .../SettingsCard.stories.tsx}                 | 10 ++---
 .../SettingsCard.tsx}                         | 10 ++---
 .../features/settings}/SettingsEmptyState.tsx |  0
 .../features/settings}/SettingsPageHeader.tsx |  0
 .../features/settings}/index.ts               |  1 +
 .../features/sidebars/SidebarSettings.tsx     |  5 +++
 .../ui/icons/customIcons/SlackIcon.tsx        | 34 +++++++++++++++++
 19 files changed, 130 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/integrations/page.tsx
 create mode 100644 apps/web/src/components/features/integrations/SlackIntegrations.tsx
 rename apps/web/src/components/features/{security/SecurityCards.stories.tsx => settings/SettingsCard.stories.tsx} (97%)
 rename apps/web/src/components/features/{security/SecurityCards.tsx => settings/SettingsCard.tsx} (76%)
 rename apps/web/src/{app/app/(settings_layout)/settings/_components => components/features/settings}/SettingsEmptyState.tsx (100%)
 rename apps/web/src/{app/app/(settings_layout)/settings/_components => components/features/settings}/SettingsPageHeader.tsx (100%)
 rename apps/web/src/{app/app/(settings_layout)/settings/_components => components/features/settings}/index.ts (70%)
 create mode 100644 apps/web/src/components/ui/icons/customIcons/SlackIcon.tsx

diff --git a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/page.tsx
index 14e692697..3df86edd7 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/page.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/buttons';
 import { Plus } from '@/components/ui/icons';
 import { useMemoizedFn } from '@/hooks';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
-import { SettingsPageHeader } from '../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { ListDatasetGroupsComponent } from './ListDatasetGroupsComponent';
 
 export default function Page() {
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/page.tsx
index 70b68a243..ebd5417c5 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/page.tsx
@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/buttons';
 import { Plus } from '@/components/ui/icons';
 import { useMemoizedFn } from '@/hooks';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
-import { SettingsPageHeader } from '../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { ListPermissionGroupsComponent } from './ListPermissionGroupsComponent';
 
 export default function Page() {
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/page.tsx
index 30f64fd92..69975334f 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(permissions)/users/page.tsx
@@ -9,7 +9,7 @@ import { useInviteModalStore } from '@/context/BusterAppLayout';
 import { useUserConfigContextSelector } from '@/context/Users';
 import { useMemoizedFn } from '@/hooks';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
-import { SettingsPageHeader } from '../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { ListUsersComponent } from './ListUsersComponent';
 
 export default function Page() {
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/api-keys/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/api-keys/page.tsx
index 7a629d396..3df8628aa 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/api-keys/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/api-keys/page.tsx
@@ -1,4 +1,4 @@
-import { SettingsPageHeader } from '../../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { ApiKeysController } from './ApiKeysController';
 import type { Metadata } from 'next';
 
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/datasources/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/datasources/page.tsx
index 1bfb421f5..38b27e93c 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/datasources/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/datasources/page.tsx
@@ -1,4 +1,4 @@
-import { SettingsPageHeader } from '../../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { DatasourceList } from './_DatasourceList';
 
 export default function Page() {
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/integrations/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/integrations/page.tsx
new file mode 100644
index 000000000..4dc129421
--- /dev/null
+++ b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/integrations/page.tsx
@@ -0,0 +1,18 @@
+import { SlackIntegrations } from '@/components/features/integrations/SlackIntegrations';
+import { SettingsPageHeader } from '@/components/features/settings';
+import { SettingsCards } from '@/components/features/settings';
+
+export default function IntegrationsPage() {
+  return (
+    <>
+      <SettingsPageHeader
+        title="Integrations"
+        description="Connect Buster with other apps and services"
+      />
+
+      <div className="flex flex-col space-y-6">
+        <SlackIntegrations />
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/security/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/security/page.tsx
index c88316992..4383e5491 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/security/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/security/page.tsx
@@ -1,23 +1,21 @@
 import { InviteLinks } from '@/components/features/security/InviteLinks';
-import { SettingsPageHeader } from '../../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 import { ApprovedEmailDomains } from '@/components/features/security/ApprovedEmailDomains';
 import { WorkspaceRestrictions } from '@/components/features/security/WorkspaceRestrictions';
 
 export default function Page() {
   return (
-    <div className="flex flex-col space-y-4">
-      <div>
-        <SettingsPageHeader
-          title="Security"
-          description="Manage security and general permission settings"
-        />
+    <>
+      <SettingsPageHeader
+        title="Security"
+        description="Manage security and general permission settings"
+      />
 
-        <div className="flex flex-col space-y-6">
-          <InviteLinks />
-          <ApprovedEmailDomains />
-          <WorkspaceRestrictions />
-        </div>
+      <div className="flex flex-col space-y-6">
+        <InviteLinks />
+        <ApprovedEmailDomains />
+        <WorkspaceRestrictions />
       </div>
-    </div>
+    </>
   );
 }
diff --git a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/profile/page.tsx b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/profile/page.tsx
index 7326a1d92..c3b9a8e0c 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/profile/page.tsx
+++ b/apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/profile/page.tsx
@@ -4,7 +4,7 @@ import { Avatar } from '@/components/ui/avatar';
 import { Text, Title } from '@/components/ui/typography';
 import { useUserConfigContextSelector } from '@/context/Users/BusterUserConfigProvider';
 import { formatDate } from '@/lib/date';
-import { SettingsPageHeader } from '../../_components/SettingsPageHeader';
+import { SettingsPageHeader } from '@/components/features/settings';
 
 export default function ProfilePage() {
   const user = useUserConfigContextSelector((state) => state.user);
diff --git a/apps/web/src/components/features/integrations/SlackIntegrations.tsx b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
new file mode 100644
index 000000000..d546b2395
--- /dev/null
+++ b/apps/web/src/components/features/integrations/SlackIntegrations.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { SettingsCards } from '../settings/SettingsCard';
+import { SlackIcon } from '@/components/ui/icons/customIcons/SlackIcon';
+import { Text } from '@/components/ui/typography';
+import { Button } from '@/components/ui/buttons';
+
+export const SlackIntegrations = React.memo(() => {
+  return (
+    <SettingsCards
+      title="Slack"
+      description="Connect Buster with Slack"
+      cards={[{ sections: [<ConnectSlackCard />] }]}
+    />
+  );
+});
+
+SlackIntegrations.displayName = 'SlackIntegrations';
+
+const ConnectSlackCard = React.memo(() => {
+  return (
+    <div className="flex items-center justify-between gap-x-2">
+      <div className="flex space-x-2">
+        <div className="bg-item-select flex items-center justify-center rounded p-2">
+          <SlackIcon size={16} />
+        </div>
+        <div className="flex flex-col space-y-0.5">
+          <Text>Slack account</Text>
+          <Text variant="secondary" size={'xs'}>
+            Link your slack account to use Buster from Slack
+          </Text>
+        </div>
+      </div>
+      <Button prefix={<SlackIcon size={16} />} size={'tall'}>
+        Connect Slack
+      </Button>
+    </div>
+  );
+});
diff --git a/apps/web/src/components/features/security/ApprovedEmailDomains.tsx b/apps/web/src/components/features/security/ApprovedEmailDomains.tsx
index ee46b0ed3..932a872a2 100644
--- a/apps/web/src/components/features/security/ApprovedEmailDomains.tsx
+++ b/apps/web/src/components/features/security/ApprovedEmailDomains.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useMemo, useState } from 'react';
-import { SecurityCards } from './SecurityCards';
+import { SettingsCards } from '../settings/SettingsCard';
 import { Input } from '@/components/ui/inputs';
 import { Button } from '@/components/ui/buttons';
 import { Text } from '@/components/ui/typography';
@@ -71,7 +71,7 @@ export const ApprovedEmailDomains = React.memo(() => {
   );
 
   return (
-    <SecurityCards
+    <SettingsCards
       title="Approved email domains"
       description="Anyone with an email address at these domains is allowed to sign up for this workspace"
       cards={[{ sections }]}
@@ -91,7 +91,7 @@ const AddDomainInput = React.memo(
     const handleAddDomain = useMemoizedFn(async () => {
       const domain = newDomain.trim();
       if (!domain) return;
-      
+
       const domainRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]\.[a-zA-Z]{2,}$/;
       if (!domainRegex.test(domain)) {
         openErrorMessage('Please enter a valid domain name');
diff --git a/apps/web/src/components/features/security/InviteLinks.tsx b/apps/web/src/components/features/security/InviteLinks.tsx
index 7b3db6d42..829247e6b 100644
--- a/apps/web/src/components/features/security/InviteLinks.tsx
+++ b/apps/web/src/components/features/security/InviteLinks.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { SecurityCards } from './SecurityCards';
+import { SettingsCards } from '../settings/SettingsCard';
 import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/inputs';
 import { Button } from '@/components/ui/buttons';
@@ -34,7 +34,7 @@ export const InviteLinks = React.memo(() => {
   };
 
   return (
-    <SecurityCards
+    <SettingsCards
       title="Invite links"
       description="A uniquely generated invite link allows anyone with the link to join your workspace"
       cards={[
diff --git a/apps/web/src/components/features/security/WorkspaceRestrictions.tsx b/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
index 65401da93..0f02de255 100644
--- a/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
+++ b/apps/web/src/components/features/security/WorkspaceRestrictions.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import React, { useMemo, type ReactNode } from 'react';
-import { SecurityCards } from './SecurityCards';
+import { SettingsCards } from '../settings/SettingsCard';
 import { Text } from '@/components/ui/typography';
-import { Button } from '@/components/ui/buttons';
 import { Switch } from '@/components/ui/switch';
 import {
   useGetWorkspaceSettings,
@@ -45,7 +44,7 @@ export const WorkspaceRestrictions = React.memo(() => {
   );
 
   return (
-    <SecurityCards
+    <SettingsCards
       title="Workspace restrictions"
       description="Restrict the workspace to only allow users with an email address at these domains"
       cards={[{ sections }]}
diff --git a/apps/web/src/components/features/security/SecurityCards.stories.tsx b/apps/web/src/components/features/settings/SettingsCard.stories.tsx
similarity index 97%
rename from apps/web/src/components/features/security/SecurityCards.stories.tsx
rename to apps/web/src/components/features/settings/SettingsCard.stories.tsx
index 998d3ba86..6f458c738 100644
--- a/apps/web/src/components/features/security/SecurityCards.stories.tsx
+++ b/apps/web/src/components/features/settings/SettingsCard.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SecurityCards } from './SecurityCards';
+import { SettingsCards } from './SettingsCard';
 import { Button } from '@/components/ui/buttons';
 import { Pill } from '@/components/ui/pills/Pill';
 import { Text } from '@/components/ui/typography';
 
-const meta: Meta<typeof SecurityCards> = {
-  title: 'Features/SecurityCards',
-  component: SecurityCards,
+const meta: Meta<typeof SettingsCards> = {
+  title: 'Features/SettingsCards',
+  component: SettingsCards,
   parameters: {
     layout: 'padded',
     docs: {
@@ -20,7 +20,7 @@ const meta: Meta<typeof SecurityCards> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof SecurityCards>;
+type Story = StoryObj<typeof SettingsCards>;
 
 // Mock data for different use cases
 const basicSections = [
diff --git a/apps/web/src/components/features/security/SecurityCards.tsx b/apps/web/src/components/features/settings/SettingsCard.tsx
similarity index 76%
rename from apps/web/src/components/features/security/SecurityCards.tsx
rename to apps/web/src/components/features/settings/SettingsCard.tsx
index 49676a7b5..f79b33826 100644
--- a/apps/web/src/components/features/security/SecurityCards.tsx
+++ b/apps/web/src/components/features/settings/SettingsCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Title, Paragraph } from '@/components/ui/typography';
 import { cn } from '@/lib/classMerge';
 
-interface SecurityCardsProps {
+interface SettingsCardsProps {
   title: string;
   description: string;
   cards: {
@@ -10,7 +10,7 @@ interface SecurityCardsProps {
   }[];
 }
 
-export const SecurityCards: React.FC<SecurityCardsProps> = ({ title, description, cards }) => {
+export const SettingsCards: React.FC<SettingsCardsProps> = ({ title, description, cards }) => {
   return (
     <div className="flex flex-col space-y-3.5">
       <div className="flex flex-col space-y-1.5">
@@ -20,17 +20,17 @@ export const SecurityCards: React.FC<SecurityCardsProps> = ({ title, description
         <Paragraph variant="secondary">{description}</Paragraph>
       </div>
       {cards.map((card, index) => (
-        <SecurityCard key={index} sections={card.sections} />
+        <SettingsCard key={index} sections={card.sections} />
       ))}
     </div>
   );
 };
 
-const SecurityCard = ({ sections }: { sections: React.ReactNode[] }) => {
+const SettingsCard = ({ sections }: { sections: React.ReactNode[] }) => {
   return (
     <div className="flex flex-col rounded border">
       {sections.map((section, index) => (
-        <div key={index} className={cn(index !== sections.length - 1 && 'border-b', 'px-4 py-2.5')}>
+        <div key={index} className={cn(index !== sections.length - 1 && 'border-b', 'px-4 py-3.5')}>
           {section}
         </div>
       ))}
diff --git a/apps/web/src/app/app/(settings_layout)/settings/_components/SettingsEmptyState.tsx b/apps/web/src/components/features/settings/SettingsEmptyState.tsx
similarity index 100%
rename from apps/web/src/app/app/(settings_layout)/settings/_components/SettingsEmptyState.tsx
rename to apps/web/src/components/features/settings/SettingsEmptyState.tsx
diff --git a/apps/web/src/app/app/(settings_layout)/settings/_components/SettingsPageHeader.tsx b/apps/web/src/components/features/settings/SettingsPageHeader.tsx
similarity index 100%
rename from apps/web/src/app/app/(settings_layout)/settings/_components/SettingsPageHeader.tsx
rename to apps/web/src/components/features/settings/SettingsPageHeader.tsx
diff --git a/apps/web/src/app/app/(settings_layout)/settings/_components/index.ts b/apps/web/src/components/features/settings/index.ts
similarity index 70%
rename from apps/web/src/app/app/(settings_layout)/settings/_components/index.ts
rename to apps/web/src/components/features/settings/index.ts
index f9d9e2929..fd238e53a 100644
--- a/apps/web/src/app/app/(settings_layout)/settings/_components/index.ts
+++ b/apps/web/src/components/features/settings/index.ts
@@ -1,2 +1,3 @@
 export * from './SettingsEmptyState';
 export * from './SettingsPageHeader';
+export * from './SettingsCard';
diff --git a/apps/web/src/components/features/sidebars/SidebarSettings.tsx b/apps/web/src/components/features/sidebars/SidebarSettings.tsx
index 4e6392b28..30a1d815e 100644
--- a/apps/web/src/components/features/sidebars/SidebarSettings.tsx
+++ b/apps/web/src/components/features/sidebars/SidebarSettings.tsx
@@ -39,6 +39,11 @@ const workspaceItems = (currentParentRoute: BusterRoutes): ISidebarGroup => ({
       label: 'Data Sources',
       route: createBusterRoute({ route: BusterRoutes.SETTINGS_DATASOURCES }),
       id: BusterRoutes.SETTINGS_DATASOURCES
+    },
+    {
+      label: 'Integrations',
+      route: createBusterRoute({ route: BusterRoutes.SETTINGS_INTEGRATIONS }),
+      id: createBusterRoute({ route: BusterRoutes.SETTINGS_INTEGRATIONS })
     }
   ].map((item) => ({
     ...item,
diff --git a/apps/web/src/components/ui/icons/customIcons/SlackIcon.tsx b/apps/web/src/components/ui/icons/customIcons/SlackIcon.tsx
new file mode 100644
index 000000000..b68b47e3c
--- /dev/null
+++ b/apps/web/src/components/ui/icons/customIcons/SlackIcon.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const SlackIcon: React.FC<
+  React.SVGProps<SVGSVGElement> & {
+    size?: number;
+  }
+> = ({ className, size = 24, ...props }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 127 127"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}>
+      <path
+        d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z"
+        fill="#E01E5A"
+      />
+      <path
+        d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z"
+        fill="#36C5F0"
+      />
+      <path
+        d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z"
+        fill="#2EB67D"
+      />
+      <path
+        d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z"
+        fill="#ECB22E"
+      />
+    </svg>
+  );
+};