v3.3 release (#288)

Migrated Bings Maps to Azure Maps
OfficeDev · Nov 15, 2024 · 4941384 · 4941384
1 parent db3942e
commit 4941384
Show file tree

Hide file tree

Showing 18 changed files with 5,729 additions and 9,070 deletions.
diff --git a/Deployment/appPackage/manifest.json b/Deployment/appPackage/manifest.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
   "manifestVersion": "1.15",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "id": "bef61400-db9b-41d4-a617-403deb7bbe77",
   "packageName": "com.microsoft.teams.extension",
   "developer": {

diff --git a/EOC-TeamsFx/tabs/package-lock.json b/EOC-TeamsFx/tabs/package-lock.json
diff --git a/EOC-TeamsFx/tabs/package.json b/EOC-TeamsFx/tabs/package.json
@@ -18,7 +18,7 @@
         "@react-pdf/renderer": "3.1.12",
         "@types/loadable__component": "^5.13.4",
         "axios": "^0.21.1",
-        "bingmaps-react": "^1.2.10",
+        "azure-maps-control": "^3.3.0",
         "bootstrap": "5.2.3",
         "botframework-streaming": "^4.22.1",
         "classnames": "^2.3.1",
@@ -96,9 +96,13 @@
         "@types/react-router-dom": "^5.1.7",
         "@types/react-slider": "^1.3.1",
         "@types/uuid": "^8.3.3",
+        "css-loader": "^7.1.2",
         "nth-check": "2.0.1",
+        "style-loader": "^4.0.0",
         "typescript": "^4.1.2",
-        "underscore": "1.12.1"
+        "underscore": "1.12.1",
+        "webpack": "^5.95.0",
+        "webpack-cli": "^5.1.4"
     },
     "scripts": {
         "start": "react-scripts start",

diff --git a/EOC-TeamsFx/tabs/src/common/Constants.ts b/EOC-TeamsFx/tabs/src/common/Constants.ts
@@ -1,6 +1,6 @@
 export const defaultGraphBaseURL = "https://graph.microsoft.com/"
 export const commercialGraphContextURL = "https://graph.microsoft.com/v1.0/"
-export const AppVersion = "3.2.0 ";
+export const AppVersion = "3.3.0 ";
 export const EOCAppName = "MIFTEOC";
 export const all = "All";
 export const planning = "Planning";
@@ -129,7 +129,7 @@ export const selectedAriaLabel = " Selected";
 //Config Settings
 export const appTitleKey = "AppTitle";
 export const enableRoles = "EnableRoles";
-export const bingMapsKey = "BingMapsKey";
+export const azureMapsKey = "AzureMapsKey";
 export const teamNameConfig = "TeamNameConfig";
 export const editIncidentAccessRoleKey = "EditIncidentAccessRole";
 export const noneOption = "None";

diff --git a/EOC-TeamsFx/tabs/src/components/AdminSettings.tsx b/EOC-TeamsFx/tabs/src/components/AdminSettings.tsx
@@ -28,7 +28,7 @@ export interface IAdminSettingsProps {
     siteName: any;
     currentThemeName: string;
     isMapViewerEnabled: boolean;
-    bingMapsKeyConfigData: any;
+    azureMapsKeyConfigData: any;
     appTitle: string;
     appTitleData: any;
     editIncidentAccessRole: string;
@@ -133,7 +133,7 @@ export default class AdminSettings extends React.Component<IAdminSettingsProps,
                                 appInsights={this.props.appInsights}
                                 userPrincipalName={this.props.userPrincipalName}
                                 isMapViewerEnabled={this.props.isMapViewerEnabled}
-                                bingMapsKeyConfigData={this.props.bingMapsKeyConfigData}
+                                azureMapsKeyConfigData={this.props.azureMapsKeyConfigData}
                                 editIncidentAccessRole={this.props.editIncidentAccessRole}
                                 editIncidentAccessRoleData={this.props.editIncidentAccessRoleData}
                             />

diff --git a/EOC-TeamsFx/tabs/src/components/ConfigSettings.tsx b/EOC-TeamsFx/tabs/src/components/ConfigSettings.tsx
@@ -30,7 +30,7 @@ export interface IConfigSettingsProps {
     appInsights: ApplicationInsights;
     userPrincipalName: any;
     isMapViewerEnabled: boolean;
-    bingMapsKeyConfigData: any;
+    azureMapsKeyConfigData: any;
     appTitle: string;
     appTitleData: any;
     editIncidentAccessRole: string;
@@ -42,8 +42,8 @@ export interface IConfigSettingsState {
     showAssignRolesLink: boolean;
     showLoader: boolean;
     enableMapViewer: boolean;
-    bingMapsKey: string;
-    bingMapsKeyError: boolean;
+    azureMapsKey: string;
+    azureMapsKeyError: boolean;
     appTitle: string;
     appTitleKeyError: boolean;
     roleDropdownOptions: any;
@@ -75,8 +75,8 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
             showAssignRolesLink: this.props.isRolesEnabled,
             showLoader: false,
             enableMapViewer: this.props.isMapViewerEnabled,
-            bingMapsKey: this.props.bingMapsKeyConfigData?.value?.trim()?.length > 0 ? this.props.bingMapsKeyConfigData?.value : "",
-            bingMapsKeyError: false,
+            azureMapsKey: this.props.azureMapsKeyConfigData?.value?.trim()?.length > 0 ? this.props.azureMapsKeyConfigData?.value : "",
+            azureMapsKeyError: false,
             appTitle: this.props.appTitle,
             appTitleKeyError: false,
             roleDropdownOptions: '',
@@ -265,20 +265,20 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                 }
             }
 
-            //Add Bing Map API Key record in TEOC-config list
-            if (this.state.enableMapViewer && this.props.bingMapsKeyConfigData?.title === undefined &&
-                this.state.bingMapsKey?.trim() !== "") {
+            //Add azure Map subscription Key record in TEOC-config list
+            if (this.state.enableMapViewer && this.props.azureMapsKeyConfigData?.title === undefined &&
+                this.state.azureMapsKey?.trim() !== "") {
                 noChanges = false;
                 this.setState({ showLoader: true });
 
-                const listItem = { fields: { Title: constants.bingMapsKey, Value: this.state.bingMapsKey } };
+                const listItem = { fields: { Title: constants.azureMapsKey, Value: this.state.azureMapsKey } };
                 const configResponse = await this.commonService.sendGraphPostRequest(configListNewGraphEndpoint, this.props.graph, listItem);
                 this.props.setState({
                     isMapViewerEnabled: this.state.enableMapViewer,
-                    bingMapsKeyConfigData: {
-                        ...this.props.bingMapsKeyConfigData,
+                    azureMapsKeyConfigData: {
+                        ...this.props.azureMapsKeyConfigData,
                         title: configResponse.fields.Title,
-                        value: this.state.bingMapsKey,
+                        value: this.state.azureMapsKey,
                         itemId: configResponse.fields.id
                     }
                 });
@@ -291,38 +291,38 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                             message: this.props.localeStrings.mapViewerKeyEnabledMessage
                         }
                     },
-                    bingMapsKey: prevState.bingMapsKey?.trim()
+                    azureMapsKey: prevState.azureMapsKey?.trim()
                 }));
             }
