@stoplight/elements-core 9.0.10 → 9.0.12-beta-0.1

package/src/components/TryIt/Body/RequestBody.tsx

@@ -0,0 +1,71 @@
+import { safeStringify } from '@stoplight/json';
+import { Button, Menu, MenuItems, Panel } from '@stoplight/mosaic';
+import { CodeEditor } from '@stoplight/mosaic-code-editor';
+import { INodeExample, INodeExternalExample } from '@stoplight/types';
+import * as React from 'react';
+
+interface RequestBodyProps {
+  examples: ReadonlyArray<INodeExample | INodeExternalExample>;
+  requestBody: string;
+  onChange: (newRequestBody: string) => void;
+}
+
+export const RequestBody: React.FC<RequestBodyProps> = ({ examples, requestBody, onChange }) => {
+  return (
+    <Panel defaultIsOpen>
+      <Panel.Titlebar
+        rightComponent={
+          examples.length > 1 && <ExampleMenu examples={examples} requestBody={requestBody} onChange={onChange} />
+        }
+      >
+        Body
+      </Panel.Titlebar>
+      <Panel.Content className="TextRequestBody">
+        <CodeEditor
+          onChange={onChange}
+          language="json"
+          value={requestBody}
+          showLineNumbers
+          padding={0}
+          style={
+            // when not rendering in prose (markdown), reduce font size to be consistent with base UI
+            {
+              fontSize: 12,
+            }
+          }
+        />
+      </Panel.Content>
+    </Panel>
+  );
+};
+
+function ExampleMenu({ examples, requestBody, onChange }: RequestBodyProps) {
+  const handleClick = React.useCallback(
+    (example: INodeExample | INodeExternalExample) => {
+      onChange(safeStringify('value' in example ? example.value : example.externalValue, undefined, 2) ?? requestBody);
+    },
+    [onChange, requestBody],
+  );
+
+  const menuItems = React.useMemo(() => {
+    const items: MenuItems = examples.map(example => ({
+      id: `request-example-${example.key}`,
+      title: example.key,
+      onPress: () => handleClick(example),
+    }));
+
+    return items;
+  }, [examples, handleClick]);
+
+  return (
+    <Menu
+      aria-label="Examples"
+      items={menuItems}
+      renderTrigger={({ isOpen }) => (
+        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
+          Examples
+        </Button>
+      )}
+    />
+  );
+}

package/src/components/TryIt/Body/__tests__/BinaryBody.test.tsx

@@ -0,0 +1,29 @@
+import '@testing-library/jest-dom';
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { BinaryBody, BinaryBodyProps } from '../BinaryBody';
+
+describe('BinaryBody', () => {
+  it('renders file input when the form is application/octet-stream', () => {
+    const props: BinaryBodyProps = {
+      specification: {
+        id: '493afac014fa8',
+        mediaType: 'application/octet-stream',
+        encodings: [],
+        schema: {
+          type: 'string',
+          format: 'binary',
+          $schema: 'http://json-schema.org/draft-07/schema#',
+        },
+      },
+      values: {},
+      onChangeValues: () => {},
+    };
+
+    const { getByLabelText } = render(<BinaryBody {...props} />);
+
+    expect(getByLabelText('file')).toBeInTheDocument();
+  });
+});

package/src/components/TryIt/Body/__tests__/FormDataBody.test.tsx

