@stoplight/elements-core 9.0.25-beta-0.2 → 9.0.25-beta-0.3

package/src/components/TableOfContents/index.ts

@@ -1,2 +0,0 @@
-export * from './TableOfContents';
-export * from './types';

package/src/components/TableOfContents/types.ts

@@ -1,59 +0,0 @@
-export type TableOfContentsProps = {
-  tree: TableOfContentsItem[];
-  activeId: string;
-  Link: CustomLinkComponent;
-  maxDepthOpenByDefault?: number;
-  externalScrollbar?: boolean;
-  isInResponsiveMode?: boolean;
-  onLinkClick?(): void;
-};
-
-export type CustomLinkComponent = React.ComponentType<{
-  to: string;
-  className?: string;
-  children: React.ReactNode;
-}>;
-
-export type TableOfContentsItem = TableOfContentsDivider | TableOfContentsGroupItem;
-
-export type TableOfContentsDivider = {
-  title: string;
-};
-
-export type TableOfContentsGroupItem =
-  | TableOfContentsGroup
-  | TableOfContentsNodeGroup
-  | TableOfContentsNode
-  | TableOfContentsExternalLink;
-
-export type TableOfContentsGroup = {
-  title: string;
-  items: TableOfContentsGroupItem[];
-  itemsType?: 'article' | 'http_operation' | 'http_webhook' | 'model';
-  index: string;
-};
-
-export type TableOfContentsExternalLink = {
-  title: string;
-  url: string;
-};
-
-export type TableOfContentsNode<
-  T = 'http_service' | 'http_operation' | 'http_webhook' | 'model' | 'article' | 'overview',
-> = {
-  id: string;
-  slug: string;
-  title: string;
-  type: T;
-  meta: string;
-  version?: string;
-  index: string;
-};
-
-export type TableOfContentsNodeGroup = TableOfContentsNode<'http_service'> & TableOfContentsGroup;
-
-export type ActiveItemContextType = {
-  activeId: string | undefined;
-  lastActiveIndex: string;
-  setLastActiveIndex: React.Dispatch<React.SetStateAction<string>>;
-};

package/src/components/TableOfContents/utils.ts

@@ -1,84 +0,0 @@
-import {
-  TableOfContentsDivider,
-  TableOfContentsExternalLink,
-  TableOfContentsGroup,
-  TableOfContentsGroupItem,
-  TableOfContentsItem,
-  TableOfContentsNode,
-  TableOfContentsNodeGroup,
-} from './types';
-
-export function getHtmlIdFromItemId(id: string) {
-  return `sl-toc-${id}`;
-}
-
-export function isGroupOpenByDefault(
-  depth: number,
-  item: TableOfContentsGroup | TableOfContentsNodeGroup,
-  activeId?: string,
-  maxDepthOpenByDefault: number = 0,
-) {
-  return (
-    depth < maxDepthOpenByDefault ||
-    (activeId &&
-      (('slug' in item && activeId === item.slug) ||
-        ('id' in item && activeId === item.id) ||
-        hasActiveItem(item.items, activeId)))
-  );
-}
-
-// Recursively checks for the active item
-export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: string): boolean {
-  return items.some(item => {
-    if ('slug' in item && activeId === item.slug) {
-      return true;
-    }
-
-    if ('id' in item && activeId === item.id) {
-      return true;
-    }
-
-    if ('items' in item) {
-      return hasActiveItem(item.items, activeId);
-    }
-
-    return false;
-  });
-}
-
-// Recursively finds the first node
-export function findFirstNode(items: TableOfContentsItem[]): TableOfContentsNode | TableOfContentsNodeGroup | void {
-  for (const item of items) {
-    // ignore nodes with empty slug
-    if ((isNode(item) || isNodeGroup(item)) && item.slug) {
-      return item;
-    }
-
-    if (isGroup(item) || isNodeGroup(item)) {
-      const firstNode = findFirstNode(item.items);
-      if (firstNode) {
-        return firstNode;
-      }
-    }
-
-    continue;
-  }
-
-  return;
-}
-
-export function isDivider(item: TableOfContentsItem): item is TableOfContentsDivider {
-  return Object.keys(item).length === 2 && 'title' in item && 'index' in item;
-}
-export function isGroup(item: TableOfContentsItem): item is TableOfContentsGroup {
-  return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
-}
-export function isNodeGroup(item: TableOfContentsItem): item is TableOfContentsNodeGroup {
-  return 'title' in item && 'items' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
-}
-export function isNode(item: TableOfContentsItem): item is TableOfContentsNode {
-  return 'title' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
-}
-export function isExternalLink(item: TableOfContentsItem): item is TableOfContentsExternalLink {
-  return Object.keys(item).length === 3 && 'title' in item && 'url' in item && 'index' in item;
-}