-            //Update Bing Map API Key in TEOC-config list
-            else if ((this.props.bingMapsKeyConfigData?.value &&
-                this.props.bingMapsKeyConfigData?.value?.trim() !== this.state.bingMapsKey?.trim()) ||
+            //Update azure Map subscription Key in TEOC-config list
+            else if ((this.props.azureMapsKeyConfigData?.value &&
+                this.props.azureMapsKeyConfigData?.value?.trim() !== this.state.azureMapsKey?.trim()) ||
                 this.props.isMapViewerEnabled !== this.state.enableMapViewer) {
                 noChanges = false;
-                //Validate Bing Map API Key
+                //Validate azure Map subscription Key
                 if (this.state.enableMapViewer &&
-                    (this.state.bingMapsKey?.trim() === "" || this.state.bingMapsKey?.trim() === undefined)) {
+                    (this.state.azureMapsKey?.trim() === "" || this.state.azureMapsKey?.trim() === undefined)) {
                     this.setState(prevState => ({
-                        bingMapsKeyError: true,
+                        azureMapsKeyError: true,
                         messages: {
                             ...prevState.messages,
                             mapViewer: { messageType: 1, message: this.props.localeStrings.mapViewerKeyRequiredMessage }
                         }
                     }));
                 }
-                //Update Bing Map API Key
+                //Update azure Map subscription Key
                 else {
                     this.setState({ showLoader: true });
-                    //Endpoint to update Bing Map API Key in TEOC-config list
-                    const graphConfigListEndpoint = `${graphConfig.spSiteGraphEndpoint}${this.props.siteId}/lists/${siteConfig.configurationList}/items/${this.props.bingMapsKeyConfigData?.itemId}/fields`;
-                    const updatedValue = this.state.enableMapViewer ? this.state.bingMapsKey?.trim() : "";
-                    let updatedBingAPIKeyObj = { Value: updatedValue }
-                    //Update Bing Map API Key in TEOC-config list API Call
-                    await this.commonService.updateItemInList(graphConfigListEndpoint, this.props.graph, updatedBingAPIKeyObj);
+                    //Endpoint to update azure Map API Key in TEOC-config list
+                    const graphConfigListEndpoint = `${graphConfig.spSiteGraphEndpoint}${this.props.siteId}/lists/${siteConfig.configurationList}/items/${this.props.azureMapsKeyConfigData?.itemId}/fields`;
+                    const updatedValue = this.state.enableMapViewer ? this.state.azureMapsKey?.trim() : "";
+                    let updatedazureAPIKeyObj = { Value: updatedValue }
+                    //Update azure Map subscription Key in TEOC-config list API Call
+                    await this.commonService.updateItemInList(graphConfigListEndpoint, this.props.graph, updatedazureAPIKeyObj);
 
                     let messageToDisplay: string;
-                    if (this.state.enableMapViewer && this.props.bingMapsKeyConfigData?.value?.trim() !== "" &&
-                        this.state.bingMapsKey?.trim() !== "") {
+                    if (this.state.enableMapViewer && this.props.azureMapsKeyConfigData?.value?.trim() !== "" &&
+                        this.state.azureMapsKey?.trim() !== "") {
                         messageToDisplay = this.props.localeStrings.mapViewerKeyUpdatedMessage;
                     }
                     else {
@@ -332,7 +332,7 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                     //Update Home Component states
                     this.props.setState({
                         isMapViewerEnabled: this.state.enableMapViewer,
-                        bingMapsKeyConfigData: { ...this.props.bingMapsKeyConfigData, value: updatedValue }
+                        azureMapsKeyConfigData: { ...this.props.azureMapsKeyConfigData, value: updatedValue }
                     });
 
                     //Update Config Settings States
@@ -344,7 +344,7 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                                 message: messageToDisplay
                             }
                         },
-                        bingMapsKey: updatedValue
+                        azureMapsKey: updatedValue
                     });
                 }
             }
