From 458c281c6ae1663f1ddeb2883b0079dbea6fcce3 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 31 Jul 2018 11:51:39 -0700
Subject: [PATCH] Add Description to the source mappings overlay

---
 .../components/ImportDashboardMappings.tsx           | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/src/dashboards/components/ImportDashboardMappings.tsx b/ui/src/dashboards/components/ImportDashboardMappings.tsx
index 69b876f40..d7ebc5b9f 100644
--- a/ui/src/dashboards/components/ImportDashboardMappings.tsx
+++ b/ui/src/dashboards/components/ImportDashboardMappings.tsx
@@ -64,6 +64,7 @@ class ImportDashboardMappings extends Component<Props, State> {
   public render() {
     return (
       <>
+        {this.description}
         {this.table}
         <button className="btn btn-sm btn-success" onClick={this.handleSubmit}>
           Done
@@ -76,6 +77,17 @@ class ImportDashboardMappings extends Component<Props, State> {
     return <div data-test="no-mapping">No source mappings required</div>
   }
 
+  private get description(): JSX.Element {
+    const description =
+      'In order to ensure a smooth import you need to tell us how to match sources in the imported dashboard with your available sources. Selecting Dyanmic Source will allow the cell to use whatever source you are currently connected to instead of a specific source.'
+    return (
+      <div className="alert alert-primary">
+        <span className="icon octagon" />
+        <div className="alert-message">{description}</div>
+      </div>
+    )
+  }
+
   private get table(): JSX.Element {
     const {sourcesCells} = this.state