feat(ui): improve github integration card with clear UX (#68)

Design-System-Pro · Nov 4, 2024 · bb6ab9a · bb6ab9a
1 parent 9dff3ad
commit bb6ab9a
Showing 1 changed file with 54 additions and 54 deletions.
diff --git a/apps/engine/src/components/integration-settings/integration-settings.tsx b/apps/engine/src/components/integration-settings/integration-settings.tsx
@@ -16,7 +16,6 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-  Switch,
 } from '@ds-project/components';
 import type { ReactNode } from 'react';
 
@@ -41,61 +40,62 @@ export function IntegrationSettings({
   isOpen,
   onOpenChange,
 }: IntegrationSettingsProps) {
-  const shouldIgnoreAlert = !isEnabled;
   return (
     <>
-      <Sheet open={isOpen} onOpenChange={onOpenChange}>
-        <SheetTrigger asChild>
-          <Button variant="outline" className="space-x-2" disabled={!isEnabled}>
-            <Icons.GearIcon />
-            <span>Settings</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent className="flex flex-col">
-          <SheetHeader>
-            <div className="flex items-center gap-2">
-              {integrationLogo}
-              <SheetTitle>
-                <h3>Integration settings</h3>
-              </SheetTitle>
-            </div>
-            <SheetTitle>{name}</SheetTitle>
-            <SheetDescription>Configure integration</SheetDescription>
-          </SheetHeader>
-          {children}
-        </SheetContent>
-      </Sheet>
-      <AlertDialog open={shouldIgnoreAlert ? false : undefined}>
-        <AlertDialogTrigger asChild>
-          <span>
-            <Switch
-              checked={isEnabled}
-              onCheckedChange={shouldIgnoreAlert ? onEnabledChange : undefined}
-            />
-          </span>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              We will disconnect the integration with {name}. You may need to
-              reconfigure settings if you decide to reconnect this integration
-              later.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              variant="destructive"
-              onClick={() => {
-                onEnabledChange(false);
-              }}
-            >
-              Disconnect
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      {isEnabled ? (
+        <>
+          <Sheet open={isOpen} onOpenChange={onOpenChange}>
+            <SheetTrigger asChild>
+              <Button variant="outline" className="space-x-2">
+                <Icons.GearIcon />
+                <span>Settings</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent className="flex flex-col">
+              <SheetHeader>
+                <div className="flex items-center gap-2">
+                  {integrationLogo}
+                  <SheetTitle>
+                    <h3>Integration settings</h3>
+                  </SheetTitle>
+                </div>
+                <SheetTitle>{name}</SheetTitle>
+                <SheetDescription>Configure integration</SheetDescription>
+              </SheetHeader>
+              {children}
+            </SheetContent>
+          </Sheet>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive">Disconnect</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  We will disconnect the integration with {name}. You may need
+                  to reconfigure settings if you decide to reconnect this
+                  integration later.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  variant="destructive"
+                  onClick={() => {
+                    onEnabledChange(false);
+                  }}
+                >
+                  Disconnect
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </>
+      ) : (
+        <Button onClick={() => onEnabledChange(true)}>Connect</Button>
+      )}
     </>
   );
 }