npm - @stoplight/elements-core - Versions diffs - 7.7.21 → 7.9.0 - Mend

@stoplight/elements-core 7.7.21 → 7.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/components/Docs/HttpService/ServerInfo.d.ts +4 -0
package/components/TryIt/Servers/ServerVariables.d.ts +9 -0
package/components/TryIt/Servers/VariableEditor.d.ts +11 -0
package/components/TryIt/Servers/useServerVariables.d.ts +4 -0
package/components/TryIt/TryIt.stories.d.ts +1 -0
package/components/TryIt/TryItWithRequestSamples.stories.d.ts +1 -0
package/components/TryIt/build-request.d.ts +3 -2
package/index.esm.js +165 -45
package/index.js +168 -45
package/index.mjs +165 -45
package/package.json +1 -1
package/utils/http-spec/IServer.d.ts +9 -3

package/components/Docs/HttpService/ServerInfo.d.ts CHANGED Viewed

@@ -5,4 +5,8 @@ interface ServerInfoProps {
     mockUrl?: string;
 }
 export declare const ServerInfo: React.FC<ServerInfoProps>;
+export declare function useSplitUrl(url: string): {
+    kind: 'variable' | 'static';
+    value: string;
+}[];
 export {};

package/components/TryIt/Servers/ServerVariables.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+interface ServerVariablesProps<P extends keyof any = string> {
+    variables: readonly ServerVariable[];
+    values: Record<P, string>;
+    onChangeValue: (variableName: P, newValue: string) => void;
+}
+export declare const ServerVariables: React.FC<ServerVariablesProps>;
+export {};

package/components/TryIt/Servers/VariableEditor.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { SelectProps } from '@stoplight/mosaic';
+import * as React from 'react';
+import { ServerVariable } from '../../../utils/http-spec/IServer';
+interface VariableProps {
+    variable: ServerVariable;
+    value?: string;
+    onChange: SelectProps['onChange'];
+    validate?: boolean;
+}
+export declare const VariableEditor: React.FC<VariableProps>;
+export {};

package/components/TryIt/Servers/useServerVariables.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const useServerVariables: () => {
+    serverVariables: {};
+    updateServerVariableValue: (name: string, value: string) => void;
+};

package/components/TryIt/TryIt.stories.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ declare const _default: Meta<TryItProps>;
 export default _default;
 export declare const SimpleGET: Story<TryItProps>;
 export declare const WithParameters: Story<TryItProps>;
+export declare const WithVariables: Story<TryItProps>;
 export declare const UrlEncoded: Story<TryItProps>;
 export declare const Multipart: Story<TryItProps>;
 export declare const RequestBodySchema: Story<TryItProps>;

package/components/TryIt/TryItWithRequestSamples.stories.d.ts CHANGED Viewed

@@ -3,3 +3,4 @@ import { TryItWithRequestSamplesProps } from './TryItWithRequestSamples';
 declare const _default: Meta<TryItWithRequestSamplesProps>;
 export default _default;
 export declare const WithParameters: Story<TryItWithRequestSamplesProps>;
+export declare const WithVariables: Story<TryItWithRequestSamplesProps>;

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

@@ -7,6 +7,7 @@ interface BuildRequestInput {
     httpOperation: IHttpOperation;
     mediaTypeContent: IMediaTypeContent | undefined;
     parameterValues: Dictionary<string, string>;
+    serverVariableValues: Dictionary<string, string>;
     bodyInput?: BodyParameterValues | string;
     mockData?: MockData;
     auth?: HttpSecuritySchemeWithValues;
@@ -18,7 +19,7 @@ export declare const getQueryParams: ({ httpOperation, parameterValues, }: Pick<
     name: string;
     value: string;
 }[];
-export declare function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials, corsProxy, }: BuildRequestInput): Promise<Parameters<typeof fetch>>;
-export declare function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }: BuildRequestInput): Promise<HarRequest>;
+export declare function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials, corsProxy, }: BuildRequestInput): Promise<Parameters<typeof fetch>>;
+export declare function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }: BuildRequestInput): Promise<HarRequest>;
 export declare function getAcceptedMimeTypes(httpOperation: IHttpOperation): string[];
 export {};

package/index.esm.js CHANGED Viewed

@@ -41,6 +41,9 @@ import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
+import isEmpty from 'lodash/isEmpty.js';
+import isNil from 'lodash/isNil.js';
+import omitBy from 'lodash/omitBy.js';
 import { HashLink } from 'react-router-hash-link';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
 import $RefParser from '@stoplight/json-schema-ref-parser';
