fix: disconnect after 20 messages to illustrate how websockets work (#…

…1694)
fern-api · Oct 23, 2024 · 917fa4c · 917fa4c
1 parent 1edcaeb
commit 917fa4c
Show file tree

Hide file tree

Showing 40 changed files with 125 additions and 144 deletions.
diff --git a/fern/apis/fdr/definition/docs/v1/commons/commons.yml b/fern/apis/fdr/definition/docs/v1/commons/commons.yml
@@ -328,11 +328,6 @@ types:
       - fallback
       - optional
 
-  # Playground
-  PlaygroundConfig:
-    properties:
-      oauth: optional<boolean>
-
   # Deprecated
 
   ThemedFileId:

diff --git a/fern/apis/fdr/definition/docs/v1/db/__package__.yml b/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>

diff --git a/fern/apis/fdr/definition/docs/v1/read/__package__.yml b/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>

diff --git a/fern/apis/fdr/definition/docs/v1/write/__package__.yml b/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>

diff --git a/fern/apis/fdr/definition/navigation/latest/__package__.yml b/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:

diff --git a/fern/apis/fdr/definition/navigation/v1/__package__.yml b/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:

diff --git a/packages/commons/fdr-utils/src/definition-object-factory.ts b/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",

diff --git a/...resources/docs/resources/v1/resources/commons/resources/commons/types/PlaygroundConfig.ts b/...resources/docs/resources/v1/resources/commons/resources/commons/types/PlaygroundConfig.ts
diff --git a/...erated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts b/...erated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
diff --git a/...k/src/client/generated/api/resources/docs/resources/v1/resources/db/types/DocsDbConfig.ts b/...k/src/client/generated/api/resources/docs/resources/v1/resources/db/types/DocsDbConfig.ts
diff --git a/...k/src/client/generated/api/resources/docs/resources/v1/resources/read/types/DocsConfig.ts b/...k/src/client/generated/api/resources/docs/resources/v1/resources/read/types/DocsConfig.ts
diff --git a/...sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts b/...sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts
diff --git a/...ed/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts b/...ed/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts
diff --git a/.../src/client/generated/api/resources/docs/resources/v1/resources/write/types/DocsConfig.ts b/.../src/client/generated/api/resources/docs/resources/v1/resources/write/types/DocsConfig.ts
diff --git a/...sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts b/...sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts
diff --git a/...ed/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts b/...ed/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts
diff --git a/...rc/client/generated/api/resources/navigation/resources/latest/types/PlaygroundSettings.ts b/...rc/client/generated/api/resources/navigation/resources/latest/types/PlaygroundSettings.ts
diff --git a/...dk/src/client/generated/api/resources/navigation/resources/v1/types/PlaygroundSettings.ts b/...dk/src/client/generated/api/resources/navigation/resources/v1/types/PlaygroundSettings.ts
diff --git a/packages/fdr-sdk/src/converters/db/convertDocsDefinitionToDb.ts b/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,

diff --git a/packages/fdr-sdk/src/converters/read/convertDbDocsConfigToRead.ts b/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,
     };
 }
 

diff --git a/packages/ui/app/src/api-reference/web-socket/WebSocketMessages.scss b/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;
 

diff --git a/packages/ui/app/src/api-reference/web-socket/WebSocketMessages.tsx b/packages/ui/app/src/api-reference/web-socket/WebSocketMessages.tsx
@@ -2,13 +2,14 @@ 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 } from "iconoir-react";
+import { ArrowDown, ArrowUp, NavArrowDown, Xmark } from "iconoir-react";
 import { FC } from "react";
+import { Virtuoso } from "react-virtuoso";
 import { FernSyntaxHighlighter } from "../../syntax-highlighting/FernSyntaxHighlighter";
 
 export interface WebSocketMessage {
     type: string | undefined;
-    origin: APIV1Read.WebSocketMessageOrigin | undefined;
+    origin: APIV1Read.WebSocketMessageOrigin | "endSample" | undefined;
     displayName: string | undefined;
     data: unknown | undefined;
     // shape: APIV1Read.WebSocketMessageBodyShape;
@@ -21,7 +22,10 @@ interface WebSocketMessagesProps {
 
 export const WebSocketMessages: FC<WebSocketMessagesProps> = ({ messages }) => {
     return (
-        <Accordion.Root type="multiple" className="divide-default relative z-0 table size-full table-fixed divide-y">
+        <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">
@@ -30,71 +34,83 @@ export const WebSocketMessages: FC<WebSocketMessagesProps> = ({ messages }) => {
                     </div>
                 </div>
             )}
-            {messages.map((message, index) => {
-                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-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>
-                            ) : 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}
+            <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()}
-                            />
+                                <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"
+                                <NavArrowDown
+                                    className="fern-web-socket-chevron group-data-[state=open]:rotate-180"
+                                    aria-hidden
                                 />
-                            </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-default": message.origin == null,
-                                    "mb-px rounded-b-xl": index === messages.length - 1,
-                                },
-                            )}
-                        />
-                    </Accordion.Item>
-                );
-            })}
+                            </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>
     );
 };