{/* TODO: Replace this with a proper segmented control component */}
@@ -149,7 +154,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC
}
onClick={(e) => {
@@ -172,7 +177,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC
}
- code={requestCodeSnippet}
+ code={resolveEnvironmentUrlInCodeSnippet(endpoint, requestCodeSnippet)}
language={selectedClient.language}
hoveredPropertyPath={selectedClient.language === "curl" ? hoveredRequestPropertyPath : undefined}
json={requestCurlJson}
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointUrl.tsx b/packages/ui/app/src/api-page/endpoints/EndpointUrl.tsx
index 33c633d865..2f430e4bf1 100644
--- a/packages/ui/app/src/api-page/endpoints/EndpointUrl.tsx
+++ b/packages/ui/app/src/api-page/endpoints/EndpointUrl.tsx
@@ -2,10 +2,12 @@ import { APIV1Read } from "@fern-api/fdr-sdk";
import { CopyToClipboardButton } from "@fern-ui/components";
import { visitDiscriminatedUnion } from "@fern-ui/core-utils";
import cn from "clsx";
-import React, { PropsWithChildren, ReactElement, useImperativeHandle, useMemo, useRef } from "react";
+import React, { PropsWithChildren, ReactElement, useImperativeHandle, useMemo, useRef, useState } from "react";
import { parse } from "url";
import { buildRequestUrl } from "../../api-playground/utils";
+import { useAllEnvironmentIds } from "../../atoms/environment";
import { HttpMethodTag } from "../../commons/HttpMethodTag";
+import { MaybeEnvironmentDropdown } from "../../components/MaybeEnvironmentDropdown";
import { ResolvedEndpointPathParts } from "../../resolver/types";
import { divideEndpointPathToParts, type EndpointPathPart } from "../../util/endpoint";
@@ -13,7 +15,7 @@ export declare namespace EndpointUrl {
export type Props = React.PropsWithChildren<{
path: ResolvedEndpointPathParts[];
method: APIV1Read.HttpMethod;
- environment?: string;
+ selectedEnvironment?: APIV1Read.Environment;
showEnvironment?: boolean;
large?: boolean;
className?: string;
@@ -22,7 +24,7 @@ export declare namespace EndpointUrl {
// TODO: this component needs a refresh
export const EndpointUrl = React.forwardRef
>(function EndpointUrl(
- { path, method, environment, showEnvironment, large, className },
+ { path, method, selectedEnvironment, showEnvironment, large, className },
parentRef,
) {
const endpointPathParts = useMemo(() => divideEndpointPathToParts(path), [path]);
@@ -31,17 +33,22 @@ export const EndpointUrl = React.forwardRef ref.current!);
+ const allEnvironmentIds = useAllEnvironmentIds();
+ const [isHovered, setIsHovered] = useState(false);
+
const renderPathParts = (parts: EndpointPathPart[]) => {
const elements: (ReactElement | null)[] = [];
- if (environment != null) {
- const url = parse(environment);
+ if (selectedEnvironment != null) {
+ const url = parse(selectedEnvironment.baseUrl);
if (showEnvironment) {
- elements.push(
-
- {`${url.protocol}//`}
- {url.host}
- ,
- );
+ if (allEnvironmentIds.length < 2) {
+ elements.push(
+
+ {`${url.protocol}//`}
+ {url.host}
+ ,
+ );
+ }
}
url.pathname?.split("/").forEach((part, i) => {
if (part.trim().length === 0) {
@@ -85,26 +92,37 @@ export const EndpointUrl = React.forwardRef
+
-
- {(onClick) => (
-
+
+ {showEnvironment && allEnvironmentIds.length > 1 && (
+
)}
-
+
+ {(onClick) => (
+
+ )}
+
+