@stoplight/elements-core 7.12.2 → 7.13.0

package/components/TryIt/Auth/Auth.d.ts

@@ -2,9 +2,10 @@ import { HttpSecurityScheme } from '@stoplight/types';
 import * as React from 'react';
 import { HttpSecuritySchemeWithValues } from './authentication-utils';
 interface TryItAuthProps {
-    operationSecurityScheme: HttpSecurityScheme[][];
-    onChange: (authObject: HttpSecuritySchemeWithValues | undefined) => void;
-    value: HttpSecuritySchemeWithValues | undefined;
+    operationSecuritySchemes: HttpSecurityScheme[][];
+    operationAuthValue: HttpSecuritySchemeWithValues[] | undefined;
+    setOperationAuthValue: React.Dispatch<HttpSecuritySchemeWithValues | undefined>;
+    setCurrentScheme: React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>;
 }
 export declare const TryItAuth: React.FC<TryItAuthProps>;
 export {};

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

@@ -12,6 +12,8 @@ export declare const isDigestSecurityScheme: (maybeIBearer: HttpSecurityScheme)
 export declare function filterOutAuthorizationParams(queryParams: IHttpQueryParam[], securitySchemes?: HttpSecurityScheme[][]): IHttpQueryParam[];
 export declare function filterOutAuthorizationParams(queryParams: IHttpHeaderParam[], securitySchemes?: HttpSecurityScheme[][]): IHttpHeaderParam[];
 export declare const usePersistedSecuritySchemeWithValues: () => [
-    HttpSecuritySchemeWithValues | undefined,
-    React.Dispatch<HttpSecuritySchemeWithValues | undefined>
+    HttpSecuritySchemeWithValues[] | undefined,
+    React.Dispatch<HttpSecuritySchemeWithValues | undefined>,
+    React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>
 ];
+export declare const createUndefinedValuedSchemes: (schemes: HttpSecurityScheme[]) => HttpSecuritySchemeWithValues[];

package/components/TryIt/build-request.d.ts

@@ -10,7 +10,7 @@ interface BuildRequestInput {
     serverVariableValues: Dictionary<string, string>;
     bodyInput?: BodyParameterValues | string;
     mockData?: MockData;
-    auth?: HttpSecuritySchemeWithValues;
+    auth?: HttpSecuritySchemeWithValues[];
     chosenServer?: IServer | null;
     credentials?: 'omit' | 'include' | 'same-origin';
     corsProxy?: string;

package/index.esm.js

@@ -19,9 +19,9 @@ import { atom, useAtom, Provider } from 'jotai';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
-import flatten from 'lodash/flatten.js';
 import capitalize from 'lodash/capitalize.js';
 import filter from 'lodash/filter.js';
+import flatten from 'lodash/flatten.js';
 import { nanoid } from 'nanoid';
 import curry from 'lodash/curry.js';
 import omit from 'lodash/omit.js';
@@ -877,15 +877,34 @@ function getReadableSecurityName(securityScheme, includeKey = false) {
         case 'mutualTLS':
             name = 'Mutual TLS';
             break;
+        case undefined:
+            name = 'None';
+            break;
     }
     return includeKey ? `${name} (${securityScheme.key})` : name;
 }
+function getReadableSecurityNames(securitySchemes, includeKey = false) {
+    if (securitySchemes.length === 0)
+        return 'None';
+    let name = '';
+    for (let i = 0; i < securitySchemes.length; i++) {
+        if (i > 0)
+            name += ' & ';
+        name += getReadableSecurityName(securitySchemes[i], shouldIncludeKey(securitySchemes, securitySchemes[i].type));
+    }
+    return includeKey ? `${name} (${securitySchemes[0].key})` : name;
+}
 const isOAuth2ImplicitFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && !('tokenUrl' in maybeFlow);
 const isOauth2AuthorizationCodeFlow = (maybeFlow) => isObject(maybeFlow) && 'authorizationUrl' in maybeFlow && 'tokenUrl' in maybeFlow;
 const isOauth2ClientCredentialsOrPasswordFlow = (maybeFlow) => isObject(maybeFlow) && !('authorizationUrl' in maybeFlow) && 'tokenUrl' in maybeFlow;
 function shouldIncludeKey(schemes, type) {
     return filter(schemes, { type }).length > 1;
-}
+}
+const shouldAddKey = (auth, operationSecuritySchemes) => {
+    if (auth.length !== 1)
+        return false;
+    return shouldIncludeKey(flatten(operationSecuritySchemes.filter(scheme => scheme.length === 1)), auth[0].type);
+};
 
 const useUniqueId = (prefix = 'id_') => React.useRef(`${prefix}${nanoid(8)}`).current;
 
