Update react security grid (#490)

* Update to SPFx 1.4.1

* add missing semicolon to remove warnings

* remove fine not being used

* Update version and readme

samples/react-securitygrid/README.md

@@ -1,6 +1,7 @@
 # SPFX React Grid
 
 ## Summary
+
 React-securitygrid is an SPFX webpart that uses React and Office-UI-Fabric to render a grid showing which users have access to which lists/libraries/folders/files on a Web as shown here:
 
 ![config panel](./src/images/MainDisplay.PNG)
@@ -23,8 +24,6 @@ The user can change alternate between displaying user names and emails  selectin
 
 ![Select Mode](./src/images/SelectDisplayModePopout.PNG)
 
-
-
 The the first configuration panel of the webpart is shown below:
 
 ![config panel](./src/images/Configuration.PNG)
@@ -44,12 +43,10 @@ Display Settings
 
 The Initial Title column width determines the initial width of the Title column(it can be resized).
 
-
-
 The second configuarion pannel allows the owner to configure the List Settings
 ![List Confoguration panel](./src/images/ListConfiguration.PNG)
 
-List Settings 
+List Settings
 
 The Show Hidden Lists checkbox determines whether Hidden lists  are displayed.
 The Show System Lists checkbox determines whether System Lists (Catalogs) are included in the grid.
@@ -62,21 +59,19 @@ The Include/Exclude Selected lists Toggle determines whether the lists selected
 
 The admin can select lists and libraries below to have them included/excluded from the grid
 
-
 ## Notes
+
 This is a port of an Angular 1.3 SharePoint hosted App at https://github.com/russgove/SPSecurity.
 
-
-
 ## Used SharePoint Framework Version
-1.3.4
+
+![version](https://img.shields.io/badge/version-1.4.1-green.svg)
+
 ## Applies to
 
 * [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
 * [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
 
-
-
 ## Prerequisites
 
 > React, Office-UI-Fabric, sp-pnp-js, lodash
@@ -91,10 +86,11 @@ Solution|Author(s)
 
 Version|Date|Comments
 -------|----|--------
-1.0|December 31, 2016|Initial version
+1.0.0.1|April 25, 2018|Update to SPFx 1.4.1
-
+1.0.0.0|December 31, 2016|Initial version
 
 ## 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.**
 
 ---
@@ -105,7 +101,3 @@ Version|Date|Comments
 - in the command line run:
   - `npm install`
   - `gulp serve`
-
-
-
-

samples/react-securitygrid/config/copy-assets.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
   "deployCdnPath": "temp/deploy"
 }

samples/react-securitygrid/config/deploy-azure-storage.json

@@ -1,6 +1,7 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
   "workingDir": "./temp/deploy/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "spsecurity-webpart-3",
   "accessKey": "<!-- ACCESS KEY -->"
-}
+}

samples/react-securitygrid/config/package-solution.json

@@ -1,8 +1,9 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "spsecurity-webpart-3-client-side-solution",
     "id": "788271fb-ee9b-40df-8381-eb3dc70d1982",
-    "version": "1.0.0.0"
+    "version": "1.0.0.1"
   },
   "paths": {
     "zippedPackage": "solution/spsecurity-webpart-3.sppkg"

samples/react-securitygrid/config/serve.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "initialPage": "https://localhost:5432/workbench",
   "https": true,

samples/react-securitygrid/config/tslint.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
   // Display errors as warnings
   "displayAsWarning": true,
   // The TSLint task may have been configured with several custom lint rules
@@ -28,8 +29,7 @@
       "no-shadowed-variable": true,
       "no-switch-case-fall-through": true,
       "no-unnecessary-semicolons": true,
-      "no-unused-expression": false,
+      "no-unused-expression": true,
-      "no-unused-imports": true,
       "no-use-before-declare": true,
       "no-with-statement": true,
       "semicolon": true,
@@ -39,11 +39,7 @@
       "use-named-parameter": true,
       "valid-typeof": true,
       "variable-name": false,
-      "whitespace": false,
+      "whitespace": false
-
-      "no-debugger":false,
-      "no-unused-variable": false,
-      "max-line-lenth": false
     }
   }
-}
+}

samples/react-securitygrid/config/write-manifests.json

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

samples/react-securitygrid/gulpfile.js

