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

package/src/components/TryIt/Response/Response.spec.tsx

@@ -0,0 +1,174 @@
+import '@testing-library/jest-dom';
+
+import { Provider as MosaicProvider } from '@stoplight/mosaic';
+import { CodeViewer } from '@stoplight/mosaic-code-viewer';
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { ResponseCodeViewer } from './ReponseCodeViewer';
+import { getResponseType, ResponseState, TryItResponse } from './Response';
+
+describe('Response', () => {
+  window.URL.createObjectURL = jest.fn();
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('shows raw code view with large text', () => {
+    const body = JSON.stringify(
+      Object.fromEntries(new Array(10001).fill(0).map((_, i) => [`prop-${i + 1}`, i + 1])),
+      null,
+      4,
+    );
+    const container = shallow(<ResponseCodeViewer language="json" value={body} />);
+    expect(container.find(CodeViewer).prop('showAsRaw')).toBe(true);
+  });
+  it('shows highlighted code view with normal text', () => {
+    const body = JSON.stringify(
+      Object.fromEntries(new Array(250).fill(0).map((_, i) => [`prop-${i + 1}`, i + 1])),
+      null,
+      4,
+    );
+    const container = shallow(<ResponseCodeViewer language="json" value={body} />);
+    expect(container.find(CodeViewer).prop('showAsRaw')).not.toBe(true);
+  });
+  it('displays JSON response', async () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'application/json',
+      bodyText: '{"status":"200"}',
+    };
+    const { container } = render(<TryItResponse response={response} />);
+
+    expect(container).toHaveTextContent('{ "status": "200"}');
+  });
+
+  it('displays XML response', async () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'application/xml',
+      bodyText: '<root><node/></root>',
+    };
+    const { container } = render(<TryItResponse response={response} />);
+
+    expect(container).toHaveTextContent('<root> <node/></root>');
+  });
+
+  it('displays image response', async () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'image/jpeg',
+      blob: new Blob(),
+    };
+    render(<TryItResponse response={response} />);
+
+    const image = screen.getByRole('img', { name: 'response image' });
+
+    expect(image).toBeVisible();
+  });
+
+  it('displays JSON response formats correctly', () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'application/json',
+      bodyText: '{"status":"200"}',
+    };
+    render(
+      <MosaicProvider>
+        <TryItResponse response={response} />
+      </MosaicProvider>,
+    );
+
+    const button = screen.getByRole('button', { name: /body format/i });
+
+    userEvent.click(button);
+
+    const previewItem = screen.getByRole('menuitem', { name: 'Preview' });
+    const rawItem = screen.getByRole('menuitem', { name: 'Raw' });
+
+    expect(previewItem).toBeVisible();
+    expect(rawItem).toBeVisible();
+  });
+
+  it('displays XML response formats correctly', () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'application/xml',
+      bodyText: '<root><node/></root>',
+    };
+    render(
+      <MosaicProvider>
+        <TryItResponse response={response} />
+      </MosaicProvider>,
+    );
+
+    const button = screen.getByRole('button', { name: /body format/i });
+
+    userEvent.click(button);
+
+    const previewItem = screen.getByRole('menuitem', { name: 'Preview' });
+    const rawItem = screen.getByRole('menuitem', { name: 'Raw' });
+
+    expect(previewItem).toBeVisible();
+    expect(rawItem).toBeVisible();
+  });
+
+  it('does not display response format if there is only one', () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'text/plain',
+      bodyText: 'plain text',
+    };
+    render(
+      <MosaicProvider>
+        <TryItResponse response={response} />
+      </MosaicProvider>,
+    );
+
+    const button = screen.queryByRole('button', { name: /body format/i });
+
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('does not display "No supported" message if there is no body', () => {
+    const response: ResponseState = {
+      status: 200,
+      contentType: 'text/plain',
+      bodyText: '',
+    };
+    const { container } = render(<TryItResponse response={response} />);
+    expect(container).not.toHaveTextContent('No supported response body returned');
+  });
+
+  it.each([
+    ['application/json', 'json'],
+    [`application/json; charset='utf-8'`, 'json'],
+    ['application/example.com.kontakt+json;version=10;charset=UTF-8', 'json'],
+    ['application/foo-json', 'json'],
+    ['application/xml', 'xml'],
+    ['application/html', 'xml'],
+    ['text/xml', 'xml'],
+    ['text/html', 'xml'],
+    ['application/foo+xml', 'xml'],
+    ['text/plain', 'text'],
+    ['text/scv', 'text'],
+    ['text/foo', 'text'],
+    ['image/jpeg', 'image'],
+    ['image/gif', 'image'],
+    ['image/png', 'image'],
+    ['image/svg', 'image'],
+  ])('correctly maps %s mime type', (contentType, type) => {
+    const timerStart = Date.now();
+    const responseType = getResponseType(contentType);
+    const timerEnd = Date.now();
+
+    expect(responseType).toEqual(type);
+
+    // checking if regex is not too slow (https://github.com/stoplightio/platform-internal/issues/9446)
+    expect(timerEnd - timerStart).toBeLessThan(5000);
+  });
+});

