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

package/src/components/Docs/HttpService/AdditionalInfo.stories.ts

@@ -1,48 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { AdditionalInfo } from './AdditionalInfo';
-
-const meta: Meta<typeof AdditionalInfo> = {
-  title: `Internal/Docs/AdditionalInfo`,
-  component: AdditionalInfo,
-};
-
-export default meta;
-type Story = StoryObj<typeof AdditionalInfo>;
-
-// Story when only the license URL is provided
-export const LicenseWithOnlyURL: Story = {
-  name: 'License with only URL',
-  args: {
-    id: 'id',
-    license: {
-      name: 'MIT License',
-      url: 'https://mit.edu/license.html',
-    },
-  },
-};
-
-// Story when only the license identifier is provided
-export const LicenseWithOnlyIdentifier: Story = {
-  name: 'License with only Identifier',
-  args: {
-    id: 'id',
-    license: {
-      name: 'MIT License',
-      identifier: `MIT`,
-    },
-  },
-};
-
-// Story when both the license URL and identifier are provided (URL should take precedence)
-export const LicenseWithURLAndIdentifier: Story = {
-  name: 'License with URL and Identifier (URL takes precedence)',
-  args: {
-    id: 'id',
-    license: {
-      name: 'MIT License',
-      identifier: 'MIT',
-      url: 'https://mit.edu/license.html',
-    },
-  },
-};

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

@@ -1,61 +0,0 @@
-import { NodeAnnotation, Panel } from '@stoplight/mosaic';
-import { IHttpService } from '@stoplight/types';
-import React from 'react';
-
-import { useOptionsCtx } from '../../../context/Options';
-import { MarkdownViewer } from '../../MarkdownViewer';
-
-interface AdditionalInfoProps {
-  id: string;
-  termsOfService?: string;
-  contact?: IHttpService['contact'];
-  license?: IHttpService['license'];
-}
-
-export const AdditionalInfo: React.FC<AdditionalInfoProps> = ({ id, termsOfService, contact, license }) => {
-  const { nodeHasChanged } = useOptionsCtx();
-  const hasChanged = nodeHasChanged?.({ nodeId: id, attr: ['termsOfService', 'contact', 'license'] });
-
-  const contactLink =
-    contact?.name && contact?.url
-      ? `[Contact ${contact.name}](${contact.url})`
-      : contact?.email
-      ? `[Contact ${contact.name || contact.email}](mailto:${contact.email})`
-      : '';
-
-  //use spdx to look up url for license identifier if available
-  // The licenseUrl is determined based on the mutual exclusivity of the `url` and `identifier` fields.
-  // If a `license.url` is provided, it takes precedence over the `license.identifier`.
-  // This is because the OpenAPI specification defines `url` and `identifier` as mutually exclusive fields,
-  // meaning you should use either one or the other, but not both. If both are provided, the `url` should be used.
-  // See: https://spec.openapis.org/oas/latest.html#license-object
-  const licenseUrl = license?.url
-    ? license?.url
-    : license?.identifier
-    ? `https://spdx.org/licenses/${license?.identifier}.html`
-    : undefined;
-
-  const licenseLink =
-    license?.name && licenseUrl
-      ? `[${license.name}](${licenseUrl})`
-      : license?.identifier && licenseUrl
-      ? `[${license?.identifier}](${licenseUrl})`
-      : '';
-  const tosLink = termsOfService ? `[Terms of Service](${termsOfService})` : '';
-
-  return contactLink || licenseLink || tosLink ? (
-    <Panel rounded isCollapsible={false} pos="relative">
-      <Panel.Titlebar bg="canvas-300">
-        <span role="heading">Additional Information</span>
-      </Panel.Titlebar>
-
-      <Panel.Content p={0}>
-        <Panel.Content>
-          <MarkdownViewer style={{ fontSize: 12 }} markdown={`${contactLink}\n \n${licenseLink}\n \n ${tosLink}`} />
-        </Panel.Content>
-      </Panel.Content>
-
-      <NodeAnnotation change={hasChanged} />
-    </Panel>
-  ) : null;
-};

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