@@ -486,15 +489,17 @@ function useChosenServerUrl(chosenServerUrl) {
 const chosenServerAtom = atom(undefined);
 function isValidServer(server) {
-    return server.url !== null && isProperUrl(server.url);
+    return server.url !== null;
 }
-const getServersToDisplay = (originalServers, mockUrl) => {
-    const servers = originalServers
-        .map((server, i) => {
+const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
+    const servers = originalServers.map((server, i) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
-        return Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || fallbackDescription });
-    })
-        .filter(isValidServer);
+        let url = server.url;
+        if (inlineDefaults) {
+            url = getServerUrlWithVariableValues(server, {});
+        }
+        return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
+    });
     if (mockUrl) {
         servers.push({
             id: 'mock',
@@ -502,27 +507,48 @@ const getServersToDisplay = (originalServers, mockUrl) => {
             url: mockUrl,
         });
     }
-    return servers;
+    return servers.filter(isValidServer);
 };
-const getServerUrlWithDefaultValues = (server) => {
+const getServerVariables = (server) => {
     var _a;
-    let urlString = server.url;
-    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
-    variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
-    });
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
+function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI(urlString);
     }
-    catch (_b) {
+    catch (_a) {
         return null;
     }
+    let stringifiedUrl;
     if (url.is('relative') && typeof window !== 'undefined') {
-        url = url.absoluteTo(window.location.origin);
+        stringifiedUrl = url.absoluteTo(window.location.origin).toString();
+    }
+    else {
+        stringifiedUrl = url.toString();
     }
-    const stringifiedUrl = url.toString();
-    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    if (isProperUrl(stringifiedUrl)) {
+        return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    }
+    return null;
+}
+const getServerUrlWithVariableValues = (server, values) => {
+    var _a;
+    let urlString = server.url;
+    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
+    variables.forEach(([variableName, variableInfo]) => {
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
+    });
+    return urlString;
 };
 const persistAtom = (key, atomInstance) => {
@@ -1401,11 +1427,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1482,10 +1508,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1558,10 +1584,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1883,8 +1909,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
+const persistedServerVariableValuesAtom = atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1898,7 +1934,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1908,6 +1944,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React.createElement(Text, { mx: 3 }, ":"),
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+            React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React.createElement(Panel, { defaultIsOpen: true },
+        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) => onChangeValue(variable.name, String(value)) }))))));
+};
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1924,11 +1975,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        const toDisplay = getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
-        return toDisplay;
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -1950,7 +2002,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -1970,6 +2023,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -1987,6 +2041,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2027,6 +2082,7 @@ 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,
+        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,
         React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2538,7 +2594,8 @@ const ServerInfo = ({ servers, mockUrl }) => {
     const mocking = React.useContext(MockingContext);
     const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
     const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
-    const serversToDisplay = getServersToDisplay(servers, $mockUrl);
+    const serversToDisplay = React.useMemo(() => getServersToDisplay(servers, $mockUrl, false), [servers, $mockUrl]);
+    const firstServerVariableIndex = React.useMemo(() => serversToDisplay.findIndex(server => !isEmpty(server.variables)), [serversToDisplay]);
     if (!showMocking && serversToDisplay.length === 0) {
         return null;
     }
@@ -2546,25 +2603,88 @@ const ServerInfo = ({ servers, mockUrl }) => {
         React.createElement(Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full" },
             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, { key: index })))))))));
+                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 })))))))));
 };
-const ServerUrl = ({ id, description, url }) => {
+const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, defaultIsOpen, }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const { onCopy, hasCopied } = useClipboard(url);
+    const urlFragments = useSplitUrl(url);
     const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id });
