BBL-164

- implemented Ability to select url and change console request path.
- reDesigned url selection DropDown.

src/components/Endpoint/Endpoint.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ShelfIcon } from '../../common-elements';
-import { OperationModel } from '../../services';
+import { ClipboardService, OperationModel } from '../../services';
 import { Markdown } from '../Markdown/Markdown';
 import { OptionsContext } from '../OptionsProvider';
 import { SelectOnClick } from '../SelectOnClick/SelectOnClick';
@@ -21,10 +21,13 @@ export interface EndpointProps {
 
   hideHostname?: boolean;
   inverted?: boolean;
+  handleUrl: any;
 }
 
 export interface EndpointState {
   expanded: boolean;
+  selectedItem: number;
+  tooltipShown: boolean;
 }
 
 export class Endpoint extends React.Component<EndpointProps, EndpointState> {
@@ -32,6 +35,8 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
     super(props);
     this.state = {
       expanded: false,
+      selectedItem: 0,
+      tooltipShown: false,
     };
   }
 
@@ -48,6 +53,9 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
       <OptionsContext.Consumer>
         {options => (
           <OperationEndpointWrap>
+            <div className={this.state.tooltipShown === true ? 'showToolTip' : 'hideToolTip'}>
+              Copied
+            </div>
             <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
               <HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
               <ServerRelativeURL>{operation.path}</ServerRelativeURL>
@@ -60,11 +68,11 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
               />
             </EndpointInfo>
             <ServersOverlay expanded={expanded}>
-              {operation.servers.map(server => {
+              {operation.servers.map((server, index) => {
                 return (
-                  <ServerItem key={server.url}>
+                  <ServerItem className={this.state.selectedItem === index ? 'selected' : ''} key={server.url}>
-                    <Markdown source={server.description || ''} compact={true} />
+                    <Markdown onSelectUrl={this.handleUrl.bind(this, index)} source={server.description || ''} compact={true} />
-                    <SelectOnClick>
+                    <SelectOnClick onSelectUrl={this.handleUrl.bind(this, index)}>
                       <ServerUrl>
                         <span>
                           {hideHostname || options.hideHostname
@@ -83,4 +91,19 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
       </OptionsContext.Consumer>
     );
   }
+
+  handleUrl(url: number) {
+    this.props.handleUrl(url);
+    this.setState({
+      selectedItem: url,
+      expanded: false,
+      tooltipShown: true,
+    });
+    ClipboardService.copyCustom(this.props.operation.servers[url].url + this.props.operation.path);
+    setTimeout(() => {
+      this.setState({
+        tooltipShown: false,
+      });
+    }, 1000);
+  }
 }

src/components/Endpoint/styled.elements.ts

@@ -4,6 +4,26 @@ export const OperationEndpointWrap = styled.div`
   cursor: pointer;
   position: relative;
   margin-bottom: 5px;
+  .showToolTip {
+    visibility: initial;
+    background-color: white;
+    color: black;
+    padding: 3px;
+    position: initial;
+    width: 53px;
+    text-align: center;
+    margin-bottom: 10px;
+    border-radius: 4px;
+  };
+  .hideToolTip {
+    visibility:hidden;
+    padding: 3px;
+    position: initial;
+    width: 53px;
+    text-align: center;
+    margin-bottom: 10px;
+    border-radius: 4px;
+  }
 `;
 
 export const ServerRelativeURL = styled.span`
@@ -66,16 +86,28 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
 
 export const ServerItem = styled.div`
   padding: 10px;
+  background-color: #002c2d;
+  color: white;
+  display: flex;
+  flex-wrap: nowrap;
+  &.selected {
+      background-color: #3c7173;
+  }
+  div:first-child {
+      width: 20%;
+      padding-top: 5px;
+      }
 `;
 
 export const ServerUrl = styled.div`
   text-align: left;
-  padding: 5px;
+  user-select: none;
-  border: 1px solid #ccc;
+  padding: 5px !important;
-  background: #fff;
+  background-color: #ffffff33;
   word-break: break-all;
-  color: ${props => props.theme.colors.primary.main};
+  width: 100% !important;
+  color: #00ff1c;
   > span {
-    color: ${props => props.theme.colors.text.primary};
+    color: white;
   };
 `;

src/components/Markdown/Markdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { MarkdownRenderer } from '../../services';
+import styled from '../../styled-components';
 import { SanitizedMarkdownHTML } from './SanitizedMdBlock';
 
 export interface StylingMarkdownProps {
@@ -17,19 +18,31 @@ export type MarkdownProps = BaseMarkdownProps &
   StylingMarkdownProps & {
     source: string;
     className?: string;
+    onSelectUrl?: any;
   };
 
 export class Markdown extends React.Component<MarkdownProps> {
+  handleClick = () => {
+    this.props.onSelectUrl();
+  };
   render() {
     const { source, inline, compact, className } = this.props;
     const renderer = new MarkdownRenderer();
     return (
-      <SanitizedMarkdownHTML
+      <MarkWrapper onClick={this.handleClick}>
-        html={renderer.renderMd(source)}
+        <SanitizedMarkdownHTML
-        inline={inline}
+          html={renderer.renderMd(source)}
-        compact={compact}
+          inline={inline}
-        className={className}
+          compact={compact}
-      />
+          className={className}
+        />
+      </MarkWrapper>
     );
   }
 }
+const MarkWrapper = styled.div`
+  div {
+    width: 100% !important;
+    padding-top: 0 !important;
+  }
+`;

src/components/Operation/Operation.tsx

@@ -38,6 +38,7 @@ export interface OperationProps {
 
 export interface OperationState {
   executeMode: boolean;
+  urlIndex: number;
 }
 
 @observer
@@ -47,6 +48,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
     super(props);
     this.state = {
       executeMode: false,
+      urlIndex: 0,
     };
   }
 
@@ -78,7 +80,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
                   <ConsoleButton onClick={this.onConsoleClick}>{consoleButtonLabel}</ConsoleButton>
                 </FlexLayoutReverse>
               }
-              {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
+              {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true}  handleUrl={this.onUrlChanged}/>}
               {hasDescription && (
                 <Description>
                   {description !== undefined && <Markdown source={description} />}
@@ -91,10 +93,10 @@ export class Operation extends React.Component<OperationProps, OperationState> {
               <ResponsesList responses={operation.responses} />
             </MiddlePanel>
             <DarkRightPanel>
-              {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
+              {!options.pathInMiddlePanel && <Endpoint operation={operation}  handleUrl={this.onUrlChanged}/>}
               {executeMode &&
                 <div>
-                  <ConsoleViewer operation={operation} additionalHeaders={options.additionalHeaders} queryParamPrefix={options.queryParamPrefix} queryParamSuffix={options.queryParamSuffix} />
+                  <ConsoleViewer urlIndex={this.state.urlIndex} operation={operation} additionalHeaders={options.additionalHeaders} queryParamPrefix={options.queryParamPrefix} queryParamSuffix={options.queryParamSuffix} />
                 </div>
               }
               {!executeMode &&
@@ -109,4 +111,9 @@ export class Operation extends React.Component<OperationProps, OperationState> {
       </OptionsContext.Consumer>
     );
   }
+  onUrlChanged = (index= 0) => {
+    this.setState({
+      urlIndex: index,
+    });
+  }
 }

src/components/SelectOnClick/SelectOnClick.tsx

@@ -1,19 +1,28 @@
 import * as React from 'react';
 
 import { ClipboardService } from '../../services';
+import styled from '../../styled-components';
 
-export class SelectOnClick extends React.PureComponent {
+interface SelectOnClickProps {
+  onSelectUrl: () => void;
+}
+
+export class SelectOnClick extends React.PureComponent<SelectOnClickProps> {
   private child: HTMLDivElement | null;
   handleClick = () => {
     ClipboardService.selectElement(this.child);
+    this.props.onSelectUrl();
   };
 
   render() {
     const { children } = this.props;
     return (
-      <div ref={el => (this.child = el)} onClick={this.handleClick}>
+      <SelectArea ref={el => (this.child = el)} onClick={this.handleClick.bind(this, children)}>
         {children}
-      </div>
+      </SelectArea>
     );
   }
 }
+const SelectArea = styled.div`
+  width: 80%;
+`;