Add HTTP api page

elpassion · Feb 20, 2024 · 7b7e5c5 · 7b7e5c5
1 parent b00d795
commit 7b7e5c5
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 5 deletions.
diff --git a/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx b/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx
@@ -7,6 +7,7 @@ interface CodePreviewWrapperProps extends CodePreviewProps {
 
 export const CodePreviewWrapper: React.FC<CodePreviewWrapperProps> = ({
   children,
+  height,
   ...props
 }) => {
   return (
@@ -15,8 +16,8 @@ export const CodePreviewWrapper: React.FC<CodePreviewWrapperProps> = ({
         {children?.(props.value)}
       </div>
 
-      <ClientOnly fallback={null}>
-        {() => <CodePreviewClient {...props} />}
+      <ClientOnly fallback={<div style={{ minHeight: `${height}px` }} />}>
+        {() => <CodePreviewClient height={height} {...props} />}
       </ClientOnly>
     </div>
   );

diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.server.tsx
@@ -0,0 +1 @@
+export { loader } from "./loader.server";
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/index.tsx
@@ -0,0 +1 @@
+export { HTTPApiPage as page, meta } from "./page";
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/loader.server.tsx
@@ -0,0 +1,17 @@
+import { json, LoaderFunctionArgs } from "@remix-run/node";
+import { loaderBuilder } from "~/utils.server";
+import { requireLogin } from "~/session.server";
+import invariant from "tiny-invariant";
+
+export async function loader(args: LoaderFunctionArgs) {
+  return loaderBuilder(async ({ request, params }) => {
+    await requireLogin(request);
+    invariant(params.organizationId, "organizationId not found");
+    invariant(params.pipelineId, "pipelineId not found");
+
+    return json({
+      pipelineId: params.pipelineId,
+      organizationId: params.organizationId,
+    });
+  })(args);
+}
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/page.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+import { routes } from "~/utils/routes.utils";
+import { MetaFunction } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+import { CopyCodeButton } from "~/components/actionButtons/CopyCodeButton";
+import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreviewWrapper";
+import { CodePreviewOptions } from "~/components/pages/pipelines/CodePreview/CodePreviewOptions";
+import {
+  PreviewConnector,
+  PreviewSection,
+  PreviewSectionContent,
+  PreviewSectionHeader,
+  PreviewSectionHeading,
+  PreviewSectionStep,
+  PreviewSectionText,
+} from "../PreviewSection";
+import { loader } from "./loader.server";
+
+export function HTTPApiPage() {
+  const { organizationId, pipelineId } = useLoaderData<typeof loader>();
+  return (
+    <div>
+      <h2 className="text-lg text-white font-medium">HTTP Api</h2>
+      <p className="text-white text-xs mb-6">
+        Access our Buildel API easily with our client SDK.
+      </p>
+
+      <PreviewSection>
+        <PreviewConnector />
+        <PreviewSectionHeader>
+          <PreviewSectionStep>1</PreviewSectionStep>
+
+          <PreviewSectionHeading>
+            Install Buildel packages
+          </PreviewSectionHeading>
+        </PreviewSectionHeader>
+
+        <PreviewSectionContent>
+          <PreviewSectionText>
+            Begin by installing the necessary Buildel packages using npm. This
+            initial step equips you with the tools required for seamless
+            integration with our API.
+          </PreviewSectionText>
+
+          <CodePreviewWrapper
+            value={`curl https://buildel-api.fly.dev/api/organizations/${organizationId}/pipelines/${pipelineId}/runs \\
+  -X POST \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer \${BUILDEL_API_KEY}" \\
+  -d '{"metadata": {"userId": 123}}'`}
+            language="shell"
+            height={115}
+          >
+            {(value) => <CopyCodeButton value={value} />}
+          </CodePreviewWrapper>
+        </PreviewSectionContent>
+      </PreviewSection>
+
+      <PreviewSection>
+        <PreviewConnector />
+        <PreviewSectionHeader>
+          <PreviewSectionStep>1</PreviewSectionStep>
+
+          <PreviewSectionHeading>
+            Install Buildel packages
+          </PreviewSectionHeading>
+        </PreviewSectionHeader>
+
+        <PreviewSectionContent>
+          <PreviewSectionText>
+            Begin by installing the necessary Buildel packages using npm. This
+            initial step equips you with the tools required for seamless
+            integration with our API.
+          </PreviewSectionText>
+
+          <CodePreviewWrapper
+            value={`curl https://buildel-api.fly.dev/api/organizations/${organizationId}/pipelines/${pipelineId}/runs/RUN_ID/start \\
+  -X POST \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer \${BUILDEL_API_KEY}"`}
+            language="shell"
+            height={95}
+          >
+            {(value) => <CopyCodeButton value={value} />}
+          </CodePreviewWrapper>
+        </PreviewSectionContent>
+      </PreviewSection>
+
+      <PreviewSection>
+        <PreviewConnector />
+        <PreviewSectionHeader>
+          <PreviewSectionStep>1</PreviewSectionStep>
+
+          <PreviewSectionHeading>
+            Install Buildel packages
+          </PreviewSectionHeading>
+        </PreviewSectionHeader>
+
+        <PreviewSectionContent>
+          <PreviewSectionText>
+            Begin by installing the necessary Buildel packages using npm. This
+            initial step equips you with the tools required for seamless
+            integration with our API.
+          </PreviewSectionText>
+
+          <CodePreviewWrapper
+            value={`curl https://buildel-api.fly.dev/api/organizations/${organizationId}/pipelines/${pipelineId}/runs/RUN_ID/input \\
+  -X POST \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer \${BUILDEL_API_KEY}" \\
+  -d '{"block_name": "text_input_1", "input_name": "input", "data": "Content"}'`}
+            language="shell"
+            height={110}
+          >
+            {(value) => <CopyCodeButton value={value} />}
+          </CodePreviewWrapper>
+        </PreviewSectionContent>
+      </PreviewSection>
+
+      <PreviewSection>
+        <PreviewConnector />
+        <PreviewSectionHeader>
+          <PreviewSectionStep>1</PreviewSectionStep>
+
+          <PreviewSectionHeading>
+            Install Buildel packages
+          </PreviewSectionHeading>
+        </PreviewSectionHeader>
+
+        <PreviewSectionContent>
+          <PreviewSectionText>
+            Begin by installing the necessary Buildel packages using npm. This
+            initial step equips you with the tools required for seamless
+            integration with our API.
+          </PreviewSectionText>
+
+          <CodePreviewWrapper
+            value={`curl https://buildel-api.fly.dev/api/organizations/${organizationId}/pipelines/${pipelineId}/runs/RUN_ID/stop \\
+  -X POST \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer \${BUILDEL_API_KEY}"`}
+            language="shell"
+            height={95}
+          >
+            {(value) => <CopyCodeButton value={value} />}
+          </CodePreviewWrapper>
+        </PreviewSectionContent>
+      </PreviewSection>
+    </div>
+  );
+}
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "Client SDK",
+    },
+  ];
+};
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh b/apps/web-remix/app/components/pages/pipelines/interface/httpApi/test.sh
@@ -0,0 +1,52 @@
+curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer SECRET" \
+  -d '{"metadata": {"userId": 123}}'
+
+
+curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/start \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer SECRET"
+
+curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/input \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer SECRET" \
+  -d '{"block_name": "text_input_1", "input_name": "input", "data": "Content"}'
+
+curl https://buildel-api.fly.dev/api/organizations/1/pipelines/1/runs/1/stop \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer SECRET"
+
+
+
+
+
+
+
+curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" \
+  -d '{"metadata": {"userId": 123}}'
+
+
+curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/start \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI="
+
+curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/input \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI=" \
+  -d '{"block_name": "Input", "input_name": "input", "data": "Hello"}'
+
+
+curl https://buildel-api.fly.dev/api/organizations/30/pipelines/82/runs/4501/stop \
+  -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer exy1YV9q6Qfeyex3rfj395782YPFgt0dE2+Uhs0ejSI="
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/interfaceLayout/page.tsx
@@ -19,16 +19,27 @@ export function InterfaceLayout() {
             to={routes.pipelineClientSDK(
               organizationId,
               pipelineId,
-              Object.fromEntries(searchParams.entries()),
+              Object.fromEntries(searchParams.entries())
             )}
           >
             Client SDK
           </OutlinedNavigationLink>
+
+          <OutlinedNavigationLink
+            to={routes.pipelineHTTPApi(
+              organizationId,
+              pipelineId,
+              Object.fromEntries(searchParams.entries())
+            )}
+          >
+            HTTP Api
+          </OutlinedNavigationLink>
+
           <OutlinedNavigationLink
             to={routes.pipelineWebsiteChatbot(
               organizationId,
               pipelineId,
-              Object.fromEntries(searchParams.entries()),
+              Object.fromEntries(searchParams.entries())
             )}
           >
             Website Chatbot
@@ -38,7 +49,7 @@ export function InterfaceLayout() {
             to={routes.pipelineOpenAIApi(
               organizationId,
               pipelineId,
-              Object.fromEntries(searchParams.entries()),
+              Object.fromEntries(searchParams.entries())
             )}
           >
             OpenAI Api

diff --git a/...remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx b/...remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.interface.http-api.tsx
@@ -0,0 +1,5 @@
+export {
+  page as default,
+  meta,
+} from "~/components/pages/pipelines/interface/httpApi";
+export { loader } from "~/components/pages/pipelines/interface/httpApi/index.server";
diff --git a/apps/web-remix/app/utils/routes.utils.ts b/apps/web-remix/app/utils/routes.utils.ts
@@ -112,6 +112,15 @@ export const routes = {
       `${routes.pipelineInterface(organizationId, pipelineId)}/openai-api`,
       params
     ),
+  pipelineHTTPApi: (
+    organizationId: OrganizationId,
+    pipelineId: PipelineId,
+    params: RouteParam = {}
+  ) =>
+    buildUrlWithParams(
+      `${routes.pipelineInterface(organizationId, pipelineId)}/http-api`,
+      params
+    ),
   pipelineSettings: (
     organizationId: OrganizationId,
     pipelineId: PipelineId,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { HTTPApiPage as page, meta } from "./page";