package/src/components/TryIt/Auth/APIKeyAuth.tsx

@@ -1,19 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import { IApiKeySecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { AuthTokenInput } from './AuthTokenInput';
-
-interface APIKeyAuthProps {
-  scheme: IApiKeySecurityScheme;
-  onChange: (apiKey: string) => void;
-  value: string;
-}
-
-export const APIKeyAuth: React.FC<APIKeyAuthProps> = ({ scheme, onChange, value }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <AuthTokenInput type="apiKey" name={scheme.name} value={value} onChange={onChange} />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/Auth.tsx

@@ -1,169 +0,0 @@
-import { Button, Menu, MenuItems, Panel } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { getReadableSecurityName, getReadableSecurityNames, shouldAddKey } from '../../../utils/oas/security';
-import { APIKeyAuth } from './APIKeyAuth';
-import { createUndefinedValuedSchemes, HttpSecuritySchemeWithValues } from './authentication-utils';
-import { BasicAuth } from './BasicAuth';
-import { BearerAuth } from './BearerAuth';
-import { DigestAuth } from './DigestAuth';
-import { OAuth2Auth } from './OAuth2Auth';
-
-interface TryItAuthProps {
-  operationSecuritySchemes: HttpSecurityScheme[][];
-  operationAuthValue: HttpSecuritySchemeWithValues[] | undefined;
-  setOperationAuthValue: React.Dispatch<HttpSecuritySchemeWithValues | undefined>;
-  setCurrentScheme: React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>;
-}
-
-const checkViableCurrentAuth = (
-  current: HttpSecuritySchemeWithValues[] | undefined,
-  operationSecuritySchemes: HttpSecurityScheme[][],
-) => {
-  if (current === undefined) return false;
-
-  const flattened = operationSecuritySchemes.flat(1);
-  for (const element of current) {
-    if (!flattened.some(flat => flat.id === element.scheme.id)) return false;
-  }
-
-  return true;
-};
-
-const createMenuChild = (name: string, currentItemName: string | undefined, onPress: () => void) => {
-  return {
-    id: `security-scheme-${name}`,
-    title: name,
-    isChecked: name === currentItemName,
-    onPress,
-  };
-};
-
-export const TryItAuth: React.FC<TryItAuthProps> = ({
-  operationSecuritySchemes,
-  operationAuthValue,
-  setOperationAuthValue,
-  setCurrentScheme,
-}) => {
-  const filteredSecurityItems = operationSecuritySchemes.filter(
-    auth => auth.length === 0 || auth.every(scheme => securitySchemeKeys.includes(scheme.type)),
-  );
-
-  const menuName = operationAuthValue
-    ? getReadableSecurityNames(operationAuthValue.map(auth => auth.scheme))
-    : 'Security Scheme';
-
-  const currentName = operationAuthValue
-    ? getReadableSecurityNames(
-        operationAuthValue.map(auth => auth.scheme),
-        shouldAddKey(
-          operationAuthValue.map(auth => auth.scheme),
-          operationSecuritySchemes,
-        ),
-      )
-    : undefined;
-
-  const handleChange = (scheme: HttpSecurityScheme, authValue?: string) => {
-    setOperationAuthValue({ scheme, authValue });
-  };
-
-  React.useEffect(() => {
-    if (checkViableCurrentAuth(operationAuthValue, operationSecuritySchemes) === false) {
-      setCurrentScheme(createUndefinedValuedSchemes(operationSecuritySchemes[0]));
-    }
-  });
-
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = [
-      {
-        type: 'group',
-        title: 'Security Schemes',
-        children: filteredSecurityItems.map(auth =>
-          createMenuChild(
-            getReadableSecurityNames(auth, shouldAddKey(auth, operationSecuritySchemes)),
-            currentName,
-            () => setCurrentScheme(createUndefinedValuedSchemes(auth)),
-          ),
-        ),
-      },
-    ];
-
-    return items;
-  }, [currentName, filteredSecurityItems, operationSecuritySchemes, setCurrentScheme]);
-
-  if (filteredSecurityItems.length === 0) return null;
-
-  return (
-    <Panel defaultIsOpen data-test="try-it-auth">
-      <Panel.Titlebar
-        rightComponent={
-          filteredSecurityItems.length > 1 && (
-            <Menu
-              aria-label="security-schemes"
-              items={menuItems}
-              closeOnPress
-              renderTrigger={({ isOpen }) => (
-                <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
-                  {menuName}
-                </Button>
-              )}
-            />
-          )
-        }
-      >
-        Auth
-      </Panel.Titlebar>
-      {operationAuthValue && operationAuthValue.length > 0 ? (
-        operationAuthValue.map(scheme => (
-          <SecuritySchemeComponent
-            key={scheme.scheme.key}
-            scheme={scheme.scheme}
-            onChange={(authValue?: string) => handleChange(scheme.scheme, authValue)}
-            value={scheme.authValue ?? ''}
-          />
-        ))
-      ) : (
-        <OptionalMessageContainer />
-      )}
-    </Panel>
-  );
-};
-
-const GenericMessageContainer: React.FC<{ scheme: HttpSecurityScheme }> = ({ scheme }) => {
-  return <Panel.Content data-test="auth-try-it-row">Coming Soon: {getReadableSecurityName(scheme)}</Panel.Content>;
-};
-
-const OptionalMessageContainer: React.FC = () => {
-  return <Panel.Content>No auth selected</Panel.Content>;
-};
-
-interface SecuritySchemeComponentProps {
-  scheme: HttpSecurityScheme;
-  onChange: (AuthObject: any) => void;
-  value: string;
-}
-
-const SecuritySchemeComponent: React.FC<SecuritySchemeComponentProps> = ({ scheme, ...rest }) => {
-  switch (scheme.type) {
-    case 'apiKey':
-      return <APIKeyAuth scheme={scheme} {...rest} />;
-    case 'oauth2':
-      return <OAuth2Auth scheme={scheme} {...rest} />;
-    case 'http':
-      switch (scheme.scheme) {
-        case 'basic':
-          return <BasicAuth {...rest} />;
-        case 'digest':
-          return <DigestAuth {...rest} />;
-        case 'bearer':
-          return <BearerAuth scheme={scheme} {...rest} />;
-        default:
-          return <GenericMessageContainer scheme={scheme} {...rest} />;
-      }
-    default:
-      return <GenericMessageContainer scheme={scheme} {...rest} />;
-  }
-};
-
-const securitySchemeKeys: Array<HttpSecurityScheme['type']> = ['apiKey', 'http', 'oauth2', 'openIdConnect'];

