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
This commit is contained in:
Joel Rodrigues
Vesa Juvonen
parent
6a59355c8b
commit
934d1d92d1
|
|
@ -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:
|
||||
|
||||
|
||||
|
|
@ -23,8 +24,6 @@ The user can change alternate between displaying user names and emails selectin
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
The the first configuration panel of the webpart is shown below:
|
||||
|
||||
|
||||
|
|
@ -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 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
|
||||
|
||||
|
||||
|
||||
## 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`
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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-imports": true,
|
||||
"no-unused-expression": 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,
|
||||
|
||||
"no-debugger":false,
|
||||
"no-unused-variable": false,
|
||||
"max-line-lenth": false
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,12 +6,11 @@
|
|||
"node": ">=0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-build-web": "^1.3.4",
|
||||
"@microsoft/sp-client-base": "~1.0.0",
|
||||
"@microsoft/sp-core-library": "^1.3.4",
|
||||
"@microsoft/sp-module-interfaces": "^1.3.4",
|
||||
"@microsoft/sp-webpart-base": "^1.3.4",
|
||||
"@microsoft/sp-webpart-workbench": "^1.3.4",
|
||||
"@microsoft/sp-build-web": "~1.4.1",
|
||||
"@microsoft/sp-core-library": "~1.4.1",
|
||||
"@microsoft/sp-module-interfaces": "~1.4.1",
|
||||
"@microsoft/sp-webpart-base": "~1.4.1",
|
||||
"@microsoft/sp-webpart-workbench": "~1.4.1",
|
||||
"@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-module-interfaces": "^1.3.4",
|
||||
"@microsoft/sp-webpart-workbench": "^1.3.4",
|
||||
"@microsoft/sp-build-web": "~1.4.1",
|
||||
"@microsoft/sp-module-interfaces": "~1.4.1",
|
||||
"@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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue