Added back SpSecurity.scss (#906)

* Added back SpSecurity.scss

* Upgraded to latest @pnp/js

samples/react-securitygrid/package.json

@@ -11,6 +11,10 @@
     "@microsoft/sp-module-interfaces": "~1.4.1",
     "@microsoft/sp-webpart-base": "~1.4.1",
     "@microsoft/sp-webpart-workbench": "~1.4.1",
+    "@pnp/common": "1.3.3",
+    "@pnp/logging": "1.3.3",
+    "@pnp/odata": "1.3.3",
+    "@pnp/sp": "1.3.3",
     "@pnp/spfx-property-controls": "1.0.0",
     "@types/react": "15.0.38",
     "@types/react-addons-shallow-compare": "0.14.17",
@@ -21,8 +25,7 @@
     "lodash": "^4.17.4",
     "office-ui-fabric-react": "^4.21.2",
     "react": "15.4.2",
-    "react-dom": "15.4.2",
+    "react-dom": "15.4.2"
-    "sp-pnp-js": "^3.0.1"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.4.1",

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

@@ -1,4 +1,4 @@
-import pnp from "sp-pnp-js";
+import {sp} from "@pnp/sp";
 import { find, indexOf, includes } from "lodash";
 import { SPPermission } from "@microsoft/sp-page-context";
 import { GraphHttpClient, HttpClientResponse, IGraphHttpClientOptions } from "@microsoft/sp-http";
@@ -229,7 +229,7 @@ export default class SPSecurityService {
         " </View>"
     };
 
-    return pnp.sp.web.lists.getByTitle(listTitle).getItemsByCAMLQuery(caml, "ContentType", "Folder", "Folder/ParentFolder", "File",
+    return sp.web.lists.getByTitle(listTitle).getItemsByCAMLQuery(caml, "ContentType", "Folder", "Folder/ParentFolder", "File",
       "File/ParentFolder", "RoleAssignments", "RoleAssignments/RoleDefinitionBindings", "RoleAssignments/Member",
       "RoleAssignments/Member/Users", "RoleAssignments/Member/Groups")
       .then((response) => {
@@ -304,9 +304,9 @@ export default class SPSecurityService {
   /// Loads data for intial display
   public loadData(showHiddenLists: boolean, showCatalogs: boolean, graphHttpClient: GraphHttpClient, forceReload: boolean): Promise<SPSecurityInfo> {
     let securityInfo: SPSecurityInfo = new SPSecurityInfo();
-    let batch: any = pnp.sp.createBatch();
+    let batch: any = sp.createBatch();
 
-    pnp.sp.web.siteUsers
+    sp.web.siteUsers
       .inBatch(batch).get().then((response) => {
         console.table(response);
         securityInfo.siteUsers = response.map((u) => {
@@ -326,7 +326,7 @@ export default class SPSecurityService {
         });
         return securityInfo.siteUsers;
       });
-    pnp.sp.web.siteGroups.expand("Users").select("Title", "Id", "IsHiddenInUI", "IsShareByEmailGuestUse", "IsSiteAdmin", "IsSiteAdmin")
+    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
@@ -366,7 +366,7 @@ export default class SPSecurityService {
         });
 
       });
-    pnp.sp.web.roleDefinitions.expand("BasePermissions").inBatch(batch).get().then((response) => {
+    sp.web.roleDefinitions.expand("BasePermissions").inBatch(batch).get().then((response) => {
       securityInfo.roleDefinitions = response.map((rd) => {
 
         const bp: SPBasePermissions = new SPBasePermissions(rd.BasePermissions.High, rd.BasePermissions.Low);
@@ -390,7 +390,7 @@ export default class SPSecurityService {
       filters.push("IsCatalog eq false");
     }
     let filter: string = filters.join(" and ");
-    pnp.sp.web.lists
+    sp.web.lists
       .expand("RootFolder", "RoleAssignments", "RoleAssignments/RoleDefinitionBindings", "RoleAssignments/Member",
       "RoleAssignments/Member/Users", "RoleAssignments/Member/Groups", "RoleAssignments/Member/UserId")
       .filter(filter)

samples/react-securitygrid/src/webparts/spSecurity/SpSecurityWebPart.ts

@@ -11,7 +11,7 @@ import {
   PropertyPaneCheckbox,
   PropertyPaneToggle
 } from "@microsoft/sp-webpart-base";
-import pnp from "sp-pnp-js";
+import {sp} from "@pnp/sp";
 import * as strings from "spSecurityStrings";
 import SpSecurity from "./components/SpSecurity";
 import { ISpSecurityProps } from "./components/ISpSecurityProps";
@@ -23,7 +23,7 @@ import PropertyPane from "@microsoft/sp-webpart-base/lib/propertyPane/propertyPa
 export default class SpSecurityWebPart extends BaseClientSideWebPart<ISpSecurityWebPartProps> {
   public onInit(): Promise<void> {
     return super.onInit().then(_ => {
-      pnp.setup({
+      sp.setup({
         spfxContext: this.context,
         defaultCachingStore: "session", // or "local"
         defaultCachingTimeoutSeconds: 30,

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

@@ -0,0 +1,24 @@
+@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;
+  }