Implement hideHostname option

src/components/Endpoint/Endpoint.tsx

@@ -1,3 +1,4 @@
+import { ComponentWithOptions } from '../OptionsProvider';
 import * as React from 'react';
 import { OperationModel } from '../../services';
 import { ShelfIcon } from '../../common-elements';
@@ -15,13 +16,15 @@ import {
 
 export interface EndpointProps {
   operation: OperationModel;
+
+  hideHostname?: boolean;
 }
 
 export interface EndpointState {
   expanded: boolean;
 }
 
-export class Endpoint extends React.PureComponent<EndpointProps, EndpointState> {
+export class Endpoint extends ComponentWithOptions<EndpointProps, EndpointState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -37,6 +40,8 @@ export class Endpoint extends React.PureComponent<EndpointProps, EndpointState>
     const { operation } = this.props;
     const { expanded } = this.state;
 
+    const hideHostname = this.props.hideHostname || this.options.hideHostname;
+
     // TODO: highlight server variables, e.g. https://{user}.test.com
     return (
       <OperationEndpointWrap>
@@ -57,7 +62,7 @@ export class Endpoint extends React.PureComponent<EndpointProps, EndpointState>
               <div>{server.description}</div>
               <SelectOnClick>
                 <ServerUrl>
-                  <span>{server.url}</span>
+                  {!hideHostname && <span>{server.url}</span>}
                   {operation.path}
                 </ServerUrl>
               </SelectOnClick>

src/components/OptionsProvider.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 
-import { RedocNormalizedOptions } from '../services/RedocNormalizedOptions';
-import { ThemeInterface } from '../theme';
-
-export interface RedocRawOptions {
-  theme?: ThemeInterface;
-  scrollYOffset?: number | string | Function;
-}
+import { RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormalizedOptions';
 
 export interface OptionsProviderProps {
   options: RedocRawOptions;

src/components/Redoc/Redoc.tsx

@@ -9,8 +9,9 @@ import { ApiLogo } from '../ApiLogo/ApiLogo';
 import { SideMenu } from '../SideMenu/SideMenu';
 import { ContentItems } from '../ContentItems/ContentItems';
 import { AppStore } from '../../services';
-import { OptionsProvider, RedocRawOptions } from '../OptionsProvider';
+import { OptionsProvider } from '../OptionsProvider';
 import { StickySidebar } from '../StickySidebar/StickySidebar';
+import { RedocRawOptions } from '../../services/RedocNormalizedOptions';
 
 import defaultTheme from '../../theme';
 

src/components/StickySidebar/StickySidebar.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Stickyfill from 'stickyfill';
 
-import { ComponentWithOptions, RedocRawOptions } from '../OptionsProvider';
-import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
+import { ComponentWithOptions } from '../OptionsProvider';
+import { RedocNormalizedOptions, RedocRawOptions } from '../../services/RedocNormalizedOptions';
 import styled from '../../styled-components';
 
 export interface StickySidebarProps {

src/services/RedocNormalizedOptions.ts

@@ -1,13 +1,24 @@
-import { RedocRawOptions } from '../components/OptionsProvider';
 import { ThemeInterface } from '../theme';
 import { isNumeric } from '../utils/helpers';
 
+export interface RedocRawOptions {
+  theme?: ThemeInterface;
+  scrollYOffset?: number | string | Function;
+  hideHostname?: boolean | string;
+}
+
 export class RedocNormalizedOptions {
   theme: ThemeInterface;
   scrollYOffset: () => number;
+  hideHostname: boolean;
 
   constructor(raw: RedocRawOptions) {
     this.scrollYOffset = RedocNormalizedOptions.normalizeScrollYOffset(raw.scrollYOffset);
+    this.hideHostname = RedocNormalizedOptions.normalizeHideHostname(raw.hideHostname);
+  }
+
+  static normalizeHideHostname(value: RedocRawOptions['hideHostname']): boolean {
+    return !!value;
   }
 
   static normalizeScrollYOffset(value: RedocRawOptions['scrollYOffset']): () => number {