Connecting sources and services is working

2022-12-30 15:42:13 +00:00
parent 4e4299a748
commit 9fffe11fdb
3 changed files with 58 additions and 6 deletions
@@ -5,10 +5,12 @@ import classNames from "classnames";
 import type { CatalogIntegration } from "internal-catalog";
 import { Fragment } from "react";
 import type { APIConnection } from "~/models/apiConnection.server";
-import { BasicConnectButton, ConnectButton } from "./ConnectButton";
+import { BasicConnectButton } from "./ConnectButton";
+import { IntegrationIcon } from "./IntegrationIcon";

 type Props = {
-  sourceId: string;
+  type: "source" | "service";
+  sourceServiceId: string;
  organizationId: string;
  integration: CatalogIntegration;
  connections: Pick<APIConnection, "id" | "title">[];
@@ -16,7 +18,8 @@ type Props = {
 };

 export function ConnectionSelector({
-  sourceId,
+  type,
+  sourceServiceId,
  integration,
  connections,
  selectedConnectionId,
@@ -30,6 +33,8 @@ export function ConnectionSelector({
        key={integration.slug}
        integration={integration}
        organizationId={organizationId}
+        sourceId={type === "source" ? sourceServiceId : undefined}
+        serviceId={type === "service" ? sourceServiceId : undefined}
      />
    );
  }
@@ -80,7 +85,9 @@ export function ConnectionSelector({
                      return (
                        <fetcher.Form
                          key={connection.id}
-                          action={`/resources/sources/${sourceId}`}
+                          action={`/resources/${
+                            type === "source" ? "sources" : "services"
+                          }/${sourceServiceId}`}
                          method="put"
                        >
                          <input
@@ -88,6 +95,7 @@ export function ConnectionSelector({
                            name={"connectionId"}
                            value={connection.id}
                          />
+
                          <Popover.Button
                            className={classNames(
                              "flex items-center w-full justify-between gap-1.5 py-2 px-3 text-white rounded hover:bg-slate-800 transition",
@@ -16,7 +16,8 @@ export function WorkflowConnections() {
        <div className="flex flex-col gap-1">
          <Body>{connectionSlots.source.integration.name}</Body>
          <ConnectionSelector
-            sourceId={connectionSlots.source.id}
+            type="source"
+            sourceServiceId={connectionSlots.source.id}
            organizationId={organization.id}
            integration={connectionSlots.source.integration}
            connections={connectionSlots.source.possibleConnections}
@@ -28,7 +29,8 @@ export function WorkflowConnections() {
        <div key={slot.id} className="flex flex-col gap-1">
          <Body>{slot.integration?.name}</Body>
          <ConnectionSelector
-            sourceId={slot.id}
+            type="service"
+            sourceServiceId={slot.id}
            organizationId={organization.id}
            integration={slot.integration}
            connections={slot.possibleConnections}
@@ -0,0 +1,42 @@
+import type { ActionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { typedjson } from "remix-typedjson";
+import invariant from "tiny-invariant";
+import { z } from "zod";
+import { connectExternalService } from "~/models/externalService.server";
+import { internalPubSub } from "~/services/messageBroker.server";
+import { requireUserId } from "~/services/session.server";
+
+const requestSchema = z.object({
+  connectionId: z.string(),
+});
+
+// PUT /resources/sources/:sourceId
+/** This is used to connect an external source with a connection to an API */
+export async function action({ request, params }: ActionArgs) {
+  await requireUserId(request);
+
+  const { serviceId } = params;
+  invariant(serviceId, "serviceId is required");
+
+  // first make sure this is a PUT request
+  if (request.method.toUpperCase() !== "PUT") {
+    return json({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  try {
+    const formData = await request.formData();
+    const formObject = Object.fromEntries(formData.entries());
+    const { connectionId } = requestSchema.parse(formObject);
+    await connectExternalService({ serviceId, connectionId });
+
+    await internalPubSub.publish("EXTERNAL_SERVICE_UPSERTED", {
+      id: serviceId,
+    });
+
+    return typedjson({ success: true });
+  } catch (error: any) {
+    console.error(error);
+    return typedjson({ error: error.message }, { status: 400 });
+  }
+}