package/src/components/TryIt/Response/Response.tsx

@@ -0,0 +1,172 @@
+import { safeParse, safeStringify } from '@stoplight/json';
+import { Box, Button, Flex, Icon, Image, Link, Menu, MenuItems, Panel } from '@stoplight/mosaic';
+import { capitalize } from 'lodash';
+import * as React from 'react';
+import formatXml from 'xml-formatter';
+
+import { HttpCodeDescriptions } from '../../../constants';
+import { getHttpCodeColor } from '../../../utils/http';
+import { ResponseCodeViewer } from './ReponseCodeViewer';
+
+export interface ResponseState {
+  status: number;
+  bodyText?: string;
+  contentType: string | null;
+  blob?: Blob;
+}
+
+export interface ErrorState {
+  error: Error;
+}
+
+type ContentType = 'image' | 'json' | 'xml' | 'text';
+type BodyFormat = 'preview' | 'raw';
+
+const bodyFormatMap: Record<ContentType, BodyFormat[]> = {
+  image: ['preview'],
+  json: ['preview', 'raw'],
+  xml: ['preview', 'raw'],
+  text: ['raw'],
+};
+
+const regex: Record<ContentType, RegExp> = {
+  image: /image\/(.?)*(jpeg|gif|png|svg)/,
+  json: /application\/(.?)*json/,
+  xml: /(text|application)\/(.?)*(xml|html)/,
+  text: /text\/.*/,
+};
+
+export function getResponseType(contentType: string) {
+  return Object.keys(regex).find(type => {
+    const reg = regex[type as ContentType];
+    return reg.test(contentType);
+  }) as ContentType | undefined;
+}
+
+function parseBody(body: string, type: ContentType) {
+  switch (type) {
+    case 'json':
+      return safeStringify(safeParse(body), undefined, 2) || body;
+    case 'xml':
+      try {
+        return formatXml(body);
+      } catch {
+        return body;
+      }
+    default:
+      return body;
+  }
+}
+
+export const TryItResponse: React.FC<{ response: ResponseState }> = ({ response }) => {
+  const contentType = response.contentType;
+  const responseType = contentType ? getResponseType(contentType) : undefined;
+  const bodyFormats = responseType ? bodyFormatMap[responseType] : [];
+
+  const [bodyFormat, setBodyFormat] = React.useState<BodyFormat | undefined>(
+    bodyFormats.length ? bodyFormats[0] : undefined,
+  );
+
+  return (
+    <Panel defaultIsOpen>
+      <Panel.Titlebar
+        rightComponent={
+          bodyFormat &&
+          bodyFormats.length > 1 && <ResponseMenu types={bodyFormats} type={bodyFormat} onChange={setBodyFormat} />
+        }
+      >
+        Response
+      </Panel.Titlebar>
+      <Panel.Content>
+        <div>
+          <div className={`sl-mb-3 sl-text-${getHttpCodeColor(response.status)}`}>
+            {`${response.status} ${HttpCodeDescriptions[response.status] ?? ''}`}
+          </div>
+          {response.bodyText && responseType && ['json', 'xml', 'text'].includes(responseType) ? (
+            <ResponseCodeViewer
+              language="json"
+              value={
+                responseType && bodyFormat === 'preview'
+                  ? parseBody(response.bodyText, responseType)
+                  : response.bodyText
+              }
+            />
+          ) : response.blob && responseType === 'image' ? (
+            <Flex justifyContent="center">
+              <Image src={URL.createObjectURL(response.blob)} alt="response image" />
+            </Flex>
+          ) : !response.bodyText ? null : (
+            <p>
+              <Box as={Icon} icon={['fas', 'exclamation-circle']} mr={2} />
+              No supported response body returned
+            </p>
+          )}
+        </div>
+      </Panel.Content>
+    </Panel>
+  );
+};
+
+const ResponseMenu: React.FC<{
+  types: BodyFormat[];
+  type: BodyFormat;
+  onChange: (type: BodyFormat) => void;
+}> = ({ types, type, onChange }) => {
+  const menuItems = React.useMemo(() => {
+    const items: MenuItems = types.map(type => ({
+      id: type,
+      title: capitalize(type),
+      onPress: () => onChange(type),
+    }));
+
+    return items;
+  }, [types, onChange]);
+
+  return (
+    <Menu
+      aria-label="Body Format"
+      items={menuItems}
+      renderTrigger={({ isOpen }) => (
+        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
+          {capitalize(type)}
+        </Button>
+      )}
+    />
+  );
+};
+
+export const ResponseError: React.FC<{ state: ErrorState }> = ({ state: { error } }) => (
+  <Panel defaultIsOpen>
+    <Panel.Titlebar>Error</Panel.Titlebar>
+    <Panel.Content>{isNetworkError(error) ? <NetworkErrorMessage /> : <p>{error.message}</p>}</Panel.Content>
+  </Panel>
+);
+
+const NetworkErrorMessage = () => (
+  <>
+    <p className="sl-pb-2">
+      <strong>Network Error occurred.</strong>
+    </p>
+
+    <p className="sl-pb-2">1. Double check that your computer is connected to the internet.</p>
+
+    <p className="sl-pb-2">2. Make sure the API is actually running and available under the specified URL.</p>
+
+    <p>
+      3. If you've checked all of the above and still experiencing issues, check if the API supports{' '}
+      <Link
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
+        fontWeight="semibold"
+      >
+        CORS
+      </Link>
+      .
+    </p>
+  </>
+);
+
+export class NetworkError extends Error {}
+
+const isNetworkError = (error: Error) => error instanceof NetworkError;