-    return (React.createElement(Box, { whitespace: "nowrap", pos: "relative" },
-        React.createElement(Text, { pr: 2, fontWeight: "bold" },
-            description,
-            ":"),
-        React.createElement(Tooltip, { placement: "right", renderTrigger: () => React.createElement(Text, { "aria-label": description }, url) },
-            !hasCopied && (React.createElement(Box, { p: 1, onClick: onCopy, cursor: "pointer" },
-                "Copy Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
-            hasCopied && (React.createElement(Box, { p: 1 },
-                "Copied Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
-        React.createElement(NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })));
-};
+    const variablesSchema = useVariablesJSONSchema(variables);
+    const titlePaddingLeft = hasAnyServerVariables && !variablesSchema ? 4 : 0;
+    const handleCopyClick = React.useCallback(e => {
+        e.stopPropagation();
+        onCopy();
+    }, [onCopy]);
+    return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full" },
+        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))))) },
+                !hasCopied && (React.createElement(Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
+                    "Copy Server URL ",
+                    React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
+                hasCopied && (React.createElement(Box, { p: 1 },
+                    "Copied Server URL ",
+                    React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
+            React.createElement(NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })),
+        variablesSchema && (React.createElement(Panel.Content, { w: "full" },
+            React.createElement(Box, { pl: 4 },
+                React.createElement(JsonSchemaViewer, { schema: variablesSchema }))))));
+};
+function useVariablesJSONSchema(variables) {
+    return React.useMemo(() => {
+        if (isEmpty(variables))
+            return;
+        const propertiesPairs = Object.entries(variables).map(([name, variable]) => [
+            name,
+            Object.assign({ type: 'string' }, omitBy({
+                description: variable.description,
+                enum: variable.enum,
+                default: variable.default,
+            }, isNil)),
+        ]);
+        return {
+            type: 'object',
+            properties: Object.fromEntries(propertiesPairs),
+        };
+    }, [variables]);
+}
+function useSplitUrl(url) {
+    return React.useMemo(() => {
+        const curly = /[{}]/g;
+        const fragments = [];
+        let startOffset = 0;
+        let curPos = 0;
+        let match;
+        while ((match = curly.exec(url))) {
+            if (match[0] === '{' || startOffset + 1 === match.index) {
+                startOffset = match.index;
+                continue;
+            }
+            if (startOffset !== curPos) {
+                fragments.push({
+                    kind: 'static',
+                    value: url.slice(curPos, startOffset),
+                });
+            }
+            const variable = url.slice(startOffset, match.index + 1);
+            fragments.push({
+                kind: 'variable',
+                value: variable,
+            });
+            curPos = startOffset + variable.length;
+        }
+        if (curPos < url.length) {
+            fragments.push({
+                kind: 'static',
+                value: url.slice(curPos),
+            });
+        }
+        return fragments;
+    }, [url]);
+}
 const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {}, layoutOptions, exportProps }) => {
     var _a, _b, _c, _d;

package/index.js CHANGED Viewed

@@ -43,6 +43,9 @@ var entries = require('lodash/entries.js');
 var keys = require('lodash/keys.js');
 var jsonSchemaViewer = require('@stoplight/json-schema-viewer');
 var sortBy = require('lodash/sortBy.js');
+var isEmpty = require('lodash/isEmpty.js');
+var isNil = require('lodash/isNil.js');
+var omitBy = require('lodash/omitBy.js');
 var reactRouterHashLink = require('react-router-hash-link');
 var reactQuery = require('react-query');
 var $RefParser = require('@stoplight/json-schema-ref-parser');
@@ -96,6 +99,9 @@ var formatXml__default = /*#__PURE__*/_interopDefaultLegacy(formatXml);
 var entries__default = /*#__PURE__*/_interopDefaultLegacy(entries);
 var keys__default = /*#__PURE__*/_interopDefaultLegacy(keys);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+var isNil__default = /*#__PURE__*/_interopDefaultLegacy(isNil);
+var omitBy__default = /*#__PURE__*/_interopDefaultLegacy(omitBy);
 var $RefParser__default = /*#__PURE__*/_interopDefaultLegacy($RefParser);
 var PropTypes__namespace = /*#__PURE__*/_interopNamespace(PropTypes);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
@@ -539,15 +545,17 @@ function useChosenServerUrl(chosenServerUrl) {
 const chosenServerAtom = jotai.atom(undefined);
 function isValidServer(server) {
-    return server.url !== null && isProperUrl(server.url);
+    return server.url !== null;
 }
-const getServersToDisplay = (originalServers, mockUrl) => {
-    const servers = originalServers
-        .map((server, i) => {
+const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
+    const servers = originalServers.map((server, i) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
-        return Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || fallbackDescription });
-    })
-        .filter(isValidServer);
+        let url = server.url;
+        if (inlineDefaults) {
+            url = getServerUrlWithVariableValues(server, {});
+        }
+        return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
+    });
     if (mockUrl) {
         servers.push({
             id: 'mock',
@@ -555,27 +563,48 @@ const getServersToDisplay = (originalServers, mockUrl) => {
             url: mockUrl,
         });
     }
-    return servers;
+    return servers.filter(isValidServer);
 };
-const getServerUrlWithDefaultValues = (server) => {
+const getServerVariables = (server) => {
     var _a;
-    let urlString = server.url;
-    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
-    variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
-    });
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
+function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI__default["default"](urlString);
     }
