fix: improved ux for playground button and intersection filtering (#1285

)
fern-api · Aug 10, 2024 · e5aebc7 · e5aebc7
1 parent 1a3f2d4
commit e5aebc7
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 30 deletions.
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx
@@ -1,6 +1,5 @@
 import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { EnvironmentId } from "@fern-api/fdr-sdk/navigation";
 import { FernButton, FernButtonGroup, FernScrollArea } from "@fern-ui/components";
 import { EMPTY_OBJECT, visitDiscriminatedUnion } from "@fern-ui/core-utils";
 import { useResizeObserver } from "@fern-ui/react-commons";
@@ -10,7 +9,6 @@ import { useNavigationNodes } from "../../atoms";
 import { useSelectedEnvironmentId } from "../../atoms/environment";
 import { StatusCodeTag, statusCodeToIntent } from "../../commons/StatusCodeTag";
 import { FernErrorTag } from "../../components/FernErrorBoundary";
-import { usePlaygroundSettings } from "../../hooks/usePlaygroundSettings";
 import { mergeEndpointSchemaWithExample } from "../../resolver/SchemaWithExample";
 import {
     ResolvedEndpointDefinition,
@@ -130,7 +128,6 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
     );
 
     const selectedEnvironmentId = useSelectedEnvironmentId();
-    const environmentFilters = usePlaygroundSettings(maybeNode?.id);
 
     return (
         <div className="fern-endpoint-code-snippets" ref={ref}>
@@ -168,15 +165,12 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
                 }}
                 actions={
                     <>
-                        {node != null &&
-                            (!environmentFilters ||
-                                (environmentFilters &&
-                                    environmentFilters.includes(selectedEnvironmentId as EnvironmentId))) && (
-                                <PlaygroundButton
-                                    state={node}
-                                    // example={selectedClient.exampleCall}
-                                />
-                            )}
+                        {node != null && (
+                            <PlaygroundButton
+                                state={node}
+                                // example={selectedClient.exampleCall}
+                            />
+                        )}
                         {clients.length > 1 ? (
                             <CodeExampleClientDropdown
                                 clients={clients}

diff --git a/packages/ui/app/src/api-page/web-socket/WebSocket.tsx b/packages/ui/app/src/api-page/web-socket/WebSocket.tsx
@@ -1,6 +1,5 @@
 import { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { EnvironmentId } from "@fern-api/fdr-sdk/navigation";
 import { CopyToClipboardButton, FernScrollArea } from "@fern-ui/components";
 import cn from "clsx";
 import { ArrowDown, ArrowUp, Wifi } from "iconoir-react";
@@ -9,7 +8,6 @@ import { PlaygroundButton } from "../../api-playground/PlaygroundButton";
 import { useNavigationNodes } from "../../atoms";
 import { useSelectedEnvironmentId } from "../../atoms/environment";
 import { AbsolutelyPositionedAnchor } from "../../commons/AbsolutelyPositionedAnchor";
-import { usePlaygroundSettings } from "../../hooks/usePlaygroundSettings";
 import { useShouldLazyRender } from "../../hooks/useShouldLazyRender";
 import {
     ResolvedTypeDefinition,
@@ -55,8 +53,6 @@ const WebhookContent: FC<WebSocket.Props> = ({ websocket, isLastInApi, types })
     const maybeNode = nodes.get(websocket.nodeId);
     const node = maybeNode != null && FernNavigation.isApiLeaf(maybeNode) ? maybeNode : undefined;
 
-    const environmentFilters = usePlaygroundSettings(maybeNode?.id);
-
     const route = `/${websocket.slug}`;
 
     const ref = useRef<HTMLDivElement>(null);
@@ -314,17 +310,7 @@ const WebhookContent: FC<WebSocket.Props> = ({ websocket, isLastInApi, types })
                             <div className="sticky top-header-offset flex max-h-content scroll-mt-content flex-col gap-6 py-8">
                                 <TitledExample
                                     title={"Handshake"}
-                                    actions={
-                                        node != null &&
-                                        selectedEnvironmentId &&
-                                        (!environmentFilters ||
-                                            (environmentFilters &&
-                                                environmentFilters.includes(
-                                                    selectedEnvironmentId as EnvironmentId,
-                                                ))) ? (
-                                            <PlaygroundButton state={node} />
-                                        ) : undefined
-                                    }
+                                    actions={node != null ? <PlaygroundButton state={node} /> : undefined}
                                     disableClipboard={true}
                                 >
                                     <FernScrollArea>

diff --git a/packages/ui/app/src/api-playground/PlaygroundButton.tsx b/packages/ui/app/src/api-playground/PlaygroundButton.tsx
@@ -5,7 +5,9 @@ import { useAtomValue } from "jotai";
 import { FC } from "react";
 import { HAS_PLAYGROUND_ATOM, useSetAndOpenPlayground } from "../atoms";
 
-export const PlaygroundButton: FC<{ state: FernNavigation.NavigationNodeApiLeaf }> = ({ state }) => {
+export const PlaygroundButton: FC<{
+    state: FernNavigation.NavigationNodeApiLeaf;
+}> = ({ state }) => {
     const openPlayground = useSetAndOpenPlayground();
     const hasPlayground = useAtomValue(HAS_PLAYGROUND_ATOM);
 

diff --git a/packages/ui/app/src/atoms/playground.ts b/packages/ui/app/src/atoms/playground.ts
@@ -279,6 +279,7 @@ export function useSetAndOpenPlayground(): (node: FernNavigation.NavigationNodeA
                     captureMessage("Could not find endpoint for API playground selection state", "fatal");
                     return;
                 }
+
                 set(
                     formStateAtom,
                     getInitialEndpointRequestFormStateWithExample(endpoint, endpoint.examples[0], apiPackage.types),

diff --git a/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx b/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx
@@ -17,9 +17,15 @@ export function MaybeEnvironmentDropdown(props: MaybeEnvironmentDropdownProps):
     const [selectedEnvironmentId, setSelectedEnvironmentId] = useAtom(SELECTED_ENVIRONMENT_ATOM);
 
     const { selectedEnvironment, urlTextStyle, protocolTextStyle, small, environmentFilters } = props;
-    const url = selectedEnvironment?.baseUrl && parse(selectedEnvironment?.baseUrl);
 
-    const environmentIds = environmentFilters ? environmentFilters : allEnvironmentIds;
+    const environmentIds = environmentFilters
+        ? environmentFilters.filter((environmentFilter) => allEnvironmentIds.includes(environmentFilter))
+        : allEnvironmentIds;
+
+    if (environmentFilters && selectedEnvironment && !environmentFilters.includes(selectedEnvironment.id)) {
+        setSelectedEnvironmentId(environmentIds[0]);
+    }
+    const url = selectedEnvironment?.baseUrl && parse(selectedEnvironment?.baseUrl);
 
     return (
         <span>
-Original file line number
+Diff line change
@@ Expand Up @@
                         captureMessage("Could not find endpoint for API playground selection state", "fatal");
                         return;
                     }
                     set(
                         formStateAtom,
                         getInitialEndpointRequestFormStateWithExample(endpoint, endpoint.examples[0], apiPackage.types),
@@ Expand Down @@