Merge pull request #1426 from NicolasKheirallah/react-application-ale…

…rt-banner

samples/react-application-alert-banner/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-application-alert-banner/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-application-alert-banner/.nvmrc

@@ -0,0 +1 @@
+v18.18.2

samples/react-application-alert-banner/.yo-rc.json

@@ -0,0 +1,22 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.18.2",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.12.0"
+    },
+    "version": "1.19.0",
+    "libraryName": "alert-Banner",
+    "libraryId": "19ca3d2c-07f7-4a03-ac6e-609fa591ccd9",
+    "environment": "spo",
+    "packageManager": "npm",
+    "solutionName": "AlertBanner",
+    "solutionShortDescription": "AlertBanner description",
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer"
+  }
+}

samples/react-application-alert-banner/Alertype.json

@@ -0,0 +1,30 @@
+[
+    {
+       "name":"Info",
+       "iconName":"Info12",
+       "backgroundColor":"#389899",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Warning",
+       "iconName":"ShieldAlert",
+       "backgroundColor":"#f1c40f",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Maintenance",
+       "iconName":"CRMServices",
+       "backgroundColor":"#afd6d6",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Interruption",
+       "iconName":"IncidentTriangle",
+       "backgroundColor":"#c54644",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    }
+ ]

samples/react-application-alert-banner/README.md