@@ -2,5 +2,6 @@
 
 const gulp = require('gulp');
 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.`);
 
 build.initialize(gulp);

samples/react-securitygrid/package.json

@@ -6,12 +6,11 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-build-web": "^1.3.4",
+    "@microsoft/sp-build-web": "~1.4.1",
-    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.4.1",
-    "@microsoft/sp-core-library": "^1.3.4",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-module-interfaces": "^1.3.4",
+    "@microsoft/sp-webpart-base": "~1.4.1",
-    "@microsoft/sp-webpart-base": "^1.3.4",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "^1.3.4",
     "@pnp/spfx-property-controls": "1.0.0",
     "@types/react": "15.0.38",
     "@types/react-addons-shallow-compare": "0.14.17",
@@ -26,9 +25,9 @@
     "sp-pnp-js": "^3.0.1"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "^1.3.4",
+    "@microsoft/sp-build-web": "~1.4.1",
-    "@microsoft/sp-module-interfaces": "^1.3.4",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "^1.3.4",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
     "gulp": "~3.9.1"

samples/react-securitygrid/src/webparts/SPSecurityService.ts

@@ -178,7 +178,7 @@ export class Helpers {
       let selectedRoleAssignments: SPRoleAssignment[] = [];
 
       for (const roleAssignment of securableObject.roleAssignments) {
-        let group: SPSiteGroup = find(groups, (g) => { return g.id === roleAssignment.principalId });
+        let group: SPSiteGroup = find(groups, (g) => { return g.id === roleAssignment.principalId; });
         if (group) {
           if (this.userIsInGroup(user.id, group.id, groups)) {
             selectedRoleAssignments.push(roleAssignment);
@@ -262,7 +262,7 @@ export default class SPSecurityService {
           for (let roleAssignmentObject of listItem.RoleAssignments) {
 
             let roleAssignment: SPRoleAssignment = {
-              roleDefinitionIds:  roleAssignmentObject.RoleDefinitionBindings.map((rdb) => { return rdb.Id }),
+              roleDefinitionIds:  roleAssignmentObject.RoleDefinitionBindings.map((rdb) => { return rdb.Id; }),
               principalId: roleAssignmentObject.PrincipalId
             };
             // if (roleAssignmentObject.Member.UserId) {
@@ -329,7 +329,7 @@ export default class SPSecurityService {
     pnp.sp.web.siteGroups.expand("Users").select("Title", "Id", "IsHiddenInUI", "IsShareByEmailGuestUse", "IsSiteAdmin", "IsSiteAdmin")
       .inBatch(batch).get().then((response) => {
         let AdGroupPromises: Array<Promise<any>> = [];
-        // if group contains an ad group(PrincipalType=4) expand it 
+        // if group contains an ad group(PrincipalType=4) expand it
         securityInfo.siteGroups = response.map((grp) => {
           let siteGroup: SPSiteGroup = new SPSiteGroup();
           siteGroup.userIds = [];
@@ -337,9 +337,9 @@ export default class SPSecurityService {
           siteGroup.title = grp.Title;
           for (let user of grp.Users) {
             if (user.PrincipalType === 4) {
-              // To make this work with AD groups, I need to stop using the integer UserId of the user as the 
+              // To make this work with AD groups, I need to stop using the integer UserId of the user as the
               // key to the Users list and use UPN/Email instead. Users in an AD group may not have a accessed the site
-              // yet , and so will not be in the userinfo list. 
+              // yet , and so will not be in the userinfo list.
               // I can get the users from the AD group using the graph HTTPClient. and add them to the Users array
               // in my state. Would also need to add a list of AD groups and their members to my state.
               // then in DoesUserHavePermission method, Just inlude permissions of any ADQ Groups the user is in.
@@ -410,7 +410,7 @@ export default class SPSecurityService {
           mylist.roleAssignments = listObject.RoleAssignments.map((roleAssignmentObject) => {
 
             let roleAssignment: SPRoleAssignment = {
-              roleDefinitionIds: roleAssignmentObject.RoleDefinitionBindings.map((rdb) => { return rdb.Id }),
+              roleDefinitionIds: roleAssignmentObject.RoleDefinitionBindings.map((rdb) => { return rdb.Id; }),
               principalId: roleAssignmentObject.PrincipalId
             };
             return roleAssignment;
@@ -423,4 +423,4 @@ export default class SPSecurityService {
       return securityInfo;
     });
   }
-}
+}

samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss

@@ -1,24 +0,0 @@
-@import 'node_modules/office-ui-fabric-react/dist/sass/Fabric.scss';
-//*Set the Header are to 140px so it can hold the rotated headers
-.SPFXSecurityGrid .ms-DetailsHeader { //* when adjusting line hieight also need to adjust second parameter to transform:translate below
-    height: 140px;
-    white-space: nowrap;
-}
-//*Set the wrappers around the headers to display at 45degree angles
-.ms-DetailsHeader-cell.rotatedColumnHeader{
-    transform:  translate(25px,40px ) //*Change second parameter when adjusting line height
-    rotate(315deg);
-    padding-bottom: 90px;
-    width: 36px !important;
-   
-    
-}
-.ms-DetailsHeader-cell{
-    vertical-align: bottom;  
-}
-.ms-DetailsHeader-cell span  {
-    overflow: visible;
- }
- .ms-List-cell:nth-child(even) .ms-DetailsRow {
-    background: #EEE;
-  }

samples/react-securitygrid/tsconfig.json

@@ -7,10 +7,19 @@
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
     "types": [
       "es6-promise",
-      "es6-collections",
       "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
     ]
   }
 }