V2.4.0 release changes (#139)

* V2.4 release changes

* v.2.4.0 release changes

* v2.4.0 release

.eslintrc.ts

@@ -0,0 +1,39 @@
+import { off } from "gulp";
+import { error } from "jquery";
+
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+module.exports = {
+    extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
+    parserOptions: { tsconfigRootDir: __dirname },
+    overrides: [
+        {
+            files: ["*.test.tsx", "*.tsx"],
+            "rules": {
+                "class-name": off,
+                "export-name": off,
+                "forin": off,
+                "label-position": off,
+                "member-access": error,
+                "no-arg": off,
+                "no-console": off,
+                "no-construct": off,
+                "no-duplicate-variable": error,
+                "no-eval": off,
+                "no-function-expression": error,
+                "no-internal-module": error,
+                "no-shadowed-variable": error,
+                "no-switch-case-fall-through": error,
+                "no-unnecessary-semicolons": error,
+                "no-unused-expression": error,
+                "no-with-statement": error,
+                "semicolon": error,
+                "trailing-comma": off,
+                "typedef": off,
+                "typedef-whitespace": off,
+                "use-named-parameter": error,
+                "variable-name": off,
+                "whitespace": off
+            }
+        }
+    ]
+};

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log*
 
 # Dependency directories
 node_modules
+.heft
 
 # Build generated files
 dist

.vscode/launch.json

@@ -7,7 +7,7 @@
   "configurations": [
     {
       "name": "Hosted workbench",
-      "type": "chrome",
+      "type": "pwa-chrome",
       "request": "launch",
       "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
       "webRoot": "${workspaceRoot}",

.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.13.0",
+    "version": "1.15.0",
     "libraryName": "clb",
     "libraryId": "5099a3ef-113f-4baf-bb6a-a73b1dd286f8",
     "packageManager": "npm",

README.md

@@ -11,13 +11,6 @@ The app provides an easy interface for designated users to add members to the ch
 ![CMP Screen](Images/AddTab_Teams.png)                   
 
 
-## Known issues
-
-1) If site is presenting with spinning blue circle check to ensure permissions are allowed to the ChampionManagementPlatform sharepoint site. If this is happening on the first load experience ensure that the user running first run experience has permissions to create a SharePoint site (first run creates the initial ChampionManagementPlatform site).If you continue to experience the blue circle, please remove the app from Teams and try again. Visit our issues list to log an issue if issue is still persistent. 
-
-2) If new users visit the Champion Management Platform app and receive a blue spinning circle, ensure that you have granted contribute/edit permissions to the SharePoint site created during first run to all users (or scoped users accessing the app). The default site created is ChampionManagementPlatform.
-
-
 ## Additional Customization Options
 
 The Champion Management Platform is built to provide a great starting point for managing your program. There are several ways you can modify the solution to fit your needs, refer to this [section](https://github.com/OfficeDev/microsoft-teams-apps-champion-management/wiki/Customizations) for more on customization.

SUPPORT.md

@@ -1,13 +1,24 @@
+# TODO: The maintainer of this repo has not yet edited this file
+
+**REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project?
+
+- **No CSS support:** Fill out this template with information about how to file issues and get help.
+- **Yes CSS support:** Fill out an intake form at [aka.ms/spot](https://aka.ms/spot). CSS will work with/help you to determine next steps. More details also available at [aka.ms/onboardsupport](https://aka.ms/onboardsupport).
+- **Not sure?** Fill out a SPOT intake as though the answer were "Yes". CSS will help you decide.
+
+*Then remove this first heading from this SUPPORT.MD file before publishing your repo.*
+
 # Support
 
 ## How to file issues and get help  
 
-This project uses GitHub Issues to track bugs and technical requests. Please search the <a href="https://github.com/OfficeDev/microsoft-teams-apps-champion-management/issues" title="exitsting issues">existing issues</a> before filing new issues to avoid duplicates.  For new issues, file your bug or 
-technical request as a new Issue.
-
-For help and questions about using this project, please visit our <a href="https://aka.ms/drivingadoption" title="Driving Adoption">Driving Adoption</a> forum.
+This project uses GitHub Issues to track bugs and feature requests. Please search the existing 
+issues before filing new issues to avoid duplicates.  For new issues, file your bug or 
+feature request as a new Issue.
 
-To request a new feature for this project, please visit our <a href="https://aka.ms/AdoptionFeedback" title="Community & Adoption Feedback Portal">Community & Adoption Feedback Portal</a> forum.
+For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE 
+FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER
+CHANNEL. WHERE WILL YOU HELP PEOPLE?**.
 
 ## Microsoft Support Policy  
 

Wiki/Customizations.md

@@ -60,20 +60,38 @@ Below are the high level steps to get you started on customizing the template.
 1. Delete the "TeamsSPFxApp.zip" folder and create a new zip folder with the images and the manifest file in the same location with the same name.
 1. Generate a new package file and follow the deployment instructions in the deployment guide.
 
-## Customize Member List attributes
+## Customize Member List
 
-1. The values for the dropdown lists in the "Add Member" component can be customized.
+Below customizations can be done in the Member list with no code changes required in the solution.
 
-    ![Customization](../Images/Customization5.png)  
+1. Modify the display name for the below columns
+    - Region
+    - Country
+    - Group
+
+![Customization](../Images/RenameColumns.png) 
+
+>**Note:** Change column names only when your SharePoint site is displayed in English (i.e. The language setting for the user in office 365 profile (Delve) should be English). This is a limitation based on how the column renaming works in non-English languages.
+
+2. Admin can Show/Hide the below columns from "Manage Config Settings" under Admin Tasks.
+    - Region
+    - Country
+    - Group
+
+![Customization](../Images/ColConfigSettings.png) 
 
-1. To add/modify values for these dropdowns navigate to "ChampionManagementPlatform" SharePoint site.
-1. Go to Settings page of SharePoint list "Member List".
-1. Find the column that you want to add/modify values of. For ex: To add a new region click on "Region" column
+For eg: If any of these column is no longer needed for the app, it can configured in the above screen and it will be hidden throughout the app screens where it was used.
 
-    ![Customization](../Images/Customization6.png)  
+![Customization](../Images/AddMemberHiddenCols.png) 
 
-1. Add/Modify the values as shown below and click "Save"
+3. Add/Modify the choices for the below columns
+    - Region
+    - Country
+    - Group
+    - Focus Area
 
-    ![Customization](../Images/Customization7.png)  
+ ![Customization](../Images/Customization7.png)   
 
-1. Repeat the steps for other columns that needs to be modified.
+>**Important Note:**
+1. Do not delete or change the type of any column in the "Member List".
+1. Do not make any customization other than the above listed items, unless you are customizing the code. Otherwise it will break the functionality of the app.

Wiki/Deployment-Guide.md

@@ -91,20 +91,28 @@ Continuing below steps you can take the cmp.sppkg file from the ***cmp.sppkg***
 The customized installation makes the assumption you wish to change the default variables (site location, text or visual aspects, etc) with the Champion Management Platform. Customizing the installation takes it outside of 
 configurations we have tested against but allows you to modify any aspect of the platform. Below are high level steps to get you started on a customized installation.
 
+### Prerequisites 
+
+1. [Set up your development environment](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment)
+1. Clone the app [repository](https://github.com/OfficeDev/microsoft-teams-apps-champion-management.git) locally.
+
+Below are the high level steps to get you started on a customizing the template.
+
 ### Install NodeJs
 
 1.  Download nodejs from this link 
-    https://nodejs.org/ 
+    https://nodejs.org/en/download/releases/ 
+
+2.  Previous Releases | Node.js (nodejs.org) 
+    Download node 16.18.0
 
-2.   Previous Releases | Node.js (nodejs.org) 
-    Download node 14.18.2
+3.  After downloading and installing the nodejs and installing follow steps as follows
 
-3.  After downloading the nodejs and installing follow steps as follows
+4.  Open the CMP solution in VS Code.
 
-4.  Please open the CMP download folder
-    Run Npm install
-    And 
-    Run npm install -g gulp
+    run npm install
+
+    run npm install -g gulp
 
   *	Global or SharePoint Administrator role in the target tenant
   *	***ChampionManagementPlatform*** project in GitHub
@@ -145,7 +153,7 @@ If desired the administrator can configure the installation location including t
 
 3.	Navigate to the solution folder where you cloned and locate the newly created ***cmp.sppkg*** package in ***"sharepoint/solution"***.
 
-### First Run Experience: Add **Champion Management Platform** Tab in Teams
+## First Run Experience: Add **Champion Management Platform** Tab in Teams
 
 **NOTE:** Please wait for around 20 minutes for API access approvals done in the previous section to take effect before proceeding with the below steps.
 
@@ -175,9 +183,9 @@ If desired the administrator can configure the installation location including t
 
     ![App Set Up](../Images/Apprefresh.png)
 
-    If you still do not see the landing page after refresh please create an issue in the Github.
+    If you still do not see the landing page after refresh please create an issue in the GitHub.
 
-7. The landing page for an Admin will have access to the *Champion Leaderboard, Digital Badge, Enable Tournament of Teams* and the SharePoint lists (*Champions, Events,Event track Details, Digital Badges*), as well as Manage Approvals.
+7. The landing page for an Admin will have access to the *Champion Leaderboard, Digital Badge, Enable Tournament of Teams* and the SharePoint lists (*Champions, Events,Event track Details, Digital Badges*), as well as Admin Tasks.
 
     ![Quick Start Guide](../Images/AddTab_Teams.png) 
 
@@ -207,19 +215,51 @@ If desired the administrator can configure the installation location including t
 
     ![Quick Start Guide](../Images/sitePerms.png) 
 
-### Teams Personal App:
-
-CLbHomeWebPart.manifest.json is updated with a new entry, TeamsPersonalApp  
-
-![Quick Start Guide](../Images/teamspersonalapp.png) 
 
 ### Completed Install
 
 Once you have performed the above steps, the deployment of the Champion Management Platform is now complete. If an admin was deploying this on behalf of the manager of the Champion Management Platform please have the admin add the
-Champion Management Platform manager as a champion and change their role in the Memberlist from ***Champion*** to ***Manager*** so they will have access to the other parts of the platform.
+Champion Management Platform manager as a champion and change their role in the Member List from ***Champion*** to ***Manager*** so they will have access to the other parts of the platform.
 
 ### Enable Tournament of Teams
 
 Click on "Enable Tournament of Teams" on CMP home page to enable the Tournament of Teams. Refer to "Tournament of Teams" section for additional details.
 
-![Quick Start Guide](../Images/EnableTournaments.png) 
+![Quick Start Guide](../Images/EnableTournaments.png) 
+
+### Import flow template in Power Automate (Optional Enhancement)
+
+If you enable the Champion Event Approvals in the CMP App, then do configure the Power Automate Flow template in the tenant to send notifications to the CMP Manager at regular intervals if there are any pending event requests available.
+
+1. To import the Power Automate flow template in your tenant, make sure you have cloned the app [repository](https://github.com/OfficeDev/microsoft-teams-apps-champion-management.git) locally.  
+2. Get the .zip package file `CMP-ManagerNotifications-FlowTemplate` under **ManagerNotifications** folder.  
+3. Navigate to the Power Automate site in your tenant.
+4. From the left navigation, Select "My Flows" --> "Import" --> "Import Package (Legacy)"
+5. Choose and upload the `CMP-ManagerNotifications-FlowTemplate.zip` package.
+6. Select the connection for the Resource Types. Click on "Select during Import" under Import Setup for each resource type and choose the connection. If the connection is not already available, create one for that resource type and then choose it.
+7. After selecting the connections for all the 3 resources, click on Import.
+
+    ![Quick Start Guide](../Images/ImportFlow.png)
+
+8. Once the package is successfully imported, navigate to the edit flow screen by clicking on "Open flow" link as shown in the below image or you can navigate through "My Flows" --> Select the imported flow --> Choose "Edit".
+
+    ![Quick Start Guide](../Images/ImportSuccess.png)
+
+9. Update your tenant name for the placeholder in the SharePoint site URL that is highlighted in below image. Additionally, you can update the interval for the flow trigger as per the need (by default it is set to 24 hours)
+
+    ![Quick Start Guide](../Images/FlowTemplate.png)
+
+10. Save the flow then navigate to "My Flows", select the flow and turn on it.
+
+    ![Quick Start Guide](../Images/EnableFlow.png)
+
+### Approval Notifications for the Manager
+
+After the flow is configured in the tenant, it will send a adaptive card notification to all the CMP Managers at regular configured interval, if there are any pending event requests available.
+
+![Quick Start Guide](../Images/ManagerNotification.png)
+
+
+
+
+

Wiki/FAQ.md

@@ -2,19 +2,9 @@
 
  To maintain permissions and access control, current version of CMP is creating a new site. If you wish to install to a specific existing site you can download the source code and modify the location of SharePoint site the package installs to. This would require a recompile of the package.
 
-### 2. Why is my profile image not updated with Digital Badge?
+ ### 2. Does the app support multiple locales?
 
- This happens when the permissions are not being inherited or approved after deploying package. The users must be able to update their profile images and Graph API permissions must have also been approved during package install. 
-
- ### 3. I see the below error on Tournament of Teams “Leader Board” 
-
-"An unexpected error occurred while getting users."
-
- This happens when the API permission “User.ReadBasic.All” is not approved after upgrading the app from older versions to version 2.0. Refer to the “Upgrade” section and approve the API permission. After approving the permission, it would take some time for it to take effect. 
-
- ### 4. Does the app support multiple locales?
-
- Yes, CMP v2.3 supports the translations for below 12 languages, 
+ Yes, CMP v2.3 or later supports the translations for below 12 languages, 
 
 - Arabic (SA)
 - Chinese
@@ -29,11 +19,7 @@
 - Russian
 - Spanish
 
-### 5. Does the app support mobile devices?
-
-Yes, CMP v2.3 supports the desktop, mobile and tab devices.
-
-### 6. I see an error 'Failed to sync solution to Teams' or 'Couldn't add app to Teams' when I click on 'Sync to Teams'(Classic App Catalog) or 'Add to Teams'(Modern App Catalog)?
+### 3. Does the app support mobile devices?
 
-Delete the app from Teams Admin Center and then click on 'Sync to Teams' or 'Add to Teams'.
+Yes, CMP v2.3 or later supports the desktop, mobile and tab devices.
 

Wiki/Release-Notes.md

@@ -3,6 +3,7 @@ This page contains the different release details for Champion Management Platfor
 ## Version history
 | Version | Release Date |
 |----|----|
+| 2.4 | Dec 6, 2022 |
 | 2.3 | Jul 28, 2022 |
 | 2.2 | May 17, 2022 |
 | 2.1 | Apr 4, 2022 |
@@ -13,6 +14,21 @@ This page contains the different release details for Champion Management Platfor
 
 ## Release notes
 
+### 2.4 (Dec 6, 2022)
+
+Below improvements released,
+
+- Upgraded SPFx version from 1.13.0 to 1.15.0 and its related NPM packages.
+- Upgraded node.js to v16.18.0 which is compatible for SPFx v1.15.0.
+- New Feature: Added a new "Admin Tasks" feature, that allows admin to manage champion requests, event requests and config settings.
+- New Feature: Ability for the admin to enable events approval and allow them to review the events submitted by champions and approve it.
+- New Feature: Ability to send notification to Managers for the pending event requests.
+- New Feature: Ability to customize the display name and choices of Region, Group and Country columns in Member List and show/hide these columns in various screens of the application (eg: Add Member , Become a Champion, etc..)
+- New Feature: Implemented a functionality to unlock digital badges for Champions based on their points.
+- Bug Fix: Digital Badge error for profiles with no profile picture in CDN enabled tenant.
+- Bug Fix: Reversal of First name and Last name in Member List for the tenants with display name format as 'LastName FirstName'.
+- Other Changes: Few minor UI enhancements
+
 ### 2.3 (Jul 28, 2022)
 
 Below improvements released,