package/src/components/TryIt/Auth/AuthTokenInput.tsx

@@ -1,37 +0,0 @@
-import { Flex, Input, Text } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { useUniqueId } from '../../../hooks/useUniqueId';
-
-interface AuthTokenInputProps {
-  onChange: (value: string) => void;
-  type: HttpSecurityScheme['type'];
-  name: string;
-  value: string;
-}
-
-export const AuthTokenInput: React.FC<AuthTokenInputProps> = ({ type, name, value, onChange }) => {
-  const inputId = useUniqueId(`id_auth_${name}_`);
-  return (
-    <>
-      <label aria-hidden="true" htmlFor={inputId}>
-        {name}
-      </label>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          id={inputId}
-          aria-label={name}
-          appearance="minimal"
-          flex={1}
-          placeholder={type === 'oauth2' ? 'Bearer 123' : '123'}
-          value={value}
-          type="text"
-          required
-          onChange={e => onChange(e.currentTarget.value)}
-        />
-      </Flex>
-    </>
-  );
-};

package/src/components/TryIt/Auth/BasicAuth.tsx

@@ -1,62 +0,0 @@
-import { Flex, Input, Panel, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-interface BasicAuthProps {
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const BasicAuth: React.FC<BasicAuthProps> = ({ onChange, value }) => {
-  const [username = '', password = ''] = decode(value).split(':');
-
-  const onCredentialsChange = (username: string, password: string) => {
-    onChange(encode(`${username}:${password}`));
-  };
-
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <div>Username</div>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          style={{ paddingLeft: 15 }}
-          aria-label="Username"
-          appearance="minimal"
-          flex={1}
-          placeholder="username"
-          value={username}
-          type="text"
-          required
-          onChange={e => onCredentialsChange(e.currentTarget.value, password)}
-        />
-      </Flex>
-      <div>Password</div>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          style={{ paddingLeft: 15 }}
-          aria-label="Password"
-          appearance="minimal"
-          flex={1}
-          placeholder="password"
-          value={password}
-          type="password"
-          required
-          onChange={e => onCredentialsChange(username, e.currentTarget.value)}
-        />
-      </Flex>
-    </Panel.Content>
-  );
-};
-
-function encode(value: string) {
-  return btoa(value);
-}
-
-function decode(encoded: string) {
-  try {
-    return atob(encoded);
-  } catch {
-    return '';
-  }
-}

package/src/components/TryIt/Auth/BearerAuth.tsx

@@ -1,19 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import { IBearerSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { AuthTokenInput } from './AuthTokenInput';
-
-interface BearerAuthProps {
-  scheme: IBearerSecurityScheme;
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const BearerAuth: React.FC<BearerAuthProps> = ({ value, onChange }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <AuthTokenInput type="http" name="Token" value={value} onChange={onChange} />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/DigestAuth.tsx

@@ -1,35 +0,0 @@
-import { Panel, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-interface DigestAuthProps {
-  onChange: (value: string) => void;
-  value: string;
-}
-
-const digestPlaceholder = `Digest username="User Name",
-            realm="testrealm@host.com",
-            nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093",
-            uri="/dir/index.html",
-            qop=auth,
-            nc=00000001,
-            cnonce="0a4f113b",
-            response="6629fae49393a05397450978507c4ef1",
-            opaque="5ccc069c403ebaf9f0171e9517f40e41"
-`;
-
-export const DigestAuth: React.FC<DigestAuthProps> = ({ onChange, value }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <div>Authorization</div>
-      <Text mx={3}>:</Text>
-      <textarea
-        className="sl-relative sl-z-10 sl-w-full sl-text-base sl-bg-canvas-100 sl-p-1 sl-pr-2.5 sl-pl-2.5 sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary sl-border"
-        aria-label="Authorization"
-        placeholder={digestPlaceholder}
-        value={value}
-        onChange={e => onChange(e.currentTarget.value)}
-        rows={9}
-      />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/OAuth2Auth.tsx

@@ -1,19 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import { IOauth2SecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { AuthTokenInput } from './AuthTokenInput';
-
-interface OAuth2AuthProps {
-  scheme: IOauth2SecurityScheme;
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const OAuth2Auth: React.FC<OAuth2AuthProps> = ({ value, onChange }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <AuthTokenInput type="oauth2" name="Token" value={value} onChange={onChange} />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/authentication-utils.ts

@@ -1,113 +0,0 @@
-import {
-  Dictionary,
-  HttpSecurityScheme,
-  IApiKeySecurityScheme,
-  IBasicSecurityScheme,
-  IBearerSecurityScheme,
-  IHttpHeaderParam,
-  IHttpQueryParam,
-  IOauth2SecurityScheme,
-} from '@stoplight/types';
-import { atom, useAtom } from 'jotai';
-import { flatten, isObject, isPlainObject } from 'lodash';
-import React from 'react';
-
-import { persistAtom } from '../../../utils/jotai/persistAtom';
-import { caseInsensitivelyEquals } from '../../../utils/string';
-
-export type HttpSecuritySchemeWithValues = {
-  scheme: HttpSecurityScheme;
-  authValue: string | undefined;
-};
-
-export const isApiKeySecurityScheme = (maybeIApiKey: HttpSecurityScheme): maybeIApiKey is IApiKeySecurityScheme =>
-  isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
-
-export const isOAuth2SecurityScheme = (maybeIOAuth2: HttpSecurityScheme): maybeIOAuth2 is IOauth2SecurityScheme =>
-  isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
-
-export const isBasicSecurityScheme = (maybeIBasic: HttpSecurityScheme): maybeIBasic is IBasicSecurityScheme =>
-  isObject(maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
-
-export const isBearerSecurityScheme = (maybeIBearer: HttpSecurityScheme): maybeIBearer is IBearerSecurityScheme =>
-  isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
-
-export const isDigestSecurityScheme = (maybeIBearer: HttpSecurityScheme): maybeIBearer is IBasicSecurityScheme =>
-  isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
-
-export function filterOutAuthorizationParams(
-  queryParams: IHttpQueryParam[],
-  securitySchemes?: HttpSecurityScheme[][],
-): IHttpQueryParam[];
-export function filterOutAuthorizationParams(
-  queryParams: IHttpHeaderParam[],
-  securitySchemes?: HttpSecurityScheme[][],
-): IHttpHeaderParam[];
-export function filterOutAuthorizationParams(
-  queryParams: (IHttpQueryParam | IHttpHeaderParam)[],
-  securitySchemes: HttpSecurityScheme[][] = [],
-): (IHttpQueryParam | IHttpHeaderParam)[] {
-  const flattenedSecuritySchemes = flatten(securitySchemes);
-  const securitySchemeNames = getSecuritySchemeNames(flattenedSecuritySchemes);
-
-  return queryParams.filter(queryParam => !securitySchemeNames.some(caseInsensitivelyEquals(queryParam.name)));
-}
-
-const getSecuritySchemeNames = (securitySchemes: HttpSecurityScheme[]): string[] =>
-  securitySchemes.flatMap(scheme => {
-    if (isApiKeySecurityScheme(scheme)) {
-      return scheme.name;
-    }
-
-    if (isOAuth2SecurityScheme(scheme)) {
-      return 'Authorization';
-    }
-
-    return [];
-  });
-
-type SecuritySchemeValues = Dictionary<string>;
-
-const isSecuritySchemeValues = (
-  maybeSecuritySchemeValues: unknown,
-): maybeSecuritySchemeValues is SecuritySchemeValues => isPlainObject(maybeSecuritySchemeValues);
-
-const securitySchemeValuesAtom = persistAtom('TryIt_securitySchemeValues', atom<SecuritySchemeValues>({}));
-export const usePersistedSecuritySchemeWithValues = (): [
-  HttpSecuritySchemeWithValues[] | undefined,
-  React.Dispatch<HttpSecuritySchemeWithValues | undefined>,
-  React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>,
-] => {
-  const [currentScheme, setCurrentScheme] = React.useState<HttpSecuritySchemeWithValues[] | undefined>();
-  const [securitySchemeValues, setSecuritySchemeValues] = useAtom(securitySchemeValuesAtom);
-
-  const setPersistedAuthenticationSettings = (securitySchemeWithValues: HttpSecuritySchemeWithValues | undefined) => {
-    if (securitySchemeWithValues) {
-      const key = securitySchemeWithValues.scheme.key;
-      const value = securitySchemeWithValues.authValue;
-
-      if (value !== undefined) {
-        setSecuritySchemeValues({
-          ...securitySchemeValues,
-          [key]: value,
-        });
-      }
-    }
-  };
-
-  const schemeWithPersistedValue = React.useMemo(() => {
-    if (!currentScheme) return undefined;
-    return currentScheme.map(scheme => {
-      return {
-        scheme: scheme.scheme,
-        authValue: isSecuritySchemeValues(securitySchemeValues) ? securitySchemeValues[scheme.scheme.key] : undefined,
-      };
-    });
-  }, [currentScheme, securitySchemeValues]);
-
-  return [schemeWithPersistedValue, setPersistedAuthenticationSettings, setCurrentScheme];
-};
-
-export const createUndefinedValuedSchemes = (schemes: HttpSecurityScheme[]): HttpSecuritySchemeWithValues[] => {
-  return schemes.map(scheme => ({ scheme, authValue: undefined }));
-};

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

@@ -1,52 +0,0 @@
-import { SchemaTree } from '@stoplight/json-schema-tree';
-import { Choice, useChoices } from '@stoplight/json-schema-viewer';
-import { Panel } from '@stoplight/mosaic';
-import { IMediaTypeContent } from '@stoplight/types';
-import * as React from 'react';
-
-import { FileUploadParameterEditor } from '../Parameters/FileUploadParameterEditors';
-import { OneOfMenu } from './FormDataBody';
-import { BodyParameterValues } from './request-body-utils';
-
-export interface BinaryBodyProps {
-  specification?: IMediaTypeContent;
-  values: BodyParameterValues;
-  onChangeValues: (newValues: BodyParameterValues) => void;
-}
-
-export const BinaryBody: React.FC<BinaryBodyProps> = ({ specification, values, onChangeValues }) => {
-  const schema: any = React.useMemo(() => {
-    const schema = specification?.schema ?? {};
-    const tree = new SchemaTree(schema, { mergeAllOf: true, refResolver: null });
-    tree.populate();
-    return tree.root.children[0];
-  }, [specification]);
-
-  const { selectedChoice, choices, setSelectedChoice } = useChoices(schema);
-
-  const onSchemaChange = (choice: Choice) => {
-    // Erase existing values; the old and new schemas may have nothing in common.
-    onChangeValues({});
-    setSelectedChoice(choice);
-  };
-
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar
-        rightComponent={<OneOfMenu choices={choices} choice={selectedChoice} onChange={onSchemaChange} />}
-      >
-        Body
-      </Panel.Titlebar>
-      <Panel.Content className="sl-overflow-y-auto ParameterGrid OperationParametersContent">
-        <FileUploadParameterEditor
-          key={'file'}
-          parameter={{ name: 'file' }}
-          value={values.file instanceof File ? values.file : undefined}
-          onChange={newValue => {
-            newValue ? onChangeValues({ file: newValue }) : onChangeValues({});
-          }}
-        />
-      </Panel.Content>
-    </Panel>
-  );
-};