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

package/src/components/TryIt/build-request.spec.ts

@@ -0,0 +1,213 @@
+import { IHttpOperation } from '@stoplight/types';
+
+import { operation as minimalOperation } from '../../__fixtures__/operations/operation-minimal';
+import httpOperation from '../../__fixtures__/operations/operation-parameters';
+import { getAcceptedMimeTypes, getQueryParams } from './build-request';
+
+describe('Build Request', () => {
+  describe('Query params', () => {
+    it('Handles operation without query params', () => {
+      const params = getQueryParams({ httpOperation: minimalOperation, parameterValues: {} });
+
+      expect(params).toStrictEqual([]);
+    });
+
+    it('Handles parameters without values', () => {
+      const params = getQueryParams({ httpOperation, parameterValues: { value: '' } });
+
+      expect(params).toStrictEqual([]);
+    });
+
+    it('Handles invalid JSON values', () => {
+      expect(() => {
+        getQueryParams({ httpOperation, parameterValues: { nested: '{' } });
+      }).toThrowError('JSON object expected');
+
+      expect(() => {
+        getQueryParams({ httpOperation, parameterValues: { nested: '123' } });
+      }).toThrowError('JSON object expected');
+
+      expect(() => {
+        getQueryParams({ httpOperation, parameterValues: { items: '[' } });
+      }).toThrowError('JSON array expected');
+
+      expect(() => {
+        getQueryParams({ httpOperation, parameterValues: { items: '123' } });
+      }).toThrowError('JSON array expected');
+    });
+
+    it('Supports form and deepObject style', () => {
+      const params = getQueryParams({
+        httpOperation,
+        parameterValues: {
+          value: '1',
+          items: '["first","second"]',
+          items_not_exploded: '["first","second"]',
+          default_style_items: '["first","second"]',
+          nested: '{"key":"value"}',
+          nested_not_exploded: '{"key":"value"}',
+          deep_object: '{"key":"value", "number": 2}',
+        },
+      });
+
+      expect(params).toStrictEqual([
+        { name: 'value', value: '1' },
+        { name: 'items', value: 'first' },
+        { name: 'items', value: 'second' },
+        { name: 'items_not_exploded', value: 'first,second' },
+        { name: 'default_style_items', value: 'first' },
+        { name: 'default_style_items', value: 'second' },
+        { name: 'key', value: 'value' },
+        { name: 'nested_not_exploded', value: 'key,value' },
+        { name: 'deep_object[key]', value: 'value' },
+        { name: 'deep_object[number]', value: '2' },
+      ]);
+    });
+
+    it('Supports spaceDelimited style', () => {
+      const params = getQueryParams({
+        httpOperation,
+        parameterValues: { items_spaces: '["first","second"]', items_spaces_not_exploded: '["first","second"]' },
+      });
+
+      expect(params).toStrictEqual([
+        { name: 'items_spaces', value: 'first' },
+        { name: 'items_spaces', value: 'second' },
+        { name: 'items_spaces_not_exploded', value: 'first second' },
+      ]);
+    });
+
+    it('Supports pipeDelimited style', () => {
+      const params = getQueryParams({
+        httpOperation,
+        parameterValues: { items_pipes: '["first","second"]', items_pipes_not_exploded: '["first","second"]' },
+      });
+
+      expect(params).toStrictEqual([
+        { name: 'items_pipes', value: 'first' },
+        { name: 'items_pipes', value: 'second' },
+        { name: 'items_pipes_not_exploded', value: 'first|second' },
+      ]);
+    });
+
+    it('Splits string arrays by a respective delimiter', () => {
+      const params = getQueryParams({
+        httpOperation,
+        parameterValues: {
+          items: '"first,second"',
+          items_spaces: '"first second"',
+          items_pipes: '"first|second"',
+        },
+      });
+
+      expect(params).toStrictEqual([
+        { name: 'items', value: 'first' },
+        { name: 'items', value: 'second' },
+        { name: 'items_spaces', value: 'first' },
+        { name: 'items_spaces', value: 'second' },
+        { name: 'items_pipes', value: 'first' },
+        { name: 'items_pipes', value: 'second' },
+      ]);
+    });
+  });
+
+  describe('getAcceptedMimeTypes', () => {
+    const operationSingleResponse: IHttpOperation = {
+      id: 'adsf',
+      method: 'GET',
+      path: '/a/path',
+      responses: [
+        {
+          id: 'responseA',
+          code: '200',
+          contents: [
+            {
+              id: 'adsf',
+              mediaType: 'application/json',
+            },
+            {
+              id: 'dfvs',
+              mediaType: 'application/json',
+            },
+            {
+              id: 'aaaa',
+              mediaType: 'multipart/form-data',
+            },
+          ],
+        },
+      ],
+    };
+
+    const operationMultipleResponses: IHttpOperation = {
+      id: 'sfdf',
+      method: 'POST',
+      path: '/a/nother/path',
+      responses: [
+        {
+          id: 'responseA',
+          code: '200',
+          contents: [
+            {
+              id: 'adsf',
+              mediaType: 'application/json',
+            },
+            {
+              id: 'dfvs',
+              mediaType: 'application/json',
+            },
+          ],
+        },
+        {
+          id: 'responseB',
+          code: '200',
+          contents: [
+            {
+              id: 'adsf',
+              mediaType: 'application/json',
+            },
+            {
+              id: 'dfvs',
+              mediaType: 'multipart/form-data',
+            },
+          ],
+        },
+        {
+          id: 'responseC',
+          code: '200',
+          contents: [
+            {
+              id: 'dfvs',
+              mediaType: 'multipart/form-data',
+            },
+          ],
+        },
+        {
+          id: 'responseB',
+          code: '200',
+          contents: [
+            {
+              id: 'adsf',
+              mediaType: 'text/json',
+            },
+            {
+              id: 'dfvs',
+              mediaType: 'multipart/form-data',
+            },
+          ],
+        },
+      ],
+    };
+
+    it('Handles a single response with duplicates', () => {
+      expect(getAcceptedMimeTypes(operationSingleResponse)).toStrictEqual(['application/json', 'multipart/form-data']);
+    });
+
+    it('Handles multiple responses and dedups appropriately', () => {
+      expect(getAcceptedMimeTypes(operationMultipleResponses)).toStrictEqual([
+        'application/json',
+        'multipart/form-data',
+        'text/json',
+      ]);
+    });
+  });
+});

