Merged PR 261: Changes to mapping dialog to not display dropdowns whe…

…n there is only 1 Changes to mapping dialog to not display dropdowns when there is only 1 selection option Related work items: #13617
ALM-Rangers · Oct 30, 2017 · 67afb9e · 67afb9e
2 parents f06ac0d + 67e76af
commit 67afb9e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/Import-Export-Kanban/Import-Export-Kanban/css/app.css b/Import-Export-Kanban/Import-Export-Kanban/css/app.css
@@ -97,6 +97,12 @@
     display: inline-block;
     box-sizing: border-box;
 }
+
+.mapping-label {
+    margin-top: 5px;
+    padding: 0px 0px 16px 0px;
+}
+
 .ms-ChoiceFieldGroup{
     height: 83vh;
 }

diff --git a/Import-Export-Kanban/Import-Export-Kanban/src/copy-settings-wizard.html b/Import-Export-Kanban/Import-Export-Kanban/src/copy-settings-wizard.html
@@ -21,14 +21,14 @@
             <div class="ms-MessageBar-text">
                 Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
                 <br />
-                <a href="#" class="ms-Link">Hyperlink string</a> 
+                <a href="#" class="ms-Link">Hyperlink string</a>
             </div>
         </div>
     </div>
     <div id="step1">
         <div class="ms-ChoiceFieldGroup" id="boardSettings" role="radiogroup">
             <div class="ms-ChoiceFieldGroup-title">
-                <label class="ms-Label">Do something</label>
+                <label class="ms-Label">Welcome to the Import / Export Kanban tool. Select an option below to get started.</label>
             </div>
             <ul class="ms-ChoiceFieldGroup-list">
                 <li class="ms-RadioButton">

diff --git a/Import-Export-Kanban/Import-Export-Kanban/src/wizardpages/workItemMappingPage.ts b/Import-Export-Kanban/Import-Export-Kanban/src/wizardpages/workItemMappingPage.ts
@@ -182,7 +182,7 @@ export class WorkItemMappingPage {
             let $row = $("<div />").addClass("ms-Grid-row");
             let $left = $("<div />").addClass("ms-Grid-col ms-u-sm6 ms-u-md6");
             $("<label />")
-                .addClass("ms-Label")
+                .addClass("ms-Label").addClass("mapping-label")
                 .text(differences.mappings[index].targetColumn.name)
                 .appendTo($left);
             let $right = $("<div />").addClass("ms-Grid-col ms-u-sm6 ms-u-md6");
@@ -212,10 +212,16 @@ export class WorkItemMappingPage {
         let $div = $("<div />"); // .addClass("ms-Dropdown").attr("tabindex", 0);
         $("<i />").addClass("mapping-dropDown-caretDown ms-Icon ms-Icon--ChevronDown").appendTo($div);
         let $select = $("<select />").addClass("mapping-dropDown");
-        if (options.length > 0) {
+        if (options.length > 1) {
             options.forEach(item => {
                 $("<option />").val(item.id).text(item.name).appendTo($select);
             });
+        } else if (options.length === 1) {
+            let label = $("<label />")
+                .addClass("ms-Label")
+                .addClass("mapping-label")
+                .text(options[0].name);
+            return label;
         } else {
             // Add an empty option
             $("<option />").appendTo($select);