fix(server/variables/default/expanding):

src/components/Endpoint/Endpoint.tsx

@@ -5,7 +5,7 @@ import { Markdown } from '../Markdown/Markdown';
 import { OptionsContext } from '../OptionsProvider';
 import { SelectOnClick } from '../SelectOnClick/SelectOnClick';
 
-import { getBasePath } from '../../utils';
+import { expandDefaultServerVariables, getBasePath } from '../../utils';
 import {
   EndpointInfo,
   HttpVerb,
@@ -61,15 +61,18 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
             </EndpointInfo>
             <ServersOverlay expanded={expanded}>
               {operation.servers.map(server => {
+                const normalizedUrl = options.expandDefaultServerVariables
+                  ? expandDefaultServerVariables(server.url, server.variables)
+                  : server.url;
                 return (
-                  <ServerItem key={server.url}>
+                  <ServerItem key={normalizedUrl}>
                     <Markdown source={server.description || ''} compact={true} />
                     <SelectOnClick>
                       <ServerUrl>
                         <span>
                           {hideHostname || options.hideHostname
-                            ? getBasePath(server.url)
-                            : server.url}
+                            ? getBasePath(normalizedUrl)
+                            : normalizedUrl}
                         </span>
                         {operation.path}
                       </ServerUrl>

src/components/Schema/Schema.tsx

@@ -44,9 +44,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
     if (discriminatorProp !== undefined) {
       if (!oneOf || !oneOf.length) {
         throw new Error(
-          `Looks like you are using discriminator wrong: you don't have any definition inherited from the ${
-            schema.title
-          }`,
+          `Looks like you are using discriminator wrong: you don't have any definition inherited from the ${schema.title}`,
         );
       }
       return (
@@ -66,9 +64,9 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
 
     switch (type) {
       case 'object':
-        return <ObjectSchema {...this.props as any} />;
+        return <ObjectSchema {...(this.props as any)} />;
       case 'array':
-        return <ArraySchema {...this.props as any} />;
+        return <ArraySchema {...(this.props as any)} />;
     }
 
     // TODO: maybe adjust FieldDetails to accept schema

src/services/RedocNormalizedOptions.ts

@@ -30,7 +30,10 @@ export interface RedocRawOptions {
   allowedMdComponents?: Dict<MDXComponentMeta>;
 
   labels?: LabelsConfigRaw;
+
   enumSkipQuotes?: boolean | string;
+
+  expandDefaultServerVariables?: boolean;
 }
 
 function argValueToBoolean(val?: string | boolean): boolean {
@@ -146,6 +149,8 @@ export class RedocNormalizedOptions {
   unstable_ignoreMimeParameters: boolean;
   allowedMdComponents: Dict<MDXComponentMeta>;
 
+  expandDefaultServerVariables: boolean;
+
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
     const hook = raw.theme && raw.theme.extensionsHook;
@@ -181,5 +186,7 @@ export class RedocNormalizedOptions {
     this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);
 
     this.allowedMdComponents = raw.allowedMdComponents || {};
+
+    this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables);
   }
 }

src/utils/__tests__/openapi.test.ts

@@ -13,6 +13,7 @@ import {
 
 import { FieldModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
 import { OpenAPIParameter, OpenAPIParameterLocation, OpenAPIParameterStyle } from '../../types';
+import { expandDefaultServerVariables } from '../openapi';
 
 describe('Utils', () => {
   describe('openapi getStatusCode', () => {
@@ -293,6 +294,39 @@ describe('Utils', () => {
       ]);
       expect(res).toEqual([{ url: 'https://base.com/sandbox/test', description: 'test' }]);
     });
+
+    it('should expand variables', () => {
+      const servers = normalizeServers('', [
+        {
+          url: 'http://{host}{basePath}',
+          variables: {
+            host: {
+              default: '127.0.0.1',
+            },
+            basePath: {
+              default: '/path/to/endpoint',
+            },
+          },
+        },
+        {
+          url: 'http://127.0.0.2:{port}',
+          variables: {},
+        },
+        {
+          url: 'http://127.0.0.3',
+        },
+      ]);
+
+      expect(expandDefaultServerVariables(servers[0].url, servers[0].variables)).toEqual(
+        'http://127.0.0.1/path/to/endpoint',
+      );
+      expect(expandDefaultServerVariables(servers[1].url, servers[1].variables)).toEqual(
+        'http://127.0.0.2:{port}',
+      );
+      expect(expandDefaultServerVariables(servers[2].url, servers[2].variables)).toEqual(
+        'http://127.0.0.3',
+      );
+    });
   });
 
   describe('openapi humanizeConstraints', () => {
@@ -516,9 +550,7 @@ describe('Utils', () => {
         locationTestGroup.cases.forEach(valueTypeTestGroup => {
           describe(valueTypeTestGroup.description, () => {
             valueTypeTestGroup.cases.forEach(testCase => {
-              it(`should serialize correctly when style is ${testCase.style} and explode is ${
-                testCase.explode
-              }`, () => {
+              it(`should serialize correctly when style is ${testCase.style} and explode is ${testCase.explode}`, () => {
                 const parameter: OpenAPIParameter = {
                   name: locationTestGroup.name,
                   in: locationTestGroup.location,

src/utils/openapi.ts

@@ -487,6 +487,13 @@ export function mergeSimilarMediaTypes(types: Dict<OpenAPIMediaType>): Dict<Open
   return mergedTypes;
 }
 
+export function expandDefaultServerVariables(url: string, variables: object = {}) {
+  return url.replace(
+    /(?:{)(\w+)(?:})/g,
+    (match, name) => (variables[name] && variables[name].default) || match,
+  );
+}
+
 export function normalizeServers(
   specUrl: string | undefined,
   servers: OpenAPIServer[],