@@ -899,16 +918,73 @@ const AuthTokenInput = ({ type, name, value, onChange }) => {
 };
 
 const APIKeyAuth = ({ scheme, onChange, value }) => {
-    return (React.createElement(Panel.Content, { className: "ParameterGrid" },
+    return (React.createElement(Panel.Content, { className: "ParameterGrid", "data-test": "auth-try-it-row" },
         React.createElement(AuthTokenInput, { type: "apiKey", name: scheme.name, value: value, onChange: onChange })));
 };
 
+const caseInsensitivelyEquals = curry((a, b) => a.toUpperCase() === b.toUpperCase());
+function slugify(name) {
+    return name
+        .replace(/\/|{|}|\s/g, '-')
+        .replace(/-{2,}/, '-')
+        .replace(/^-/, '')
+        .replace(/-$/, '');
+}
+
+const isApiKeySecurityScheme = (maybeIApiKey) => isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
+const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
+const isBasicSecurityScheme = (maybeIBasic) => isObject(maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
+const isBearerSecurityScheme = (maybeIBearer) => isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
+const isDigestSecurityScheme = (maybeIBearer) => isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
+function filterOutAuthorizationParams(queryParams, securitySchemes = []) {
+    const flattenedSecuritySchemes = flatten(securitySchemes);
+    const securitySchemeNames = getSecuritySchemeNames(flattenedSecuritySchemes);
+    return queryParams.filter(queryParam => !securitySchemeNames.some(caseInsensitivelyEquals(queryParam.name)));
+}
+const getSecuritySchemeNames = (securitySchemes) => securitySchemes.flatMap(scheme => {
+    if (isApiKeySecurityScheme(scheme)) {
+        return scheme.name;
+    }
+    if (isOAuth2SecurityScheme(scheme)) {
+        return 'Authorization';
+    }
+    return [];
+});
+const securitySchemeValuesAtom = persistAtom('TryIt_securitySchemeValues', atom({}));
+const usePersistedSecuritySchemeWithValues = () => {
+    const [currentScheme, setCurrentScheme] = React__default.useState();
+    const [securitySchemeValues, setSecuritySchemeValues] = useAtom(securitySchemeValuesAtom);
+    const setPersistedAuthenticationSettings = (securitySchemeWithValues) => {
+        if (securitySchemeWithValues) {
+            const key = securitySchemeWithValues.scheme.key;
+            const value = securitySchemeWithValues.authValue;
+            if (value !== undefined) {
+                setSecuritySchemeValues(Object.assign(Object.assign({}, securitySchemeValues), { [key]: value }));
+            }
+        }
+    };
+    const schemeWithPersistedValue = React__default.useMemo(() => {
+        if (!currentScheme)
+            return undefined;
+        return currentScheme.map(scheme => {
+            return {
+                scheme: scheme.scheme,
+                authValue: securitySchemeValues[scheme.scheme.key],
+            };
+        });
+    }, [currentScheme, securitySchemeValues]);
+    return [schemeWithPersistedValue, setPersistedAuthenticationSettings, setCurrentScheme];
+};
+const createUndefinedValuedSchemes = (schemes) => {
+    return schemes.map(scheme => ({ scheme, authValue: undefined }));
+};
+
 const BasicAuth = ({ onChange, value }) => {
     const [username = '', password = ''] = decode(value).split(':');
     const onCredentialsChange = (username, password) => {
         onChange(encode(`${username}:${password}`));
     };
-    return (React.createElement(Panel.Content, { className: "ParameterGrid" },
+    return (React.createElement(Panel.Content, { className: "ParameterGrid", "data-test": "auth-try-it-row" },
         React.createElement("div", null, "Username"),
         React.createElement(Text, { mx: 3 }, ":"),
         React.createElement(Flex, { flex: 1 },
@@ -931,7 +1007,7 @@ function decode(encoded) {
 }
 
 const BearerAuth = ({ value, onChange }) => {
-    return (React.createElement(Panel.Content, { className: "ParameterGrid" },
+    return (React.createElement(Panel.Content, { className: "ParameterGrid", "data-test": "auth-try-it-row" },
         React.createElement(AuthTokenInput, { type: "http", name: "Token", value: value, onChange: onChange })));
 };
 
@@ -946,63 +1022,78 @@ const digestPlaceholder = `Digest username="User Name",
             opaque="5ccc069c403ebaf9f0171e9517f40e41"
 `;
 const DigestAuth = ({ onChange, value }) => {
-    return (React.createElement(Panel.Content, { className: "ParameterGrid" },
+    return (React.createElement(Panel.Content, { className: "ParameterGrid", "data-test": "auth-try-it-row" },
         React.createElement("div", null, "Authorization"),
         React.createElement(Text, { mx: 3 }, ":"),
         React.createElement("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 })));
 };
 
 const OAuth2Auth = ({ value, onChange }) => {
-    return (React.createElement(Panel.Content, { className: "ParameterGrid" },
+    return (React.createElement(Panel.Content, { className: "ParameterGrid", "data-test": "auth-try-it-row" },
         React.createElement(AuthTokenInput, { type: "oauth2", name: "Token", value: value, onChange: onChange })));
 };
 
-function getSupportedSecurityScheme(value, supportedSecuritySchemes) {
-    var _a;
-    if (value && supportedSecuritySchemes.some(s => value.scheme.id === s.id)) {
-        return [value.scheme, (_a = value.authValue) !== null && _a !== void 0 ? _a : ''];
+const checkViableCurrentAuth = (current, operationSecuritySchemes) => {
+    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 [supportedSecuritySchemes[0], ''];
-}
-const TryItAuth = ({ operationSecurityScheme: operationAuth, onChange, value }) => {
-    const operationSecurityArray = flatten(operationAuth);
-    const filteredSecurityItems = operationSecurityArray.filter(scheme => securitySchemeKeys.includes(scheme === null || scheme === void 0 ? void 0 : scheme.type));
-    const [securityScheme, authValue] = getSupportedSecurityScheme(value, filteredSecurityItems);
-    const menuName = securityScheme ? getReadableSecurityName(securityScheme) : 'Security Scheme';
-    const handleChange = (authValue) => {
-        onChange(securityScheme && { scheme: securityScheme, authValue: authValue });
+    return true;
+};
+const createMenuChild = (name, currentItemName, onPress) => {
+    return {
+        id: `security-scheme-${name}`,
+        title: name,
+        isChecked: name === currentItemName,
+        onPress,
+    };
+};
+const TryItAuth = ({ 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, authValue) => {
+        setOperationAuthValue({ scheme, authValue });
     };
     React.useEffect(() => {
-        handleChange();
-    }, []);
+        if (checkViableCurrentAuth(operationAuthValue, operationSecuritySchemes) === false) {
+            setCurrentScheme(createUndefinedValuedSchemes(operationSecuritySchemes[0]));
+        }
+    });
     const menuItems = React.useMemo(() => {
         const items = [
             {
                 type: 'group',
                 title: 'Security Schemes',
-                children: filteredSecurityItems.map(auth => ({
-                    id: `security-scheme-${auth.key}`,
-                    title: getReadableSecurityName(auth, shouldIncludeKey(filteredSecurityItems, auth.type)),
-                    isChecked: auth.key === (securityScheme === null || securityScheme === void 0 ? void 0 : securityScheme.key),
-                    onPress: () => {
-                        onChange({ scheme: auth, authValue: undefined });
-                    },
-                })),
+                children: filteredSecurityItems.map(auth => createMenuChild(getReadableSecurityNames(auth, shouldAddKey(auth, operationSecuritySchemes)), currentName, () => setCurrentScheme(createUndefinedValuedSchemes(auth)))),
             },
         ];
         return items;
-    }, [filteredSecurityItems, onChange, securityScheme]);
+    }, [currentName, filteredSecurityItems, operationSecuritySchemes, setCurrentScheme]);
     if (filteredSecurityItems.length === 0)
         return null;
-    return (React.createElement(Panel, { defaultIsOpen: true },
+    return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "try-it-auth" },
         React.createElement(Panel.Titlebar, { rightComponent: filteredSecurityItems.length > 1 && (React.createElement(Menu, { "aria-label": "security-schemes", items: menuItems, closeOnPress: true, renderTrigger: ({ isOpen }) => (React.createElement(Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, menuName)) })) }, "Auth"),
-        React.createElement(SecuritySchemeComponent, { scheme: securityScheme, onChange: handleChange, value: authValue })));
+        operationAuthValue && operationAuthValue.length > 0 ? (operationAuthValue.map(scheme => {
+            var _a;
+            return (React.createElement(SecuritySchemeComponent, { key: scheme.scheme.key, scheme: scheme.scheme, onChange: (authValue) => handleChange(scheme.scheme, authValue), value: (_a = scheme.authValue) !== null && _a !== void 0 ? _a : '' }));
+        })) : (React.createElement(OptionalMessageContainer, null))));
 };
 const GenericMessageContainer = ({ scheme }) => {
-    return React.createElement(Panel.Content, null,
+    return React.createElement(Panel.Content, { "data-test": "auth-try-it-row" },
         "Coming Soon: ",
         getReadableSecurityName(scheme));
 };
+const OptionalMessageContainer = () => {
+    return React.createElement(Panel.Content, null, "No auth selected");
+};
 const SecuritySchemeComponent = (_a) => {
     var { scheme } = _a, rest = __rest(_a, ["scheme"]);
     switch (scheme.type) {
@@ -1027,59 +1118,6 @@ const SecuritySchemeComponent = (_a) => {
 };
 const securitySchemeKeys = ['apiKey', 'http', 'oauth2', 'openIdConnect'];
 
-const caseInsensitivelyEquals = curry((a, b) => a.toUpperCase() === b.toUpperCase());
-function slugify(name) {
-    return name
-        .replace(/\/|{|}|\s/g, '-')
-        .replace(/-{2,}/, '-')
-        .replace(/^-/, '')
-        .replace(/-$/, '');
-}
-
-const isApiKeySecurityScheme = (maybeIApiKey) => isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
-const isOAuth2SecurityScheme = (maybeIOAuth2) => isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
-const isBasicSecurityScheme = (maybeIBasic) => isObject(maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
-const isBearerSecurityScheme = (maybeIBearer) => isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
-const isDigestSecurityScheme = (maybeIBearer) => isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
-function filterOutAuthorizationParams(queryParams, securitySchemes = []) {
-    const flattenedSecuritySchemes = flatten(securitySchemes);
-    const securitySchemeNames = getSecuritySchemeNames(flattenedSecuritySchemes);
-    return queryParams.filter(queryParam => !securitySchemeNames.some(caseInsensitivelyEquals(queryParam.name)));
-}
-const getSecuritySchemeNames = (securitySchemes) => securitySchemes.flatMap(scheme => {
-    if (isApiKeySecurityScheme(scheme)) {
-        return scheme.name;
-    }
-    if (isOAuth2SecurityScheme(scheme)) {
-        return 'Authorization';
-    }
-    return [];
-});
-const securitySchemeValuesAtom = persistAtom('TryIt_securitySchemeValues', atom({}));
-const usePersistedSecuritySchemeWithValues = () => {
-    const [currentScheme, setCurrentScheme] = React__default.useState();
-    const [securitySchemeValues, setSecuritySchemeValues] = useAtom(securitySchemeValuesAtom);
-    const setPersistedAuthenticationSettings = (securitySchemeWithValues) => {
-        setCurrentScheme(securitySchemeWithValues);
-        if (securitySchemeWithValues) {
-            const key = securitySchemeWithValues.scheme.key;
-            const value = securitySchemeWithValues.authValue;
-            if (value !== undefined) {
-                setSecuritySchemeValues(Object.assign(Object.assign({}, securitySchemeValues), { [key]: value }));
-            }
-        }
-    };
-    const persistedSecuritySchemeValue = currentScheme && securitySchemeValues[currentScheme.scheme.key];
-    const schemeWithPersistedValue = React__default.useMemo(() => {
-        if (!currentScheme)
-            return undefined;
-        if (currentScheme.authValue)
-            return currentScheme;
-        return Object.assign(Object.assign({}, currentScheme), { authValue: persistedSecuritySchemeValue });
-    }, [currentScheme, persistedSecuritySchemeValue]);
-    return [schemeWithPersistedValue, setPersistedAuthenticationSettings];
-};
-
 const FileUploadParameterEditor = ({ parameter, value, onChange }) => {
     var _a;
     const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
@@ -1564,50 +1602,52 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         ];
     });
 }
-const runAuthRequestEhancements = (auth, queryParams, headers) => {
-    var _a, _b, _c, _d, _e;
-    if (!auth)
+const runAuthRequestEhancements = (auths, queryParams, headers) => {
+    if (!auths)
         return [queryParams, headers];
     const newQueryParams = [...queryParams];
     const newHeaders = [...headers];
-    if (isApiKeySecurityScheme(auth.scheme)) {
-        if (auth.scheme.in === 'query') {
-            newQueryParams.push({
-                name: auth.scheme.name,
-                value: (_a = auth.authValue) !== null && _a !== void 0 ? _a : '',
+    auths.forEach(auth => {
+        var _a, _b, _c, _d, _e;
+        if (isApiKeySecurityScheme(auth.scheme)) {
+            if (auth.scheme.in === 'query') {
+                newQueryParams.push({
+                    name: auth.scheme.name,
+                    value: (_a = auth.authValue) !== null && _a !== void 0 ? _a : '',
+                });
+            }
+            if (auth.scheme.in === 'header') {
+                newHeaders.push({
+                    name: auth.scheme.name,
+                    value: (_b = auth.authValue) !== null && _b !== void 0 ? _b : '',
+                });
+            }
+        }
+        if (isOAuth2SecurityScheme(auth.scheme)) {
+            newHeaders.push({
+                name: 'Authorization',
+                value: (_c = auth.authValue) !== null && _c !== void 0 ? _c : '',
             });
         }
-        if (auth.scheme.in === 'header') {
+        if (isBearerSecurityScheme(auth.scheme)) {
             newHeaders.push({
-                name: auth.scheme.name,
-                value: (_b = auth.authValue) !== null && _b !== void 0 ? _b : '',
+                name: 'Authorization',
+                value: `Bearer ${auth.authValue}`,
             });
         }
-    }
-    if (isOAuth2SecurityScheme(auth.scheme)) {
-        newHeaders.push({
-            name: 'Authorization',
-            value: (_c = auth.authValue) !== null && _c !== void 0 ? _c : '',
-        });
-    }
-    if (isBearerSecurityScheme(auth.scheme)) {
-        newHeaders.push({
-            name: 'Authorization',
-            value: `Bearer ${auth.authValue}`,
-        });
-    }
-    if (isDigestSecurityScheme(auth.scheme)) {
-        newHeaders.push({
-            name: 'Authorization',
-            value: (_e = (_d = auth.authValue) === null || _d === void 0 ? void 0 : _d.replace(/\s\s+/g, ' ').trim()) !== null && _e !== void 0 ? _e : '',
-        });
-    }
-    if (isBasicSecurityScheme(auth.scheme)) {
-        newHeaders.push({
-            name: 'Authorization',
-            value: `Basic ${auth.authValue}`,
-        });
-    }
+        if (isDigestSecurityScheme(auth.scheme)) {
+            newHeaders.push({
+                name: 'Authorization',
+                value: (_e = (_d = auth.authValue) === null || _d === void 0 ? void 0 : _d.replace(/\s\s+/g, ' ').trim()) !== null && _e !== void 0 ? _e : '',
+            });
+        }
+        if (isBasicSecurityScheme(auth.scheme)) {
+            newHeaders.push({
+                name: 'Authorization',
+                value: `Basic ${auth.authValue}`,
+            });
+        }
+    });
     return [newQueryParams, newHeaders];
 };
 function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
@@ -1987,9 +2027,9 @@ const VariableEditor = ({ variable, value, onChange }) => {
 };
 
 const ServerVariables = ({ variables, values, onChangeValue }) => {
-    return (React.createElement(Panel, { defaultIsOpen: true },
+    return (React.createElement(Panel, { defaultIsOpen: true, "data-test": "server-vars-try-it" },
         React.createElement(Panel.Titlebar, null, "Server Variables"),
-        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(VariableEditor, { key: variable.name, variable: variable, value: values[variable.name], onChange: (value) => {
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React.createElement(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);
             } }))))));
@@ -1997,7 +2037,7 @@ const ServerVariables = ({ variables, values, onChangeValue }) => {
 
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     TryIt.displayName = 'TryIt';
     const isDark = useThemeIsDark();
     const [response, setResponse] = React.useState();
@@ -2009,7 +2049,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [mockingOptions, setMockingOptions] = useMockingOptions();
     const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] = useBodyParameterState(mediaTypeContent);
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
-    const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
+    const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
         return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
@@ -2117,10 +2157,10 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     });
     const isOnlySendButton = !((_d = httpOperation.security) === null || _d === void 0 ? void 0 : _d.length) && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
     const tryItPanelContents = (React.createElement(React.Fragment, null,
-        ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React.createElement(TryItAuth, { operationSecuritySchemes: httpOperation.security, operationAuthValue: operationAuthValue, setOperationAuthValue: setOperationAuthValue, setCurrentScheme: setCurrentScheme })) : null,
         serverVariables.length > 0 && (React.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
-        formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
+        formDataState.isFormDataBody ? (React.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React.createElement(RequestBody, { examples: (_f = mediaTypeContent.examples) !== null && _f !== void 0 ? _f : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
         React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
             React.createElement(HStack, { alignItems: "center", spacing: 2 },
                 React.createElement(Button, { appearance: "primary", loading: loading, disabled: loading, onPress: handleSendRequest, size: "sm" }, "Send API Request"),
@@ -2403,7 +2443,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
-    const securitySchemes = flatten(security);
+    const securitySchemes = security !== null && security !== void 0 ? security : [];
     const hasRequestData = Boolean(securitySchemes.length ||
         pathParams.length ||
         queryParams.length ||
@@ -2431,19 +2471,25 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
-const SecurityPanel = ({ scheme, includeKey }) => {
+const SecurityPanel = ({ schemes, includeKey }) => {
     const [expandedState, setExpanded] = useAtom(schemeExpandedState);
-    return (React.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityName(scheme, includeKey)}`, defaultIsOpen: !!expandedState[scheme.key], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [scheme.key]: isOpen })) },
-        React.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${scheme.description || ''}\n\n` + getDefaultDescription(scheme) })));
+    const { nodeHasChanged } = useOptionsCtx();
+    const collection = schemes.length > 1;
+    return (React.createElement(SubSectionPanel, { title: `Security: ${getReadableSecurityNames(schemes, includeKey)}`, defaultIsOpen: !!expandedState[getReadableSecurityNames(schemes)], onChange: isOpen => setExpanded(Object.assign(Object.assign({}, expandedState), { [getReadableSecurityNames(schemes)]: isOpen })) },
+        React.createElement(Box, { m: -2 }, schemes.map(scheme => {
+            var _a;
+            return (React.createElement(Box, { key: scheme.key, p: 2, m: 2, border: true },
+                collection && (React.createElement(MarkdownViewer, { style: { fontWeight: 'bold', fontSize: 12, marginBottom: 10 }, markdown: getReadableSecurityName(scheme, shouldIncludeKey(schemes, scheme.type)) })),
+                React.createElement(MarkdownViewer, { style: { fontSize: 12 }, markdown: `${(_a = scheme.description) !== null && _a !== void 0 ? _a : ''}\n\n` + getDefaultDescription(scheme) }),
+                React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) })));
+        }))));
 };
 const SecuritySchemes$1 = ({ schemes }) => {
-    const { nodeHasChanged } = useOptionsCtx();
     if (!schemes.length) {
         return null;
     }
-    return (React.createElement(VStack, { spacing: 3 }, schemes.map((scheme, i) => (React.createElement(Box, { pos: "relative", key: i },
-        React.createElement(SecurityPanel, { scheme: scheme, includeKey: shouldIncludeKey(schemes, scheme.type) }),
-        React.createElement(NodeAnnotation, { change: nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: scheme.id }) }))))));
+    return (React.createElement(VStack, { spacing: 3 }, schemes.map((scheme, i) => (React.createElement(Box, { pos: "relative", key: i, p: 0, "data-test": "security-row" },
+        React.createElement(SecurityPanel, { schemes: scheme, includeKey: shouldAddKey(scheme, schemes) }))))));
 };
 
 const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
@@ -2633,7 +2679,7 @@ const ExportButton = ({ original, bundled }) => {
 };
 
 const SecuritySchemes = ({ schemes, defaultScheme, defaultCollapsed = false, }) => {
-    return (React__default.createElement(Panel, { rounded: true, isCollapsible: defaultCollapsed },
+    return (React__default.createElement(Panel, { rounded: true, isCollapsible: defaultCollapsed, "data-test": "security-row" },
         React__default.createElement(Panel.Titlebar, { bg: "canvas-300" },
             React__default.createElement(Box, { as: "span", role: "heading" }, "Security")),
         React__default.createElement(Panel.Content, { p: 0 }, sortBy(schemes, 'type').map((scheme, i) => (React__default.createElement(SecurityScheme, { key: i, scheme: scheme, defaultIsOpen: defaultScheme ? scheme.key === defaultScheme : i === 0, isCollapsible: schemes.length > 1, showSchemeKey: shouldIncludeKey(schemes, scheme.type) }))))));
@@ -2659,7 +2705,7 @@ const ServerInfo = ({ servers, mockUrl }) => {
         return null;
     }
     return (React.createElement(InvertTheme, null,
-        React.createElement(Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full" },
+        React.createElement(Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full", "data-test": "servers" },
             React.createElement(Panel.Titlebar, { whitespace: "nowrap" }, "API Base URL"),
             React.createElement(Panel.Content, { w: "full", className: "sl-flex sl-flex-col" },
                 React.createElement(VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React.createElement(ServerUrl, Object.assign({}, server, { defaultIsOpen: index === firstServerVariableIndex, hasAnyServerVariables: firstServerVariableIndex !== -1, key: server.id })))))))));
@@ -2675,12 +2721,12 @@ const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, def
         e.stopPropagation();
         onCopy();
     }, [onCopy]);
-    return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full" },
+    return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full", "data-test": "server-row" },
         React.createElement(Panel.Titlebar, { whitespace: "nowrap" },
             React.createElement(Text, { pl: titlePaddingLeft, pr: 2, fontWeight: "bold" },
                 description,
                 ":"),
-            React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
+            React.createElement(Tooltip, { placement: "right", renderTrigger: () => (React.createElement(Text, { "aria-label": description, whitespace: "normal", style: { wordBreak: 'break-word' } }, urlFragments.map(({ kind, value }, i) => (React.createElement(Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
                 !hasCopied && (React.createElement(Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
                     "Copy Server URL ",
                     React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
@@ -2767,8 +2813,8 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
         pathname && (layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.showPoweredByLink) && (React.createElement(PoweredByLink, { source: (_a = data.name) !== null && _a !== void 0 ? _a : 'no-title', pathname: pathname, packageType: "elements", layout: "stacked" })),
         React.createElement(VStack, { spacing: 6 },
             React.createElement(ServerInfo, { servers: (_b = data.servers) !== null && _b !== void 0 ? _b : [], mockUrl: mocking.mockUrl }),
-            React.createElement(Box, null, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
-            React.createElement(Box, null, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
+            React.createElement(Box, { "data-test": "security" }, ((_c = data.securitySchemes) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(SecuritySchemes, { schemes: data.securitySchemes, defaultScheme: query.get('security') || undefined })) : null),
+            React.createElement(Box, { "data-test": "additional-info" }, (((_d = data.contact) === null || _d === void 0 ? void 0 : _d.email) || data.license || data.termsOfService) && (React.createElement(AdditionalInfo, { id: data.id, contact: data.contact, license: data.license, termsOfService: data.termsOfService })))),
         data.description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { className: "sl-my-5", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged })))));