@@ -0,0 +1,155 @@
+# Alert Banner SPFx Extension
+
+## Summary
+
+The **Alert Banner SPFx Extension** is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services.
+
+![screenshot](./assets/Screenshot2024-08-17170932.png)
+
+This project based and draws inspiration from the work of Thomas Daly on this alerts banner! 
+Special thanks to Thomas Daly for the original concept!
+
+[Thomas Daly alert banner](https://github.com/tom-daly/alerts-banner)
+
+## Goal of this Project
+
+Alert banners are frequently requested by organizations such as IT departments but are not readily available out-of-the-box. This extension aims to provide a flexible and reusable alert system that any organization can deploy with ease.
+
+Additionally, this project serves as an opportunity to refresh and enhance coding skills within the SPFx ecosystem.
+
+## Used SharePoint Framework Version
+
+![SPFx 1.20](https://img.shields.io/badge/version-1.20.0-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to the [Microsoft 365 developer program](http://aka.ms/o365devprogram).
+
+## Prerequisites
+
+- Node.js (v18.x or later)
+- React 17
+- SPFx (v1.19.x or later)
+- A SharePoint Online site collection
+- Appropriate permissions to access and configure the tenant App Catalog
+
+## Solution
+
+| Solution     | Author(s)                                         |
+| ------------ | ------------------------------------------------- |
+| alert-banner | [Nicolas Kheirallah](https://github.com/nicolasKheirallah) |
+
+## Version History
+
+| Version | Date            | Comments                                        |
+| ------- | --------------- | ----------------------------------------------- |
+| 1.2     | October 11, 2024| Added dynamic alerttypes, added support for homesite, hubsite and local site |
+| 1.1     | August 17, 2024 | Added caching and session management for alerts |
+| 1.0     | July 15, 2024   | Initial release                                 |
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository.
+- Navigate to the solution folder.
+- In the command line, run:
+  - `npm install`
+  - `./buildProject.cmd`
+  - `Deploy to app catalog`
+
+> Additional steps may be required depending on your environment configuration.
+
+## Features
+
+This SPFx extension offers the following capabilities:
+
+- **Fetch Alerts**: Retrieves alerts from a designated SharePoint list using the Microsoft Graph API.
+- **Display Alerts**: Show alerts prominently in the banner of Modern SharePoint pages.
+- **Dynamic Alert Type Configuration**: Configure alert types dynamically using a JSON property, allowing easy customization and scalability.
+- **User Interaction Handling**: Allows users to dismiss alerts, with the option to prevent dismissed alerts from reappearing.
+- **Performance Optimization**: Utilizes local storage for caching alerts, improving performance.
+
+## TODO
+
+- ~~**Multi-Site Support**: Extend support for Root, Local, and Hub sites. ~~(Done)
+- **Enhanced Design**: Improve design aesthetics and CSS customization options.
+- **Advanced Sorting**: Implement sorting of alerts based on priority and date.
+
+## Managing Alerts
+
+- **Global Alerts**: Deployed across all sites, fetching alerts from the root site where the extension is installed.
+- **Local Alerts**: After the extension is added to a site collection, a new list titled "Alerts" is automatically created in the Site Contents. To create a new alert, simply add a new item to this list.
+
+### Alert List Configuration:
+
+- **Title**: The main heading of the alert.
+- **Description**: Detailed message content.
+- **AlertType**: The type of alert, such as Info, Warning, Maintenance, or Interruption.
+- **Link**: Optional URL for additional information or related content.
+
+### Dynamic Alert Type Configuration:
+
+Alert types can now be customized dynamically using a JSON configuration property. This allows administrators to add, modify, or remove alert types without altering the codebase. The JSON structure defines the appearance and behavior of each alert type, including icons, colors, and additional styles.
+
+**Example JSON Structure:**
+
+```json
+[
+    {
+       "name":"Info",
+       "iconName":"Info12",
+       "backgroundColor":"#389899",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Warning",
+       "iconName":"ShieldAlert",
+       "backgroundColor":"#f1c40f",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Maintenance",
+       "iconName":"CRMServices",
+       "backgroundColor":"#afd6d6",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    },
+    {
+       "name":"Interruption",
+       "iconName":"IncidentTriangle",
+       "backgroundColor":"#c54644",
+       "textColor":"#ffffff",
+       "additionalStyles":""
+    }
+ ]
+```
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft Teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples, and open-source controls for your Microsoft 365 development.
+
+## Concepts Demonstrated
+
+This extension showcases:
+
+- **Integration of the Microsoft Graph API** within SPFx extensions for efficient data retrieval.
+- **Dynamic Configuration Management**: Utilizing JSON properties to configure alert types, enhancing flexibility and maintainability.
+- **Customizing the banner Section** of Modern SharePoint pages to provide a consistent and visible alerting mechanism.
+- **Efficient State Management and Caching** using local and session storage to optimize performance and reduce redundant data fetching.
+- **Responsive Design and User Interaction Handling** to ensure alerts are accessible and user-friendly across various devices and screen sizes.
+
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-alert-banner" />

samples/react-application-alert-banner/assets/sample.json

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-extensions-react-application-alert-banner",
+    "source": "pnp",
+    "title": "Alert Banner",
+    "shortDescription": "Designed to display alert notifications prominently in the Banner of Modern SharePoint sites",
+    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-alert-banner",
+    "longDescription": [
+      "The Alert Banner SPFx Extension is a custom SharePoint Framework (SPFx) extension designed to display alert notifications prominently in the Banner of Modern SharePoint sites. These alerts are dynamically retrieved from a SharePoint list using the Microsoft Graph API, ensuring users receive important updates and information seamlessly integrated with Microsoft 365 services."
+    ],
+    "creationDateTime": "2023-12-25",
+    "updateDateTime": "2024-10-11",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+"tags": [],
+    "categories": [
+      "SPFX-APPLICATION-EXTENSION"  
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-application-alert-banner/assets/Screenshot2024-08-17170932.png",
+        "alt": "Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "nicolasKheirallah",
+        "pictureUrl": "https://github.com/nicolasKheirallah.png",
+        "name": "Nicolas Kheirallah"
+      }
+    ],
+    "references": [
+      {
+        "name": "Overview of SharePoint Framework Extensions",
+        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
+        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
+      },
+      {
+        "name": "Use page placeholders from Application Customizer",
+        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
+        "url": "https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
+      }
+    ]
+  }
+]

samples/react-application-alert-banner/buildProject.cmd

@@ -0,0 +1,28 @@
+@echo off
+cls
+
+REM Ensure we are in the correct directory
+pushd %~dp0
+
+REM Clean the previous build artifacts
+echo Cleaning previous build artifacts...
+call gulp clean
+
+REM Build the project in production mode
+echo Building the project...
+call gulp build --ship
+
+REM Bundle the project resources for production
+echo Bundling the project resources...
+call gulp bundle --ship
+
+REM Package the solution for deployment
+echo Packaging the solution...
+call gulp package-solution --ship
+
+REM Open the solution folder in File Explorer
+echo Opening the solution folder...
+start "" explorer ".\sharepoint\solution\"
+
+REM Return to the original directory
+popd

samples/react-application-alert-banner/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "alert-banner-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/alertbanner/AlertBannerApplicationCustomizer.js",
+          "manifest": "./src/extensions/alertbanner/AlertBannerApplicationCustomizer.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "AlertBannerApplicationCustomizerStrings": "lib/extensions/alertbanner/loc/{locale}.js"
+  }
+}

samples/react-application-alert-banner/config/deploy-azure-storage.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "alert-banner",
+  "accessKey": "<!-- ACCESS KEY -->"
+}