feat(core): support markdown in tooltips and popovers (#4985)

spinnaker · Mar 12, 2018 · 58d1527 · 58d1527
1 parent 53395ac
commit 58d1527
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html b/app/scripts/modules/core/src/pipeline/config/triggers/triggers.html
@@ -76,7 +76,7 @@
         <textarea class="form-control"
                   ng-model="pipeline.description"
                   rows="3"
-                  placeholder="(Optional) anything that might be helpful to explain the purpose of this pipeline"></textarea>
+                  placeholder="(Optional) anything that might be helpful to explain the purpose of this pipeline; Markdown is okay"></textarea>
       </div>
     </div>
   </page-section>

diff --git a/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroup.tsx b/app/scripts/modules/core/src/pipeline/executions/executionGroup/ExecutionGroup.tsx
@@ -10,7 +10,8 @@ import { Application } from 'core/application/application.model';
 import { Execution } from '../execution/Execution';
 import { IExecution, IExecutionGroup, IExecutionTrigger, IPipeline, IPipelineCommand } from 'core/domain';
 import { NextRunTag } from 'core/pipeline/triggers/NextRunTag';
-import { Tooltip } from 'core/presentation/Tooltip';
+import { Popover } from 'core/presentation/Popover';
+
 import { TriggersTag } from 'core/pipeline/triggers/TriggersTag';
 import { AccountTag } from 'core/account';
 import { ReactInjector } from 'core/reactShims';
@@ -200,7 +201,7 @@ export class ExecutionGroup extends React.Component<IExecutionGroupProps, IExecu
                 <h4 className="execution-group-title">
                   {group.fromTemplate && <i className="from-template fa fa-table" title="Pipeline from template" />}
                   {group.heading}
-                  {pipelineDescription && <span> <Tooltip value={pipelineDescription}><span className="glyphicon glyphicon-info-sign"/></Tooltip></span>}
+                  {pipelineDescription && <span> <Popover value={pipelineDescription}><span className="glyphicon glyphicon-info-sign"/></Popover></span>}
                   {pipelineDisabled && <span> (disabled)</span>}
                   {hasRunningExecutions && <span> <span className="badge">{group.runningExecutions.length}</span></span>}
                 </h4>

diff --git a/app/scripts/modules/core/src/presentation/Popover.tsx b/app/scripts/modules/core/src/presentation/Popover.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverlayTrigger, Popover as BSPopover } from 'react-bootstrap';
 
-import { Placement } from 'core/presentation';
+import { Placement, Markdown } from 'core/presentation';
 
 export interface IPopoverProps {
   value?: string;
@@ -17,7 +17,7 @@ export class Popover extends React.Component<IPopoverProps> {
 
   public render() {
     const { value, template, placement, children } = this.props;
-    let popover = <BSPopover id={value}>{value}</BSPopover>;
+    let popover = <BSPopover id={value}><Markdown message={value}/></BSPopover>;
     if (template) {
       popover = <BSPopover id={value}>{template}</BSPopover>;
     }

diff --git a/app/scripts/modules/core/src/presentation/Tooltip.tsx b/app/scripts/modules/core/src/presentation/Tooltip.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OverlayTrigger, Tooltip as BSTooltip } from 'react-bootstrap';
 import { BindAll } from 'lodash-decorators';
 
-import { Placement } from 'core/presentation';
+import { Placement, Markdown } from 'core/presentation';
 
 export interface ITooltipProps {
   id?: string;
@@ -42,7 +42,7 @@ export class Tooltip extends React.Component<ITooltipProps> {
     const { delayShow, id, placement, template, value } = this.props;
     const useId = id || value || 'tooltip';
 
-    let tooltip = <BSTooltip id={useId}>{value}</BSTooltip>;
+    let tooltip = <BSTooltip id={useId}><Markdown message={value}/></BSTooltip>;
     if (template) {
       tooltip = <BSTooltip id={useId}>{template}</BSTooltip>;
     }