Pass the providers into the no workflows component – it isn’t a page

apps/webapp/app/components/CreateNewWorkflow.tsx

@@ -1,23 +1,15 @@
 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";
 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}

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,21 +32,22 @@ 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 });
   }
 };
 
 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} />
         </>
       ) : (
         <>

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>
   );
 }