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

package/src/components/Docs/HttpService/SecuritySchemes.tsx

@@ -0,0 +1,82 @@
+import { Box, NodeAnnotation, Panel, PanelProps, Text } from '@stoplight/mosaic';
+import { HttpSecurityScheme } from '@stoplight/types';
+import React from 'react';
+
+import { OptionalSecurityMessage } from '../../../constants';
+import { useOptionsCtx } from '../../../context/Options';
+import { getReadableSecurityNames, getSecurityGroupId, shouldAddKey } from '../../../utils/oas/security';
+import { PanelContent } from '../Security/PanelContent';
+
+interface SecuritySchemesProps {
+  secSchemes: HttpSecurityScheme[][];
+  defaultScheme?: string;
+  defaultCollapsed?: boolean;
+  parentId: string;
+}
+
+export const SecuritySchemes: React.FC<SecuritySchemesProps> = ({
+  secSchemes,
+  defaultScheme,
+  defaultCollapsed = false,
+  parentId,
+}) => {
+  const includeOptional = secSchemes.length > 1 && secSchemes.some(schemes => schemes.length === 0);
+  const { nodeHasChanged } = useOptionsCtx();
+
+  return (
+    <Panel rounded isCollapsible={defaultCollapsed} data-test="security-row">
+      <Panel.Titlebar bg="canvas-300">
+        <Box as="span" role="heading">
+          Security
+        </Box>
+      </Panel.Titlebar>
+      <Panel.Content p={0}>
+        {includeOptional && <OptionalMessage />}
+        {secSchemes
+          .filter(scheme => scheme.length > 0) // Remove the None scheme from listed display
+          .map((schemes, i) => {
+            const secGroupId = getSecurityGroupId(parentId, i);
+            return (
+              <Box key={secGroupId} data-test="http-service-security-row">
+                <NodeAnnotation change={nodeHasChanged?.({ nodeId: secGroupId })} />
+                <SecurityScheme
+                  schemes={schemes}
+                  defaultIsOpen={defaultScheme ? schemes.length === 1 && schemes[0].key === defaultScheme : i === 0}
+                  isCollapsible={secSchemes.length > 1}
+                  showSchemeKey={shouldAddKey(schemes, secSchemes)}
+                />
+              </Box>
+            );
+          })}
+      </Panel.Content>
+    </Panel>
+  );
+};
+
+const SecurityScheme: React.FC<
+  {
+    schemes: HttpSecurityScheme[];
+    showSchemeKey?: boolean;
+  } & Pick<PanelProps, 'defaultIsOpen' | 'isCollapsible'>
+> = ({ schemes, defaultIsOpen, isCollapsible, showSchemeKey }) => {
+  return (
+    <Panel defaultIsOpen={defaultIsOpen} isCollapsible={isCollapsible} pos="relative">
+      <Panel.Titlebar>
+        <Box as="span" role="heading">
+          {getReadableSecurityNames(schemes, showSchemeKey)}
+        </Box>
+      </Panel.Titlebar>
+      <Panel.Content>
+        <PanelContent schemes={schemes} />
+      </Panel.Content>
+    </Panel>
+  );
+};
+
+const OptionalMessage: React.FC = () => {
+  return (
+    <Box p={2} pl={6} border>
+      <Text fontSize="base">{OptionalSecurityMessage}</Text>
+    </Box>
+  );
+};

package/src/components/Docs/HttpService/ServerInfo.tsx

