add trailing path to parsed url in playground (#1481)

fern-api · Sep 16, 2024 · 36274b1 · 36274b1
1 parent 2f8d334
commit 36274b1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 36 deletions.
diff --git a/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx b/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx
@@ -11,13 +11,19 @@ interface MaybeEnvironmentDropdownProps {
     protocolTextStyle?: string;
     small?: boolean;
     environmentFilters?: APIV1Read.EnvironmentId[];
+    trailingPath?: boolean;
 }
-export function MaybeEnvironmentDropdown(props: MaybeEnvironmentDropdownProps): ReactElement | null {
+export function MaybeEnvironmentDropdown({
+    selectedEnvironment,
+    urlTextStyle,
+    protocolTextStyle,
+    small,
+    environmentFilters,
+    trailingPath,
+}: MaybeEnvironmentDropdownProps): ReactElement | null {
     const [allEnvironmentIds] = useAtom(ALL_ENVIRONMENTS_ATOM);
     const [selectedEnvironmentId, setSelectedEnvironmentId] = useAtom(SELECTED_ENVIRONMENT_ATOM);
 
-    const { selectedEnvironment, urlTextStyle, protocolTextStyle, small, environmentFilters } = props;
-
     const environmentIds = environmentFilters
         ? environmentFilters.filter((environmentFilter) => allEnvironmentIds.includes(environmentFilter))
         : allEnvironmentIds;
@@ -28,38 +34,41 @@ export function MaybeEnvironmentDropdown(props: MaybeEnvironmentDropdownProps):
     const url = selectedEnvironment?.baseUrl && parse(selectedEnvironment?.baseUrl);
 
     return (
-        <span>
-            {environmentIds && environmentIds.length > 1 ? (
-                <FernDropdown
-                    key="selectedEnvironment-selector"
-                    options={environmentIds.map((env) => ({
-                        value: env,
-                        label: env,
-                        type: "value",
-                    }))}
-                    onValueChange={(value) => {
-                        setSelectedEnvironmentId(value);
-                    }}
-                    value={selectedEnvironmentId ?? selectedEnvironment?.id}
-                >
-                    <FernButton
-                        text={
-                            <span key="protocol" className="whitespace-nowrap max-sm:hidden">
-                                <span className={protocolTextStyle}>{`${url && url.protocol}//`}</span>
-                                <span className={urlTextStyle}>{(url && url.host) ?? selectedEnvironmentId}</span>
-                            </span>
-                        }
-                        size={small ? "small" : "normal"}
-                        variant="outlined"
-                        mono={true}
-                    />
-                </FernDropdown>
-            ) : (
-                <span key="protocol" className="whitespace-nowrap max-sm:hidden">
-                    <span className={protocolTextStyle}>{`${url && url.protocol}//`}</span>
-                    <span className={urlTextStyle}>{(url && url.host) ?? selectedEnvironmentId}</span>
-                </span>
-            )}
-        </span>
+        <>
+            <span>
+                {environmentIds && environmentIds.length > 1 ? (
+                    <FernDropdown
+                        key="selectedEnvironment-selector"
+                        options={environmentIds.map((env) => ({
+                            value: env,
+                            label: env,
+                            type: "value",
+                        }))}
+                        onValueChange={(value) => {
+                            setSelectedEnvironmentId(value);
+                        }}
+                        value={selectedEnvironmentId ?? selectedEnvironment?.id}
+                    >
+                        <FernButton
+                            text={
+                                <span key="protocol" className="whitespace-nowrap max-sm:hidden">
+                                    <span className={protocolTextStyle}>{`${url && url.protocol}//`}</span>
+                                    <span className={urlTextStyle}>{(url && url.host) ?? selectedEnvironmentId}</span>
+                                </span>
+                            }
+                            size={small ? "small" : "normal"}
+                            variant="outlined"
+                            mono={true}
+                        />
+                    </FernDropdown>
+                ) : (
+                    <span key="protocol" className="whitespace-nowrap max-sm:hidden">
+                        <span className={protocolTextStyle}>{`${url && url.protocol}//`}</span>
+                        <span className={urlTextStyle}>{(url && url.host) ?? selectedEnvironmentId}</span>
+                    </span>
+                )}
+            </span>
+            {trailingPath && url && url.pathname !== "/" && <span>{url.pathname}</span>}
+        </>
     );
 }
diff --git a/packages/ui/app/src/playground/endpoint/PlaygroundEndpointPath.tsx b/packages/ui/app/src/playground/endpoint/PlaygroundEndpointPath.tsx
@@ -58,6 +58,7 @@ export const PlaygroundEndpointPath: FC<PlaygroundEndpointPathProps> = ({
                                 small
                                 urlTextStyle="playground-endpoint-baseurl max-sm:hidden"
                                 protocolTextStyle="playground-endpoint-baseurl max-sm:hidden"
+                                trailingPath={true}
                             />
                         )}
                     </span>
-Original file line number
+Diff line change
@@ Expand Up @@
                                     small
                                     urlTextStyle="playground-endpoint-baseurl max-sm:hidden"
                                     protocolTextStyle="playground-endpoint-baseurl max-sm:hidden"
+                                    trailingPath={true}
                                 />
                             )}
                         </span>
@@ Expand Down @@