Merge pull request #37 from microsoft/users/esmishra/caching-fix

Caching, user feedback, accessibility

Author: emishra

source/reactjs/README.md

@@ -1,10 +1,58 @@
+# Microsoft Assent
+## Assent <sub>**A***pproval* **S***olution* **S***implified for* **ENT***erprise*<sub>
+Microsoft Assent (*a.k.a Approvals*) as a platform provides the "one stop shop" solution for approvers via a model that brings together disparate different approval requests in a consistent and ultra-modern model. Approvals delivers a unified approvals experience for any approval on multiple form factors - Website, Outlook Actionable email, Teams. It consolidates approvals across organization's line of business applications, building on modern technology and powered by Microsoft Azure. It serves as a showcase for solving modern IT scenarios using the latest technologies.
+- Payload Receiver Service API - Accepts payload from tenant system.
+- Audit Processor - Azure Function that logs the payload data into Azure Cosmos DB.
+- Primary Processor - Azure Function that processes the payload pushed by payload receiver service API to service bus.
+- Notification Processor - Azure Function that sends email notifications to Approvers/ Submitters as per configurations.
+- WatchdogProcessor - as per configurations from tenant sends reminder email notifications to Approvers for pending approvals as per configurations from tenant.
+- Core Services API - Set of Web APIs to support the Approvals UI.
+
 ## Run the template
 
-1. Update all properties in the globals section of config/local.js
+1. Update below properties in the globals section of config/local.js
     1. __CLIENT_ID__: process.env.clientId || '########-####-####-####-############',
     2. __INSTRUMENTATION_KEY__: process.env.instrumentationKey || '########-####-####-####-############'
 };
 
 2. Run `npm install`
 
