React application collab footer - Updated! (#1434)

* Updated the code to SPFX 1.20.1, Refactored alot of the code and  project to be more modern and use react 17 features, cleaned up the code, more logging etc etc

* Updated! Did gulp clean...

* Updated and corrected for SPFX 1.20 upgrade

* Update samples/react-application-collab-footer/README.md

Co-authored-by: Adam Wójcik <[email protected]>

* Update samples/react-application-collab-footer/README.md

Co-authored-by: Adam Wójcik <[email protected]>

* Added assets and fixed the telemetry link!

* updated readme, removed todo!

* fixup

---------

Co-authored-by: Adam Wójcik <[email protected]>
Co-authored-by: Adam Wójcik <[email protected]>

samples/react-application-collab-footer/.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

samples/react-application-collab-footer/.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-collab-footer/.npmignore

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

samples/react-application-collab-footer/.yo-rc.json

@@ -0,0 +1,19 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.18.2",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
+    "environment": "spo",
+    "libraryName": "react-application-collab-footer",
+    "libraryId": "8b5fa72c-26f0-488a-a952-6ec68c81f623",
+    "packageManager": "npm",
+    "componentType": "extension",
+    "extensionType": "ApplicationCustomizer",
+    "isDomainIsolated": false
+  }
+}

samples/react-application-collab-footer/README.md

@@ -1,52 +1,67 @@
 # Collaboration Footer Application Customizers
 
-> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this extension at https://github.com/pnp/sp-starter-kit/tree/master/source/react-application-collab-footer.
+This application customizer provides you the ability to include a footer designed for normal and group associated teams sites. The footer includes sets of links configured within a taxonomy term set via the term store. A second set of links are personalized links, unqiue to each user, stored within each user's user profile within a user profile property. If this property does not exist in the user profile service, this capability will be hidden. 
 
-This application customizer provides you the ability to include a footer designed for normal and group associated teams sites. The footer includes sets of links configured using the tenant wide deployment list at the app catalog. A second set of links are personalized links, unqiue to each user, stored within each user's user profile within a user profile property. If this property does not exist in the user profile service, this capability will be hidden. 
+![Collaboration Footer](/assets/images/components/ext-collab-footer.gif)
 
+Taxonomy dependency is utilized within the collaboration footer to provide a global set of links across multiple team sites, as well as a technology demostrator. Visit the [Portal footer application customizer](../react-application-portal-footer/) for an example of footer links driven by a SharePoint list.
 
-![Collaboration Footer](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/ext-collab-footer.gif)
+Details on implementation at https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/components/ext-collab-footer.md
 
-Screenshot is from the v1 version, which worked using taxonomy term set (updated when v2 available). Taxonomy dependency is removed from the v2 implementation.
+## Configurable Properties
 
-Details on v1 implementation at https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/components/ext-collab-footer.md
+The `Collaboration Footer` application customizers can be configured with the following properties:
 
