fix: restore functionality for dropdowns, switchers and other API_ATOM derivatives

packages/ui/app/src/api-reference/ApiEndpointPage.tsx

@@ -1,3 +1,5 @@
+import { useSetAtom } from "jotai";
+import { ALL_ENVIRONMENTS_ATOM } from "../atoms/environment";
 import { ApiPageContext } from "../contexts/api-page";
 import type { ResolvedApiEndpoint, ResolvedTypeDefinition } from "../resolver/types";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
@@ -5,13 +7,18 @@
 
 export declare namespace ApiEndpointPage {
     export interface Props {
         item: ResolvedApiEndpoint;
         showErrors: boolean;
         types: Record<string, ResolvedTypeDefinition>;
     }
 }
 
 export const ApiEndpointPage: React.FC<ApiEndpointPage.Props> = ({ item, showErrors, types }) => {
+    const setEnvironmentIds = useSetAtom(ALL_ENVIRONMENTS_ATOM);
+    if (item.type === "endpoint" || item.type === "websocket") {
+        setEnvironmentIds(item.environments.map((env) => env.id));
+    }
+
     return (
         <ApiPageContext.Provider value={true}>
             <SingleApiPageContent item={item} showErrors={showErrors} types={types} />

packages/ui/app/src/api-reference/endpoints/EndpointUrl.tsx

@@ -96,7 +96,7 @@ export const EndpointUrl = React.forwardRef<HTMLDivElement, PropsWithChildren<En
                                     })}
                                 >
                                     {showEnvironment && (
-                                        <span className="inline-flex whitespace-nowrap max-sm:hidden">
+                                        <span className="whitespace-nowrap max-sm:hidden">
                                             <MaybeEnvironmentDropdown
                                                 selectedEnvironment={selectedEnvironment}
                                                 urlTextStyle="t-muted"

packages/ui/app/src/atoms/environment.ts

@@ -1,24 +1,13 @@
-import type { APIV1Read } from "@fern-api/fdr-sdk";
-import { atom, useAtomValue } from "jotai";
+import { atom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import { isEndpoint, isWebSocket } from "../resolver/types";
-import { DEPRECATED_FLATTENED_APIS_ATOM } from "./apis";
 
 // Capture all possible environments in a list, in useEffect at top level
-export const ALL_ENVIRONMENTS_ATOM = atom((get) => {
-    const flatApis = get(DEPRECATED_FLATTENED_APIS_ATOM);
-    const allEnvironmentIds = new Set<string>();
-    Object.values(flatApis).forEach((api) => {
-        api.endpoints.forEach((endpoint) => {
-            if (isEndpoint(endpoint) || isWebSocket(endpoint)) {
-                endpoint.environments.forEach((environment: APIV1Read.Environment) => {
-                    allEnvironmentIds.add(environment.id);
-                });
-            }
-        });
-    });
-    return Array.from(allEnvironmentIds);
-});
+export const ALL_ENVIRONMENTS_ATOM = atom<string[]>([]);
+
+export const useSetAllEnvironments = (allEnvironmentIds: string[]): void => {
+    const setAllEnvironments = useSetAtom(ALL_ENVIRONMENTS_ATOM);
+    setAllEnvironments(allEnvironmentIds);
+};
 
 // Get or select an environment
 export const SELECTED_ENVIRONMENT_ATOM = atomWithStorage<string | undefined>("selected-environment", undefined);

packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx

@@ -31,6 +31,7 @@ export function MaybeEnvironmentDropdown({
     const [selectedEnvironmentId, setSelectedEnvironmentId] = useAtom(SELECTED_ENVIRONMENT_ATOM);
     const [playgroundEnvironment, setPlaygroundEnvironment] = useAtom(PLAYGROUND_ENVIRONMENT_ATOM);
     const [inputValue, setInputValue] = useState<string | undefined>(undefined);
+    const [initialState, setInitialState] = useState<string | undefined>(undefined);
 
     const environmentIds = environmentFilters
         ? environmentFilters.filter((environmentFilter) => allEnvironmentIds.includes(environmentFilter))
@@ -54,12 +55,16 @@ export function MaybeEnvironmentDropdown({
         inputValue != null && inputValue !== "" && parse(inputValue).host != null && parse(inputValue).protocol != null;
 
     const urlProtocol = url ? url.protocol : "";
-    const fullyQualifiedDomainAndBasePath = url ? (url.pathname !== "/" ? `${url.host}${url.pathname}` : url.host) : "";
+    const fullyQualifiedDomainAndBasePath = url
+        ? url.pathname != null && url.pathname !== "/"
+            ? `${url.host}${url.pathname}`
+            : url.host
+        : "";
 
     return (
         <>
             {isEditingEnvironment.value ? (
-                <span key="url" className="whitespace-nowrap max-sm:hidden font-mono">
+                <span key="url" className="inline-flex whitespace-nowrap max-sm:hidden font-mono">
                     <FernInput
                         autoFocus={isEditingEnvironment.value}
                         size={inputValue?.length ?? 0}
@@ -68,7 +73,20 @@ export function MaybeEnvironmentDropdown({
                         onClick={(e) => {
                             e.stopPropagation();
                         }}
-                        onBlur={isEditingEnvironment.setFalse}
+                        onBlur={(e) => {
+                            if (isValidInput) {
+                                if (playgroundEnvironment) {
+                                    setInputValue(playgroundEnvironment);
+                                }
+                                isEditingEnvironment.setFalse();
+                            } else {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                setInputValue(initialState);
+                                setPlaygroundEnvironment(initialState);
+                                isEditingEnvironment.setFalse();
+                            }
+                        }}
                         onValueChange={(value) => {
                             if (
                                 value === "" ||
@@ -82,16 +100,18 @@ export function MaybeEnvironmentDropdown({
                                 setPlaygroundEnvironment(value);
                             }
                         }}
-                        onKeyDown={(e) => {
+                        onKeyDownCapture={(e) => {
                             if (e.key === "Enter" && isValidInput) {
                                 if (playgroundEnvironment) {
                                     setInputValue(playgroundEnvironment);
                                 }
                                 isEditingEnvironment.setFalse();
                             } else if (e.key === "Escape") {
-                                setInputValue(playgroundEnvironment ?? selectedEnvironment?.baseUrl);
-                                isEditingEnvironment.setFalse();
                                 e.preventDefault();
+                                e.stopPropagation();
+                                setInputValue(initialState);
+                                setPlaygroundEnvironment(initialState);
+                                isEditingEnvironment.setFalse();
                             }
                         }}
                         className={cn("p-0", isValidInput ? "" : "error", "h-auto", "flex flex-col")}
@@ -128,7 +148,14 @@ export function MaybeEnvironmentDropdown({
                                     size={small ? "small" : "normal"}
                                     variant="outlined"
                                     mono={true}
-                                    onDoubleClick={editable ? isEditingEnvironment.setTrue : () => undefined}
+                                    onDoubleClick={
+                                        editable
+                                            ? () => {
+                                                  setInitialState(inputValue);
+                                                  isEditingEnvironment.setTrue();
+                                              }
+                                            : () => undefined
+                                    }
                                 />
                             </FernDropdown>
                         ) : (
@@ -141,7 +168,14 @@ export function MaybeEnvironmentDropdown({
                                             small ? "text-xs" : "text-sm",
                                             "hover:shadow-lg",
                                         )}
-                                        onDoubleClick={isEditingEnvironment.setTrue}
+                                        onDoubleClick={
+                                            editable
+                                                ? () => {
+                                                      setInitialState(inputValue);
+                                                      isEditingEnvironment.setTrue();
+                                                  }
+                                                : () => undefined
+                                        }
                                     >
                                         {`${urlProtocol}//${fullyQualifiedDomainAndBasePath}`}
                                     </span>

packages/ui/app/src/playground/code-snippets/useSnippet.ts

@@ -1,25 +1,10 @@
-import { EndpointDefinition } from "@fern-api/fdr-sdk/api-definition";
 import { useMemo } from "react";
-import { usePlaygroundBaseUrl } from "../utils/select-environment";
 import { PlaygroundCodeSnippetResolver } from "./resolver";
 import { useApiDefinition } from "./useApiDefinition";
 
-export const resolveEnvironmentUrlInCodeSnippet = (
-    endpoint: EndpointDefinition,
-    replacementBaseUrl: string | undefined,
-    requestCodeSnippet: string,
-): string => {
-    const urlToReplace = endpoint.environments?.find((env) => requestCodeSnippet.includes(env.baseUrl))?.baseUrl;
-    return urlToReplace && replacementBaseUrl
-        ? requestCodeSnippet.replace(urlToReplace, replacementBaseUrl)
-        : requestCodeSnippet;
-};
-
 export function useSnippet(resolver: PlaygroundCodeSnippetResolver, lang: "curl" | "python" | "typescript"): string {
     const apiDefinition = useApiDefinition(resolver.context.node.apiDefinitionId, resolver.isSnippetTemplatesEnabled);
-    const baseUrl = usePlaygroundBaseUrl(resolver.context.endpoint);
 
     // Resolve the code snippet
-    const code = useMemo(() => resolver.resolve(lang, apiDefinition), [resolver, lang, apiDefinition]);
-    return resolveEnvironmentUrlInCodeSnippet(resolver.context.endpoint, baseUrl, code);
+    return useMemo(() => resolver.resolve(lang, apiDefinition), [resolver, lang, apiDefinition]);
 }

packages/ui/app/src/playground/utils/select-environment.ts

@@ -22,5 +22,5 @@ export function useSelectedEnvironment(endpoint: WebSocketChannel | EndpointDefi
 export function usePlaygroundBaseUrl(endpoint: WebSocketChannel | EndpointDefinition): string | undefined {
     const environment = useSelectedEnvironment(endpoint);
     const playgroundBaseUrl = usePlaygroundEnvironment();
-    return environment?.baseUrl ?? playgroundBaseUrl;
+    return playgroundBaseUrl ?? environment?.baseUrl;
 }