Merge pull request #5364 from NicolasKheirallah/react-teams-tabs-graph

samples/react-teams-tabs-graph/.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+{
+  "name": "SPFx 1.20.0",
+  "image": "docker.io/m365pnp/spfx:1.20.0",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
+  "forwardPorts": [
+    4321,
+    35729,
+    5432
+  ],
+  "portsAttributes": {
+    "4321": {
+      "protocol": "https",
+      "label": "Manifest",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    },
+    "5432": {
+      "protocol": "https",
+      "label": "Workbench",
+      "onAutoForward": "silent"
+    },
+    "35729": {
+      "protocol": "https",
+      "label": "LiveReload",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    }
+  },
+  "postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+  "remoteUser": "node"
+}

samples/react-teams-tabs-graph/.devcontainer/spfx-startup.sh

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+echo
+echo -e "\e[1;94mGenerating dev certificate\e[0m"
+gulp trust-dev-cert
+
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
+
+# Copy the PEM ecrtificate for non-Windows hosts
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
+
+## add *.cer to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.cer' ./.gitignore
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"

samples/react-teams-tabs-graph/.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-teams-tabs-graph/.eslintrc.js

@@ -0,0 +1,19 @@
+// .eslintrc.js (example)
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      project: './tsconfig.json', // Ensure this path is correct for your project
+      sourceType: 'module',
+      ecmaVersion: 2020
+    },
+    extends: [
+      'plugin:@typescript-eslint/recommended'
+    ],
+    plugins: [
+      '@typescript-eslint'
+    ],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off"
+    }
+  };
+

samples/react-teams-tabs-graph/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# 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-teams-tabs-graph/.yo-rc.json

@@ -0,0 +1,17 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "version": "1.20.0",
+
+    "libraryName": "react-teams-tabs-graph",
+    "libraryId": "1e68649b-930f-4502-a858-12aa997bda01",
+    "packageManager": "npm",
+    "componentType": "webpart",
+    "nodeVersion": "18.18.2",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.24.0",
+      "@microsoft/microsoft-graph-client": "3.0.2"
+    }
+  }
+}

samples/react-teams-tabs-graph/README.md

@@ -0,0 +1,117 @@
+# Modern React Teams Tabs
+
+## Summary
+
+This sample is **derived** from the original [react-teams-tabs-graph](https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tabs-graph) project but is **rewritten and refactored** to use:
+
+- **SPFx 1.20+** (compatible with Node 14/16)
+- **React 17**
+- **Node V18**
+
+It displays **Channels** and **Tabs** from Microsoft Teams linked to a **Modern Team Site**. For each channel, it lists the associated tabs (like Planner, OneNote, etc.) with quick links.
+Also added features:
+
+- **Search for channel**
+- **Improved error handling**
+- **Modernized and futureproofed code**
+
+## Compatibility
+
+| :warning: Important          |
+|:---------------------------|
+| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
+|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
+
+This sample is optimally compatible with the following environment configuration:
+
+![SPFx 1.20.2](https://img.shields.io/badge/SPFx-1.20.2-green.svg)
+![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
+
+## Features
+
+- **Graph HTTP** to call Microsoft Graph endpoints for:
+  - **Fetching Team channels** tied to the current site’s GroupId
+  - **Listing channel tabs** with `displayName` and `webUrl`
+- **React 17** for a modern UI experience
+- **Fluent UI (Office UI Fabric)** Nav or list components to display channels/tabs
+- **SPFx 1.20** – align with the latest versions
+- **Search for Channel** – align with the latest versions
+
+
+## Prerequisites
+
+1. **Node.js** v18 (check the [SPFx Compatibility Matrix](https://aka.ms/spfx-matrix))
+2. A **Modern Team Site** that’s connected to Microsoft Teams
+3. **API Permissions** approved for Microsoft Graph calls (e.g., `Group.Read.All` or `Group.ReadWrite.All` depending on your usage)
+
+
+## Getting Started
+
+1. **Clone** or **download** this repository.
+2. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+3. **Build & Bundle**:
+   ```bash
+   gulp build --ship
+   gulp bundle --ship
+   ```
+4. **Package**:
+   ```bash
+   gulp package-solution --ship
+   ```
+5. **Deploy** the `.sppkg` found in `./sharepoint/solution` to your **App Catalog**.
+6. **Approve permission requests** in the **SharePoint Admin Center** → **API Access** (if you see any).
+7. **Add** the app to your site, then **add** the web part to a modern SharePoint page.
+
+
+## Configuration
+
+In the **`package-solution.json`**, you may see `webApiPermissionRequests` for Microsoft Graph, such as:
+
+```json
+"webApiPermissionRequests": [
+  {
+    "resource": "Microsoft Graph",
+    "scope": "Group.Read.All"
+  }
+]
+```
+
+If you need read/write access for creating channels or tabs, you might request higher-level permissions, like `Group.ReadWrite.All` or `TeamsTab.ReadWriteForTeam`. After deployment, these permissions must be **approved** in the **API Access** page.
+
+
+## Known Issues
+
+- **Local Workbench**: Not supported for Graph calls. Use the Hosted Workbench or add to a modern SharePoint page.
+- **On-Prem**: This sample is designed for SharePoint Online. On-premises SharePoint typically does not support the required modern endpoints or Graph calls in the same way.
+
+
+## Version History
+
+| Version | Date        | Comments                                  |
+|---------|------------|-------------------------------------------|
+| 1.0     | 1 January 2025 | Initial release (SPFx 1.20, React 17)     |
+
+
+## Help & Feedback
+
+If you have questions or run into issues:
+
+- Check the [PnP Community](https://github.com/pnp) repos for existing issues
+- Use [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) to diagnose environment mismatches
+- File an **issue** in this repo with details and steps to reproduce
+
+
+## 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.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/modern-react-teams-tabs" />

samples/react-teams-tabs-graph/assets/sample.json

@@ -0,0 +1,62 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tabs-graph",
+    "source": "pnp",
+    "title": "MS Teams Channels and Tabs from Modern Team site",
+    "shortDescription": "A SPFx Web Part using Graph api. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tabs-graph",
+    "longDescription": [
+      "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams."
+    ],
+    "creationDateTime": "2025-01-01",
+    "updateDateTime": "2025-01-01",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tabs-graph/assets/screenshots/react-teams-tabs-graph-webpart.png?raw=true",
+        "alt": "MS Teams Channels and Tabs from Modern Team site"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-teams-tabs-graph/assets/screenshots/react-teams-tabs-graph-webpart2.png?raw=true",
+        "alt": "MS Teams Channels and Tabs from Modern Team site"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "fredupstair",
+        "company": "Avanade Italy",
+        "pictureUrl": "https://github.com/fredupstair.png",
+        "name": "Federico Porceddu"
+      },     
+      {
+        "gitHubAccount": "nicolaskheirallah",
+        "company": "",
+        "pictureUrl": "",
+        "name": "Nicolas Kheirallah"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  }
+]

samples/react-teams-tabs-graph/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": {
+    "react-teams-tabs-graph-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/reactTeamsTabsgraph/ReactTeamsTabsgraphWebPart.js",
+          "manifest": "./src/webparts/reactTeamsTabsgraph/ReactTeamsTabsgraphWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "ReactTeamsTabsgraphWebPartStrings": "lib/webparts/reactTeamsTabsgraph/loc/{locale}.js"
+  }
+}

samples/react-teams-tabs-graph/config/deploy-azure-storage.json

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