fix code when copying settings

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "clean:vsix": "rimraf *.vsix",
     "clean": "npm run clean:vsix && rimraf dist",
-    "dev": "npm run build:dev && webpack-dev-server -d --hot --progress --colors --https --content-base ./dist --port 9090",
+    "dev": "npm run build:dev && webpack-dev-server --config webpack.dev.config.js --hot --progress --static ./dist",
     "lint": "tslint -c tslint.json \"src/*.ts\"",
     "compile": "npm run clean:vsix && webpack --env=prod --progress --mode production",
     "compile:dev": "npm run clean:vsix && webpack --env=dev --progress",
@@ -18,7 +18,7 @@
     "package:test": "npm run compile:test && node ./scripts/packageTest",
     "package:release": "npm run clean:vsix && npm run build:release && node ./scripts/packageRelease",
     "test": "snyk test && karma start --single-run",
-    "start:dev": "webpack-dev-server --config webpack.dev.config.js"
+    "start:dev": "webpack-dev-server --config webpack.dev.config.js --static ./dist"
   },
   "dependencies": {
     "applicationinsights-js": "^1.0.20",
@@ -33,6 +33,7 @@
     "@types/jquery": "^3.2.18",
     "@types/react": "~16.8.2",
     "@types/react-dom": "~16.8.0",
+    "@webpack-cli/serve": "^1.7.0",
     "base64-inline-loader": "^2.0.1",
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.2.4",
@@ -47,8 +48,8 @@
     "tslint-loader": "^3.5.4",
     "typescript": "^3.9.6",
     "webpack": "^5.23.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^4.0.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.0",
     "webpack-merge": "^5.8.0"
   }
 }

src/Components/AdvancedItemMapping.tsx

@@ -13,8 +13,9 @@ import { Tab, TabBar, TabSize } from "azure-devops-ui/Tabs";
 
 import "../Components/AdvancedItemMapping.scss";
 import { css } from "azure-devops-ui/Util";
-import { List, IListItemDetails } from "azure-devops-ui/List";
-import { ArrayItemProvider } from "azure-devops-ui/Utilities/Provider";
+import { IListItemDetails } from "azure-devops-ui/List";
+
+import { DropdownSelection } from "azure-devops-ui/Utilities/DropdownSelection";
 
 export interface IAdvancedItemMappingProps {
   show: boolean;
@@ -30,6 +31,8 @@ export class AdvancedItemMapping extends React.Component<
   {}
 > {
   private selectedTabId: ObservableValue<string>;
+  private selectedLevelItem: ObservableValue<string>;
+
   private _itemsCount: number;
 
   constructor(props: IAdvancedItemMappingProps) {
@@ -40,6 +43,7 @@ export class AdvancedItemMapping extends React.Component<
   public render() {
     let initialSelectedTabId = this.props.selectedLevels[0];
     this.selectedTabId = new ObservableValue(initialSelectedTabId);
+    this.selectedLevelItem = new ObservableValue<string>("");
     let mappingItems: IColumnMapping[] = [];
     let startIndex = 0;
 
@@ -106,12 +110,38 @@ export class AdvancedItemMapping extends React.Component<
         </div>
       );
     } else {
-      content = (
-        <List
-          itemProvider={new ArrayItemProvider<IColumnMapping>(multipleMappings)}
-          renderRow={this._onRenderRow}
-        />
-      );
+      for (let index = 0; index < multipleMappings.length; index++) {
+        let item = multipleMappings[index];
+
+        let dropdownOptions: any[] = [];
+        item.potentialMatches.forEach((match) => {
+          dropdownOptions.push({
+            id: match.id,
+            text: match.name,
+            data: item.targetColumn.id,
+          });
+        });
+        let className = css("listItem");
+        console.log("itemsCount,", this._itemsCount)
+        if (index === this._itemsCount - 1) {
+          className = css("lastItem");
+        }
+        content = (
+          <div className={className}>
+            <Dropdown
+              items={dropdownOptions}
+              ariaLabel={item.targetColumn.name}
+              onSelect={this._onMappingChanged}
+            />
+            <Observer selectedItem={this.selectedLevelItem}>
+              {(props: { selectedItem: string }) => {
+                return <></>;
+              }}
+
+            </Observer>
+          </div>
+        );
+      };
     }
     return content;
   }
@@ -144,7 +174,9 @@ export class AdvancedItemMapping extends React.Component<
     );
   };
 
-  private _onMappingChanged = (item: any) => {
+
+  private _onMappingChanged = (e: any, item: any) => {
+    this.selectedLevelItem.value = item.text || "";
     this.props.onMappingChanged(item.id.toString(), item.data.toString());
   };
 }

src/Components/CopySettingsView.tsx