@@ -0,0 +1,94 @@
+import '@testing-library/jest-dom';
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { FormDataBody, FormDataBodyProps } from '../FormDataBody';
+
+describe('FormDataBody', () => {
+  it('when the top level of the schema is oneOf', () => {
+    // Arrange
+    const props: FormDataBodyProps = {
+      specification: {
+        id: '493afac014fa8',
+        mediaType: 'application/x-www-form-urlencoded',
+        encodings: [],
+        schema: {
+          oneOf: [
+            {
+              title: 'Authenticate',
+              description: 'supply username and password for refresh and access tokens',
+              type: 'object',
+              properties: {
+                username: {
+                  type: 'string',
+                },
+                password: {
+                  type: 'string',
+                },
+              },
+            },
+            {
+              title: 'Access Token Refresh',
+              description: 'supply a refresh token for new refresh and access tokens',
+              type: 'object',
+              properties: {
+                refresh_token: {
+                  type: 'string',
+                },
+              },
+            },
+          ],
+          description: '',
+          title: 'Request Body Schemas',
+          $schema: 'http://json-schema.org/draft-07/schema#',
+        },
+      },
+      values: {},
+      isAllowedEmptyValues: {},
+      onChangeParameterAllow: () => {},
+      onChangeValues: () => {},
+    };
+
+    // Act
+    const { getByTestId } = render(<FormDataBody {...props} />);
+
+    // Assert
+    expect(getByTestId('oneof-menu')).toBeVisible();
+  });
+
+  it('when the top level of the schema has properties', () => {
+    // Arrange
+    const props: FormDataBodyProps = {
+      specification: {
+        id: '493afac014fa8',
+        mediaType: 'application/x-www-form-urlencoded',
+        encodings: [],
+        schema: {
+          title: 'Authenticate',
+          description: 'supply username and password for refresh and access tokens',
+          type: 'object',
+          properties: {
+            username: {
+              type: 'string',
+            },
+            password: {
+              type: 'string',
+            },
+          },
+          $schema: 'http://json-schema.org/draft-07/schema#',
+        },
+      },
+      values: {},
+      isAllowedEmptyValues: {},
+      onChangeParameterAllow: () => {},
+      onChangeValues: () => {},
+    };
+
+    // Act
+    const { queryByTestId } = render(<FormDataBody {...props} />);
+
+    // Assert
+    expect(queryByTestId('oneof-menu')).toBe(null);
+  });
+});

package/src/components/TryIt/Body/request-body-utils.ts

@@ -0,0 +1,127 @@
+import { IMediaTypeContent } from '@stoplight/types';
+import { isString, pickBy } from 'lodash';
+import * as React from 'react';
+
+import { fileToBase64 } from '../../../utils/fileToBase64';
+import {
+  initialParameterValues,
+  mapSchemaPropertiesToParameters,
+  parameterSupportsFileUpload,
+} from '../Parameters/parameter-utils';
+
+export type BodyParameterValues = Record<string, string | File>;
+export type ParameterOptional = Record<string, boolean>;
+
+export const isFormDataContent = (content: IMediaTypeContent) =>
+  isUrlEncodedContent(content) || isMultipartContent(content);
+
+function isUrlEncodedContent(content: IMediaTypeContent) {
+  return content.mediaType.toLowerCase() === 'application/x-www-form-urlencoded';
+}
+
+function isMultipartContent(content: IMediaTypeContent) {
+  return content.mediaType.toLowerCase() === 'multipart/form-data';
+}
+
+export const isBinaryContent = (content: IMediaTypeContent) => isApplicationOctetStream(content);
+
+function isApplicationOctetStream(content: IMediaTypeContent) {
+  return content.mediaType.toLowerCase() === 'application/octet-stream';
+}
+
+export async function createRequestBody(
+  mediaTypeContent: IMediaTypeContent | undefined,
+  bodyParameterValues: BodyParameterValues | undefined,
+) {
+  if (!mediaTypeContent) return undefined;
+
+  const creator = (await requestBodyCreators[mediaTypeContent.mediaType.toLowerCase()]) ?? createRawRequestBody;
+  return creator({ mediaTypeContent, bodyParameterValues, rawBodyValue: '' });
+}
+
+type RequestBodyCreator = (options: {
+  mediaTypeContent: IMediaTypeContent;
+  bodyParameterValues?: BodyParameterValues;
+  rawBodyValue?: string;
+}) => Promise<BodyInit>;
+
+const createUrlEncodedRequestBody: RequestBodyCreator = async ({ bodyParameterValues = {} }) => {
+  const filteredValues = pickBy(bodyParameterValues, isString);
+
+  return new URLSearchParams(filteredValues);
+};
+
+const createMultipartRequestBody: RequestBodyCreator = async ({ mediaTypeContent, bodyParameterValues = {} }) => {
+  const formData = new FormData();
+  for (const [key, value] of Object.entries(bodyParameterValues)) {
+    const schema = mediaTypeContent.schema?.properties?.[key];
+
+    if (typeof schema !== 'object') continue;
+
+    if (parameterSupportsFileUpload({ schema }) && schema.contentEncoding === 'base64' && value instanceof File) {
+      try {
+        formData.append(key, await fileToBase64(value));
+      } catch {
+        continue;
+      }
+    } else {
+      formData.append(key, value);
+    }
+  }
+  return formData;
+};
+
+const createRawRequestBody: RequestBodyCreator = async ({ rawBodyValue = '' }) => rawBodyValue;
+
+const requestBodyCreators: Record<string, RequestBodyCreator | undefined> = {
+  'application/x-www-form-urlencoded': createUrlEncodedRequestBody,
+  'multipart/form-data': createMultipartRequestBody,
+};
+
+export const useBodyParameterState = (mediaTypeContent: IMediaTypeContent | undefined) => {
+  const isFormDataBody = mediaTypeContent && isFormDataContent(mediaTypeContent);
+  const isBinaryBody = mediaTypeContent && isBinaryContent(mediaTypeContent);
+
+  const initialState = React.useMemo(() => {
+    if (!isFormDataBody || isBinaryBody) {
+      return {};
+    }
+    const properties = mediaTypeContent?.schema?.properties ?? {};
+    const required = mediaTypeContent?.schema?.required;
+    const parameters = mapSchemaPropertiesToParameters(properties, required);
+    return initialParameterValues(parameters);
+  }, [isFormDataBody, isBinaryBody, mediaTypeContent]);
+
+  const [bodyParameterValues, setBodyParameterValues] = React.useState<BodyParameterValues>(initialState);
+  const [isAllowedEmptyValue, setAllowedEmptyValue] = React.useState<ParameterOptional>({});
+
+  React.useEffect(() => {
+    setBodyParameterValues(initialState);
+  }, [initialState]);
+
+  if (isFormDataBody) {
+    return [
+      bodyParameterValues,
+      setBodyParameterValues,
+      isAllowedEmptyValue,
+      setAllowedEmptyValue,
+      { isFormDataBody: true, isBinaryBody: false, bodySpecification: mediaTypeContent! },
+    ] as const;
+  } else if (isBinaryBody) {
+    return [
+      bodyParameterValues,
+      setBodyParameterValues,
+      isAllowedEmptyValue,
+      setAllowedEmptyValue,
+      { isFormDataBody: false, isBinaryBody: true, bodySpecification: mediaTypeContent! },
+    ] as const;
+  } else {
+    return [
+      bodyParameterValues,
+      setBodyParameterValues,
+      isAllowedEmptyValue,
+      setAllowedEmptyValue,
+      { isFormDataBody: false, isBinaryBody: false, bodySpecification: undefined },
+    ] as const;
+  }
+};

