token refresh, and filter inactive connections

apps/client/src/features/integration/components/connection-row.tsx

@@ -6,8 +6,7 @@ import { getIntegrationIcon } from "./integration-icons";
 type ConnectionRowProps = {
   definition: IntegrationDefinition;
   connection?: UserConnection;
-  installed: boolean;
-  onConnect: (integrationId: string) => void;
+  onConnect: (type: string) => void;
   onDisconnect: (integrationId: string) => void;
   isDisconnecting?: boolean;
 };
@@ -15,14 +14,11 @@ type ConnectionRowProps = {
 export default function ConnectionRow({
   definition,
   connection,
-  installed,
   onConnect,
   onDisconnect,
   isDisconnecting,
 }: ConnectionRowProps) {
   const { t } = useTranslation();
-  const isConnected = !!connection;
-  const isAvailable = installed && (connection?.isEnabled ?? true);
 
   return (
     <Box
@@ -30,7 +26,6 @@ export default function ConnectionRow({
       px="xs"
       style={{
         borderBottom: "1px solid var(--mantine-color-default-border)",
-        opacity: isAvailable || isConnected ? 1 : 0.5,
       }}
     >
       <Group justify="space-between" wrap="nowrap">
@@ -47,7 +42,7 @@ export default function ConnectionRow({
         </Group>
 
         <Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
-          {isConnected ? (
+          {connection ? (
             <>
               <Text size="xs" c="green">
                 {t("Connected")}
@@ -63,7 +58,7 @@ export default function ConnectionRow({
                 {t("Disconnect")}
               </Button>
             </>
-          ) : isAvailable ? (
+          ) : (
             <Button
               size="xs"
               variant="light"
@@ -71,10 +66,6 @@ export default function ConnectionRow({
             >
               {t("Connect")}
             </Button>
-          ) : (
-            <Text size="xs" c="dimmed">
-              {t("Not available")}
-            </Text>
           )}
         </Group>
       </Group>

apps/client/src/features/integration/pages/connections.tsx

@@ -80,9 +80,12 @@ export default function Connections() {
       ) : (
         <Stack gap={0}>
           {available
-            .filter((def) => def.capabilities.includes("oauth"))
-            .map((def) => {
+            .filter((def) => {
+              if (!def.capabilities.includes("oauth")) return false;
               const installation = installed?.find((i) => i.type === def.type);
+              return installation?.isEnabled;
+            })
+            .map((def) => {
               const connection = myConnections?.find(
                 (c) => c.type === def.type,
               );
@@ -92,7 +95,6 @@ export default function Connections() {
                   key={def.type}
                   definition={def}
                   connection={connection}
-                  installed={!!installation}
                   onConnect={handleConnect}
                   onDisconnect={handleDisconnect}
                   isDisconnecting={disconnectMutation.isPending}