@@ -1,35 +0,0 @@
-import { Box, Button, Menu, MenuActionItem, MenuItems } from '@stoplight/mosaic';
-import * as React from 'react';
-
-type ExportMenuProps = Pick<MenuActionItem, 'href' | 'onPress'>;
-
-export interface ExportButtonProps {
-  original: ExportMenuProps;
-  bundled: ExportMenuProps;
-}
-
-export const ExportButton: React.FC<ExportButtonProps> = ({ original, bundled }) => {
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = [
-      { id: 'original', title: 'Original', ...original },
-      { id: 'bundled', title: 'Bundled References', ...bundled },
-    ];
-
-    return items;
-  }, [original, bundled]);
-
-  return (
-    <Box>
-      <Menu
-        aria-label="Export"
-        items={menuItems}
-        placement="bottom right"
-        renderTrigger={({ isOpen }) => (
-          <Button iconRight="chevron-down" appearance="default" ml={2} active={isOpen} size="sm">
-            Export
-          </Button>
-        )}
-      />
-    </Box>
-  );
-};

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

@@ -1,429 +0,0 @@
-import { Provider as MosaicProvider } from '@stoplight/mosaic';
-import { render, screen, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
-import userEvent from '@testing-library/user-event';
-import * as React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import { apiKey, oauth } from '../../../__fixtures__/security-schemes';
-import httpService from '../../../__fixtures__/services/petstore';
-import { httpServiceWithUnnamedServers } from '../../../__fixtures__/services/with-unnamed-servers';
-import { httpServiceWithUrlVariables } from '../../../__fixtures__/services/with-url-variables';
-import { httpServiceWithoutOrigin } from '../../../__fixtures__/services/without-origin';
-import { AdditionalInfo } from './AdditionalInfo';
-import { HttpService } from './index';
-import { SecuritySchemes } from './SecuritySchemes';
-import { ServerInfo, useSplitUrl } from './ServerInfo';
-
-describe('HttpService', () => {
-  it('Should render correctly', () => {
-    const wrapper = render(
-      <Router>
-        <HttpService data={httpService} />
-      </Router>,
-    );
-
-    expect(wrapper.getByText(httpService.name).tagName.toLowerCase()).toBe('h1');
-  });
-
-  it('should not display servers when hideServerInfo is provided', () => {
-    render(
-      <Router>
-        <HttpService layoutOptions={{ hideServerInfo: true }} data={{ ...httpService, security: [] }} />
-      </Router>,
-    );
-
-    const serverUrl = screen.queryByLabelText('Production API');
-    expect(serverUrl).not.toBeInTheDocument();
-  });
-
-  it('displays all server urls', () => {
-    render(<ServerInfo servers={httpService.servers ?? []} />);
-
-    const serverUrl = screen.getByLabelText('Production API');
-    expect(serverUrl).toHaveTextContent('https://api.stoplight.io');
-
-    const secondServerUrl = screen.getByLabelText('Staging API');
-    expect(secondServerUrl).toHaveTextContent('https://api.{environment}.stoplight.io');
-
-    const thirdServerUrl = screen.getByLabelText('Development API');
-    expect(thirdServerUrl).toHaveTextContent('https://localhost:{port}');
-
-    expect(screen.queryByLabelText('Mock Server')).not.toBeInTheDocument();
-  });
-
-  it('generates names for servers without descriptions', () => {
-    render(<ServerInfo servers={httpServiceWithUnnamedServers.servers ?? []} />);
-
-    const secondServerUrl = screen.getByLabelText('Server 2');
-    expect(secondServerUrl).toHaveTextContent('https://api.staging.stoplight.io');
-
-    const fourthServerUrl = screen.getByLabelText('Server 4');
-    expect(fourthServerUrl).toHaveTextContent('https://localhost:4060');
-
-    expect(screen.queryByLabelText('Mock Server')).not.toBeInTheDocument();
-  });
-
-  it('keeps url variables in displayed url', () => {
-    render(<ServerInfo servers={httpServiceWithUrlVariables.servers ?? []} />);
-
-    const serverUrl = screen.getByLabelText('Production API');
-    expect(serverUrl).toHaveTextContent('{protocol}://{namespace}.stoplight.io');
-  });
-
-  it('shows url variables in an expandable panel', async () => {
-    render(<ServerInfo servers={httpServiceWithUrlVariables.servers ?? []} />);
-
-    await waitFor(() => expect(screen.queryByRole('region')).toBeInTheDocument());
-
-    expect(screen.getByRole('region')).toHaveTextContent(
-      `protocolstringAllowed values:ftphttphttpsDefault:ftpnamespacestringDefault:default-namespace`,
-    );
-  });
-
-  it('hides subsequent panels with server variables ', async () => {
-    const servers = [
-      ...httpServiceWithUrlVariables.servers!.slice(0, -1),
-      {
-        id: '?http-server-3?',
-        url: 'https://localhost:{port}',
-        description: 'Development API',
-        variables: {
-          port: {
-            default: '443',
-          },
-        },
-      },
-    ];
-
-    render(<ServerInfo servers={servers} />);
-
-    await waitFor(() => expect(screen.queryAllByRole('region')).toHaveLength(1));
-
-    const serverUrl = screen.getByLabelText('Development API');
-    userEvent.click(serverUrl.parentElement!);
-
-    await waitFor(() => expect(screen.queryAllByRole('region')).toHaveLength(2));
-
-    expect(screen.getAllByRole('region')[1]).toHaveTextContent(`portstringDefault:443`);
-  });
-
-  it('handles urls without an origin', () => {
-    render(<ServerInfo servers={httpServiceWithoutOrigin.servers ?? []} />);
-
-    const serverUrl = screen.getByLabelText('Production API');
-    expect(serverUrl).toHaveTextContent('api');
-  });
-
-  it('displays mock server url when embedded in Stoplight Project', async () => {
-    render(<ServerInfo servers={httpService.servers ?? []} mockUrl="https://foo.stoplight.io/prism/123" />);
-
-    const mockServer = screen.queryByLabelText('Mock Server');
-    await waitFor(() => expect(mockServer).toHaveTextContent('https://foo.stoplight.io/prism/123'));
-  });
-
-  it('Base URL block handles an invalid URL', () => {
-    const modifiedData = {
-      ...httpService,
-      servers: [
-        {
-          id: '?http-server-0?',
-          url: 'https://///',
-          name: 'Production API',
-        },
-      ],
-    };
-
-    render(
-      <Router>
-        <HttpService data={modifiedData} />
-      </Router>,
-    );
-
-    expect(screen.queryByText(/api base url/i)).toBeInTheDocument();
-  });
-
-  describe('Security schemes', () => {
-    it('should render single security scheme', () => {
-      render(<SecuritySchemes secSchemes={[[apiKey]]} parentId="2@adfg4F" />);
-
-      const title = screen.getByRole('heading', { name: 'Security' });
-      const scheme = screen.getByRole('heading', { name: 'API Key' });
-
-      expect(title).toBeInTheDocument();
-      expect(scheme).toBeInTheDocument();
-    });
-
-    it('should not render if no security schemes provided', () => {
-      render(
-        <Router>
-          <HttpService data={{ ...httpService, security: [] }} />
-        </Router>,
-      );
-
-      const security = screen.queryByRole('heading', { name: 'Security' });
-      expect(security).not.toBeInTheDocument();
-    });
-
-    it('should not render if hideSecurityInfo is provided', () => {
-      render(
-        <Router>
-          <HttpService layoutOptions={{ hideSecurityInfo: true }} data={{ ...httpService, security: [] }} />
-        </Router>,
-      );
-
-      const security = screen.queryByRole('heading', { name: 'Security' });
-      expect(security).not.toBeInTheDocument();
-    });
-
-    it('should render default description', () => {
-      render(<SecuritySchemes secSchemes={[[apiKey]]} parentId="2@adfg4F" />);
-
-      const description = screen.getByText(/An API key/);
-      expect(description).toBeInTheDocument();
-    });
-
-    it('should render custom description', () => {
-      render(
-        <SecuritySchemes secSchemes={[[{ ...apiKey, description: 'Api Key description' }]]} parentId="2@adfg4F" />,
-      );
-
-      const description = screen.getByText('Api Key description');
-      expect(description).toBeInTheDocument();
-    });
-
-    it('should render both custom description and other scheme details', () => {
-      render(
-        <SecuritySchemes secSchemes={[[{ ...oauth, description: 'A custom description' }]]} parentId="2@adfg4F" />,
-      );
-
-      const description = screen.getByText('A custom description');
-      const implicit = screen.getByText('Implicit OAuth Flow');
-
-      expect(description).toBeInTheDocument();
-      expect(implicit).toBeInTheDocument();
-    });
-
-    it('should render oauth flows for default description', () => {
-      render(<SecuritySchemes secSchemes={[[oauth]]} parentId="2@adfg4F" />);
-
-      const implicit = screen.getByText('Implicit OAuth Flow');
-      const password = screen.getByText('Password OAuth Flow');
-      const clientCredentials = screen.getByText('Client Credentials OAuth Flow');
-      const authCode = screen.getByText('Authorization Code OAuth Flow');
-
-      expect(implicit).toBeInTheDocument();
-      expect(password).toBeInTheDocument();
-      expect(clientCredentials).toBeInTheDocument();
-      expect(authCode).toBeInTheDocument();
-    });
-
-    it('should render multiple schemes', () => {
-      render(<SecuritySchemes secSchemes={[[apiKey], [oauth]]} parentId="2@adfg4F" />);
-
-      const apiKeyScheme = screen.getByRole('heading', { name: 'API Key' });
-      const oauthScheme = screen.getByRole('heading', { name: 'OAuth 2.0' });
-      const expandButtons = screen.getAllByRole('button');
-
-      expect(apiKeyScheme).toBeInTheDocument();
-      expect(oauthScheme).toBeInTheDocument();
-      expect(expandButtons.length).toEqual(2);
-    });
-
-    it('should expand first scheme by default', () => {
-      render(<SecuritySchemes secSchemes={[[apiKey], [oauth]]} parentId="2@adfg4F" />);
-
-      const apiKeyDescription = screen.queryByText(/An API key/);
-      let oauthDescription = screen.queryByText('Implicit OAuth Flow');
-
-      expect(apiKeyDescription).toBeInTheDocument();
-      expect(oauthDescription).not.toBeInTheDocument();
-
-      const oauthScheme = screen.getByRole('heading', { name: 'OAuth 2.0' });
-      userEvent.click(oauthScheme);
-      oauthDescription = screen.queryByText('Implicit OAuth Flow');
-      expect(oauthDescription).toBeInTheDocument();
-    });
-  });
-
-  describe('Additional information', () => {
-    it('should render additional information', () => {
-      const contact = {
-        name: 'Developer',
-        email: 'developer@stoplight.io',
-        url: 'https://stoplight.io/contact-us/',
-      };
-
-      const license = {
-        name: 'MIT',
-        url: 'https://opensource.org/licenses/MIT',
-      };
-      render(
-        <AdditionalInfo id="a" contact={contact} license={license} termsOfService="https://stoplight.io/terms/" />,
-      );
-
-      const title = screen.getByRole('heading', { name: 'Additional Information' });
-
-      expect(title).toBeInTheDocument();
-    });
-
-    it('should render additional information with SPDX license identifier', () => {
-      const contact = {
-        name: 'Developer',
-        email: 'developer@stoplight.io',
-        url: 'https://stoplight.io/contact-us/',
-      };
-
-      const license = {
-        name: 'MIT License',
-        identifier: 'MIT',
-      };
-
-      render(
-        <AdditionalInfo id="a" contact={contact} license={license} termsOfService="https://stoplight.io/terms/" />,
-      );
-
-      const licenseLink = screen.getByText('MIT License');
-      expect(licenseLink).toHaveAttribute('href', 'https://spdx.org/licenses/MIT.html');
-    });
-
-    it('should prefer license URL over SPDX identifier if both are provided', () => {
-      const license = {
-        name: 'MIT License',
-        url: 'https://opensource.org/licenses/MIT',
-        identifier: 'MIT',
-      };
-
-      render(<AdditionalInfo id="a" license={license} />);
-
-      const licenseLink = screen.getByText('MIT License');
-      expect(licenseLink).toHaveAttribute('href', 'https://opensource.org/licenses/MIT');
-    });
-
-    it('should not render if contact, license, and terms of service do not exist', () => {
-      render(<AdditionalInfo id="a" />);
-
-      const title = screen.queryByRole('heading', { name: 'Additional Information' });
-      expect(title).not.toBeInTheDocument();
-    });
-
-    it('should not render if props do not have sufficient subprops', () => {
-      const contact = {
-        name: 'Developer',
-      };
-
-      render(<AdditionalInfo id="a" contact={contact} />);
-
-      const title = screen.queryByRole('heading', { name: 'Additional Information' });
-      expect(title).not.toBeInTheDocument();
-    });
-  });
-
-  describe('export button', () => {
-    it('should render correctly', () => {
-      const wrapper = render(
-        <Router>
-          <MosaicProvider>
-            <HttpService
-              data={httpService}
-              exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
-            />
-          </MosaicProvider>
-        </Router>,
-      );
-
-      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(
-        <Router>
-          <MosaicProvider>
-            <HttpService
-              data={httpService}
-              exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
-              layoutOptions={{ hideExport: true }}
-            />
-          </MosaicProvider>
-        </Router>,
-      );
-
-      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
-      expect(exportButton).not.toBeInTheDocument();
-    });
-
-    it('should not render if no exportProps are present', () => {
-      const wrapper = render(
-        <Router>
-          <MosaicProvider>
-            <HttpService data={httpService} />
-          </MosaicProvider>
-        </Router>,
-      );
-
-      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
-      expect(exportButton).not.toBeInTheDocument();
-    });
-  });
-});
-
-describe('useSplitUrl hook', () => {
-  it('should correctly distinguish variables from static parts', () => {
-    let { result } = renderHook(() => useSplitUrl('https://{api}.stoplight.io:{port}'));
-
-    expect(result.current).toStrictEqual([
-      { kind: 'static', value: 'https://' },
-      { kind: 'variable', value: '{api}' },
-      { kind: 'static', value: '.stoplight.io:' },
-      { kind: 'variable', value: '{port}' },
-    ]);
-
-    ({ result } = renderHook(() => useSplitUrl('{protocol}://stoplight.io:{port}')));
-
-    expect(result.current).toStrictEqual([
-      { kind: 'variable', value: '{protocol}' },
-      { kind: 'static', value: '://stoplight.io:' },
-      { kind: 'variable', value: '{port}' },
-    ]);
-
-    ({ result } = renderHook(() => useSplitUrl('https://{version}{username}.stoplight.io')));
-
-    expect(result.current).toStrictEqual([
-      { kind: 'static', value: 'https://' },
-      { kind: 'variable', value: '{version}' },
-      { kind: 'variable', value: '{username}' },
-      { kind: 'static', value: '.stoplight.io' },
-    ]);
-
-    ({ result } = renderHook(() => useSplitUrl('https://www.stoplight.io')));
-
-    expect(result.current).toStrictEqual([{ kind: 'static', value: 'https://www.stoplight.io' }]);
-  });
-
-  it('should gracefully handle invalid input', () => {
-    let { result } = renderHook(() => useSplitUrl('https://{{{{}'));
-
-    expect(result.current).toStrictEqual([{ kind: 'static', value: 'https://{{{{}' }]);
-
-    ({ result } = renderHook(() => useSplitUrl('{protocol://stoplight.io:{api}')));
-
-    expect(result.current).toStrictEqual([
-      { kind: 'static', value: '{protocol://stoplight.io:' },
-      { kind: 'variable', value: '{api}' },
-    ]);
-
-    ({ result } = renderHook(() => useSplitUrl('https://{version}{username}.stoplight.io{test')));
-
-    expect(result.current).toStrictEqual([
-      { kind: 'static', value: 'https://' },
-      { kind: 'variable', value: '{version}' },
-      { kind: 'variable', value: '{username}' },
-      { kind: 'static', value: '.stoplight.io{test' },
-    ]);
-  });
-});

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

@@ -1,14 +0,0 @@
-import { httpService } from '../../../__fixtures__/services/petstore';
-import { createStoriesForDocsComponent } from '../story-helper';
-import { renderExtensionRenderer } from '../story-renderer-helper';
-import { HttpService } from './HttpService';
-
-const { meta, createHoistedStory } = createStoriesForDocsComponent(HttpService, 'HttpService');
-
-export default meta;
-
-export const Story = createHoistedStory({
-  data: httpService,
-  layoutOptions: { compact: 600 },
-  renderExtensionAddon: renderExtensionRenderer,
-});

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

@@ -1,99 +0,0 @@
-import { Box, Flex, Heading, NodeAnnotation, VStack } from '@stoplight/mosaic';
-import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { IHttpService } from '@stoplight/types';
-import * as React from 'react';
-
-import { MockingContext } from '../../../containers/MockingProvider';
-import { useResolvedObject } from '../../../context/InlineRefResolver';
-import { useOptionsCtx } from '../../../context/Options';
-import { useIsCompact } from '../../../hooks/useIsCompact';
-import { MarkdownViewer } from '../../MarkdownViewer';
-import { PoweredByLink } from '../../PoweredByLink';
-import { DocsComponentProps } from '..';
-import { VersionBadge } from '../HttpOperation/Badges';
-import { AdditionalInfo } from './AdditionalInfo';
-import { ExportButton } from './ExportButton';
-import { SecuritySchemes } from './SecuritySchemes';
-import { ServerInfo } from './ServerInfo';
-
-export type HttpServiceProps = DocsComponentProps<Partial<IHttpService>>;
-
-const HttpServiceComponent = React.memo<HttpServiceProps>(
-  ({ data: unresolvedData, location = {}, layoutOptions, exportProps }) => {
-    const { nodeHasChanged } = useOptionsCtx();
-    const data = useResolvedObject(unresolvedData) as IHttpService;
-    const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
-
-    const { search, pathname } = location;
-    const mocking = React.useContext(MockingContext);
-    const query = new URLSearchParams(search);
-
-    const nameChanged = nodeHasChanged?.({ nodeId: data.id, attr: 'name' });
-    const versionChanged = nodeHasChanged?.({ nodeId: data.id, attr: 'version' });
-    const descriptionChanged = nodeHasChanged?.({ nodeId: data.id, attr: 'description' });
-
-    return (
-      <Box ref={layoutRef} mb={10} className="HttpService">
-        {data.name && !layoutOptions?.noHeading && (
-          <Flex justifyContent="between" alignItems="center">
-            <Box pos="relative">
-              <Heading size={1} mb={4} fontWeight="semibold">
-                {data.name}
-              </Heading>
-              <NodeAnnotation change={nameChanged} />
-            </Box>
-            {exportProps && !layoutOptions?.hideExport && !isCompact && <ExportButton {...exportProps} />}
-          </Flex>
-        )}
-
-        {data.version && (
-          <Box mb={5} pos="relative">
-            <VersionBadge value={data.version} />
-            <NodeAnnotation change={versionChanged} />
-          </Box>
-        )}
-
-        {pathname && layoutOptions?.showPoweredByLink && (
-          <PoweredByLink source={data.name ?? 'no-title'} pathname={pathname} packageType="elements" layout="stacked" />
-        )}
-
-        <VStack spacing={6}>
-          {layoutOptions?.hideServerInfo ? null : <ServerInfo servers={data.servers ?? []} mockUrl={mocking.mockUrl} />}
-
-          {layoutOptions?.hideSecurityInfo ? null : (
-            <Box data-test="security">
-              {data.security?.length ? (
-                <SecuritySchemes
-                  secSchemes={data.security}
-                  defaultScheme={query.get('security') || undefined}
-                  parentId={data.id}
-                />
-              ) : null}
-            </Box>
-          )}
-
-          <Box data-test="additional-info">
-            {(data.contact?.email || data.license || data.termsOfService) && (
-              <AdditionalInfo
-                id={data.id}
-                contact={data.contact}
-                license={data.license}
-                termsOfService={data.termsOfService}
-              />
-            )}
-          </Box>
-        </VStack>
-
-        {data.description && (
-          <Box pos="relative">
-            <MarkdownViewer className="sl-my-5" markdown={data.description} />
-            <NodeAnnotation change={descriptionChanged} />
-          </Box>
-        )}
-      </Box>
-    );
-  },
-);
-HttpServiceComponent.displayName = 'HttpService.Component';
-
-export const HttpService = withErrorBoundary<HttpServiceProps>(HttpServiceComponent, { recoverableProps: ['data'] });