package/src/components/TryIt/build-request.ts

@@ -0,0 +1,357 @@
+import { Dictionary, HttpParamStyles, IHttpOperation, IMediaTypeContent, IServer } from '@stoplight/types';
+import { Request as HarRequest } from 'har-format';
+
+import { getServerUrlWithVariableValues, resolveUrl } from '../../utils/http-spec/IServer';
+import {
+  filterOutAuthorizationParams,
+  HttpSecuritySchemeWithValues,
+  isApiKeySecurityScheme,
+  isBasicSecurityScheme,
+  isBearerSecurityScheme,
+  isDigestSecurityScheme,
+  isOAuth2SecurityScheme,
+} from './Auth/authentication-utils';
+import { BodyParameterValues, createRequestBody } from './Body/request-body-utils';
+import { MockData } from './Mocking/mocking-utils';
+
+type NameAndValue = {
+  name: string;
+  value: string;
+};
+
+const nameAndValueObjectToPair = ({ name, value }: NameAndValue): [string, string] => [name, value];
+
+interface BuildRequestInput {
+  httpOperation: IHttpOperation;
+  mediaTypeContent: IMediaTypeContent | undefined;
+  parameterValues: Dictionary<string, string>;
+  serverVariableValues: Dictionary<string, string>;
+  bodyInput?: BodyParameterValues | string | File;
+  mockData?: MockData;
+  auth?: HttpSecuritySchemeWithValues[];
+  chosenServer?: IServer | null;
+  credentials?: 'omit' | 'include' | 'same-origin';
+  corsProxy?: string;
+}
+
+const getServerUrl = ({
+  chosenServer,
+  httpOperation,
+  mockData,
+  corsProxy,
+  serverVariableValues,
+}: Pick<BuildRequestInput, 'httpOperation' | 'chosenServer' | 'mockData' | 'corsProxy' | 'serverVariableValues'>) => {
+  const server = chosenServer || httpOperation.servers?.[0];
+  const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+  const serverUrl = resolveUrl(mockData?.url || chosenServerUrl || window.location.origin);
+
+  if (corsProxy && !mockData) {
+    return `${corsProxy}${serverUrl}`;
+  }
+
+  return serverUrl;
+};
+
+const delimiter = {
+  [HttpParamStyles.Form]: ',',
+  [HttpParamStyles.SpaceDelimited]: ' ',
+  [HttpParamStyles.PipeDelimited]: '|',
+};
+
+export const getQueryParams = ({
+  httpOperation,
+  parameterValues,
+}: Pick<BuildRequestInput, 'httpOperation'> & Pick<BuildRequestInput, 'parameterValues'>) => {
+  const query = httpOperation.request?.query;
+  if (!query) return [];
+
+  return query.reduce<{ name: string; value: string }[]>((acc, param) => {
+    const value = parameterValues[param.name] ?? '';
+    if (value.length === 0) return acc;
+
+    const explode = param.explode ?? true;
+
+    if (param.schema?.type === 'object' && value) {
+      let nested: Dictionary<string, string>;
+      try {
+        nested = JSON.parse(value);
+        if (!(typeof nested === 'object' && nested !== null)) throw Error();
+      } catch (e) {
+        throw new Error(`Cannot use param value "${value}". JSON object expected.`);
+      }
+
+      if (param.style === 'form') {
+        if (explode) {
+          acc.push(...Object.entries(nested).map(([name, value]) => ({ name, value: value.toString() })));
+        } else {
+          acc.push({
+            name: param.name,
+            value: Object.entries(nested)
+              .map(entry => entry.join(','))
+              .join(','),
+          });
+        }
+      } else if (param.style === 'deepObject') {
+        acc.push(
+          ...Object.entries(nested).map(([name, value]) => ({
+            name: `${param.name}[${name}]`,
+            value: value.toString(),
+          })),
+        );
+      } else {
+        acc.push({ name: param.name, value });
+      }
+    } else if (param.schema?.type === 'array' && value) {
+      let nested: string[];
+      try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed === 'string') {
+          nested = parsed.split(delimiter[param.style as keyof typeof delimiter]);
+        } else if (Array.isArray(parsed)) {
+          nested = parsed;
+        } else {
+          throw Error();
+        }
+      } catch (e) {
+        throw new Error(`Cannot use param value "${value}". JSON array expected.`);
+      }
+
+      if (explode) {
+        acc.push(...nested.map(value => ({ name: param.name, value: value.toString() })));
+      } else {
+        acc.push({
+          name: param.name,
+          value: nested.join(delimiter[param.style as keyof typeof delimiter] ?? delimiter[HttpParamStyles.Form]),
+        });
+      }
+    } else {
+      acc.push({ name: param.name, value });
+    }
+
+    return acc;
+  }, []);
+};
+
+export async function buildFetchRequest({
+  httpOperation,
+  mediaTypeContent,
+  bodyInput,
+  parameterValues,
+  serverVariableValues,
+  mockData,
+  auth,
+  chosenServer,
+  credentials = 'omit',
+  corsProxy,
+}: BuildRequestInput): Promise<Parameters<typeof fetch>> {
+  const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
+
+  const shouldIncludeBody =
+    ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
+
+  const queryParams = getQueryParams({ httpOperation, parameterValues });
+
+  const rawHeaders = filterOutAuthorizationParams(httpOperation.request?.headers ?? [], httpOperation.security)
+    .map(header => ({ name: header.name, value: parameterValues[header.name] ?? '' }))
+    .filter(({ value }) => value.length > 0);
+
+  const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
+
+  const expandedPath = uriExpand(httpOperation.path, parameterValues);
+
+  // urlObject is concatenated this way to avoid /user and /user/ endpoint edge cases
+  const urlObject = new URL(serverUrl + expandedPath);
+  urlObject.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
+
+  const body =
+    typeof bodyInput === 'object' && !(bodyInput instanceof File)
+      ? await createRequestBody(mediaTypeContent, bodyInput)
+      : bodyInput;
+
+  const acceptedMimeTypes = getAcceptedMimeTypes(httpOperation);
+  const headers = {
+    ...(acceptedMimeTypes.length > 0 && { Accept: acceptedMimeTypes.join(', ') }),
+    // do not include multipart/form-data - browser handles its content type and boundary
+    ...(mediaTypeContent?.mediaType !== 'multipart/form-data' &&
+      shouldIncludeBody && {
+        'Content-Type': mediaTypeContent?.mediaType ?? 'application/json',
+      }),
+    ...Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair)),
+    ...mockData?.header,
+  };
+
+  return [
+    urlObject.href,
+    {
+      credentials,
+      method: httpOperation.method.toUpperCase(),
+      headers,
+      body: shouldIncludeBody ? body : undefined,
+    },
+  ];
+}
+
+const runAuthRequestEhancements = (
+  auths: HttpSecuritySchemeWithValues[] | undefined,
+  queryParams: NameAndValue[],
+  headers: NameAndValue[],
+): [NameAndValue[], NameAndValue[]] => {
+  if (!auths) return [queryParams, headers];
+
+  const newQueryParams = [...queryParams];
+  const newHeaders = [...headers];
+  auths.forEach(auth => {
+    if (isApiKeySecurityScheme(auth.scheme)) {
+      if (auth.scheme.in === 'query') {
+        newQueryParams.push({
+          name: auth.scheme.name,
+          value: auth.authValue || '123',
+        });
+      }
+
+      if (auth.scheme.in === 'header') {
+        newHeaders.push({
+          name: auth.scheme.name,
+          value: auth.authValue || '123',
+        });
+      }
+    }
+
+    if (isOAuth2SecurityScheme(auth.scheme)) {
+      newHeaders.push({
+        name: 'Authorization',
+        value: auth.authValue || 'Bearer 123',
+      });
+    }
+
+    if (isBearerSecurityScheme(auth.scheme)) {
+      newHeaders.push({
+        name: 'Authorization',
+        value: `Bearer ${auth.authValue || '123'}`,
+      });
+    }
+
+    if (isDigestSecurityScheme(auth.scheme)) {
+      newHeaders.push({
+        name: 'Authorization',
+        value: auth.authValue?.replace(/\s\s+/g, ' ').trim() || '123',
+      });
+    }
+
+    if (isBasicSecurityScheme(auth.scheme)) {
+      newHeaders.push({
+        name: 'Authorization',
+        value: `Basic ${auth.authValue || '123'}`,
+      });
+    }
+  });
+
+  return [newQueryParams, newHeaders];
+};
+
+export async function buildHarRequest({
+  httpOperation,
+  bodyInput,
+  parameterValues,
+  serverVariableValues,
+  mediaTypeContent,
+  auth,
+  mockData,
+  chosenServer,
+  corsProxy,
+}: BuildRequestInput): Promise<HarRequest> {
+  const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
+
+  const mimeType = mediaTypeContent?.mediaType ?? 'application/json';
+  const shouldIncludeBody =
+    ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
+
+  const queryParams = getQueryParams({ httpOperation, parameterValues });
+
+  const headerParams =
+    httpOperation.request?.headers?.map(header => ({ name: header.name, value: parameterValues[header.name] ?? '' })) ??
+    [];
+
+  if (mockData?.header) {
+    headerParams.push({ name: 'Prefer', value: mockData.header.Prefer });
+  }
+
+  if (shouldIncludeBody) {
+    headerParams.push({ name: 'Content-Type', value: mimeType });
+  }
+
+  const acceptedMimeTypes = getAcceptedMimeTypes(httpOperation);
+  if (acceptedMimeTypes.length > 0) {
+    headerParams.push({ name: 'Accept', value: acceptedMimeTypes.join(', ') });
+  }
+
+  const [queryParamsWithAuth, headerParamsWithAuth] = runAuthRequestEhancements(auth, queryParams, headerParams);
+  const expandedPath = uriExpand(httpOperation.path, parameterValues);
+  const urlObject = new URL(serverUrl + expandedPath);
+
+  let postData: HarRequest['postData'] = undefined;
+  if (shouldIncludeBody && typeof bodyInput === 'string') {
+    postData = { mimeType, text: bodyInput };
+  }
+
+  if (shouldIncludeBody) {
+    if (typeof bodyInput === 'object') {
+      if (mimeType === 'application/octet-stream' && bodyInput instanceof File) {
+        postData = {
+          mimeType,
+          text: `@${bodyInput.name}`,
+        };
+      } else {
+        postData = {
+          mimeType,
+          params: Object.entries(bodyInput).map(([name, value]) => {
+            if (value instanceof File) {
+              return {
+                name,
+                fileName: value.name,
+                contentType: value.type,
+              };
+            }
+            return {
+              name,
+              value,
+            };
+          }),
+        };
+      }
+    }
+  }
+
+  return {
+    method: httpOperation.method.toUpperCase(),
+    url: urlObject.href,
+    httpVersion: 'HTTP/1.1',
+    cookies: [],
+    headers: headerParamsWithAuth,
+    queryString: queryParamsWithAuth,
+    postData: postData,
+    headersSize: -1,
+    bodySize: -1,
+  };
+}
+
+function uriExpand(uri: string, data: Dictionary<string, string>) {
+  if (!data) {
+    return uri;
+  }
+  return uri.replace(/{([^#?]+?)}/g, (match, value) => {
+    return data[value] || match;
+  });
+}
+
+export function getAcceptedMimeTypes(httpOperation: IHttpOperation): string[] {
+  return Array.from(
+    new Set(
+      httpOperation.responses.flatMap(response =>
+        response === undefined || response.contents === undefined
+          ? []
+          : response.contents.map(contentType => contentType.mediaType),
+      ),
+    ),
+  );
+}

package/src/components/TryIt/chosenServer.ts

@@ -0,0 +1,5 @@
+import type { IServer } from '@stoplight/types';
+import { atom } from 'jotai';
+
+// track null separately from undefined so that we can tell if the server has been set (undefined indicates it has not been "processed" yet)
+export const chosenServerAtom = atom<IServer | null | undefined>(undefined);

package/src/components/TryIt/index.ts

@@ -0,0 +1,3 @@
+export { chosenServerAtom } from './chosenServer';
+export * from './TryIt';
+export * from './TryItWithRequestSamples';

package/src/components/__tests__/LinkHeading.spec.tsx

@@ -0,0 +1,125 @@
+/**
+ * @jest-environment jest-environment-jsdom-global
+ */
+
+import '@testing-library/jest-dom';
+
+import { jest } from '@jest/globals';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+
+import { RouterTypeContext } from '../../context/RouterType';
+import { LinkHeading } from '../LinkHeading';
+
+declare const jsdom: { reconfigure(opts: { url: string }): void };
+
+describe('LinkHeading', () => {
+  const scroll = jest.fn();
+  const scrollIntoView = HTMLElement.prototype.scrollIntoView;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+    HTMLElement.prototype.scrollIntoView = scroll;
+  });
+
+  afterEach(() => {
+    scroll.mockRestore();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+  });
+
+  describe('given browser router', () => {
+    beforeEach(() => {
+      jsdom.reconfigure({ url: 'https://elements-demo.stoplight.io/route' });
+    });
+
+    it('should not append id to the route', () => {
+      location.hash = 'heading';
+
+      const { baseElement } = render(
+        <RouterTypeContext.Provider value="history">
+          <BrowserRouter>
+            <LinkHeading id="heading" size={1}>
+              Hello
+            </LinkHeading>
+          </BrowserRouter>
+        </RouterTypeContext.Provider>,
+      );
+
+      expect(baseElement.querySelector('a')).toHaveProperty('href', 'https://elements-demo.stoplight.io/route#heading');
+    });
+
+    it('should scroll into view', () => {
+      location.hash = 'heading';
+
+      render(
+        <RouterTypeContext.Provider value="history">
+          <BrowserRouter>
+            <LinkHeading id="heading" size={1}>
+              Hello
+            </LinkHeading>
+          </BrowserRouter>
+        </RouterTypeContext.Provider>,
+      );
+
+      jest.advanceTimersByTime(300);
+      expect(scroll).toBeCalledWith({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    });
+  });
+
+  describe('given hash router', () => {
+    beforeEach(() => {
+      jsdom.reconfigure({ url: 'https://elements-demo.stoplight.io' });
+    });
+
+    afterEach(() => {
+      window.location.hash = '';
+    });
+
+    it('should append id to the route', () => {
+      window.location.hash = '/route#test';
+
+      const { baseElement } = render(
+        <RouterTypeContext.Provider value="hash">
+          <HashRouter>
+            <LinkHeading id="heading" size={1}>
+              Hello
+            </LinkHeading>
+          </HashRouter>
+        </RouterTypeContext.Provider>,
+      );
+
+      expect(baseElement.querySelector('a')).toHaveProperty(
+        'href',
+        'https://elements-demo.stoplight.io/#/route#heading',
+      );
+    });
+
+    it('should scroll into view', () => {
+      window.location.hash = '/route#test';
+
+      render(
+        <RouterTypeContext.Provider value="hash">
+          <HashRouter>
+            <LinkHeading id="test" size={1}>
+              Hello
+            </LinkHeading>
+          </HashRouter>
+        </RouterTypeContext.Provider>,
+      );
+
+      jest.advanceTimersByTime(300);
+      expect(scroll).toBeCalledWith({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    });
+  });
+});