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

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

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,52 @@
+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>
+  );
+};

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

@@ -0,0 +1,145 @@
+import { isRegularNode, SchemaNode, SchemaTree } from '@stoplight/json-schema-tree';
+import { Choice, useChoices, visibleChildren } from '@stoplight/json-schema-viewer';
+import { Button, Menu, Panel } from '@stoplight/mosaic';
+import { IMediaTypeContent } from '@stoplight/types';
+import { omit } from 'lodash';
+import * as React from 'react';
+
+import { FileUploadParameterEditor } from '../Parameters/FileUploadParameterEditors';
+import { parameterSupportsFileUpload, toParameterSpec } from '../Parameters/parameter-utils';
+import { ParameterEditor } from '../Parameters/ParameterEditor';
+import { BodyParameterValues, ParameterOptional } from './request-body-utils';
+
+export interface FormDataBodyProps {
+  specification: IMediaTypeContent;
+  values: BodyParameterValues;
+  onChangeValues: (newValues: BodyParameterValues) => void;
+  onChangeParameterAllow: (newValue: ParameterOptional) => void;
+  isAllowedEmptyValues: ParameterOptional;
+}
+
+export const FormDataBody: React.FC<FormDataBodyProps> = ({
+  specification,
+  values,
+  onChangeValues,
+  onChangeParameterAllow,
+  isAllowedEmptyValues,
+}) => {
+  const schema: SchemaNode = 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 formFieldRows = visibleChildren(selectedChoice.type);
+
+  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">
+        {formFieldRows
+          .filter(isRegularNode)
+          .map(toParameterSpec)
+          .map(parameter => {
+            const supportsFileUpload = parameterSupportsFileUpload(parameter);
+            const value = values[parameter.name ?? ''];
+
+            if (supportsFileUpload) {
+              return (
+                <FileUploadParameterEditor
+                  key={parameter.name}
+                  parameter={parameter}
+                  value={value instanceof File ? value : undefined}
+                  onChange={newValue =>
+                    newValue
+                      ? onChangeValues({ ...values, [parameter.name]: newValue })
+                      : onChangeValues(omit(values, parameter.name))
+                  }
+                />
+              );
+            }
+
+            return (
+              <ParameterEditor
+                key={parameter.name}
+                parameter={parameter}
+                value={typeof value === 'string' ? value : undefined}
+                onChange={value =>
+                  onChangeValues({
+                    ...values,
+                    [parameter.name]: typeof value === 'number' ? String(value) : (value as any),
+                  })
+                }
+                onChangeOptional={value => onChangeParameterAllow({ ...isAllowedEmptyValues, [parameter.name]: value })}
+                canChangeOptional={true}
+                isOptional={isAllowedEmptyValues[parameter.name] ?? false}
+              />
+            );
+          })}
+      </Panel.Content>
+    </Panel>
+  );
+};
+
+export interface OneOfMenuProps {
+  /** all of the available sub-schemas that can be picked */
+  choices: Choice[];
+
+  /** the currently selected sub-schema */
+  choice: Choice;
+
+  /** called when the selection changes */
+  onChange: (choice: Choice) => void;
+}
+
+/**
+ * When the top level schema is `oneOf`, a drop-down menu that allows the user
+ * to select among the sub-schemas; otherwise `null`.
+ */
+export function OneOfMenu({ choices: subSchemas, choice, onChange }: OneOfMenuProps) {
+  const onSubSchemaSelect = React.useCallback(onChange, [onChange]);
+
+  const menuItems = React.useMemo(
+    () =>
+      subSchemas.map(subSchema => {
+        const label = subSchema.title;
+        return {
+          id: `request-subschema-${label}`,
+          title: label,
+          onPress: () => onSubSchemaSelect(subSchema),
+        };
+      }),
+    [subSchemas, onSubSchemaSelect],
+  );
+
+  if (!subSchemas || subSchemas.length < 2) {
+    return null;
+  }
+
+  const title = choice?.title ?? 'Variants';
+
+  return (
+    <Menu
+      aria-label={title}
+      items={menuItems}
+      renderTrigger={({ isOpen }) => (
+        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen} data-testid="oneof-menu">
+          {title}
+        </Button>
+      )}
+    />
+  );
+}