-3. Run `npm start` to run the app
+3. Run `npm start` to run the app
+
+## User feedback setup
+
+1. Update the __FEEDBACK_CONFIGURATION_URL__ value in the config files to your feedback endpoint, the feedback icon in top header will only appear if this value is set
+2. Implement the IFeedback interface provided in Feedback.ts, a sample Feedback class is provided in the same file
+3. If using a custom component for the Feedback UI, it can be linked with the top header using the launchfeedback event handler of the Feedback class and any initialization required for the user feedback flow can be done within the constructor
+4. Create an instance of your feedback class of type IFeedback and pass it to the TopHeader component, an example is provided below where feedback is initialized as a local state object
+    
+    ```
+    setFeedback(new Feedback() as IFeedback);
+    <TopHeader upn={user?.email} displayName={user?.name} feedback={feedback} />
+    ```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
+
+## Contributing
+
+This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
+the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
+
+When you submit a pull request, a CLA bot will automatically determine whether you need to provide
+a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
+provided by the bot. You will only need to do this once across all repos using our CLA.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## Trademarks
+
+This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
+trademarks or logos is subject to and must follow
+[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
+Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
+Any use of third-party trademarks or logos are subject to those third-party's policies.

source/reactjs/THIRD_PARTY_NOTICES.txt

@@ -1276,4 +1276,31 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ---------------------------------------------------------
 
+---------------------------------------------------------
+
+react-cache-buster: 0.1.7 - MIT
+
+MIT License
+
+Copyright (c) 2021 Çağrı Aldemir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+
+---------------------------------------------------------
+
 ---------------------------------------------------------

source/reactjs/config/local.js

@@ -4,7 +4,7 @@ const staticComponents = {
     /* =========================
      * Add host app entry point here
      * ====================== */
-    app: './src/App.tsx'
+    app: './src/App.tsx',
 };
 
 const dynamicComponents = {
@@ -30,23 +30,21 @@ const globals = {
     __API_URL_ROOT__: process.env.apiBaseUrl || '/api/v1',
     __GRAPH_BASE_URL__: process.env.graphBaseUrl || 'https://graph.microsoft.com/v1.0/',
     __GRAPH_RESOURCE_URL__: process.env.graphResourceUrl || 'https://graph.microsoft.com',
-    __RESOURCE_URL__: process.env.resourceUrl || 'https://api.approvals.contoso.com/',
-    __MICROFRONTEND_CDN_URL__: process.env.microfrontendURL || '',
     __UPN_SUFFIX__: process.env.upnSuffix || '@contoso.com',
-    //OCV App Id and telemetry group
-    __OCV_APP_ID__: process.env.ocvAppId || 0000,
-    __OCV_ENVIRONMENT_NAME__: 'Int',
-    __OCV_TELEMETRY_GROUP__: process.env.telemetryGroup || {
-        featureArea: 'Modern Website'
-    },
-
+    __RESOURCE_URL__: process.env.resourceUrl || 'https://api.approvals.contoso.com/',
+    __MICROFRONTEND_CDN_URL__:
+        process.env.microfrontendURL || '',
+    //Feedback data
+    __FEEDBACK_ENVIRONMENT_NAME__: 'Int',
+    __FEEDBACK_CONFIGURATION_URL__: '',
+    //CELA Invoice API Url
     __API_BASE_MATTER_URL__: process.env.apiBaseUrl || '',
     __API_BASE_MATTER_RESOURCE_URL__: process.env.apiBaseUrl || '',
-    __CLASSIC_WEB_URL__: process.env.classicWebUrl || 'https://approvals.contoso.com/'
+    __CLASSIC_WEB_URL__: process.env.classicWebUrl || 'https://approvals.contoso.com/',
 };
 
 module.exports = {
     staticComponents,
     dynamicComponents,
-    globals
+    globals,
 };

source/reactjs/global.d.ts

@@ -14,14 +14,11 @@ declare global {
     const __GRAPH_BASE_URL__: string;
     const __UPN_SUFFIX__: string;
     const __GRAPH_RESOURCE_URL__: string;
-    const __AUTHORITY__:string;
+    const __AUTHORITY__: string;
     const __API_BASE_MATTER_URL__: string;
     const __API_BASE_MATTER_RESOURCE_URL__: string;
-    const __OCV_APP_ID__:number;
-    const __OCV_ENVIRONMENT_NAME__:string;
-    const __OCV_TELEMETRY_GROUP__: {
-        featureArea: string
-    };
+    const __FEEDBACK_ENVIRONMENT_NAME__: string;
+    const __FEEDBACK_CONFIGURATION_URL__: string;
     const __MICROFRONTEND_CDN_URL__: string;
     const __CLASSIC_WEB_URL__: string;
 }

source/reactjs/package.json

@@ -1,23 +1,24 @@
 {
     "private": true,
     "name": "approvals-web",
-    "version": "2.3.0",
+    "version": "2.4.2",
     "description": "",
     "main": "index.js",
     "author": "Microsoft Approvals Team",
     "scripts": {
-        "start": "webpack-dev-server --mode development --open",
-        "start:development": "webpack-dev-server --mode development --open --env NODE_ENV=development",
+        "generate-meta-tag": "node ./node_modules/react-cache-buster/dist/generate-meta-tag.js",
+        "start": "npm run generate-meta-tag && webpack-dev-server --mode development --open",
+        "start:development": "npm run generate-meta-tag && webpack-dev-server --mode development --open --env NODE_ENV=development",
         "start:test": "webpack-dev-server --mode development --open --env NODE_ENV=test",
-        "start:uat": "webpack-dev-server --mode development --open --env NODE_ENV=uat",
-        "start:prod": "webpack-dev-server --mode development --open --env NODE_ENV=production",
+        "start:uat": "npm run generate-meta-tag && webpack-dev-server --mode development --open --env NODE_ENV=uat",
+        "start:prod": "npm run generate-meta-tag && webpack-dev-server --mode development --open --env NODE_ENV=production",
         "serve": "webpack-dev-server --mode development --open --hot",
         "lerna:clean": "rimraf public/bundles",
         "build": "webpack --mode production",
-        "build:development": "webpack --mode production --env NODE_ENV=development",
+        "build:development": "npm run generate-meta-tag && webpack --mode production --env NODE_ENV=development",
         "build:test": "webpack --mode production --env NODE_ENV=test",
-        "build:uat": "webpack --mode production --env NODE_ENV=uat",
-        "build:prod": "webpack --mode production --env NODE_ENV=production",
+        "build:uat": "npm run generate-meta-tag && webpack --mode production --env NODE_ENV=uat",
+        "build:prod": "npm run generate-meta-tag && webpack --mode production --env NODE_ENV=production",
         "build:static": "webpack --mode production --config-name static",
         "build:dynamic": "webpack --mode production --config-name dynamic",
         "test": "jest --config jest.config.js",
@@ -38,7 +39,7 @@
         "@redux-devtools/extension": "^3.2.2",
         "adaptive-expressions": "^4.13.3",
         "adaptivecards": "^2.9.0",
-        "adaptivecards-templating": "^2.1.0",
+        "adaptivecards-templating": "^2.4.0-ci.202203.22001.0",
         "axios": "^0.26.0",
         "bootstrap": "^4.4.1",
         "buffer": "^6.0.3",
@@ -54,6 +55,7 @@
         "node-polyfill-webpack-plugin": "^1.1.4",
         "react": "~16.8.5",
         "react-bootstrap": "^1.0.1",
+        "react-cache-buster": "^0.1.7",
         "react-device-detect": "^2.1.2",
         "react-dom": "^16.8.5",
         "react-redux": "^7.2.6",
@@ -66,13 +68,13 @@
         "redux-persist": "^6.0.0",
         "redux-saga": "^1.1.3",
         "reselect": "^4.0.0",
-        "roosterjs-editor-api": "^8.18.0",
-        "roosterjs-editor-dom": "^8.18.0",
-        "sanitize-html": "^2.1.2",
+        "roosterjs-editor-api": "^8.28.1",
+        "roosterjs-editor-dom": "^8.28.1",
+        "sanitize-html": "^2.7.1",
         "styled-components": "^5.3.3",
         "tslib": "^2.3.1",
         "ua-parser-js": "^0.7.33",
-        "xlsx": "0.17.0"
+        "xlsx": "0.18.5"
     },
     "devDependencies": {
         "@babel/plugin-syntax-jsx": "^7.12.1",

source/reactjs/public/meta.json

@@ -0,0 +1 @@
+{"version":"2.4.2"}

source/reactjs/public/web.config

@@ -1,6 +1,9 @@
 <?xml version="1.0"?>
 <configuration>
     <system.webServer>
+        <staticContent>
+            <mimeMap fileExtension=".json" mimeType="application/json" />
+        </staticContent>
         <rewrite>
             <rules>
                 <rule name="React Routes" stopProcessing="true">