-    catch (_b) {
+    catch (_a) {
         return null;
     }
+    let stringifiedUrl;
     if (url.is('relative') && typeof window !== 'undefined') {
-        url = url.absoluteTo(window.location.origin);
+        stringifiedUrl = url.absoluteTo(window.location.origin).toString();
+    }
+    else {
+        stringifiedUrl = url.toString();
     }
-    const stringifiedUrl = url.toString();
-    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    if (isProperUrl(stringifiedUrl)) {
+        return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    }
+    return null;
+}
+const getServerUrlWithVariableValues = (server, values) => {
+    var _a;
+    let urlString = server.url;
+    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
+    variables.forEach(([variableName, variableInfo]) => {
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
+    });
+    return urlString;
 };
 const persistAtom = (key, atomInstance) => {
@@ -1454,11 +1483,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1535,10 +1564,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return tslib.__awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1611,10 +1640,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return tslib.__awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1936,8 +1965,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
+const persistedServerVariableValuesAtom = jotai.atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = jotai.useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1951,7 +1990,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1961,6 +2000,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(mosaic.Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React__namespace.createElement(mosaic.Text, { mx: 3 }, ":"),
+        React__namespace.createElement("div", null, variable.enum ? (React__namespace.createElement(mosaic.Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React__namespace.createElement(mosaic.Flex, { flex: 1 },
+            React__namespace.createElement(mosaic.Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React__namespace.createElement(mosaic.Panel, { defaultIsOpen: true },
+        React__namespace.createElement(mosaic.Panel.Titlebar, null, "Server Variables"),
+        React__namespace.createElement(mosaic.Panel.Content, { className: "sl-overflow-y-auto ParameterGrid ServerVariablesContent" }, variables.map(variable => (React__namespace.createElement(VariableEditor, { key: variable.name, variable: variable, value: values[variable.name], onChange: (value) => onChangeValue(variable.name, String(value)) }))))));
+};
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1977,11 +2031,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React__namespace.useMemo(() => {
-        const toDisplay = getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
-        return toDisplay;
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = jotai.useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -2003,7 +2058,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React__namespace.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -2023,6 +2079,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2040,6 +2097,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2080,6 +2138,7 @@ 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__namespace.createElement(React__namespace.Fragment, null,
         ((_e = httpOperation.security) === null || _e === void 0 ? void 0 : _e.length) ? (React__namespace.createElement(TryItAuth, { onChange: setOperationAuthValue, operationSecurityScheme: (_f = httpOperation.security) !== null && _f !== void 0 ? _f : [], value: operationAuthValue })) : null,
+        serverVariables.length > 0 && (React__namespace.createElement(ServerVariables, { variables: serverVariables, values: serverVariableValues, onChangeValue: updateServerVariableValue })),
         allParameters.length > 0 && (React__namespace.createElement(OperationParameters, { parameters: allParameters, values: parameterValuesWithDefaults, onChangeValue: updateParameterValue, validate: validateParameters })),
         formDataState.isFormDataBody ? (React__namespace.createElement(FormDataBody, { specification: formDataState.bodySpecification, values: bodyParameterValues, onChangeValues: setBodyParameterValues, onChangeParameterAllow: setAllowedEmptyValues, isAllowedEmptyValues: isAllowedEmptyValues })) : mediaTypeContent ? (React__namespace.createElement(RequestBody, { examples: (_g = mediaTypeContent.examples) !== null && _g !== void 0 ? _g : [], requestBody: textRequestBody, onChange: setTextRequestBody })) : null,
         React__namespace.createElement(mosaic.Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2591,7 +2650,8 @@ const ServerInfo = ({ servers, mockUrl }) => {
     const mocking = React__namespace.useContext(MockingContext);
     const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
     const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
-    const serversToDisplay = getServersToDisplay(servers, $mockUrl);
+    const serversToDisplay = React__namespace.useMemo(() => getServersToDisplay(servers, $mockUrl, false), [servers, $mockUrl]);
+    const firstServerVariableIndex = React__namespace.useMemo(() => serversToDisplay.findIndex(server => !isEmpty__default["default"](server.variables)), [serversToDisplay]);
     if (!showMocking && serversToDisplay.length === 0) {
         return null;
     }
@@ -2599,25 +2659,88 @@ const ServerInfo = ({ servers, mockUrl }) => {
         React__namespace.createElement(mosaic.Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full" },
             React__namespace.createElement(mosaic.Panel.Titlebar, { whitespace: "nowrap" }, "API Base URL"),
             React__namespace.createElement(mosaic.Panel.Content, { w: "full", className: "sl-flex sl-flex-col" },
-                React__namespace.createElement(mosaic.VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { key: index })))))))));
+                React__namespace.createElement(mosaic.VStack, { spacing: 1, divider: true }, serversToDisplay.map((server, index) => (React__namespace.createElement(ServerUrl, Object.assign({}, server, { defaultIsOpen: index === firstServerVariableIndex, hasAnyServerVariables: firstServerVariableIndex !== -1, key: server.id })))))))));
 };
-const ServerUrl = ({ id, description, url }) => {
+const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, defaultIsOpen, }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const { onCopy, hasCopied } = mosaic.useClipboard(url);
+    const urlFragments = useSplitUrl(url);
     const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id });
