From 898069b5c8a61800e84afbf712ae40898c74963a Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 29 Jan 2023 08:50:15 -0800
Subject: [PATCH] =?UTF-8?q?Pass=20the=20providers=20into=20the=20no=20work?=
 =?UTF-8?q?flows=20component=20=E2=80=93=20it=20isn=E2=80=99t=20a=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/CreateNewWorkflow.tsx      | 22 +++++++------------
 .../orgs/$organizationSlug/__org/index.tsx    | 11 ++++++----
 .../$organizationSlug/__org/workflows.new.tsx | 16 +++++++++++++-
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/apps/webapp/app/components/CreateNewWorkflow.tsx b/apps/webapp/app/components/CreateNewWorkflow.tsx
index eeff83b681a..17b28a31be3 100644
--- a/apps/webapp/app/components/CreateNewWorkflow.tsx
+++ b/apps/webapp/app/components/CreateNewWorkflow.tsx
@@ -1,9 +1,7 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
-import { useLoaderData } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/server-runtime";
+import { SerializableProvider } from "@trigger.dev/providers";
 import { PopupButton } from "@typeform/embed-react";
 import { ApiLogoIcon } from "~/components/code/ApiLogoIcon";
-import { getIntegrations } from "~/models/integrations.server";
 import discord from "../assets/images/discord.png";
 import onboarding from "../assets/images/onboarding-image.png";
 import { Panel } from "./layout/Panel";
@@ -11,13 +9,7 @@ import { PrimaryA, SecondaryA } from "./primitives/Buttons";
 import { Body } from "./primitives/text/Body";
 import { SubTitle } from "./primitives/text/SubTitle";
 
-export async function loader({ params }: LoaderArgs) {
-  const integrations = getIntegrations(false);
-
-  return { integrations };
-}
-
-export default function CreateNewWorkflow() {
+export function CreateNewWorkflow() {
   return (
     <>
       <SubTitle>Create a new workflow</SubTitle>
@@ -43,9 +35,11 @@ export default function CreateNewWorkflow() {
   );
 }
 
-export function CreateNewWorkflowNoWorkflows() {
-  const { integrations } = useLoaderData<typeof loader>();
-
+export function CreateNewWorkflowNoWorkflows({
+  providers,
+}: {
+  providers: SerializableProvider[];
+}) {
   return (
     <>
       <Panel className="flex p-0 overflow-hidden">
@@ -104,7 +98,7 @@ export function CreateNewWorkflowNoWorkflows() {
             and we'll add it.
           </Body>
           <div className="flex gap-2 items-center flex-wrap mb-8">
-            {integrations.map((provider) => (
+            {providers.map((provider) => (
               <ApiLogoIcon
                 key={provider.slug}
                 integration={provider}
diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx
index f73804499a9..aaf9230dbb9 100644
--- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx
+++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx
@@ -8,7 +8,8 @@ import classNames from "classnames";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import { ApiLogoIcon } from "~/components/code/ApiLogoIcon";
-import CreateNewWorkflow, {
+import {
+  CreateNewWorkflow,
   CreateNewWorkflowNoWorkflows,
 } from "~/components/CreateNewWorkflow";
 import { Container } from "~/components/layout/Container";
@@ -20,6 +21,7 @@ import { Title } from "~/components/primitives/text/Title";
 import { runStatusLabel } from "~/components/runs/runStatus";
 import { TriggerTypeIcon } from "~/components/triggers/TriggerIcons";
 import { useCurrentOrganization } from "~/hooks/useOrganizations";
+import { getIntegrations } from "~/models/integrations.server";
 import { getRuntimeEnvironmentFromRequest } from "~/models/runtimeEnvironment.server";
 import type { WorkflowListItem } from "~/models/workflowListPresenter.server";
 import { WorkflowListPresenter } from "~/models/workflowListPresenter.server";
@@ -30,13 +32,14 @@ export const loader = async ({ request, params }: LoaderArgs) => {
   await requireUserId(request);
   invariant(params.organizationSlug, "Organization slug is required");
 
+  const providers = getIntegrations(false);
   const currentEnv = await getRuntimeEnvironmentFromRequest(request);
 
   const presenter = new WorkflowListPresenter();
 
   try {
     const workflows = await presenter.data(params.organizationSlug, currentEnv);
-    return typedjson({ workflows });
+    return typedjson({ workflows, providers });
   } catch (error: any) {
     console.error(error);
     throw new Response("Error ", { status: 400 });
@@ -44,7 +47,7 @@ export const loader = async ({ request, params }: LoaderArgs) => {
 };
 
 export default function Page() {
-  const { workflows } = useTypedLoaderData<typeof loader>();
+  const { workflows, providers } = useTypedLoaderData<typeof loader>();
   const currentOrganization = useCurrentOrganization();
   if (currentOrganization === undefined) {
     return <></>;
@@ -56,7 +59,7 @@ export default function Page() {
       {workflows.length === 0 ? (
         <>
           <SubTitle>Create your first workflow</SubTitle>
-          <CreateNewWorkflowNoWorkflows />
+          <CreateNewWorkflowNoWorkflows providers={providers} />
         </>
       ) : (
         <>
diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/workflows.new.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/workflows.new.tsx
index 0f1a2d2b159..5b6e2de84f2 100644
--- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/workflows.new.tsx
+++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/workflows.new.tsx
@@ -1,14 +1,28 @@
+import type { LoaderArgs } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { CreateNewWorkflowNoWorkflows } from "~/components/CreateNewWorkflow";
 import { Container } from "~/components/layout/Container";
 import { SubTitle } from "~/components/primitives/text/SubTitle";
 import { Title } from "~/components/primitives/text/Title";
+import { getIntegrations } from "~/models/integrations.server";
+import { requireUserId } from "~/services/session.server";
+
+export const loader = async ({ request, params }: LoaderArgs) => {
+  await requireUserId(request);
+
+  const providers = getIntegrations(false);
+
+  return typedjson({ providers });
+};
 
 export default function NewWorkflowPage() {
+  const { providers } = useTypedLoaderData<typeof loader>();
+
   return (
     <Container>
       <Title>New Workflow</Title>
       <SubTitle>Create a new workflow</SubTitle>
-      <CreateNewWorkflowNoWorkflows />
+      <CreateNewWorkflowNoWorkflows providers={providers} />
     </Container>
   );
 }