package/src/components/TryIt/Body/useTextRequestBodyState.ts

@@ -0,0 +1,27 @@
+import { IMediaTypeContent } from '@stoplight/types';
+import * as React from 'react';
+
+import { useGenerateExampleFromMediaTypeContent } from '../../../utils/exampleGeneration/exampleGeneration';
+
+/**
+ * Manages the state of the request body text editor.
+ *
+ * A wrapper for `React.useState`, but handles creating the initial value, and resetting when the content definition changes.
+ */
+
+export const useTextRequestBodyState = (
+  mediaTypeContent: IMediaTypeContent | undefined,
+  skipReadOnly: boolean,
+): [string, React.Dispatch<React.SetStateAction<string>>] => {
+  const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
+    skipReadOnly,
+  });
+
+  const [textRequestBody, setTextRequestBody] = React.useState<string>(initialRequestBody);
+
+  React.useEffect(() => {
+    setTextRequestBody(initialRequestBody);
+  }, [initialRequestBody]);
+
+  return [textRequestBody, setTextRequestBody];
+};

package/src/components/TryIt/Mocking/MockingButton.tsx

@@ -0,0 +1,98 @@
+import { Box, FieldButton, Menu, MenuActionItem, MenuItems, MenuItemWithSubmenu } from '@stoplight/mosaic';
+import { IHttpOperation, IHttpOperationResponse } from '@stoplight/types';
+import { uniq } from 'lodash';
+import * as React from 'react';
+
+import { MockingOptions } from './mocking-utils';
+
+interface MockingButtonProps {
+  operation: IHttpOperation;
+  options: MockingOptions;
+  onOptionsChange: (data: MockingOptions) => void;
+}
+
+export const MockingButton: React.FC<MockingButtonProps> = ({
+  operation,
+  options: { code, example, dynamic },
+  onOptionsChange,
+}) => {
+  const operationResponses = operation.responses;
+
+  const setMockingOptions = React.useCallback(
+    ({ code, example, dynamic }: Omit<MockingOptions, 'isEnabled'>) => {
+      onOptionsChange({ code, example, dynamic });
+    },
+    [onOptionsChange],
+  );
+
+  const menuItems = React.useMemo(() => {
+    const items: MenuItems = operationResponses
+      ?.filter(operationResponse => Number.isInteger(parseFloat(operationResponse.code)))
+      ?.map(generateOperationResponseMenu);
+
+    function generateOperationResponseMenu(operationResponse: IHttpOperationResponse) {
+      const menuId = `response-${operationResponse.code}`;
+      const isActive = operationResponse.code === code;
+      const exampleKeys = uniq(operationResponse.contents?.flatMap(c => c.examples || []).map(example => example.key));
+
+      const exampleChildren: MenuActionItem[] = exampleKeys?.map(exampleKey => ({
+        id: `${menuId}-example-${exampleKey}`,
+        title: exampleKey,
+        isChecked: isActive && exampleKey === example,
+        onPress: () => {
+          setMockingOptions({ code: operationResponse.code, example: exampleKey });
+        },
+      }));
+
+      const generationModeItems: MenuActionItem[] = [
+        {
+          id: `${menuId}-gen-static`,
+          title: 'Statically Generated',
+          isChecked: isActive && dynamic === false,
+          onPress: () => {
+            setMockingOptions({ code: operationResponse.code, dynamic: false });
+          },
+        },
+        {
+          id: `${menuId}-gen-dynamic`,
+          title: 'Dynamically Generated',
+          isChecked: isActive && dynamic === true,
+          onPress: () => {
+            setMockingOptions({ code: operationResponse.code, dynamic: true });
+          },
+        },
+      ];
+
+      const menuItem: MenuItemWithSubmenu = {
+        id: menuId,
+        isChecked: isActive,
+        title: operationResponse.code,
+        onPress: () => {
+          setMockingOptions({ code: operationResponse.code, dynamic: false });
+        },
+        children: [
+          { type: 'group', children: generationModeItems },
+          { type: 'group', title: 'Examples', children: exampleChildren },
+        ],
+      };
+
+      return menuItem;
+    }
+
+    return items;
+  }, [code, dynamic, example, operationResponses, setMockingOptions]);
+
+  return (
+    <Box>
+      <Menu
+        aria-label="Mock settings"
+        items={menuItems}
+        renderTrigger={({ isOpen }) => (
+          <FieldButton active={isOpen} size="sm">
+            Mock Settings
+          </FieldButton>
+        )}
+      />
+    </Box>
+  );
+};