-In v2 release repackaged as it's own solution to provide more flexibility from deployment perspective.
+| Label | Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- | ---- |
+| Link Term Set name | sourceTermSet | string | yes | The name of the term set that stores link terms for footer |
+| User profile propery name | personalItemsStorageProperty | string | yes | The name of the user profile property to store user specific links |
+
+## Modifying Extension properties
+
+This extension has a collection of properties that are set by default, although may be modified using the [`PnP PowerShell`](https://github.com/pnp/powershell) commandlet Set-PnPApplicationCustomizer.
+
+```powershell
+Set-PnPApplicationCustomizer -Title "CollabFooter" -ClientSideComponentId 6638da67-06f4-4f55-a1df-485d568e8b72 -ClientSideComponentProperties "{`"sourceTermSet`":`"PnP-CollabFooter-SharedLinks`",`"personalItemsStorageProperty`":`"PnP-CollabFooter-MyLinks`"}"
+```
 
 ## Used SharePoint Framework Version
 
-![1.4.0](https://img.shields.io/badge/version-1.4-green.svg)
+![drop](https://img.shields.io/badge/version-1.20.0-green.svg)
 
-* Supported with SharePoint 2019
+* Supported in SharePoint Online
 
 ## Applies to
 
-* [SharePoint Framework](https:/dev.office.com/sharepoint)
-* [Office 365 tenant](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
-* [SharePoint 2019](https://docs.microsoft.com/en-us/sharepoint/dev/general-development/sharepoint-2019-development-platform)
+* [SharePoint Framework](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 tenant](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment)
 
 ## Prerequisites
 
 The shared links are retrieved from a term set called `PnP-CollabFooter-SharedLinks`. This termset's intended use must be set for to be used for site navigation. The url is set in the terms property "simple link or header". The termset is created when applying the pnp tenant template found in the instructions. The xml used to provision the termset can be found [here](../../provisioning/starterkit.xml).
 
 Personalized links only works if a custom property called `PnP-CollabFooter-MyLinks` has been added on the user profile service. This is string based property with maximum length. As there's no APIs to automate the property creation to the user profile service, this property will need to be manually created to enable the personalized links capability. Instructions to set up the custom property can be found [here](../../documentation/tenant-settings.md#create-a-custom-property-in-the-user-profile-service).
 
-Both property names can be changed in the SPFx extension properties. 
+Both component property names can be [changed in the SPFx extension properties](#modifying-extension-properties). 
 
 ## Solution
 
 Solution|Author(s)
 --------|---------
 react-application-collab-footer | Paolo Pialorsi
 react-application-collab-footer | David Opdendries
-
+react-application-collab-footer | Chandani Prajapati
+react-application-collab-footer | Nicolas Kheirallah
 
 ## Version history
 
 Version|Date|Comments
 -------|----|--------
 1.0|May 9, 2018|Initial release
 2.0|January 1, 2020|Initial release for SharePoint Starter Kit v2
+3.0|February 2023|v3 - Upgraded to SPFx 1.16.1
+4.0|October 2024 | Updated the code to SPFX 1.20, Refactored the project to react 17, Node 18, went over to graph api, cleaned up the code etc etc.
+
 
 ## Disclaimer
 
@@ -60,13 +75,15 @@ Version|Date|Comments
 * Move to correct folder where solution exists
 * in the command line run:
   * `npm install`
-  * `gulp serve`
+  * `gulp serve --nobrowser`
+  * `Add to the end of the URL test on your site : ?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"6638da67-06f4-4f55-a1df-485d568e8b72":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"sourceTermSet":"PnP-CollabFooter-SharedLinks","linksListTitle":"PnP-PortalFooter-Links","personalItemsStorageProperty":"PnP-CollabFooter-MyLinks"}}}`
+
 
 ## Features
 
-Key features demonstrated by this solution:
+Key features demostrated by this solution:
 
-* PnPjs usage in the solution
-* Dynamic creation of the list if it's missing
+* Work with term sets using spHttpClient
+* Work with data from user property
 
 <img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-application-collab-footer" />

samples/react-application-collab-footer/config/config.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "collaboration-footer-application-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/collaborationFooter/CollaborationFooterApplicationCustomizer.js",
+          "manifest": "./src/extensions/collaborationFooter/CollaborationFooterApplicationCustomizer.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "CollaborationFooterApplicationCustomizerStrings": "lib/extensions/collaborationFooter/loc/{locale}.js",
+    "MyLinksStrings": "lib/extensions/collaborationFooter/components/myLinks/loc/{locale}.js"
+  }
+}

samples/react-application-collab-footer/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": "react-application-collab-footer",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-application-collab-footer/config/feature.xml

@@ -0,0 +1,12 @@
+<Feature xmlns="http://schemas.microsoft.com/sharepoint/"
+         Title="My SPFx Extension Deployment"
+         Description="Deploying custom action via feature framework"
+         Id="a-new-unique-guid"
+         Version="1.0.0.0"
+         Scope="Web"
+         Hidden="FALSE"
+         DefaultResourceFile="core">
+  <ElementManifests>
+    <ElementManifest Location="assets/elements.xml" />
+  </ElementManifests>
+</Feature>

samples/react-application-collab-footer/config/package-solution.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "Starter Kit - Collaboration Footer",
+    "id": "8b5fa72c-26f0-488a-a952-6ec68c81f623",
+    "version": "3.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "PnP Starter Kit",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": "pnpsk"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "react-application-collab-footer description"
+      },
+      "longDescription": {
+        "default": "react-application-collab-footer description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Application Extension - Deployment of custom action.",
+        "description": "Deploys a custom action with ClientSideComponentId association",
+        "id": "d92e00dd-d103-482a-837f-d5728af1fec6",
+        "version": "3.0.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml",
+            "clientsideinstance.xml"
+          ]
+        }
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-application-collab-footer.sppkg"
+  }
+}

samples/react-application-collab-footer/config/sass.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-application-collab-footer/config/serve.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
+}

samples/react-application-collab-footer/config/write-manifests.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-application-collab-footer/gulpfile.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const build = require('@microsoft/sp-build-web');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
+build.initialize(require('gulp'));