Merge branch 'preview' of https://github.com/pnp/generator-teams into…

… preview

.github/codeql/codeql-config.yml

@@ -0,0 +1,4 @@
+paths:
+  - packages/generator-teams/generators
+  - packages/yoteams-build-core/dist
+  - packages/yoteams-deploy/dist

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,100 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '17 22 * * 2'
+  workflow_dispatch: 
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    # - name: Autobuild
+    #  uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Use Node.js 16.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 16.x
+
+    - run: npm install
+      working-directory: packages/yoteams-build-core
+    - run: npm run build
+      working-directory: packages/yoteams-build-core
+      env:
+        CI: true
+
+    - run: npm install
+      working-directory: packages/yoteams-deploy
+    - run: npm run build
+      working-directory: packages/yoteams-deploy
+      env:
+        CI: true
+
+    - run: npm install
+      working-directory: packages/generator-teams
+    - run: npm run build
+      working-directory: packages/generator-teams
+      env:
+        CI: true
+
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
+      with:
+        config-file: ./.github/codeql/codeql-config.yml

docs/docs/tutorials/build-a-sharepoint-online-provider-hosted-web-part.md

@@ -2,16 +2,24 @@
 
 > NOTE: required `generator-teams` version `2.8.0` or higher.
 
-> NOTE: Not updated with version `3.0.0` changes
+> NOTE: Not updated with version `3.5.0` changes
 
 This tutorials will guide you through the steps on how to create a Microsoft Teams app with a configurable tab that you can upload to the SharePoint App Catalog and use as a web part or as a single part app page.
 
+The use cases for this is:
+
+* You are already building an application for Microsoft Teams and want to reuse it in SharePoint Online
+* You have requirements on server side rendering or similar requirements that cannot be met with pure JavaScript and SharePoint Framework
+* You're designing a web part that you want to host in an iframe in SharePoint Online.
+
 ## Generate your project
 
 Start the Microsoft Teams App generator by invoking the `yo teams` command. Follow the instructions and input name of your solution and package. Choose a schema version that is `1.4` or higher and then select to create a *Tab*.
 
 Fill in the URL of where you will host the application and optionally add tests and telemetry, and then type the name of your Tab - which will also be the name of your Web Part in SharePoint.
 
+When the generator asks if you want to use *Quick Scaffolding* answer *no*. If you choose *yes* you will not be asked about SharePoint Online support and manually have to update your manifest later.
+
 When being asked if you want the tab to be available in SharePoint - answer *yes* and then choose if you want your tab to be available as a **web part** and/or as a **full page application**. Once you have selected that the generator will scaffold your project.
 
 ![yo teams](../images/teams-webpart-1.png)
@@ -22,11 +30,40 @@ The code is generated in the same way as in the [Build your first Microsoft Team
 
 Open the manifest file (`./src/manifest/manifest.json`) and under `configurableTabs` you should see an additional two attributes: `sharePointPreviewImage` and `supportedSharePointHosts`. The first property specify a preview image (also being scaffolded into the project) to be shown for full page apps and the second attribute specifies if you want to present the Tab as a web part or a full page application, or both. 
 
+> **NOTE**: you can modify the manifest on an existing tab project to enable support for SharePoint Online.
+
+
+## Modify the code
+
+> **NOTE**: This is a temporary workaround
+
+Currently the `useTeams` hook will not correctly return the `context` object while hosted in SharePoint Online and you have to modify the code in the configuration React component (under `./src/client/tabname/tabnameConfig.tsx`) as done in the following example, note the else statement:
+
+``` TypeScript
+useEffect(() => {
+    if (context) {
+        setText(context.entityId);
+        entityId.current = context.entityId;
+        microsoftTeams.settings.registerOnSaveHandler(onSaveHandler);
+        microsoftTeams.settings.setValidityState(true);
+        microsoftTeams.appInitialization.notifySuccess();
+    } else {
+        microsoftTeams.initialize();
+        microsoftTeams.getContext( c =>{
+            setText(c.entityId);
+            microsoftTeams.settings.registerOnSaveHandler(onSaveHandler);
+            microsoftTeams.settings.setValidityState(true);
+        });
+    }
+// eslint-disable-next-line react-hooks/exhaustive-deps
+}, [context]);
+```
+
 ## Run the application using `ngrok-serve`
 
-For this tutorial we will use the `gulp ngrok-serve` command to temporarily generate an *ngrok* public url to host your application. Note that as soon as you abort the gulp command and run it again, a new URL will be generated and you have to upload the application once again to the SharePoint App Catalog.
+For this tutorial we will use the `gulp ngrok-serve --debug` command to temporarily generate an *ngrok* public url to host your application. Note that as soon as you abort the gulp command and run it again, a new URL will be generated and you have to upload the application once again to the SharePoint App Catalog.
 
-When you execute `gulp ngrok-serve` the app will generate a random ngrok public URL and use that URL to package the manifest, into `./package/<manifest>.zip`. It will also start a local web server to host your app.
+When you execute `gulp ngrok-serve --debug` the app will generate a random ngrok public URL and use that URL to package the manifest, into `./package/<manifest>.zip`. It will also start a local web server to host your app.
 
 ## Upload the application to the SharePoint Online App Catalog
 

packages/generator-teams/src/app/templates/README.md

@@ -60,9 +60,9 @@ gulp serve --debug
 
 ## Useful links
 
-* [Debugging with Visual Studio Code](https://github.com/pnp/generator-teams/blob/master/docs/docs/vscode.md)
-* [Developing with ngrok](https://github.com/pnp/generator-teams/blob/master/docs/docs/ngrok.md)
-* [Developing with Github Codespaces](https://github.com/pnp/generator-teams/blob/master/docs/docs/codespaces.md)
+* [Debugging with Visual Studio Code](https://github.com/pnp/generator-teams/blob/master/docs/docs/user-guide/vscode.md)
+* [Developing with ngrok](https://github.com/pnp/generator-teams/blob/master/docs/docs/concepts/ngrok.md)
+* [Developing with Github Codespaces](https://github.com/pnp/generator-teams/blob/master/docs/docs/user-guide/codespaces.md)
 
 ## Additional build options