package/src/components/TryIt/Mocking/mocking-utils.ts

@@ -0,0 +1,56 @@
+import { IHttpOperation } from '@stoplight/types';
+import { compact, uniq } from 'lodash';
+
+import { formatMultiValueHeader } from '../../../utils/headers';
+
+export type MockingOptions = { code?: string; example?: string; dynamic?: boolean };
+type PreferHeaderProps = { code?: string; example?: string; dynamic?: boolean };
+
+export type MockData = {
+  url: string;
+  header?: Record<'Prefer', string>;
+};
+
+export function getMockData(
+  url: string | undefined,
+  httpOperation: IHttpOperation,
+  { code, dynamic, example }: MockingOptions,
+): MockData | undefined {
+  return url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
+}
+
+export function buildPreferHeader(
+  { code, example, dynamic }: PreferHeaderProps,
+  httpOperation: IHttpOperation,
+): Record<'Prefer', string> | undefined {
+  if (!code) {
+    return undefined;
+  }
+  const isCodeSupported = supportsResponseCode(httpOperation, code);
+  const isExampleSupported = isCodeSupported && supportsExample(httpOperation, code, example);
+
+  const args: Array<readonly [string, string] | string> = compact([
+    code && isCodeSupported ? ['code', code] : undefined,
+    dynamic ? ['dynamic', String(dynamic)] : undefined,
+    example && isExampleSupported ? ['example', example] : undefined,
+  ]);
+  const headerValue = formatMultiValueHeader(...args);
+
+  return {
+    Prefer: headerValue,
+  };
+}
+
+function supportsResponseCode(httpOperation: IHttpOperation, code?: string) {
+  return httpOperation.responses?.find(response => response.code === code) !== undefined;
+}
+
+function supportsExample(httpOperation: IHttpOperation, code?: string, exampleKey?: string) {
+  if (!exampleKey) return false;
+
+  const response = httpOperation.responses?.find(response => response.code === code);
+  if (!response) return false;
+
+  const exampleKeys = uniq(response.contents?.flatMap(c => c.examples || []).map(example => example.key));
+  return exampleKeys.includes(exampleKey);
+}

