Improve Error Handling and package updates

Author: Dedac

azure-devops-extension-dev.json

@@ -1,6 +1,6 @@
 {
     "id":"RestDataMappingPicklistDev",
-    "version": "0.2.6",
+    "version": "0.2.7",
     "baseUri": "https://localhost:44300",
     "public": false,
     "private":true

azure-devops-extension.json

@@ -2,7 +2,7 @@
     "manifestVersion": 1.0,
     "id": "RestDataMappingPicklist",
     "publisher": "dedac",
-    "version": "0.2.6",
+    "version": "0.2.7",
     "name": "Rest Data Mapping Picklist",
     "description": "Load work item values from a specified REST endpoint and map additional REST data to your work item",
     "public": true,
@@ -93,8 +93,8 @@
                 }, 
                 {
                     "id": "RestServiceUserName",
-                    "name": "Rest Service User Name / 'Bearer'",
-                    "description": "The name of the property to load from the rest service, use 'Bearer' for token auth",
+                    "name": "Rest Service User Name / 'Bearer' / 'Basic'",
+                    "description": "The name of the property to load from the rest service, use 'Bearer' or 'Basic' for token auth",
                     "validation": {
                         "dataType": "String",
                         "isRequired": false

overview.md

@@ -6,6 +6,8 @@ Use this with the ServiceNow table api, or any other Rest API.
 
 You can now use basic auth by adding the username and password, or use token authentication by using the username "Bearer", and use the token in the password field
 
+For Azure DevOps rest calls, you can also use the username 'Basic' with the PAT in the password field
+
 The rest data that is returned can be used to automatically update other fields in the work item.
 Use the field mapping configuration illustrated below to map fields from the rest service to field names in Azure DevOps
 
@@ -43,5 +45,5 @@ Sample Settigns for Calling this Service
 
 'Custom.' are custom field names in Azure DevOps, use the fields names that you want data from the rest service mapped to.
 
-Add https://dedac.gallerycdn.vsassets.io to the CORS allowed domains to use the extension
+You may have to Add https://dedac.gallerycdn.vsassets.io to the CORS allowed domains on the rest service that you are calling to use the extension.  This isn't necessary for calling back into the Azure DevOps API
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rest-data-mapping-picklist",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "An Azure DevOps Work Item Control for loading values from a Rest endpoint",
   "main": "index.js",
   "scripts": {
@@ -44,15 +44,15 @@
     "eslint-plugin-react-hooks": "^1.6.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.2",
-    "lodash-webpack-plugin": "^0.11.5",
     "prettier": "^2.2.1",
     "source-map-loader": "^1.1.3",
     "style-loader": "^2.0.0",
     "tfx-cli": "^0.9.2",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.2",
     "typescript-styled-plugin": "^0.18.0",
-    "webpack": "^4.46.0",
+    "underscore": "^1.12.1",
+    "webpack": "^5.49.0",
     "webpack-cli": "^3.3.3",
     "webpack-dev-server": "^3.11.2"
   }

package.json

@@ -1,14 +1,20 @@
 import * as SDK from 'azure-devops-extension-sdk';
 import { WorkItemTrackingServiceIds, IWorkItemFormService } from "azure-devops-extension-api/WorkItemTracking/WorkItemTrackingServices";
 import { LoadDataFromService } from './rest-call';
-import get from 'lodash/get'; 
+import get from 'lodash/get';
+import { AxiosResponse } from 'axios';
 
 export class RestServiceData {
 
   public data = [];
 
   public async getSuggestedValues(): Promise<string[]> {
-    const resp = await LoadDataFromService();
+    var resp: AxiosResponse<any>;
+    try {
+      resp = await LoadDataFromService();
+    } catch (error) {
+      return Promise.resolve([]);
+    }
     const keyFieldName = SDK.getConfiguration().witInputs.RestServiceKeyField;
     const arrayPath = SDK.getConfiguration().witInputs.PathToArray;
 

src/RestServiceData.ts

@@ -31,7 +31,7 @@ export class SelectorEvents {
             }
             catch (e) {
                 console.info("Error parsing the field map " + e);
-                //we dont' have to do anything if the map isn't valid json
+                //we don't have to do anything if the map isn't valid json
                 this.fieldMap = null;
             }
         }
@@ -41,7 +41,7 @@ export class SelectorEvents {
             fieldName={friendlyName}
             selected={this.valueObservable}
             options={this.serviceData.getSuggestedValues()}
-            placeholder="Select"
+            placeholder=""
             message={this.messageObservable}
         />, this._container);
     }

src/SelectorEvents.tsx

@@ -6,35 +6,37 @@ export async function LoadDataFromService() {
     const address = inputs.RestServiceAddress;
     const username = inputs.RestServiceUserName;
     const password = inputs.RestServicePassword;
-    var params:any = {}
-    if (inputs.RestCallParameters){
+    var params: any = {}
+    if (inputs.RestCallParameters) {
         try {
             params = JSON.parse(inputs.RestCallParameters);
-        } catch(e) {
+        } catch (err) {
+            console.log(err)
             return;
-            //TODO: return error message
         }
     }
- 
-    var reqConfig = { 
+
+    var reqConfig = {
         headers: {
             'Content-Type': 'application/json'
         }
     };
-    
-    if (username || password)
-    {
+
+    if (username || password) {
         if (username == "Bearer" || username == "bearer")
             reqConfig.headers["Authorization"] = username + " " + password;
         else
             reqConfig['auth'] = { username: username, password: password };
     }
-    
+
     var req = axios.create(reqConfig);
 
     return req.get(address,
         {
             params: params
         }
-    );
+    ).catch(err => {
+        console.log(err); 
+        throw err;
+    });
 }

src/rest-call.ts

@@ -1,6 +1,5 @@
 const path = require('path');
 const webpack = require('webpack');
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
@@ -39,7 +38,6 @@ const controlConfig = {
     },
     plugins: [
       new webpack.optimize.ModuleConcatenationPlugin(),
-      new LodashModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
         template: 'src/selector.html',
         filename: 'selector.html',