@@ -461,7 +461,7 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                             </Label>
                         </div>
                         <div className='app-title-input-wrapper'>
-                            <Input
+                            <Input                               
                                 placeholder={this.props.localeStrings.AppTitlePlaceholderText}
                                 className="app-title-input-box"
                                 value={this.state.appTitle}
@@ -529,7 +529,7 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                             </a>
                         }
                     </div>
-                    <div className={`config-settings-toggle-btn-wrapper map-viewer-setting${this.state.bingMapsKeyError ? " field-with-error" : ""}`}>
+                    <div className={`config-settings-toggle-btn-wrapper map-viewer-setting${this.state.azureMapsKeyError ? " field-with-error" : ""}`}>
                         <Toggle
                             checked={this.state.enableMapViewer}
                             label={
@@ -561,21 +561,22 @@ export default class ConfigSettings extends React.Component<IConfigSettingsProps
                         {this.state.enableMapViewer &&
                             <div className='api-key-input-wrapper'>
                                 <Input
+                                    type="password"
                                     placeholder={this.props.localeStrings.mapViewerPlaceholder}
                                     className="api-key-input-box"
-                                    value={this.state.bingMapsKey}
+                                    value={this.state.azureMapsKey}
                                     onChange={(_ev, data: any) => {
                                         this.setState((prevState) => ({
-                                            bingMapsKey: data.value,
-                                            bingMapsKeyError: data?.value?.trim() === "",
+                                            azureMapsKey: data.value,
+                                            azureMapsKeyError: data?.value?.trim() === "",
                                             messages: {
                                                 ...prevState.messages,
                                                 mapViewer: { messageType: -1, message: "" }
                                             }
                                         }))
                                     }}
                                 />
-                                {this.state.bingMapsKeyError &&
+                                {this.state.azureMapsKeyError &&
                                     <span className='api-key-error-msg' aria-live="polite" role="alert">
                                         {this.props.localeStrings.mapViewerKeyRequiredMessage}</span>
                                 }

diff --git a/EOC-TeamsFx/tabs/src/components/Dashboard.tsx b/EOC-TeamsFx/tabs/src/components/Dashboard.tsx
@@ -40,8 +40,8 @@ export interface IDashboardProps {
     activeDashboardIncidentId: string;
     fromActiveDashboardTab: boolean;
     isMapViewerEnabled: boolean;
-    bingMapsKeyConfigData: any;
-
+    azureMapsKeyConfigData: any;
+    graphBaseUrl: any;
 }
 
 export interface IDashboardState {
@@ -911,7 +911,7 @@ class Dashboard extends React.PureComponent<IDashboardProps, IDashboardState> {
                                                 noDataIndication={() => (<div id="noincident-all-tab" aria-live="polite" role="status">{this.props.localeStrings.noIncidentsFound}</div>)}
                                             />
                                             :
-                                            <MapViewer incidentData={this.state.filteredAllIncidents} bingMapKey={this.props.bingMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
+                                            <MapViewer graphBaseUrl={this.props.graphBaseUrl} incidentData={this.state.filteredAllIncidents} azureMapKey={this.props.azureMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
                                         }
                                     </PivotItem>
                                     <PivotItem
@@ -933,7 +933,7 @@ class Dashboard extends React.PureComponent<IDashboardProps, IDashboardState> {
                                                 noDataIndication={() => (<div id="noincident-planning-tab" aria-live="polite" role="status">{this.props.localeStrings.noIncidentsFound}</div>)}
                                             />
                                             :
-                                            <MapViewer incidentData={this.state.filteredPlanningIncidents} bingMapKey={this.props.bingMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
+                                            <MapViewer graphBaseUrl={this.props.graphBaseUrl} incidentData={this.state.filteredPlanningIncidents} azureMapKey={this.props.azureMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
                                         }
                                     </PivotItem>
                                     <PivotItem
@@ -955,7 +955,7 @@ class Dashboard extends React.PureComponent<IDashboardProps, IDashboardState> {
                                                 noDataIndication={() => (<div id="noincident-active-tab" aria-live="polite" role="status">{this.props.localeStrings.noIncidentsFound}</div>)}
                                             />
                                             :
-                                            <MapViewer incidentData={this.state.filteredActiveIncidents} bingMapKey={this.props.bingMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
+                                            <MapViewer graphBaseUrl={this.props.graphBaseUrl} incidentData={this.state.filteredActiveIncidents} azureMapKey={this.props.azureMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
                                         }
                                     </PivotItem>
                                     <PivotItem
@@ -978,7 +978,7 @@ class Dashboard extends React.PureComponent<IDashboardProps, IDashboardState> {
                                                 noDataIndication={() => (<div id="noincident-completed-tab" aria-live="polite" role="status">{this.props.localeStrings.noIncidentsFound}</div>)}
                                             />
                                             :
-                                            <MapViewer incidentData={this.state.filteredCompletedIncidents} bingMapKey={this.props.bingMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
+                                            <MapViewer graphBaseUrl={this.props.graphBaseUrl} incidentData={this.state.filteredCompletedIncidents} azureMapKey={this.props.azureMapsKeyConfigData} showMessageBar={this.props.showMessageBar} userPrincipalName={this.props.userPrincipalName} localeStrings={this.props.localeStrings} appInsights={this.props.appInsights}></MapViewer>
                                         }
                                     </PivotItem>
                                 </Pivot>