Various updates to UI

src/Kanban.ts

@@ -20,7 +20,7 @@ export class KanbanBoardToolsAction {
             let hostDialogOptions: IHostDialogOptions = {
                 title: Constants.DefaultDialogTitle,
                 width: 700,
-                height: 500,
+                height: 550,
                 close: this._closeDialog,
                 resizable: true,
                 modal: true,

src/Shared/Constants.ts

@@ -14,7 +14,8 @@ export const ApplySettingsLevelsLabel: string = "Apply settings at the following
 export const SettingsToCopyLabel: string = "Select settings to copy";
 export const EnableAdvancedMappings: string = "Customize column mappings";
 export const MappingsHeader: string = "Column mappings";
-export const MappingsDescription: string = "The following columns have multiple options available to move existing work items into.";
+export const MappingsDescription: string = "Columns here have multiple options available to move existing work items into.";
+export const NoMappingsAvailable: string = "No columns to be adjusted for this backlog level";
 
 export const LoadingTeamsLabel: string = "Loading teams";
 export const LoadingBacklogsLabel: string = "Updating backlogs";

src/Views/CopySettings/Actions/CopySettingsActionsCreator.ts

@@ -26,6 +26,7 @@ export class CopySettingsActionsCreator {
 
     public selectTeam(teamName: string) {
         this._copySettingsActionsHub.setBacklogsLoading.invoke(true);
+        this.enabledAdvancedMappings(false);
         this._validateUI();
         this._client.loadSelectedTeam(teamName).then(() => {
             let commonLevels = this._client.commonBackgroundLevels;
@@ -58,7 +59,7 @@ export class CopySettingsActionsCreator {
     }
 
     public enabledAdvancedMappings(enabled: boolean) {
-        this._copySettingsActionsHub.setCanDoAdvancedMapping.invoke(this._canEnableAdvancedMapping() && !enabled);
+        this._copySettingsActionsHub.setCanDoAdvancedMapping.invoke(this._canEnableAdvancedMapping());
         this._copySettingsActionsHub.setShowAdvancedMapping.invoke(enabled);
         this._validateUI();
     }
@@ -102,7 +103,7 @@ export class CopySettingsActionsCreator {
 
     private _canEnableAdvancedMapping(): boolean {
         let state = this._getState();
-        return state.copySettingsState.selectedBacklogLevels.length > 0;
+        return state.copySettingsState.selectedBacklogLevels && state.copySettingsState.selectedBacklogLevels.length > 0;
     }
 
     private _copyArray(array: any[]): any[] {

src/Views/CopySettings/Components/AdvancedItemMapping.scss

@@ -1,3 +1,7 @@
 .lastItem {
     padding-bottom: 66px;
+}
+
+.pivotContent {
+    margin-top: 15px;
 }

src/Views/CopySettings/Components/AdvancedItemMapping2.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+
+import { css } from "office-ui-fabric-react/lib/Utilities";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import { IBoardColumnDifferences, IColumnMapping } from "src/Views/CopySettings/Models/CopySettingsInterfaces";
+import { Pivot, PivotItem } from "office-ui-fabric-react/lib/Pivot";
+import { List } from "office-ui-fabric-react/lib/List";
+import * as Constants from "src/Shared/Constants";
+
+import "./AdvancedItemMapping.scss";
+
+export interface IAdvancedItemMappingProps {
+    show: boolean;
+    headerText: string;
+    onClosed: () => void;
+    onMappingChanged: (selectedId: string, sourceId) => void;
+    mappings: IBoardColumnDifferences[];
+    selectedLevels: string[];
+}
+
+export class AdvancedItemMapping extends React.Component<IAdvancedItemMappingProps, {}> {
+    private _itemsCount: number;
+
+    constructor(props: IAdvancedItemMappingProps) {
+        super(props);
+        this._itemsCount = 0;
+    }
+
+    public render() {
+        let mappingItems: IColumnMapping[] = [];
+        let startIndex = 0;
+        if (!this.props.mappings || !this.props.show) {
+            return null;
+        }
+
+        let mappingsOfInterest: IBoardColumnDifferences[] = [];
+
+        this.props.mappings.forEach(mapping => {
+            if (this.props.selectedLevels.indexOf(mapping.backlog) >= 0) {
+                mappingsOfInterest.push(mapping);
+            }
+        });
+        this._itemsCount = mappingItems.length;
+        return (
+            <div>
+                <div className={css("ms-font-m")}>
+                    {Constants.MappingsDescription}
+                </div>
+                <div>
+                    <Pivot>
+                        {mappingsOfInterest.map((mapping, mapIndex, allMappings) => {
+                            return (
+                                <PivotItem linkText={mapping.backlog}>
+                                    {this._renderPivotContent(mapping)}
+                                </PivotItem>
+                            );
+                        })}
+                    </Pivot>
+                </div>
+            </div>
+        );
+    }
+
+    private _renderPivotContent(mapping: IBoardColumnDifferences): JSX.Element {
+        let content: JSX.Element;
+
+        let multipleMappings = mapping.mappings.filter(m => m.potentialMatches.length > 1);
+        if (multipleMappings.length === 0) {
+            content =
+                <div className={css("pivotContent", "ms-font-m")}>
+                    {Constants.NoMappingsAvailable}
+                </div>;
+        } else {
+            content =
+                <List
+                    items={multipleMappings}
+                    onRenderCell={this._onRenderCell} />;
+        }
+        return content;
+    }
+
+    private _onRenderCell = (item: IColumnMapping, itemIndex: number) => {
+        let dropdownOptions: IDropdownOption[] = [];
+        item.potentialMatches.forEach(match => {
+            dropdownOptions.push({
+                key: match.id,
+                text: match.name,
+                data: item.targetColumn.id
+            });
+        });
+        let className = "";
+        if (itemIndex === this._itemsCount - 1) {
+            className = css("lastItem");
+        }
+        return (
+            <div className={className}>
+                <Dropdown
+                    options={dropdownOptions}
+                    selectedKey={item.sourceColumn.id}
+                    label={item.targetColumn.name}
+                    onChanged={this._onMappingChanged} />
+            </div>
+        );
+    }
+
+    private _onMappingChanged = (item: IDropdownOption) => {
+        this.props.onMappingChanged(item.key.toString(), item.data.toString());
+    }
+}

src/Views/CopySettings/Components/CopySettingsView.tsx

@@ -7,12 +7,13 @@ import { CommonDialogState } from "src/Views/Dialog/Stores/DialogStoreHub";
 import { ViewState } from "src/Views/Dialog/Models/DialogInterfaces";
 import { CopySettingsActionsHub } from "src/Views/CopySettings/Actions/CopySettingsActions";
 import { CopySettingsStoreHub, CopyState } from "src/Views/CopySettings/Stores/CopySettingsStoreHub";
-import { AdvancedItemMapping } from "src/Views/CopySettings/Components/AdvancedItemMapping";
+import { AdvancedItemMapping } from "src/Views/CopySettings/Components/AdvancedItemMapping2";
 import { SelectBacklogLevels } from "src/Views/CopySettings/Components/SelectBacklogLevels";
+import { SettingsToCopy } from "src/Views/CopySettings/Components/SettingsToCopy";
 import { SelectTeam } from "src/Views/CopySettings/Components/SelectTeam";
 import * as Constants from "src/Shared/Constants";
 import { ServicesClient } from "src/Shared/ServicesClient";
-import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { Toggle } from "office-ui-fabric-react/lib/Toggle";
 import { Telemetry } from "src/TelemetryClientSettings";
 
 export interface ICopySettingsViewProps {
@@ -52,7 +53,6 @@ export class CopySettingsView extends React.Component<ICopySettingsViewProps, Co
 
     public componentWillUpdate(nextProps: ICopySettingsViewProps, nextState: CopyState) {
         this._copySettingsActionsCreator.updateViewState(nextProps.sharedState.dialogState.view);
-        // this._servicesClient.setViewState(nextProps.sharedState.dialogState.view);
     }
 
     public render() {
@@ -81,11 +81,11 @@ export class CopySettingsView extends React.Component<ICopySettingsViewProps, Co
                         onBacklogLevelSelected={this._onSelectBacklogLevel} />
                 </div>
                 <div className="formContent">
-                    <PrimaryButton
-                        onClick={this._onOpenAdvancedMappings}
-                        disabled={!this._copySettingsStoreHub.copySettingsStore.state.canToggleMappings}>
-                        {Constants.EnableAdvancedMappings}
-                    </PrimaryButton>
+                    <Toggle
+                        checked={this.state.copySettingsState.showAdvancedMappings}
+                        onChanged={this._onOpenAdvancedMappings}
+                        label={Constants.EnableAdvancedMappings}
+                        disabled={!this._copySettingsStoreHub.copySettingsStore.state.canToggleMappings || this.state.copySettingsState.backlogsLoading} />
                 </div>
                 <div>
                     <AdvancedItemMapping
@@ -96,6 +96,10 @@ export class CopySettingsView extends React.Component<ICopySettingsViewProps, Co
                         onMappingChanged={this._onMappingChanged}
                         selectedLevels={this.state.copySettingsState.selectedBacklogLevels} />
                 </div>
+                <div>
+                    <SettingsToCopy
+                        selectedSettings={this.state.copySettingsState.settingsToCopy} />
+                </div>
             </div>
         );
     }
@@ -116,9 +120,9 @@ export class CopySettingsView extends React.Component<ICopySettingsViewProps, Co
         this._copySettingsActionsCreator.selectBacklogLevel(level, isSelected);
     }
 
-    private _onOpenAdvancedMappings = () => {
+    private _onOpenAdvancedMappings = (checked: boolean) => {
         Telemetry.Client().trackEvent(Constants.TelemetryAdvancedMapping);
-        this._copySettingsActionsCreator.enabledAdvancedMappings(true);
+        this._copySettingsActionsCreator.enabledAdvancedMappings(checked);
     }
 
     private _onAdvancedMappingClosed = () => {

src/Views/CopySettings/Components/SettingsToCopy.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { css } from "office-ui-fabric-react/lib/Utilities";
+
+export interface ISettingsToCopyProps {
+    selectedSettings: string[];
+}
+
+export class SettingsToCopy extends React.Component<ISettingsToCopyProps, {}> {
+    public render() {
+        return (
+            <div>
+                The following styles will be copied: {this.props.selectedSettings.map((value, index, values) => {
+                    let content = index < values.length - 1 ?
+                        <span><span className={css("boldFont")}>{value}</span>, </span> : <span><span className={css("boldFont")}>{value}</span>.</span>;
+                    return content;
+                })}
+            </div>
+        );
+    }
+}

src/Views/CopySettings/Models/CopySettingsInterfaces.ts

@@ -10,6 +10,7 @@ export interface CopySettingsState {
     canToggleMappings: boolean;
     showAdvancedMappings: boolean;
     currentMappings: IBoardColumnDifferences[];
+    settingsToCopy: string[];
 }
 
 export interface IBacklogBoardSettings {

src/Views/CopySettings/Stores/CopySettingsStore.ts

@@ -12,7 +12,8 @@ export class CopySettingsStore extends VSSStore.Store {
         selectedBacklogLevels: null,
         canToggleMappings: false,
         showAdvancedMappings: false,
-        currentMappings: null
+        currentMappings: null,
+        settingsToCopy: ["card fields", "card rules", "board columns", "swimlanes"]
     };
 
     public onSetTeamsLoading = (loading: boolean) => {

src/Views/Dialog/Components/DialogContent.tsx

@@ -113,9 +113,18 @@ export class DialogContent extends React.Component<IDialogContentProps, {}> {
             { key: ViewState.CopySettingsToTeam.toString(), value: Constants.CopySettingsToTeamLabel }
         ];
 
+        let selectedAction: IActionOption;
+        for (let actionIndex = 0; actionIndex < options.length; actionIndex++) {
+            if (this.props.state.dialogState.view.toString() === options[actionIndex].key) {
+                selectedAction = options[actionIndex];
+                break;
+            }
+        }
+
         return (
             <SelectAction
                 availableOptions={options}
+                selectedAction={selectedAction}
                 label={Constants.KanbanActionLabel}
                 placeHolder={Constants.KanbanActionPlaceholder}
                 onSelectAction={this._onSelectDialogAction} />

src/Views/Dialog/Components/DialogView.scss

@@ -6,6 +6,10 @@
     margin-bottom: 20px;
 }
 
+.boldFont {
+    font-weight: bold;
+}
+
 .dialog-container {
     width: 100%;
     height: 100%;

src/Views/Dialog/Components/SelectAction.tsx

@@ -9,15 +9,14 @@ export interface IActionOption {
 
 export interface ISelectActionProps {
     availableOptions: IActionOption[];
+    selectedAction?: IActionOption;
     onSelectAction: (selectedAction: string) => void;
     label: string;
     disabled?: boolean;
     placeHolder?: string;
 }
 
 export class SelectAction extends React.Component<ISelectActionProps, {}> {
-    private test: string = "test";
-
     public render() {
         let options: IDropdownOption[] = [];
         if (this.props.availableOptions) {
@@ -30,11 +29,14 @@ export class SelectAction extends React.Component<ISelectActionProps, {}> {
             });
         }
 
+        const selectedActionKey = this.props.selectedAction ? this.props.selectedAction.key : null;
+
         return (
             <div className="formContent">
                 <Dropdown
                     label={this.props.label}
                     options={options}
+                    selectedKey={selectedActionKey}
                     placeHolder={this.props.placeHolder}
                     disabled={this.props.disabled}
                     onChanged={this._onActionSelected} />

src/Views/Dialog/Stores/DialogStore.ts

@@ -9,7 +9,7 @@ export class DialogStore extends VSSStore.Store {
         super();
         this.state = {
             isDialogValid: false,
-            view: ViewState.Start,
+            view: ViewState.CopySettingsFromTeam,
             currentBoardId: defaultBoard
         };
     }