@@ -0,0 +1,196 @@
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import { Box, Icon, InvertTheme, NodeAnnotation, Panel, Text, Tooltip, useClipboard, VStack } from '@stoplight/mosaic';
+import type { INodeVariable, IServer } from '@stoplight/types';
+import { JSONSchema7 } from 'json-schema';
+import { isEmpty, isNil, omitBy } from 'lodash';
+import * as React from 'react';
+
+import { MockingContext } from '../../../containers/MockingProvider';
+import { useOptionsCtx } from '../../../context/Options';
+import { isProperUrl } from '../../../utils/guards';
+import { getServersToDisplay } from '../../../utils/http-spec/IServer';
+
+interface ServerInfoProps {
+  servers: IServer[];
+  mockUrl?: string;
+}
+
+export const ServerInfo: React.FC<ServerInfoProps> = ({ servers, mockUrl }) => {
+  const mocking = React.useContext(MockingContext);
+  const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
+  const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
+
+  const serversToDisplay = React.useMemo(() => getServersToDisplay(servers, $mockUrl, false), [servers, $mockUrl]);
+
+  const firstServerVariableIndex = React.useMemo(
+    () => serversToDisplay.findIndex(server => !isEmpty(server.variables)),
+    [serversToDisplay],
+  );
+
+  if (!showMocking && serversToDisplay.length === 0) {
+    return null;
+  }
+
+  return (
+    <InvertTheme>
+      <Panel rounded isCollapsible={false} className="BaseURLContent" w="full" data-test="servers">
+        <Panel.Titlebar whitespace="nowrap">API Base URL</Panel.Titlebar>
+        <Panel.Content w="full" className="sl-flex sl-flex-col">
+          <VStack spacing={1} divider>
+            {serversToDisplay.map((server, index) => (
+              <ServerUrl
+                {...server}
+                defaultIsOpen={index === firstServerVariableIndex}
+                hasAnyServerVariables={firstServerVariableIndex !== -1}
+                key={server.id}
+              />
+            ))}
+          </VStack>
+        </Panel.Content>
+      </Panel>
+    </InvertTheme>
+  );
+};
+
+const ServerUrl: React.FC<IServer & { hasAnyServerVariables: boolean; defaultIsOpen: boolean }> = ({
+  id,
+  description,
+  url,
+  variables,
+  hasAnyServerVariables,
+  defaultIsOpen,
+}) => {
+  const { nodeHasChanged } = useOptionsCtx();
+  const { onCopy, hasCopied } = useClipboard(url);
+  const urlFragments = useSplitUrl(url);
+  const hasChanged = nodeHasChanged?.({ nodeId: id });
+  const variablesSchema = useVariablesJSONSchema(variables);
+  const titlePaddingLeft = hasAnyServerVariables && !variablesSchema ? 4 : 0;
+
+  const handleCopyClick = React.useCallback<React.MouseEventHandler>(
+    e => {
+      e.stopPropagation();
+      onCopy();
+    },
+    [onCopy],
+  );
+
+  return (
+    <Panel
+      isCollapsible={!!variablesSchema}
+      defaultIsOpen={defaultIsOpen}
+      w="full"
+      className="ServerInfo"
+      data-test="server-row"
+    >
+      <Panel.Titlebar whitespace="nowrap">
+        <Text pl={titlePaddingLeft} pr={2} fontWeight="bold">
+          {description}:
+        </Text>
+
+        <Tooltip
+          placement="right"
+          renderTrigger={() => (
+            <Text aria-label={description} whitespace="normal" py={2} style={{ wordBreak: 'break-word' }}>
+              {urlFragments.map(({ kind, value }, i) => (
+                <Text key={i} fontWeight={kind === 'variable' ? 'semibold' : 'normal'}>
+                  {value}
+                </Text>
+              ))}
+            </Text>
+          )}
+        >
+          {!hasCopied && (
+            <Box p={1} onClick={handleCopyClick} cursor="pointer">
+              Copy Server URL <Icon className="sl-ml-1" icon={['fas', 'copy']} />
+            </Box>
+          )}
+          {hasCopied && (
+            <Box p={1}>
+              Copied Server URL <Icon className="sl-ml-1" icon={['fas', 'check']} />
+            </Box>
+          )}
+        </Tooltip>
+
+        <NodeAnnotation change={hasChanged} additionalLeftOffset={16} />
+      </Panel.Titlebar>
+      {variablesSchema && (
+        <Panel.Content w="full">
+          <Box pl={4}>
+            <JsonSchemaViewer schema={variablesSchema} />
+          </Box>
+        </Panel.Content>
+      )}
+    </Panel>
+  );
+};
+
+function useVariablesJSONSchema(variables: Record<string, INodeVariable> | undefined): JSONSchema7 | undefined {
+  return React.useMemo(() => {
+    if (isEmpty(variables)) return;
+
+    const propertiesPairs = Object.entries(variables).map(([name, variable]) => [
+      name,
+      {
+        type: 'string',
+        ...omitBy(
+          // this is to ensure the consistent order in case http-spec changes it etc.
+          {
+            description: variable.description,
+            enum: variable.enum,
+            default: variable.default,
+          },
+          isNil,
+        ),
+      },
+    ]);
+
+    return {
+      type: 'object',
+      properties: Object.fromEntries(propertiesPairs),
+    };
+  }, [variables]);
+}
+
+export function useSplitUrl(url: string) {
+  return React.useMemo(() => {
+    const curly = /[{}]/g;
+    const fragments: { kind: 'variable' | 'static'; value: string }[] = [];
+
+    let startOffset = 0;
+    let curPos = 0;
+    let match;
+
+    while ((match = curly.exec(url))) {
+      if (match[0] === '{' || startOffset + 1 === match.index) {
+        startOffset = match.index;
+        continue;
+      }
+
+      if (startOffset !== curPos) {
+        fragments.push({
+          kind: 'static',
+          value: url.slice(curPos, startOffset),
+        });
+      }
+
+      const variable = url.slice(startOffset, match.index + 1);
+
+      fragments.push({
+        kind: 'variable',
+        value: variable,
+      });
+
+      curPos = startOffset + variable.length;
+    }
+
+    if (curPos < url.length) {
+      fragments.push({
+        kind: 'static',
+        value: url.slice(curPos),
+      });
+    }
+
+    return fragments;
+  }, [url]);
+}

