![{this.props.localeStrings.edit}]({require("../assets/Images/GridEditIcon.svg").default} "{this.props.localeStrings.edit}")
this.props.onEditButtonClick(gridRow)}
- />
+
+ {/* bind edit icon to dashboard if status is not 'Completed' */}
+ this.props.onEditButtonClick(gridRow)}
+ />
+
+ {/* view version history of each incident in dashboard when onclick of history icon */}
+ ![{this.props.localeStrings.viewIncidentHistory}]({require("../assets/Images/IncidentHistoryIcon.svg").default} "{this.props.localeStrings.viewIncidentHistory}")
this.props.onShowIncidentHistory(gridRow.incidentId)}
+ />
+
);
}
@@ -155,7 +174,7 @@ class Dashboard extends React.PureComponent![Manage Roles]({require("../assets/Images/Manage)
- this.setState({ isManageCalloutVisible: !this.state.isManageCalloutVisible })}
+ id={manageButtonId}
+ >
+ ![Manage Icon]({require("../assets/Images/ManageIcon.svg").default})
+ ![Manage Active Icon]({require("../assets/Images/ManageIconActive.svg").default})
+
+
+
+
+
+ {this.props.localeStrings.manageLabel}
+ {this.state.isManageCalloutVisible ?
+
+
+
+
+ this.props.onShowTeamNameConfigForm()}
+ >
+
+ ![{this.props.localeStrings.manageTeamNameTooltip}]({require("../assets/Images/TeamNameIcon.svg").default})
+ {this.props.localeStrings.teamNameLabel}
+
+
+
+ {this.props.localeStrings.teamNameLabel}
+
+
diff --git a/EOC-TeamsFx/tabs/src/components/EOCHome.tsx b/EOC-TeamsFx/tabs/src/components/EOCHome.tsx
index 499a3cb..e803dfa 100644
--- a/EOC-TeamsFx/tabs/src/components/EOCHome.tsx
+++ b/EOC-TeamsFx/tabs/src/components/EOCHome.tsx
@@ -1,25 +1,29 @@
-import React from 'react';
-import { TeamsUserCredential, createMicrosoftGraphClient } from "@microsoft/teamsfx";
-import { Client } from "@microsoft/microsoft-graph-client";
+import { initializeIcons, MessageBar, MessageBarType } from '@fluentui/react';
+import { Button, Dialog, Loader } from "@fluentui/react-northstar";
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { Providers, ProviderState, SimpleProvider } from '@microsoft/mgt-element';
-import { Button, Loader, Dialog } from "@fluentui/react-northstar";
-import { MessageBar, MessageBarType, initializeIcons } from '@fluentui/react';
-import Dashboard from './Dashboard';
-import EocHeader from './EocHeader';
-import siteConfig from '../config/siteConfig.json';
-import * as graphConfig from '../common/graphConfig';
-import CommonService from "../common/CommonService";
-import * as constants from '../common/Constants';
-import IncidentDetails from './IncidentDetails';
-import "../scss/EOCHome.module.scss";
+import { Client } from "@microsoft/microsoft-graph-client";
import * as microsoftTeams from "@microsoft/teams-js";
+import { createMicrosoftGraphClient, TeamsUserCredential } from "@microsoft/teamsfx";
+import React from 'react';
import LocalizedStrings from 'react-localization';
+import CommonService from "../common/CommonService";
+import * as constants from '../common/Constants';
+import * as graphConfig from '../common/graphConfig';
import { localizedStrings } from "../locale/LocaleStrings";
-import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import "../scss/EOCHome.module.scss";
+import Dashboard from './Dashboard';
+import EocHeader from './EocHeader';
+import IncidentDetails from './IncidentDetails';
+import { IncidentHistory } from './IncidentHistory';
+import { TeamNameConfig } from './TeamNameConfig';
initializeIcons();
+//Global Variables
let appInsights: ApplicationInsights;
-
+//Get site name from ARMS template(environment variable)
+//Replace spaces from environment variable to get site URL
+let siteName = process.env.REACT_APP_SHAREPOINT_SITE_NAME?.toString().replace(/\s+/g, '');
interface IEOCHomeState {
showLoginPage: boolean;
graph: Client;
@@ -40,6 +44,9 @@ interface IEOCHomeState {
showLoader: boolean,
showNoAccessMessage: boolean;
userPrincipalName: any;
+ showTeamNameConfigForm: boolean;
+ showIncidentHistory: boolean;
+ incidentId: string;
}
interface IEOCHomeProps {
@@ -82,7 +89,10 @@ export class EOCHome extends React.Component {
isEditMode: false,
showLoader: false,
showNoAccessMessage: false,
- userPrincipalName: null
+ userPrincipalName: null,
+ showTeamNameConfigForm: false,
+ showIncidentHistory: false,
+ incidentId: ""
}
}
@@ -204,7 +214,7 @@ export class EOCHome extends React.Component {
const tenantName = await this.dataService.getTenantDetails(graphConfig.rootSiteGraphEndpoint, this.state.graph);
// Form the graph end point to get the SharePoint site Id
- const urlForSiteId = graphConfig.spSiteGraphEndpoint + tenantName + ":/sites/" + siteConfig.siteName + "?$select=id";
+ const urlForSiteId = graphConfig.spSiteGraphEndpoint + tenantName + ":/sites/" + siteName + "?$select=id";
// get SharePoint site Id
const siteDetails = await this.dataService.getGraphData(urlForSiteId, this.state.graph);
@@ -332,10 +342,10 @@ export class EOCHome extends React.Component {
// changes state to show message bar and dashboard
private handleBackClick = (showMessageBar: boolean) => {
if (showMessageBar) {
- this.setState({ showIncForm: false, isEditMode: false })
+ this.setState({ showIncForm: false, isEditMode: false, showTeamNameConfigForm: false, showIncidentHistory: false })
}
else {
- this.setState({ showIncForm: false, showMessageBar: false, isEditMode: false })
+ this.setState({ showIncForm: false, showMessageBar: false, isEditMode: false, showTeamNameConfigForm: false, showIncidentHistory: false })
}
}
@@ -346,8 +356,19 @@ export class EOCHome extends React.Component {
})
}
+ // changes state to show create incident form
+ private onShowTeamNameConfigForm = () => {
+ this.setState({ showTeamNameConfigForm: true });
+ this.hideMessageBar();
+ }
+
+ //changes state to show Incident History of an incident.
+ private onShowIncidentHistory = (incidentId: string) => {
+ this.setState({ showIncidentHistory: true, incidentId: incidentId });
+ this.hideMessageBar();
+ }
+
public render() {
- // let localeStrings = new LocalizedStrings(localizedStrings);
if (this.state.locale && this.state.locale !== "") {
localeStrings.setLanguage(this.state.locale);
}
@@ -399,27 +420,79 @@ export class EOCHome extends React.Component {
<>
}
diff --git a/EOC-TeamsFx/tabs/src/components/EocHeader.tsx b/EOC-TeamsFx/tabs/src/components/EocHeader.tsx
index aef0814..bcd205d 100644
--- a/EOC-TeamsFx/tabs/src/components/EocHeader.tsx
+++ b/EOC-TeamsFx/tabs/src/components/EocHeader.tsx
@@ -64,7 +64,7 @@ export default class EocHeader extends Component
-
+
+
+
+
+ this.setState({
+ selectedSeverity: index
+ })}
+ renderMark={(props: any) => {
+ if (props.key < this.state.selectedSeverity) {
+ props.className = "example-mark example-mark-completed";
+ } else if (props.key === this.state.selectedSeverity) {
+ props.className = "example-mark example-mark-active";
+ }
+ return ;
+ }}
+ />
+
+
+ {this.props.isEditMode &&
+
+ {constants.severity.map((item, index) => {
+ return (
+
+
+ {item}
+
+ );
+ })}
+
+ this.onTextInputChange(evt, "reasonForUpdate")}
+ className="incident-details-reason-update-area"
+ />
+ {this.state.inputValidation.incidentReasonForUpdateHasError && (
+
+ )}
+
+
+ }
+ {this.props.localeStrings.headerRoleAssignment}
+ this.setState({
+ saveDefaultRoleCheck: isChecked
+ })}
+ />
+