Added devcontainer and fixed minor tslint issues

samples/react-graph-cascading-managed-metadata/.devcontainer/devcontainer.json

@@ -0,0 +1,39 @@
+// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
+{
+	"name": "SPFx 1.14.0",
+	"image": "docker.io/m365pnp/spfx:1.14.0",
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		4321,
+		35729
+	],
+	"portsAttributes": {
+		"4321": {
+			"protocol": "https",
+			"label": "Manifest",
+			"onAutoForward": "silent",
+			"requireLocalPort": true
+		},
+		// Not needed for SPFx>= 1.12.1
+		// "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-graph-cascading-managed-metadata/.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-graph-cascading-managed-metadata/.gitignore

@@ -31,4 +31,7 @@ obj
 
 # Styles Generated Code
 *.scss.ts
-*.scss.d.ts
+*.scss.d.ts# .CER Certificates
+*.cer
+# .PEM Certificates
+*.pem

samples/react-graph-cascading-managed-metadata/README.md

@@ -8,13 +8,16 @@ This web part shows how to use the Microsoft Graph APIs (beta) for Taxonomy to g
 
 ![Cascading managed metadata](./assets/cmmd.gif)
 
-
 ## Compatibility
 
-![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14.0-green.svg)
+![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg)
-![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg)
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg)
-![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
-![Workbench Hosted](https://img.shields.io/badge/Workbench-Hosted-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)
 
 ## Applies to
 
@@ -54,7 +57,7 @@ Version|Date|Comments
 * Add the web part to the workbench page of a site
 * Edit the web part and add the termset id in the properties
 
->  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
+> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
 
 ## Features
 
@@ -91,11 +94,8 @@ For questions regarding this sample, [create a new question](https://github.com/
 
 Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-graph-cascading-managed-metadata&template=question.yml&sample=react-graph-cascading-managed-metadata&authors=@anoopt&title=react-graph-cascading-managed-metadata%20-%20).
 
-
-
 ## 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://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-graph-cascading-managed-metadata" />

samples/react-graph-cascading-managed-metadata/assets/sample.json

@@ -9,7 +9,7 @@
       "Shows how to use the Microsoft Graph APIs (beta) for Taxonomy to get the data."
     ],
     "creationDateTime": "2020-09-02",
-    "updateDateTime": "2020-09-02",
+    "updateDateTime": "2022-03-02",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.11.0"
+        "value": "1.14.0"
       }
     ],
     "thumbnails": [

samples/react-graph-cascading-managed-metadata/src/webparts/cascadingManagedMetadata/components/CascadingManagedMetadata.tsx

@@ -173,8 +173,9 @@ const CascadingManagedMetadata: React.SFC<ICascadingManagedMetadataProps> = (pro
       return;
     }
 
-    let countriesList: IDropdownOption[] = countries.value.map(c => ({ key: c.id, text: c.labels[0].name }));
+    // Renamed to avoid shadowed variables
-    setCountriesList(countriesList);
+    let localCountriesList: IDropdownOption[] = countries.value.map(c => ({ key: c.id, text: c.labels[0].name }));
+    setCountriesList(localCountriesList);
 
   };
 

samples/react-graph-cascading-managed-metadata/src/webparts/cascadingManagedMetadata/services/MSGraph.ts

@@ -26,10 +26,15 @@ export class MSGraph {
         
         var p = new Promise<string>(async (resolve, reject) => {
             let query = this._graphClient.api(apiUrl).version(version);
+            // tslint:disable-next-line: no-unused-expression
             typeof(content) === "object" && (content = JSON.stringify(content));
+            // tslint:disable-next-line: no-unused-expression
             selectProperties && selectProperties.length > 0 && (query = query.select(selectProperties));
+            // tslint:disable-next-line: no-unused-expression
             filter && filter.length > 0 && (query = query.filter(filter));
+            // tslint:disable-next-line: no-unused-expression
             expandProperties && expandProperties.length > 0 && (query = query.expand(expandProperties));
+            // tslint:disable-next-line: no-unused-expression
             count && (query = query.count(count));
             let callback = (error: GraphError, response: any, rawResponse?: any) => error ? reject(error) : resolve(response);
             //* ES2016