Revert "Revert "fix: disconnect after x messages to illustrate how websockets work""

.github/workflows/playwright.yml

@@ -21,7 +21,7 @@ on:
 
 jobs:
   playwright:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     permissions: write-all # required for the playwright-report-summary action
     if: inputs.deployment_url != ''
     steps:
@@ -42,12 +42,19 @@ jobs:
         run: pnpm playwright:build
 
       - name: Run Playwright tests
-        run: pnpm exec playwright test playwright --workers 6 --reporter json
+        run: pnpm exec playwright test playwright --workers 6 --reporter json,html
         env:
           PLAYWRIGHT_JSON_OUTPUT_NAME: results.json
           FERN_TOKEN: ${{ secrets.FERN_TOKEN }}
           DEPLOYMENT_URL: ${{ inputs.deployment_url }}
 
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
       - uses: daun/playwright-report-summary@v3
         if: always()
         with:

fern/apis/fdr/definition/docs/v1/commons/commons.yml

@@ -328,11 +328,6 @@ types:
       - fallback
       - optional
 
-  # Playground
-  PlaygroundConfig:
-    properties:
-      oauth: optional<boolean>
-
   # Deprecated
 
   ThemedFileId:

fern/apis/fdr/definition/docs/v1/db/__package__.yml

@@ -83,9 +83,6 @@ types:
       css: optional<commons.CssConfig>
       js: optional<commons.JsConfig>
 
-      # playground
-      playground: optional<commons.PlaygroundConfig>
-
       # deprecated
       logo:
         type: optional<rootCommons.FileId>

fern/apis/fdr/definition/docs/v1/read/__package__.yml

@@ -119,9 +119,6 @@ types:
       css: optional<commons.CssConfig>
       js: optional<commons.JsConfig>
 
-      # playground
-      playground: optional<commons.PlaygroundConfig>
-
       # deprecated
       # backgroundImage:
       #   type: optional<rootCommons.FileId>

fern/apis/fdr/definition/docs/v1/write/__package__.yml

@@ -117,9 +117,6 @@ types:
       css: optional<commons.CssConfig>
       js: optional<commons.JsConfig>
 
-      # playground
-      playground: optional<commons.PlaygroundConfig>
-
       # deprecated
       backgroundImage: optional<rootCommons.FileId>
       logoV2: optional<commons.ThemedFileId>

fern/apis/fdr/definition/navigation/latest/__package__.yml

@@ -254,6 +254,7 @@ types:
           A list of environment IDs that are allowed to be used in the playground.
           If not provided, all environments are allowed. And if the provided list is empty, the playground should be disabled.
       button: optional<PlaygroundButtonSettings>
+      limit-websocket-messages-per-connection: optional<integer>
 
   PlaygroundButtonSettings:
     properties:

fern/apis/fdr/definition/navigation/v1/__package__.yml

@@ -254,6 +254,7 @@ types:
           A list of environment IDs that are allowed to be used in the playground.
           If not provided, all environments are allowed. And if the provided list is empty, the playground should be disabled.
       button: optional<PlaygroundButtonSettings>
+      limit-websocket-messages-per-connection: optional<integer>
 
   PlaygroundButtonSettings:
     properties:

packages/commons/fdr-utils/src/definition-object-factory.ts