package/src/components/TryIt/Response/hooks/useLineCount.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const useLineCount = ({ example }: { example: string }) =>
+  React.useMemo(() => {
+    const lines = /\r?\n/g;
+    return (example.match(lines) || []).length;
+  }, [example]);

package/src/components/TryIt/Servers/ServerVariables.tsx

@@ -0,0 +1,33 @@
+import { Panel } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+import { VariableEditor } from './VariableEditor';
+
+interface ServerVariablesProps<P extends keyof any = string> {
+  variables: readonly ServerVariable[];
+  values: Record<P, string>;
+  onChangeValue: (op: 'set' | 'unset', variableName: P, newValue: string) => void;
+}
+
+export const ServerVariables: React.FC<ServerVariablesProps> = ({ variables, values, onChangeValue }) => {
+  return (
+    <Panel defaultIsOpen data-test="server-vars-try-it">
+      <Panel.Titlebar>Server Variables</Panel.Titlebar>
+      <Panel.Content className="sl-overflow-y-auto ParameterGrid ServerVariablesContent">
+        {variables.map(variable => (
+          <VariableEditor
+            key={variable.name}
+            data-test="server-vars-try-it-row"
+            variable={variable}
+            value={values[variable.name]}
+            onChange={value => {
+              const actualValue = String(value);
+              onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
+            }}
+          />
+        ))}
+      </Panel.Content>
+    </Panel>
+  );
+};