-    return (React__namespace.createElement(mosaic.Box, { whitespace: "nowrap", pos: "relative" },
-        React__namespace.createElement(mosaic.Text, { pr: 2, fontWeight: "bold" },
-            description,
-            ":"),
-        React__namespace.createElement(mosaic.Tooltip, { placement: "right", renderTrigger: () => React__namespace.createElement(mosaic.Text, { "aria-label": description }, url) },
-            !hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1, onClick: onCopy, cursor: "pointer" },
-                "Copy Server URL ",
-                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
-            hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1 },
-                "Copied Server URL ",
-                React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
-        React__namespace.createElement(mosaic.NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })));
-};
+    const variablesSchema = useVariablesJSONSchema(variables);
+    const titlePaddingLeft = hasAnyServerVariables && !variablesSchema ? 4 : 0;
+    const handleCopyClick = React__namespace.useCallback(e => {
+        e.stopPropagation();
+        onCopy();
+    }, [onCopy]);
+    return (React__namespace.createElement(mosaic.Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full" },
+        React__namespace.createElement(mosaic.Panel.Titlebar, { whitespace: "nowrap" },
+            React__namespace.createElement(mosaic.Text, { pl: titlePaddingLeft, pr: 2, fontWeight: "bold" },
+                description,
+                ":"),
+            React__namespace.createElement(mosaic.Tooltip, { placement: "right", renderTrigger: () => (React__namespace.createElement(mosaic.Text, { "aria-label": description }, urlFragments.map(({ kind, value }, i) => (React__namespace.createElement(mosaic.Text, { key: i, fontWeight: kind === 'variable' ? 'semibold' : 'normal' }, value))))) },
+                !hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
+                    "Copy Server URL ",
+                    React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
+                hasCopied && (React__namespace.createElement(mosaic.Box, { p: 1 },
+                    "Copied Server URL ",
+                    React__namespace.createElement(mosaic.Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
+            React__namespace.createElement(mosaic.NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })),
+        variablesSchema && (React__namespace.createElement(mosaic.Panel.Content, { w: "full" },
+            React__namespace.createElement(mosaic.Box, { pl: 4 },
+                React__namespace.createElement(jsonSchemaViewer.JsonSchemaViewer, { schema: variablesSchema }))))));
+};
+function useVariablesJSONSchema(variables) {
+    return React__namespace.useMemo(() => {
+        if (isEmpty__default["default"](variables))
+            return;
+        const propertiesPairs = Object.entries(variables).map(([name, variable]) => [
+            name,
+            Object.assign({ type: 'string' }, omitBy__default["default"]({
+                description: variable.description,
+                enum: variable.enum,
+                default: variable.default,
+            }, isNil__default["default"])),
+        ]);
+        return {
+            type: 'object',
+            properties: Object.fromEntries(propertiesPairs),
+        };
+    }, [variables]);
+}
+function useSplitUrl(url) {
+    return React__namespace.useMemo(() => {
+        const curly = /[{}]/g;
+        const fragments = [];
+        let startOffset = 0;
+        let curPos = 0;
+        let match;
+        while ((match = curly.exec(url))) {
+            if (match[0] === '{' || startOffset + 1 === match.index) {
+                startOffset = match.index;
+                continue;
+            }
+            if (startOffset !== curPos) {
+                fragments.push({
+                    kind: 'static',
+                    value: url.slice(curPos, startOffset),
+                });
+            }
+            const variable = url.slice(startOffset, match.index + 1);
+            fragments.push({
+                kind: 'variable',
+                value: variable,
+            });
+            curPos = startOffset + variable.length;
+        }
+        if (curPos < url.length) {
+            fragments.push({
+                kind: 'static',
+                value: url.slice(curPos),
+            });
+        }
+        return fragments;
+    }, [url]);
+}
 const HttpServiceComponent = React__namespace.memo(({ data: unresolvedData, location = {}, layoutOptions, exportProps }) => {
     var _a, _b, _c, _d;

package/index.mjs CHANGED Viewed

@@ -41,6 +41,9 @@ import entries from 'lodash/entries.js';
 import keys from 'lodash/keys.js';
 import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import sortBy from 'lodash/sortBy.js';
+import isEmpty from 'lodash/isEmpty.js';
+import isNil from 'lodash/isNil.js';
+import omitBy from 'lodash/omitBy.js';
 import { HashLink } from 'react-router-hash-link';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
 import $RefParser from '@stoplight/json-schema-ref-parser';
@@ -486,15 +489,17 @@ function useChosenServerUrl(chosenServerUrl) {
 const chosenServerAtom = atom(undefined);
 function isValidServer(server) {
-    return server.url !== null && isProperUrl(server.url);
+    return server.url !== null;
 }
-const getServersToDisplay = (originalServers, mockUrl) => {
-    const servers = originalServers
-        .map((server, i) => {
+const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
+    const servers = originalServers.map((server, i) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
-        return Object.assign(Object.assign({}, server), { url: getServerUrlWithDefaultValues(server), description: server.description || fallbackDescription });
-    })
-        .filter(isValidServer);
+        let url = server.url;
+        if (inlineDefaults) {
+            url = getServerUrlWithVariableValues(server, {});
+        }
+        return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
+    });
     if (mockUrl) {
         servers.push({
             id: 'mock',
@@ -502,27 +507,48 @@ const getServersToDisplay = (originalServers, mockUrl) => {
             url: mockUrl,
         });
     }
-    return servers;
+    return servers.filter(isValidServer);
 };
-const getServerUrlWithDefaultValues = (server) => {
+const getServerVariables = (server) => {
     var _a;
-    let urlString = server.url;
-    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
-    variables.forEach(([variableName, variableInfo]) => {
-        urlString = urlString.replace(`{${variableName}}`, variableInfo.default);
-    });
+    return Object.entries((_a = server === null || server === void 0 ? void 0 : server.variables) !== null && _a !== void 0 ? _a : {}).map(([key, value]) => ({
+        name: key,
+        default: value.default,
+        description: value.description,
+        enum: value.enum,
+    }));
+};
+function resolveUrl(urlString) {
+    if (urlString === null)
+        return null;
     let url;
     try {
         url = URI(urlString);
     }
-    catch (_b) {
+    catch (_a) {
         return null;
     }
+    let stringifiedUrl;
     if (url.is('relative') && typeof window !== 'undefined') {
-        url = url.absoluteTo(window.location.origin);
+        stringifiedUrl = url.absoluteTo(window.location.origin).toString();
+    }
+    else {
+        stringifiedUrl = url.toString();
     }
-    const stringifiedUrl = url.toString();
-    return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    if (isProperUrl(stringifiedUrl)) {
+        return stringifiedUrl.endsWith('/') ? stringifiedUrl.slice(0, -1) : stringifiedUrl;
+    }
+    return null;
+}
+const getServerUrlWithVariableValues = (server, values) => {
+    var _a;
+    let urlString = server.url;
+    const variables = Object.entries((_a = server.variables) !== null && _a !== void 0 ? _a : {});
+    variables.forEach(([variableName, variableInfo]) => {
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
+    });
+    return urlString;
 };
 const persistAtom = (key, atomInstance) => {
@@ -1401,11 +1427,11 @@ const useTextRequestBodyState = (mediaTypeContent) => {
 };
 const nameAndValueObjectToPair = ({ name, value }) => [name, value];
-const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, }) => {
+const getServerUrl = ({ chosenServer, httpOperation, mockData, corsProxy, serverVariableValues, }) => {
     var _a;
     const server = chosenServer || ((_a = httpOperation.servers) === null || _a === void 0 ? void 0 : _a[0]);
-    const chosenServerUrl = server && getServerUrlWithDefaultValues(server);
-    const serverUrl = (mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin;
+    const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
+    const serverUrl = resolveUrl((mockData === null || mockData === void 0 ? void 0 : mockData.url) || chosenServerUrl || window.location.origin);
     if (corsProxy && !mockData) {
         return `${corsProxy}${serverUrl}`;
     }
@@ -1482,10 +1508,10 @@ const getQueryParams = ({ httpOperation, parameterValues, }) => {
         return acc;
     }, []);
 };
-function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
+function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, parameterValues, serverVariableValues, mockData, auth, chosenServer, credentials = 'omit', corsProxy, }) {
     var _a, _b, _c;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
         const rawHeaders = filterOutAuthorizationParams((_b = (_a = httpOperation.request) === null || _a === void 0 ? void 0 : _a.headers) !== null && _b !== void 0 ? _b : [], httpOperation.security)
@@ -1558,10 +1584,10 @@ const runAuthRequestEhancements = (auth, queryParams, headers) => {
     }
     return [newQueryParams, newHeaders];
 };
-function buildHarRequest({ httpOperation, bodyInput, parameterValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
+function buildHarRequest({ httpOperation, bodyInput, parameterValues, serverVariableValues, mediaTypeContent, auth, mockData, chosenServer, corsProxy, }) {
     var _a, _b, _c, _d;
     return __awaiter(this, void 0, void 0, function* () {
-        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy });
+        const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
         const mimeType = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _a !== void 0 ? _a : 'application/json';
         const shouldIncludeBody = ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
         const queryParams = getQueryParams({ httpOperation, parameterValues });
@@ -1883,8 +1909,18 @@ class NetworkError extends Error {
 }
 const isNetworkError = (error) => error instanceof NetworkError;
+const persistedServerVariableValuesAtom = atom({});
+const useServerVariables = () => {
+    const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
+    const updateServerVariableValue = (name, value) => {
+        setPersistedServerVariableValues(Object.assign({}, serverVariables, { [name]: value }));
+    };
+    return { serverVariables, updateServerVariableValue };
+};
 const ServersDropdown = ({ servers }) => {
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const { serverVariables } = useServerVariables();
     const serverItems = [
         {
             type: 'option_group',
@@ -1898,7 +1934,7 @@ const ServersDropdown = ({ servers }) => {
                 ...servers.map((server, i) => ({
                     id: server.url,
                     title: server.description,
-                    description: server.url,
+                    description: getServerUrlWithVariableValues(server, serverVariables),
                     value: server.url,
                 })),
             ],
@@ -1908,6 +1944,21 @@ const ServersDropdown = ({ servers }) => {
 };
 ServersDropdown.displayName = 'ServersDropdown';
+const VariableEditor = ({ variable, value, onChange }) => {
+    const inputId = useUniqueId(`id_${variable.name}_`);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { as: "label", "aria-hidden": "true", "data-testid": "param-label", htmlFor: inputId, fontSize: "base" }, variable.name),
+        React.createElement(Text, { mx: 3 }, ":"),
+        React.createElement("div", null, variable.enum ? (React.createElement(Select, { flex: 1, "aria-label": variable.name, options: variable.enum.map(s => ({ value: s })), value: value || variable.default, onChange: onChange })) : (React.createElement(Flex, { flex: 1 },
+            React.createElement(Input, { id: inputId, "aria-label": variable.name, appearance: 'minimal', flex: 1, placeholder: variable.default, type: "text", required: true, intent: 'default', value: value || '', onChange: e => onChange && onChange(e.currentTarget.value) }))))));
+};
+const ServerVariables = ({ variables, values, onChangeValue }) => {
+    return (React.createElement(Panel, { defaultIsOpen: true },
+        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) => onChangeValue(variable.name, String(value)) }))))));
+};
 const defaultServers = [];
 const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embeddedInMd = false, tryItCredentialsPolicy, corsProxy, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1924,11 +1975,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        const toDisplay = getServersToDisplay(httpOperation.servers || defaultServers, mockUrl);
-        return toDisplay;
+        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
     }, [httpOperation.servers, mockUrl]);
     const firstServer = servers[0] || null;
     const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