package/src/components/Docs/HttpService/index.ts

@@ -0,0 +1 @@
+export * from './HttpService';

package/src/components/Docs/Model/Model.spec.tsx

@@ -0,0 +1,241 @@
+import { Provider as MosaicProvider } from '@stoplight/mosaic';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { JSONSchema7 } from 'json-schema';
+import * as React from 'react';
+
+import { ElementsOptionsProvider } from '../../../context/Options';
+import * as exampleGenerationUtils from '../../../utils/exampleGeneration/exampleGeneration';
+import { chooseOption } from '../../../utils/tests/chooseOption';
+import { renderExtensionRenderer } from '../story-renderer-helper';
+import { Model } from './Model';
+
+const generatedExample = '{\n"iamtoobig": "string",\n"name": "string",\n"id": "number",\n"email": "string", \n}';
+const exampleSchema: JSONSchema7 = {
+  type: 'object',
+  description: 'example schema description',
+  properties: {
+    propA: {
+      type: 'string',
+      enum: ['valueA'],
+      // @ts-ignore
+      'x-enum-descriptions': {
+        valueA: 'description of valueA',
+      },
+    },
+  },
+};
+
+const exampleStringSchema: JSONSchema7 = {
+  type: 'string',
+  description: 'example schema description that should only show once :)',
+};
+
+describe('Model', () => {
+  it('displays examples', async () => {
+    const { container } = render(<Model data={exampleSchema} />);
+
+    expect(screen.getByRole('heading', { name: /example/i })).toBeInTheDocument();
+    expect(container).toHaveTextContent('"propA": "valueA"');
+  });
+
+  it('does not show examples with more lines than supported, by default', async () => {
+    jest.spyOn(exampleGenerationUtils, 'exceedsSize').mockImplementation((example: string, size: number = 2) => {
+      return example.split(/\r\n|\r|\n/).length > size;
+    });
+    jest
+      .spyOn(exampleGenerationUtils, 'generateExamplesFromJsonSchema')
+      .mockReturnValue([{ label: '', data: generatedExample }]);
+
+    render(<Model data={exampleSchema} />);
+
+    await screen.findByText('Large examples are not rendered by default.');
+    jest.restoreAllMocks();
+  });
+
+  it('shows examples bigger than supported after clicking "Load Examples" button', async () => {
+    jest.spyOn(exampleGenerationUtils, 'exceedsSize').mockImplementation((example: string, size: number = 2) => {
+      return example.split(/\r\n|\r|\n/).length > size;
+    });
+    jest
+      .spyOn(exampleGenerationUtils, 'generateExamplesFromJsonSchema')
+      .mockReturnValue([{ label: '', data: generatedExample }]);
+
+    render(<Model data={exampleSchema} />);
+
+    const button = screen.getByRole('button', { name: 'load-example' });
+    userEvent.click(button);
+
+    expect(await screen.findByText('"iamtoobig"')).toBeInTheDocument();
+    jest.restoreAllMocks();
+  });
+
+  it('uses examples defined in the schema', async () => {
+    const examples = {
+      ...exampleSchema,
+      examples: [
+        {
+          propA: 'first',
+        },
+        {
+          propA: 'second',
+        },
+      ],
+    };
+    const { container } = render(
+      <MosaicProvider>
+        <Model data={examples} />
+      </MosaicProvider>,
+    );
+
+    const menuTrigger = screen.getByLabelText('Example');
+    expect(menuTrigger).toHaveTextContent('Example: default');
+    expect(container).toHaveTextContent('"propA": "first"');
+
+    chooseOption(menuTrigger, 'example-1');
+    expect(container).toHaveTextContent('"propA": "second"');
+  });
+
+  it('uses x-examples defined in the schema', async () => {
+    const examples = {
+      ...exampleSchema,
+      'x-examples': {
+        firstTitle: {
+          value: {
+            propA: 'first',
+          },
+        },
+        secondTitle: {
+          value: {
+            propA: 'second',
+          },
+        },
+      },
+    };
+    const { container } = render(
+      <MosaicProvider>
+        <Model data={examples} />
+      </MosaicProvider>,
+    );
+
+    const menuTrigger = screen.getByLabelText('Example');
+    expect(menuTrigger).toHaveTextContent('Example: firstTitle');
+    expect(container).toHaveTextContent('"propA": "first"');
+
+    chooseOption(menuTrigger, 'secondTitle');
+    expect(container).toHaveTextContent('"propA": "second"');
+  });
+
+  it('displays description at top of doc for objects', async () => {
+    render(<Model data={exampleSchema} />);
+    const description = screen.queryAllByText('example schema description');
+    const textboxDescription = screen.getByRole('textbox');
+
+    expect(description).toHaveLength(1);
+    expect(textboxDescription).toHaveTextContent('example schema description');
+  });
+
+  it('does not display description at top of doc for non-objects', async () => {
+    render(<Model data={exampleStringSchema} />);
+    const description = screen.queryByRole('textbox');
+
+    expect(description).not.toBeInTheDocument();
+  });
+
+  describe('export button', () => {
+    it('should render correctly', () => {
+      const wrapper = render(
+        <MosaicProvider>
+          <Model
+            data={exampleSchema}
+            exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
+          />
+          ,
+        </MosaicProvider>,
+      );
+
+      const exportButton = wrapper.getByRole('button', { name: 'Export' });
+      expect(exportButton).toBeInTheDocument();
+
+      userEvent.click(exportButton);
+      expect(wrapper.getByRole('menuitem', { name: 'Original' })).toBeInTheDocument();
+      expect(wrapper.getByRole('menuitem', { name: 'Bundled References' })).toBeInTheDocument();
+    });
+
+    it('should not render if hideExport is true', () => {
+      const wrapper = render(
+        <MosaicProvider>
+          <Model
+            data={exampleSchema}
+            exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
+            layoutOptions={{ hideExport: true }}
+          />
+        </MosaicProvider>,
+      );
+
+      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
+      expect(exportButton).not.toBeInTheDocument();
+    });
+
+    it('should not render if no exportProps are present', () => {
+      const wrapper = render(
+        <MosaicProvider>
+          <Model data={exampleSchema} />
+        </MosaicProvider>,
+      );
+
+      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
+      expect(exportButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Vendor Extensions', () => {
+    it('should call rendorExtensionAddon', async () => {
+      const vendorExtensionRenderer = jest.fn();
+      const { unmount } = render(
+        <ElementsOptionsProvider renderExtensionAddon={vendorExtensionRenderer}>
+          <Model data={exampleSchema} />
+        </ElementsOptionsProvider>,
+      );
+
+      expect(vendorExtensionRenderer).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          nestingLevel: 1,
+          vendorExtensions: {
+            'x-enum-descriptions': expect.objectContaining({ valueA: 'description of valueA' }),
+          },
+        }),
+      );
+
+      unmount();
+    });
+
+    it('should display vendor extensions', async () => {
+      const vendorExtensionRenderer = jest.fn().mockImplementation(props => {
+        return renderExtensionRenderer(props);
+      });
+
+      const { unmount } = render(
+        <ElementsOptionsProvider renderExtensionAddon={vendorExtensionRenderer}>
+          <Model
+            data={exampleSchema}
+            layoutOptions={{
+              hideTryItPanel: true,
+              hideSecurityInfo: true,
+              hideServerInfo: true,
+              hideExport: true,
+              hideTryIt: true,
+            }}
+          />
+        </ElementsOptionsProvider>,
+      );
+
+      expect(screen.queryByRole('columnheader', { name: /Enum value/i })).toBeInTheDocument();
+      expect(screen.queryByRole('columnheader', { name: /Description/i })).toBeInTheDocument();
+
+      expect(screen.queryByText('description of valueA')).toBeInTheDocument();
+
+      unmount();
+    });
+  });
+});

package/src/components/Docs/Model/Model.stories.tsx

@@ -0,0 +1,16 @@
+import { JSONSchema7 } from 'json-schema';
+
+import model from '../../../__fixtures__/schemas/contact.json';
+import { createStoriesForDocsComponent } from '../story-helper';
+import { renderExtensionRenderer } from '../story-renderer-helper';
+import { Model } from './Model';
+
+const { meta, createHoistedStory } = createStoriesForDocsComponent(Model);
+
+export default meta;
+
+export const Story = createHoistedStory({
+  data: model as JSONSchema7,
+  renderExtensionAddon: renderExtensionRenderer,
+  layoutOptions: { compact: 600 },
+});