package/src/components/TryIt/Servers/ServersDropdown.tsx

@@ -0,0 +1,53 @@
+import { faServer } from '@fortawesome/free-solid-svg-icons';
+import { FieldButton, Menu, MenuItem } from '@stoplight/mosaic';
+import type { IServer } from '@stoplight/types';
+import { useAtom } from 'jotai';
+import * as React from 'react';
+
+import { getServerUrlWithVariableValues } from '../../../utils/http-spec/IServer';
+import { chosenServerAtom } from '../chosenServer';
+import { useServerVariables } from './useServerVariables';
+
+export type ServersDropdownProps = {
+  servers: IServer[];
+};
+
+export const ServersDropdown = ({ servers }: ServersDropdownProps) => {
+  const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+  const { serverVariables } = useServerVariables();
+
+  const serverItems: MenuItem[] = [
+    {
+      type: 'option_group',
+      title: 'Servers',
+      value: chosenServer?.url || '',
+      onChange: url => {
+        const server = servers.find(server => server.url === url);
+        setChosenServer(server);
+      },
+      children: [
+        ...servers.map((server, i) => ({
+          id: server.url,
+          title: server.description,
+          description: getServerUrlWithVariableValues(server, serverVariables),
+          value: server.url,
+        })),
+      ],
+    },
+  ];
+
+  return (
+    <Menu
+      aria-label="Server"
+      items={serverItems}
+      closeOnPress
+      renderTrigger={({ isOpen }) => (
+        <FieldButton icon={faServer} size="sm" active={isOpen}>
+          {chosenServer?.description || 'Server'}
+        </FieldButton>
+      )}
+    />
+  );
+};
+
+ServersDropdown.displayName = 'ServersDropdown';

package/src/components/TryIt/Servers/VariableEditor.tsx

@@ -0,0 +1,51 @@
+import { Flex, Input, Select, SelectProps, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { useUniqueId } from '../../../hooks/useUniqueId';
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+
+interface VariableProps {
+  variable: ServerVariable;
+  value?: string;
+  onChange: SelectProps['onChange'];
+  validate?: boolean;
+}
+
+export const VariableEditor: React.FC<VariableProps> = ({ variable, value, onChange }) => {
+  const inputId = useUniqueId(`id_${variable.name}_`);
+
+  return (
+    <>
+      <Text as="label" aria-hidden="true" data-testid="param-label" htmlFor={inputId} fontSize="base">
+        {variable.name}
+      </Text>
+      <Text mx={3}>:</Text>
+      <div>
+        {variable.enum ? (
+          <Select
+            flex={1}
+            aria-label={variable.name}
+            options={variable.enum.map(s => ({ value: s }))}
+            value={value || variable.default}
+            onChange={onChange}
+          />
+        ) : (
+          <Flex flex={1}>
+            <Input
+              id={inputId}
+              aria-label={variable.name}
+              appearance={'minimal'}
+              flex={1}
+              placeholder={variable.default}
+              type="text"
+              required
+              intent={'default'}
+              value={value || ''}
+              onChange={e => onChange && onChange(e.currentTarget.value)}
+            />
+          </Flex>
+        )}
+      </div>
+    </>
+  );
+};

package/src/components/TryIt/Servers/useServerVariables.ts

@@ -0,0 +1,19 @@
+import { atom, useAtom } from 'jotai';
+
+const persistedServerVariableValuesAtom = atom({});
+export const useServerVariables = () => {
+  const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
+
+  const updateServerVariableValue = (op: 'set' | 'unset', name: string, value: string) => {
+    const newServerVariables: { [key: string]: string } = { ...serverVariables };
+    if (op === 'unset') {
+      delete newServerVariables[name];
+    } else {
+      newServerVariables[name] = value;
+    }
+
+    setPersistedServerVariableValues(newServerVariables);
+  };
+
+  return { serverVariables, updateServerVariableValue };
+};