+    const serverVariables = getServerVariables(chosenServer);
+    const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
     const isMockingEnabled = mockUrl && (chosenServer === null || chosenServer === void 0 ? void 0 : chosenServer.url) === mockUrl;
     const hasRequiredButEmptyParameters = allParameters.some(parameter => parameter.required && !parameterValuesWithDefaults[parameter.name]);
     const getValues = () => Object.keys(bodyParameterValues)
@@ -1950,7 +2002,8 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     React.useEffect(() => {
         let isMounted = true;
         if (onRequestChange || embeddedInMd) {
-            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
+            buildHarRequest(Object.assign(Object.assign({ mediaTypeContent, parameterValues: parameterValuesWithDefaults, serverVariableValues,
+                httpOperation, bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody, auth: operationAuthValue }, (isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) })), { chosenServer,
                 corsProxy })).then(request => {
                 if (isMounted) {
                     if (onRequestChange) {
@@ -1970,6 +2023,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -1987,6 +2041,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
             const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
             const request = yield buildFetchRequest({
                 parameterValues: parameterValuesWithDefaults,
+                serverVariableValues,
                 httpOperation,
                 mediaTypeContent,
                 bodyInput: formDataState.isFormDataBody ? getValues() : textRequestBody,
@@ -2027,6 +2082,7 @@ 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,
+        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,
         React.createElement(Panel.Content, { className: "SendButtonHolder", mt: 4, pt: !isOnlySendButton && !embeddedInMd ? 0 : undefined },
@@ -2538,7 +2594,8 @@ const ServerInfo = ({ servers, mockUrl }) => {
     const mocking = React.useContext(MockingContext);
     const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
     const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
-    const serversToDisplay = getServersToDisplay(servers, $mockUrl);
+    const serversToDisplay = React.useMemo(() => getServersToDisplay(servers, $mockUrl, false), [servers, $mockUrl]);
+    const firstServerVariableIndex = React.useMemo(() => serversToDisplay.findIndex(server => !isEmpty(server.variables)), [serversToDisplay]);
     if (!showMocking && serversToDisplay.length === 0) {
         return null;
     }
@@ -2546,25 +2603,88 @@ const ServerInfo = ({ servers, mockUrl }) => {
         React.createElement(Panel, { rounded: true, isCollapsible: false, className: "BaseURLContent", w: "full" },
             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, { key: index })))))))));
+                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 })))))))));
 };