@@ -20,7 +20,6 @@ export interface ICopySettingsViewProps {
   servicesClient: ServicesClient;
 }
 interface ICopySettingsViewState {
-  selectedTeamName: string;
   commonBacklogLevels: string[];
   selectedBacklogLevels: string[];
   canToggleMappings: boolean;
@@ -39,7 +38,6 @@ export class CopySettingsView extends React.Component<
   constructor(props: ICopySettingsViewProps) {
     super(props);
     this.state = {
-      selectedTeamName: "",
       commonBacklogLevels: [],
       selectedBacklogLevels: [],
       canToggleMappings: false,
@@ -176,15 +174,14 @@ export class CopySettingsView extends React.Component<
     this.setState({ allProjectTeams: teams, loadingTeams: false });
   };
 
-  private _onSelectTeam = (
-    event: React.SyntheticEvent<HTMLElement>,
-    item: IListBoxItem<{}>
-  ) => {
+  private _onSelectTeam = (event: React.SyntheticEvent<HTMLElement>, item: IListBoxItem<{}>) => {
+
     let selectedTeam = item.text;
     if (selectedTeam) {
       this.setState({ backlogsLoading: true });
+
       this.props.servicesClient
-        .loadSelectedTeam(this.state.selectedTeamName)
+        .loadSelectedTeam(selectedTeam)
         .then(() => {
           let defaultBoardLevel = [];
           defaultBoardLevel.push(this.props.servicesClient.currentBacklogLevel);
@@ -271,6 +268,7 @@ export class CopySettingsView extends React.Component<
       }
       this.setState({ selectedBacklogLevels: currentLevels });
     }
+    this.props.setCopySettingsLevels(currentLevels);
     let canToggleMappings = this._canEnableAdvancedMapping();
     this.setState({ canToggleMappings: canToggleMappings });
   }

src/Components/PanelContent.tsx

@@ -61,7 +61,7 @@ export class PanelContent extends React.Component<
     );
   }
 
-  public _setCopySettingsLevels(levels: string[]) {
+  public _setCopySettingsLevels = (levels: string[]) =>  {
     this.setState({ selectedBacklogLevels: levels });
   }
 

src/Shared/ServiceClients.ts

@@ -68,31 +68,22 @@ export class ServicesClient {
   }
 
   private _updateSourceDestinationSettings() {
-    if (
-      this._currentTeamProperties.team === null ||
-      this._secondaryTeamProperties.length === 0
-    ) {
+    if (this._currentTeamProperties.team === null || this._secondaryTeamProperties.length === 0) {
       return;
     }
-
     if (this._viewState === ViewState.CopySettingsToTeam) {
       this._sourceTeamSettings = this._currentTeamProperties.settings;
       this._destinationTeamSettings = [];
       this._secondaryTeamProperties.forEach((secTeam) => {
         this._destinationTeamSettings.push(secTeam.settings);
       });
-      this._currentMappings = this.getTeamColumnDifferences(
-        this._sourceTeamSettings,
-        this._destinationTeamSettings[0]
-      );
+      this._currentMappings = this.getTeamColumnDifferences(this._sourceTeamSettings, this._destinationTeamSettings[0]);
+
     } else if (this._viewState === ViewState.CopySettingsFromTeam) {
       this._sourceTeamSettings = this._secondaryTeamProperties[0].settings;
       this._destinationTeamSettings = [];
       this._destinationTeamSettings.push(this._currentTeamProperties.settings);
-      this._currentMappings = this.getTeamColumnDifferences(
-        this._sourceTeamSettings,
-        this._destinationTeamSettings[0]
-      );
+      this._currentMappings = this.getTeamColumnDifferences(this._sourceTeamSettings, this._destinationTeamSettings[0]);
     }
   }
 
@@ -125,10 +116,7 @@ export class ServicesClient {
     return this._currentBacklogLevel;
   }
 
-  public async loadSelectedTeam(
-    teamName: string,
-    isMultiselect: boolean = false
-  ): Promise<void> {
+  public async loadSelectedTeam(teamName: string, isMultiselect: boolean = false): Promise<void> {
     let team = await this.getTeam(teamName);
     let context = await this.getContextForTeamAsync(teamName);
     let settings = await this.getTeamSettingsAsync(context);
@@ -445,9 +433,7 @@ export class ServicesClient {
   }
 
   // public async applyTeamSettingsAsync(oldSettings: Models.IBoardSettings, settingsToApply: Models.IBoardSettings, selectedMappings: Models.IBoardColumnDifferences[], selectedBacklogLevels: string[]): Promise<Boolean> {
-  public async applyTeamSettingsAsync(
-    selectedBacklogLevels: string[]
-  ): Promise<Boolean> {
+  public async applyTeamSettingsAsync(selectedBacklogLevels: string[]): Promise<Boolean> {
     let result: Boolean = false;
     let wrc = getClient(WorkRestClient);
     let witrc = getClient(WorkItemTrackingRestClient);
@@ -468,11 +454,8 @@ export class ServicesClient {
         backlogIndex < this._sourceTeamSettings.backlogSettings.length;
         backlogIndex++
       ) {
-        let backlogSettingToApply =
-          this._sourceTeamSettings.backlogSettings[backlogIndex];
-        if (
-          selectedBacklogLevels.indexOf(backlogSettingToApply.boardName) < 0
-        ) {
+        let backlogSettingToApply = this._sourceTeamSettings.backlogSettings[backlogIndex];
+        if (selectedBacklogLevels.indexOf(backlogSettingToApply.boardName) < 0) {
           continue;
         }
         console.log(`Processing backlog [${backlogSettingToApply.boardName}]`);

webpack.base.config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {

webpack.config.js

@@ -1,3 +1,12 @@
-module.exports = function(env) {
-  return require(`./webpack.${env}.config`);
+const webpack = require("webpack");
+
+module.exports = function (env) {
+
+  if (!env.dev) {
+    return require(`./webpack.prod.config`);
+  }
+  else {
+    return require(`./webpack.dev.config`);
+  }
+
 };