fix(loops): Remove empty state CTA buttons (#3845)

Author: charlesvien

packages/ui/src/features/canvas/components/WebsiteChannelLoops.tsx

@@ -144,11 +144,7 @@ export function WebsiteChannelLoops({ channelId }: { channelId: string }) {
               </Flex>
             </Flex>
           ) : (
-            <LoopsEmptyState
-              contextName={contextName}
-              onCreate={startBlank}
-              disabledReason={limitReason}
-            />
+            <LoopsEmptyState contextName={contextName} />
           )}
         </Flex>
       </div>

packages/ui/src/features/loops/components/LoopsEmptyState.test.tsx

@@ -1,37 +1,22 @@
 import { Theme } from "@radix-ui/themes";
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { LoopsEmptyState } from "./LoopsEmptyState";
 
 describe("LoopsEmptyState", () => {
-  it("starts loop creation from the primary CTA", async () => {
-    const onCreate = vi.fn();
-    render(
-      <Theme>
-        <LoopsEmptyState onCreate={onCreate} />
-      </Theme>,
-    );
+  it.each([
+    { contextName: undefined, heading: "Create your first loop" },
+    { contextName: "general", heading: "Create a loop for #general" },
+  ])(
+    'shows "$heading" when contextName is $contextName',
+    ({ contextName, heading }) => {
+      render(
+        <Theme>
+          <LoopsEmptyState contextName={contextName} />
+        </Theme>,
+      );
 
-    await userEvent.click(
-      screen.getByRole("button", { name: "Create a loop" }),
-    );
-
-    expect(onCreate).toHaveBeenCalledOnce();
-  });
-
-  it("disables creation when the project reached its loop limit", () => {
-    render(
-      <Theme>
-        <LoopsEmptyState
-          onCreate={vi.fn()}
-          disabledReason="This project reached its loop limit."
-        />
-      </Theme>,
-    );
-
-    expect(
-      screen.getByRole("button", { name: "Create a loop" }),
-    ).toBeDisabled();
-  });
+      expect(screen.getByText(heading)).toBeInTheDocument();
+    },
+  );
 });

packages/ui/src/features/loops/components/LoopsEmptyState.tsx

@@ -1,12 +1,6 @@
-import { ArrowSquareOutIcon, PlusIcon } from "@phosphor-icons/react";
 import { loopHog } from "@posthog/ui/assets/hedgehogs";
-import { Button } from "@posthog/ui/primitives/Button";
-import { openUrlInBrowser } from "@posthog/ui/utils/browser";
 import { Flex, Text } from "@radix-ui/themes";
 
-// Placeholder until the loops docs page lands; swap for the final URL.
-const LOOPS_DOCS_URL = "https://posthog.com/docs/loops";
-
 const GETTING_STARTED_STEPS = [
   "Describe what you want, or start from a template",
   "Pick when it runs and what it can touch",
@@ -15,15 +9,7 @@ const GETTING_STARTED_STEPS = [
 
 /** The illustrated getting-started card shown when there are no loops yet. `contextName`
  * tweaks the copy for a context's Loops tab. */
-export function LoopsEmptyState({
-  contextName,
-  onCreate,
-  disabledReason,
-}: {
-  contextName?: string;
-  onCreate: () => void;
-  disabledReason?: string | null;
-}) {
+export function LoopsEmptyState({ contextName }: { contextName?: string }) {
   return (
     <div className="@container">
       <div className="flex @min-[720px]:flex-row flex-col items-center @min-[720px]:gap-0 gap-6 rounded-(--radius-3) border border-gray-6 border-dashed @min-[720px]:px-8 px-5 py-8">
@@ -61,27 +47,6 @@ export function LoopsEmptyState({
               </div>
             ))}
           </div>
-          <Flex gap="2" wrap="wrap">
-            <Button
-              variant="solid"
-              size="2"
-              onClick={onCreate}
-              disabled={disabledReason != null}
-              disabledReason={disabledReason}
-            >
-              <PlusIcon size={14} />
-              Create a loop
-            </Button>
-            <Button
-              variant="outline"
-              color="gray"
-              size="2"
-              onClick={() => void openUrlInBrowser(LOOPS_DOCS_URL)}
-            >
-              Learn more
-              <ArrowSquareOutIcon size={14} />
-            </Button>
-          </Flex>
         </Flex>
       </div>
     </div>

packages/ui/src/features/loops/components/LoopsListView.tsx

@@ -249,14 +249,9 @@ export function LoopsListViewPresentation({
                 membersLoading={membersLoading}
                 membersError={membersError}
                 membersComplete={membersComplete}
-                onCreate={onStartBlank}
-                disabledReason={limitReason}
               />
             ) : (
-              <LoopsEmptyState
-                onCreate={onStartBlank}
-                disabledReason={limitReason}
-              />
+              <LoopsEmptyState />
             )}
           </Flex>
 
@@ -292,17 +287,13 @@ function LoopListTabs({
   membersLoading,
   membersError,
   membersComplete,
-  onCreate,
-  disabledReason,
 }: {
   personalLoops: LoopSchemas.Loop[];
   teamLoops: LoopSchemas.Loop[];
   members: UserBasic[];
   membersLoading: boolean;
   membersError: boolean;
   membersComplete: boolean;
-  onCreate: () => void;
-  disabledReason: string | null;
 }) {
   return (
     <Tabs defaultValue="personal" className="flex flex-col gap-5">
@@ -322,10 +313,7 @@ function LoopListTabs({
         {personalLoops.length > 0 ? (
           <LoopListSection loops={personalLoops} />
         ) : (
-          <LoopsEmptyState
-            onCreate={onCreate}
-            disabledReason={disabledReason}
-          />
+          <LoopsEmptyState />
         )}
       </TabsContent>
       <TabsContent value="team">