-const ServerUrl = ({ id, description, url }) => {
+const ServerUrl = ({ id, description, url, variables, hasAnyServerVariables, defaultIsOpen, }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const { onCopy, hasCopied } = useClipboard(url);
+    const urlFragments = useSplitUrl(url);
     const hasChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: id });
-    return (React.createElement(Box, { whitespace: "nowrap", pos: "relative" },
-        React.createElement(Text, { pr: 2, fontWeight: "bold" },
-            description,
-            ":"),
-        React.createElement(Tooltip, { placement: "right", renderTrigger: () => React.createElement(Text, { "aria-label": description }, url) },
-            !hasCopied && (React.createElement(Box, { p: 1, onClick: onCopy, cursor: "pointer" },
-                "Copy Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
-            hasCopied && (React.createElement(Box, { p: 1 },
-                "Copied Server URL ",
-                React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
-        React.createElement(NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })));
-};
+    const variablesSchema = useVariablesJSONSchema(variables);
+    const titlePaddingLeft = hasAnyServerVariables && !variablesSchema ? 4 : 0;
+    const handleCopyClick = React.useCallback(e => {
+        e.stopPropagation();
+        onCopy();
+    }, [onCopy]);
+    return (React.createElement(Panel, { isCollapsible: !!variablesSchema, defaultIsOpen: defaultIsOpen, w: "full" },
+        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))))) },
+                !hasCopied && (React.createElement(Box, { p: 1, onClick: handleCopyClick, cursor: "pointer" },
+                    "Copy Server URL ",
+                    React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'copy'] }))),
+                hasCopied && (React.createElement(Box, { p: 1 },
+                    "Copied Server URL ",
+                    React.createElement(Icon, { className: "sl-ml-1", icon: ['fas', 'check'] })))),
+            React.createElement(NodeAnnotation, { change: hasChanged, additionalLeftOffset: 16 })),
+        variablesSchema && (React.createElement(Panel.Content, { w: "full" },
+            React.createElement(Box, { pl: 4 },
+                React.createElement(JsonSchemaViewer, { schema: variablesSchema }))))));
+};
+function useVariablesJSONSchema(variables) {
+    return React.useMemo(() => {
+        if (isEmpty(variables))
+            return;
+        const propertiesPairs = Object.entries(variables).map(([name, variable]) => [
+            name,
+            Object.assign({ type: 'string' }, omitBy({
+                description: variable.description,
+                enum: variable.enum,
+                default: variable.default,
+            }, isNil)),
+        ]);
+        return {
+            type: 'object',
+            properties: Object.fromEntries(propertiesPairs),
+        };
+    }, [variables]);
+}
+function useSplitUrl(url) {
+    return React.useMemo(() => {
+        const curly = /[{}]/g;
+        const fragments = [];
+        let startOffset = 0;
+        let curPos = 0;
+        let match;
+        while ((match = curly.exec(url))) {
+            if (match[0] === '{' || startOffset + 1 === match.index) {
+                startOffset = match.index;
+                continue;
+            }
+            if (startOffset !== curPos) {
+                fragments.push({
+                    kind: 'static',
+                    value: url.slice(curPos, startOffset),
+                });
+            }
+            const variable = url.slice(startOffset, match.index + 1);
+            fragments.push({
+                kind: 'variable',
+                value: variable,
+            });
+            curPos = startOffset + variable.length;
+        }
+        if (curPos < url.length) {
+            fragments.push({
+                kind: 'static',
+                value: url.slice(curPos),
+            });
+        }
+        return fragments;
+    }, [url]);
+}
 const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {}, layoutOptions, exportProps }) => {
     var _a, _b, _c, _d;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.21",
+  "version": "7.9.0",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",

package/utils/http-spec/IServer.d.ts CHANGED Viewed

@@ -1,3 +1,9 @@
-import type { IServer } from '@stoplight/types';
-export declare const getServersToDisplay: (originalServers: IServer[], mockUrl?: string) => IServer[];
-export declare const getServerUrlWithDefaultValues: (server: IServer) => string | null;
+import type { Dictionary, INodeVariable, IServer } from '@stoplight/types';
+export declare type ServerVariable = INodeVariable & {
+    name: string;
+};
+export declare const getServersToDisplay: (originalServers: IServer[], mockUrl: string | undefined, inlineDefaults: boolean) => IServer[];
+export declare const getServerVariables: (server?: IServer | null) => ServerVariable[];
+export declare const getServerVariableDefaults: (server: IServer) => Record<string, string>;
+export declare function resolveUrl(urlString: string | null): string | null;
+export declare const getServerUrlWithVariableValues: (server: IServer, values: Dictionary<string, string>) => string;