@stoplight/elements-core 7.8.0 → 7.9.0

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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -16,7 +16,6 @@ export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
-import isEmpty from 'lodash/isEmpty.js';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
@@ -42,6 +41,7 @@ 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';
@@ -496,10 +496,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty(server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -512,7 +509,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    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);
@@ -532,14 +540,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+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]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1418,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}`;
     }
@@ -1499,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)
@@ -1575,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 });
@@ -1900,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',
@@ -1915,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,
                 })),
             ],
@@ -1925,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;
@@ -1941,10 +1975,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        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)
@@ -1966,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) {
@@ -1986,6 +2023,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2003,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,
@@ -2043,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 },

package/index.js

@@ -18,7 +18,6 @@ var markdownViewer = require('@stoplight/markdown-viewer');
 var cn = require('classnames');
 var utils = require('jotai/utils');
 var jotai = require('jotai');
-var isEmpty = require('lodash/isEmpty.js');
 var URI = require('urijs');
 var mosaicCodeViewer = require('@stoplight/mosaic-code-viewer');
 var httpsnippetLite = require('httpsnippet-lite');
@@ -44,6 +43,7 @@ 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');
@@ -79,7 +79,6 @@ var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var URI__default = /*#__PURE__*/_interopDefaultLegacy(URI);
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 var capitalize__default = /*#__PURE__*/_interopDefaultLegacy(capitalize);
@@ -100,6 +99,7 @@ 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);
@@ -552,10 +552,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty__default["default"](server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -568,7 +565,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    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);
@@ -588,14 +596,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+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]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1474,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}`;
     }
@@ -1555,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)
@@ -1631,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 });
@@ -1956,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',
@@ -1971,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,
                 })),
             ],
@@ -1981,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;
@@ -1997,10 +2031,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React__namespace.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        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)
@@ -2022,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) {
@@ -2042,6 +2079,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2059,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,
@@ -2099,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 },

package/index.mjs

@@ -16,7 +16,6 @@ export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import cn from 'classnames';
 import { atomWithStorage, useAtomValue } from 'jotai/utils';
 import { atom, useAtom, Provider } from 'jotai';
-import isEmpty from 'lodash/isEmpty.js';
 import URI from 'urijs';
 import { CodeViewer } from '@stoplight/mosaic-code-viewer';
 import { isValidTargetId, HTTPSnippet } from 'httpsnippet-lite';
@@ -42,6 +41,7 @@ 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';
@@ -496,10 +496,7 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
         const fallbackDescription = originalServers.length === 1 ? 'Live Server' : `Server ${i + 1}`;
         let url = server.url;
         if (inlineDefaults) {
-            url = getServerUrlWithDefaultValues(server);
-        }
-        else if (isEmpty(server.variables)) {
-            url = resolveUrl(server.url);
+            url = getServerUrlWithVariableValues(server, {});
         }
         return Object.assign(Object.assign({}, server), { url, description: server.description || fallbackDescription });
     });
@@ -512,7 +509,18 @@ const getServersToDisplay = (originalServers, mockUrl, inlineDefaults) => {
     }
     return servers.filter(isValidServer);
 };
+const getServerVariables = (server) => {
+    var _a;
+    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);
@@ -532,14 +540,15 @@ function resolveUrl(urlString) {
     }
     return null;
 }
-const getServerUrlWithDefaultValues = (server) => {
+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]) => {
-        urlString = urlString.replaceAll(`{${variableName}}`, variableInfo.default);
+        var _a;
+        urlString = urlString.replaceAll(`{${variableName}}`, (_a = values[variableName]) !== null && _a !== void 0 ? _a : variableInfo.default);
     });
-    return resolveUrl(urlString);
+    return urlString;
 };
 
 const persistAtom = (key, atomInstance) => {
@@ -1418,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}`;
     }
@@ -1499,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)
@@ -1575,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 });
@@ -1900,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',
@@ -1915,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,
                 })),
             ],
@@ -1925,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;
@@ -1941,10 +1975,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
     const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
     const [operationAuthValue, setOperationAuthValue] = usePersistedSecuritySchemeWithValues();
     const servers = React.useMemo(() => {
-        return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, true);
+        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)
@@ -1966,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) {
@@ -1986,6 +2023,7 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         parameterValuesWithDefaults,
         formDataState.isFormDataBody,
         bodyParameterValues,
+        serverVariableValues,
         isAllowedEmptyValues,
         textRequestBody,
         operationAuthValue,
@@ -2003,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,
@@ -2043,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 },

package/package.json

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

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

@@ -1,3 +1,9 @@
-import type { IServer } from '@stoplight/types';
+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 getServerUrlWithDefaultValues: (server: IServer) => string | null;
+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;