@@ -37,7 +37,6 @@ export class DefinitionObjectFactory {
                 integrations: undefined,
                 css: undefined,
                 js: undefined,
-                playground: undefined,
             },
             search: {
                 type: "singleAlgoliaIndex",

packages/fdr-sdk/src/converters/db/convertDocsDefinitionToDb.ts

@@ -112,7 +112,6 @@ export function convertDocsDefinitionToDb({
             defaultLanguage: writeShape.config.defaultLanguage,
             analyticsConfig: writeShape.config.analyticsConfig,
             announcement: writeShape.config.announcement,
-            playground: writeShape.config.playground,
         },
         pages: writeShape.pages,
         jsFiles: writeShape.jsFiles,

packages/fdr-sdk/src/converters/read/convertDbDocsConfigToRead.ts

@@ -26,7 +26,6 @@ export function convertDbDocsConfigToRead({ dbShape }: { dbShape: DocsV1Db.DocsD
         defaultLanguage: dbShape.defaultLanguage,
         analyticsConfig: dbShape.analyticsConfig,
         announcement: dbShape.announcement,
-        playground: dbShape.playground,
     };
 }
 

packages/ui/app/src/api-reference/web-socket/WebSocketMessages.scss

@@ -4,7 +4,8 @@
         @apply sticky top-0 z-10 backdrop-blur;
 
         .fern-web-socket-client,
-        .fern-web-socket-server {
+        .fern-web-socket-server,
+        .fern-web-socket-end-sample {
             @apply inline-block shrink-0 rounded-full p-0.5;
         }
 
@@ -16,6 +17,10 @@
             @apply t-accent-aaa bg-tag-primary;
         }
 
+        .fern-web-socket-end-sample {
+            @apply t-danger bg-tag-danger;
+        }
+
         .fern-web-socket-type {
             @apply flex-1 inline-flex justify-end;
 

packages/ui/app/src/api-reference/web-socket/WebSocketMessages.tsx

@@ -8,13 +8,13 @@ import { FernSyntaxHighlighter } from "../../syntax-highlighting/FernSyntaxHighl
 
 export interface WebSocketMessage {
     type: string | undefined;
-    origin: APIV1Read.WebSocketMessageOrigin | undefined;
+    origin: APIV1Read.WebSocketMessageOrigin | "endSample" | undefined;
     displayName: string | undefined;
     data: unknown | undefined;
     // shape: APIV1Read.WebSocketMessageBodyShape;
 }
 
-interface WebSocketMessagesProps {
+export interface WebSocketMessagesProps {
     messages: WebSocketMessage[];
     // types: Record<string, ResolvedTypeDefinition>;
 }

packages/ui/app/src/api-reference/web-socket/WebSocketMessagesVirtualized.tsx

@@ -0,0 +1,104 @@
+import { APIV1Read } from "@fern-api/fdr-sdk/client/types";
+import { CopyToClipboardButton } from "@fern-ui/components";
+import * as Accordion from "@radix-ui/react-accordion";
+import cn from "clsx";
+import { ArrowDown, ArrowUp, NavArrowDown, Xmark } from "iconoir-react";
+import { FC } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { FernSyntaxHighlighter } from "../../syntax-highlighting/FernSyntaxHighlighter";
+import { WebSocketMessagesProps } from "./WebSocketMessages";
+
+export const WebSocketMessagesVirtualized: FC<WebSocketMessagesProps> = ({ messages }) => {
+    return (
+        <Accordion.Root
+            type="multiple"
+            className="divide-default relative z-0 table size-full table-fixed divide-y grow"
+        >
+            {messages.length === 0 && (
+                <div className="absolute inset-0 flex size-full items-center justify-center">
+                    <div className="flex flex-col items-center space-y-4">
+                        {/* <WifiOff className="t-muted" size={28} /> */}
+                        <h4 className="m-0">No messages...</h4>
+                    </div>
+                </div>
+            )}
+            <Virtuoso
+                data={messages}
+                itemContent={(index, message) => {
+                    return (
+                        <Accordion.Item value={index.toString()} key={index} className={cn("group relative")}>
+                            <Accordion.Trigger
+                                className={cn("fern-web-socket-trigger", {
+                                    "data-[state=open]:bg-tag-success":
+                                        message.origin === APIV1Read.WebSocketMessageOrigin.Client,
+                                    "data-[state=open]:bg-tag-primary":
+                                        message.origin === APIV1Read.WebSocketMessageOrigin.Server,
+                                    "data-[state=open]:bg-tag-danger": message.origin === "endSample",
+                                    "data-[state=open]:bg-tag-default": message.origin == null,
+                                })}
+                            >
+                                {message.origin === APIV1Read.WebSocketMessageOrigin.Client ? (
+                                    <span className="fern-web-socket-client">
+                                        <ArrowUp className="size-icon" />
+                                    </span>
+                                ) : message.origin === APIV1Read.WebSocketMessageOrigin.Server ? (
+                                    <span className="fern-web-socket-server">
+                                        <ArrowDown className="size-icon" />
+                                    </span>
+                                ) : message.origin === "endSample" ? (
+                                    <span className="fern-web-socket-end-sample">
+                                        <Xmark className="size-icon" />
+                                    </span>
+                                ) : null}
+                                <span className="fern-web-socket-trigger-data">{JSON.stringify(message.data)}</span>
+                                {message.displayName != null || message.type != null ? (
+                                    <span className="fern-web-socket-type">
+                                        <span className="fern-web-socket-badge">
+                                            {message.displayName ?? message.type}
+                                        </span>
+                                    </span>
+                                ) : null}
+
+                                <CopyToClipboardButton
+                                    className="fern-web-socket-copy"
+                                    content={() => JSON.stringify(message.data, null, 2)}
+                                    onClick={(e) => e.stopPropagation()}
+                                />
+
+                                <NavArrowDown
+                                    className="fern-web-socket-chevron group-data-[state=open]:rotate-180"
+                                    aria-hidden
+                                />
+                            </Accordion.Trigger>
+                            <Accordion.Content className="fern-web-socket-content">
+                                <div className="group/cb-container relative">
+                                    <FernSyntaxHighlighter
+                                        className="w-0 min-w-full overflow-y-auto"
+                                        code={JSON.stringify(message.data, null, 2)}
+                                        language="json"
+                                        fontSize="sm"
+                                    />
+                                </div>
+                            </Accordion.Content>
+                            <div
+                                className={cn(
+                                    "mx-px group-focus-within:ring-1 ring-transparent ring-inset absolute inset-0 pointer-events-none z-auto rounded-[inherit]",
+                                    {
+                                        "group-focus-within:ring-border-success":
+                                            message.origin === APIV1Read.WebSocketMessageOrigin.Client,
+                                        "group-focus-within:ring-border-primary":
+                                            message.origin === APIV1Read.WebSocketMessageOrigin.Server,
+                                        "group-focus-within:ring-border-danger": message.origin === "endSample",
+                                        "group-focus-within:ring-default": message.origin == null,
+                                        "mb-px rounded-b-xl": index === messages.length - 1,
+                                    },
+                                )}
+                            />
+                        </Accordion.Item>
+                    );
+                }}
+                followOutput={"smooth"}
+            />
+        </Accordion.Root>
+    );
+};