package/src/components/TryIt/Mocking/useMockingOptions.ts

@@ -0,0 +1,6 @@
+import { atom, useAtom } from 'jotai';
+
+import { MockingOptions } from './mocking-utils';
+
+const mockingOptionsAtom = atom<MockingOptions>({});
+export const useMockingOptions = () => useAtom(mockingOptionsAtom);

package/src/components/TryIt/Parameters/FileUploadParameterEditors.tsx

@@ -0,0 +1,62 @@
+import { Flex, Icon, Input, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { useUniqueId } from '../../../hooks/useUniqueId';
+import { ParameterSpec } from './parameter-utils';
+
+interface FileUploadParameterEditorProps {
+  parameter: ParameterSpec;
+  value?: File;
+  onChange: (parameterValue: File | undefined) => void;
+}
+
+export const FileUploadParameterEditor: React.FC<FileUploadParameterEditorProps> = ({ parameter, value, onChange }) => {
+  const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+    if (file === undefined) return;
+
+    onChange(file);
+  };
+
+  const clearFile = () => {
+    onChange(undefined);
+  };
+
+  const parameterInputId = useUniqueId(`id_${parameter.name}_`);
+  const fileUploadInputId = `${parameterInputId}-file-input`;
+
+  return (
+    <>
+      <label aria-hidden="true" data-testid="param-label" htmlFor={parameterInputId}>
+        {parameterDisplayName}
+      </label>
+      <Text mx={3}>:</Text>
+      <Flex flex={1} alignItems="center">
+        <Input
+          id={parameterInputId}
+          style={{ paddingLeft: 15 }}
+          aria-label={parameter.name}
+          appearance="minimal"
+          flex={1}
+          placeholder="pick a file"
+          type="text"
+          required
+          value={value?.name ?? ''}
+          disabled
+        />
+        {value && (
+          <button className="sl-mr-3 sl-p-2" aria-label="Remove file" onClick={clearFile}>
+            <Icon icon="times" />
+          </button>
+        )}
+        <div>
+          <label role="button" htmlFor={fileUploadInputId}>
+            Upload
+          </label>
+          <input onChange={handleFileChange} type="file" hidden id={fileUploadInputId} />
+        </div>
+      </Flex>
+    </>
+  );
+};

package/src/components/TryIt/Parameters/OperationParameters.tsx

@@ -0,0 +1,39 @@
+import { Panel } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { ParameterSpec } from './parameter-utils';
+import { ParameterEditor } from './ParameterEditor';
+
+interface OperationParametersProps<P extends keyof any = string> {
+  parameters: readonly ParameterSpec[];
+  values: Record<P, string>;
+  onChangeValue: (parameterName: P, newValue: string) => void;
+  validate?: boolean;
+}
+
+export const OperationParameters: React.FC<OperationParametersProps> = ({
+  parameters,
+  values,
+  onChangeValue,
+  validate,
+}) => {
+  return (
+    <Panel defaultIsOpen>
+      <Panel.Titlebar>Parameters</Panel.Titlebar>
+      <Panel.Content className="sl-overflow-y-auto ParameterGrid OperationParametersContent">
+        {parameters.map(parameter => (
+          <ParameterEditor
+            key={parameter.name}
+            parameter={parameter}
+            value={values[parameter.name]}
+            onChange={value => onChangeValue(parameter.name, String(value))}
+            validate={validate}
+            isOptional={false}
+            canChangeOptional={false}
+            onChangeOptional={() => {}}
+          />
+        ))}
+      </Panel.Content>
+    </Panel>
+  );
+};