Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: migrated API Playground to using the V2 API Definition typings #1564

Merged
merged 26 commits into from
Oct 2, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
final touches?
abvthecity committed Oct 1, 2024
commit 0a79ffa78171d8e7c19773f515be1cbecb5fa7d3
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { unwrapObjectType, unwrapReference } from "@fern-api/fdr-sdk/api-definition";
import { EMPTY_ARRAY, visitDiscriminatedUnion } from "@fern-ui/core-utils";
import titleCase from "@fern-ui/core-utils/titleCase";
import { isEmpty } from "lodash-es";
import { Dispatch, FC, SetStateAction, useCallback } from "react";
import { dereferenceObjectProperties, unwrapReference } from "../../resolver/types";
import { PlaygroundFileUploadForm } from "../form/PlaygroundFileUploadForm";
import { PlaygroundObjectPropertiesForm } from "../form/PlaygroundObjectPropertyForm";
import { PlaygroundTypeReferenceForm } from "../form/PlaygroundTypeReferenceForm";
@@ -137,7 +136,7 @@ export const PlaygroundEndpointForm: FC<PlaygroundEndpointFormProps> = ({
{endpoint.request?.body != null &&
visitDiscriminatedUnion(endpoint.request.body)._visit({
formData: (formData) => (
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title={titleCase(formData.name)}>
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Multipart Form">
<PlaygroundEndpointMultipartForm
endpoint={endpoint}
formState={formState}
@@ -163,44 +162,43 @@ export const PlaygroundEndpointForm: FC<PlaygroundEndpointFormProps> = ({
/>
</PlaygroundEndpointFormSection>
),
typeShape: (shape) => {
shape = unwrapReference(shape, types);
object: (value) => (
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Body Parameters">
<PlaygroundObjectPropertiesForm
id="body"
properties={unwrapObjectType(value, types).properties}
onChange={setBodyJson}
value={formState?.body?.value}
types={types}
/>
</PlaygroundEndpointFormSection>
),
alias: (alias) => {
const { shape, isOptional } = unwrapReference(alias.value, types);

if (shape.type === "object") {
if (shape.type === "object" && !isOptional) {
return (
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Body Parameters">
<PlaygroundObjectPropertiesForm
id="body"
properties={dereferenceObjectProperties(shape, types)}
onChange={setBodyJson}
value={formState?.body?.value}
types={types}
/>
</PlaygroundEndpointFormSection>
);
} else if (shape.type === "optional") {
return (
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Optional Body">
<PlaygroundTypeReferenceForm
id="body"
shape={shape.shape}
properties={unwrapObjectType(shape, types).properties}
onChange={setBodyJson}
value={formState?.body?.value}
onlyRequired
types={types}
/>
</PlaygroundEndpointFormSection>
);
}

return (
<PlaygroundEndpointFormSection ignoreHeaders={ignoreHeaders} title="Body">
<PlaygroundEndpointFormSection
ignoreHeaders={ignoreHeaders}
title={isOptional ? "Optional Body" : "Body"}
>
<PlaygroundTypeReferenceForm
id="body"
shape={shape}
onChange={setBodyJson}
value={formState?.body?.value}
onlyRequired
types={types}
/>
</PlaygroundEndpointFormSection>
Original file line number Diff line number Diff line change
@@ -67,7 +67,7 @@ export function PlaygroundEndpointRequestCard({
content={() => {
const authState = store.get(PLAYGROUND_AUTH_STATE_ATOM);
const resolver = new PlaygroundCodeSnippetResolverBuilder(
context.endpoint,
context,
isSnippetTemplatesEnabled,
isFileForgeHackEnabled,
).create(authState, formState, proxyEnvironment, playgroundEnvironment, setOAuthValue);
@@ -76,7 +76,7 @@ export function PlaygroundEndpointRequestCard({
className="-mr-2"
/>
</div>
<PlaygroundRequestPreview endpoint={context.endpoint} formState={formState} requestType={requestType} />
<PlaygroundRequestPreview context={context} formState={formState} requestType={requestType} />
</FernCard>
);
}
Original file line number Diff line number Diff line change
@@ -29,8 +29,6 @@ interface PlaygroundTypeReferenceFormProps {
onOpenStack?: () => void;
onCloseStack?: () => void;
renderAsPanel?: boolean;
onlyRequired?: boolean;
onlyOptional?: boolean;
types: Record<string, TypeDefinition>;
disabled?: boolean;
indent?: boolean;

Unchanged files with check annotations Beta

export const ApiReferencePage: React.FC<ApiReferencePage.Props> = ({ initialApi, showErrors }) => {
const hydrated = useIsReady();
const setDefinitions = useSetAtom(DEPRECATED_APIS_ATOM);

Check warning on line 19 in packages/ui/app/src/api-reference/ApiReferencePage.tsx

GitHub Actions / lint

'DEPRECATED_APIS_ATOM' is deprecated.
useEffect(() => {
setDefinitions((prev) => ({ ...prev, [initialApi.api]: initialApi }));
}, [initialApi, setDefinitions]);
<FernCollapse open={isSelected} className="w-full">
<div className="space-y-2 pt-2">
<div className="t-muted w-full text-start text-sm leading-7">
{`This error return ${renderDeprecatedTypeShorthand(error.shape, { withArticle: true }, types)}.`}

Check warning on line 76 in packages/ui/app/src/api-reference/endpoints/EndpointError.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthand' is deprecated.
</div>
{shouldHideShape(error.shape, types) ? null : (
<div className="w-full text-start">
<EndpointParameterContent
name={name}
description={description}
typeShorthand={renderDeprecatedTypeShorthandRoot(shape, types, false)}

Check warning on line 42 in packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthandRoot' is deprecated.
anchorIdParts={anchorIdParts}
slug={slug}
availability={availability}
return `a multipart form${fileArrays.length > 0 || files.length > 1 ? " with multiple files" : files[0] != null ? ` containing ${files[0].isOptional ? "an optional" : "a"} file` : ""}`;
},
bytes: (bytes) => `binary data${bytes.contentType != null ? ` of type ${bytes.contentType}` : ""}`,
typeShape: (typeShape) => renderDeprecatedTypeShorthand(typeShape, { withArticle: true }, types),

Check warning on line 59 in packages/ui/app/src/api-reference/endpoints/EndpointRequestSection.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthand' is deprecated.
})}.`}
/>
{visitResolvedHttpRequestBodyShape<ReactNode | null>(requestBody.shape, {
<EndpointParameterContent
name={file.key}
description={file.description}
typeShorthand={renderDeprecatedTypeShorthandFormDataProperty(file)}

Check warning on line 72 in packages/ui/app/src/api-reference/endpoints/EndpointRequestSection.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthandFormDataProperty' is deprecated.
anchorIdParts={[...anchorIdParts, file.key]}
slug={slug}
availability={file.availability}
<EndpointParameterContent
name={fileArray.key}
description={fileArray.description}
typeShorthand={renderDeprecatedTypeShorthandFormDataProperty(fileArray)}

Check warning on line 82 in packages/ui/app/src/api-reference/endpoints/EndpointRequestSection.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthandFormDataProperty' is deprecated.
anchorIdParts={[...anchorIdParts, fileArray.key]}
slug={slug}
availability={fileArray.availability}
} else if (responseBody.shape.type === "streamCondition") {
return "This endpoint returns a stream.";
} else if (responseBody.shape.type === "stream") {
return `This endpoint returns a stream of ${renderDeprecatedTypeShorthand(responseBody.shape.value, { withArticle: false }, types)}.`;

Check warning on line 109 in packages/ui/app/src/api-reference/endpoints/EndpointResponseSection.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthand' is deprecated.
}
return `This endpoint returns ${renderDeprecatedTypeShorthand(responseBody.shape, { withArticle: true }, types)}.`;

Check warning on line 111 in packages/ui/app/src/api-reference/endpoints/EndpointResponseSection.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthand' is deprecated.
}
{property.key}
</span>
</FernAnchor>
{renderDeprecatedTypeShorthandRoot(property.valueShape, types, contextValue.isResponse)}

Check warning on line 130 in packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthandRoot' is deprecated.
{property.availability != null && (
<EndpointAvailabilityTag availability={property.availability} minimal={true} />
)}
types: Record<string, ResolvedTypeDefinition>,
isResponse: boolean = false,
): ReactNode {
const typeShorthand = renderDeprecatedTypeShorthand(unwrapOptional(shape, types), { nullable: isResponse }, types);

Check warning on line 30 in packages/ui/app/src/api-reference/types/type-shorthand/TypeShorthand.tsx

GitHub Actions / lint

'renderDeprecatedTypeShorthand' is deprecated.
const unaliasedShape = unwrapAlias(shape, types);
const defaultsTo = renderDefaultsTo(unaliasedShape);
return (