#307 added possibility to render no permissions message and show loading spinner

Author: Marcin Wojciechowski

src/controls/securityTrimmedControl/ISecurityTrimmedControlProps.ts

@@ -36,4 +36,12 @@ export interface ISecurityTrimmedControlProps {
    * Optional. Specify the className to be used on the parent element.
    */
   className?: string;
+  /**
+   * Optional. Specify the control you want to render if user doesn't have permissions
+   */
+  noPermissionsControl?: JSX.Element;
+  /**
+   * Options. Specify should render loading animation
+   */
+  showLoadingAnimation?: boolean;
 }

src/controls/securityTrimmedControl/ISecurityTrimmedControlState.ts

@@ -1,3 +1,4 @@
 export interface ISecurityTrimmedControlState {
   allowRender: boolean;
+  loading?: boolean;
 }

src/controls/securityTrimmedControl/SecurityTrimmedControl.tsx

@@ -3,13 +3,15 @@ import { ISecurityTrimmedControlProps, ISecurityTrimmedControlState, PermissionL
 import { SPHttpClient } from '@microsoft/sp-http';
 import { SPPermission } from '@microsoft/sp-page-context';
 import * as telemetry from '../../common/telemetry';
+import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 
 export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedControlProps, ISecurityTrimmedControlState> {
   constructor(props: ISecurityTrimmedControlProps) {
     super(props);
 
     this.state = {
-      allowRender: false
+      allowRender: false,
+      loading: true
     };
 
     telemetry.track('ReactPlaceholder', {});
@@ -49,11 +51,13 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
       // Check the user its permissions
       if (permissions.hasAllPermissions(...this.props.permissions)) {
         this.setState({
-          allowRender: true
+          allowRender: true,
+          loading: false
         });
       } else {
         this.setState({
-          allowRender: false
+          allowRender: false,
+          loading: false
         });
       }
     } else if (level === PermissionLevel.remoteWeb) {
@@ -84,21 +88,24 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
           if (result.error) {
             // Do not allow rendering when there was an error
             this.setState({
-              allowRender: false
+              allowRender: false,
+              loading: false
             });
             console.error(`Error retrieved while checking user's remote site permissions.`);
             return;
           }
           // Check the result value
           if (typeof result.value !== "undefined" && result.value === false) {
             this.setState({
-              allowRender: false
+              allowRender: false,
+              loading: false
             });
             return;
           }
         } else {
           this.setState({
-            allowRender: false
+            allowRender: false,
+            loading: false
           });
           console.error(`No result value was retrieved when checking the user's remote site permissions.`);
           return;
@@ -107,7 +114,8 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
 
       // Render the controls when the permissions were OK for the user
       this.setState({
-        allowRender: true
+        allowRender: true,
+        loading: false
       });
     }
   }
@@ -122,7 +130,8 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
       const apiUrl = `${remoteSiteUrl}/_api/web/GetList(@listUrl)/EffectiveBasePermissions?@listUrl='${encodeURIComponent(relativeLibOrListUrl)}'`;
       const hasPermissions = await this.checkRemotePermissions(apiUrl);
       this.setState({
-        allowRender: hasPermissions
+        allowRender: hasPermissions,
+        loading: false
       });
     }
   }
@@ -137,7 +146,8 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
       const apiUrl = `${remoteSiteUrl}/_api/web/GetList(@listUrl)/Items(${itemId})/EffectiveBasePermissions?@listUrl='${encodeURIComponent(relativeLibOrListUrl)}'`;
       const hasPermissions = await this.checkRemotePermissions(apiUrl);
       this.setState({
-        allowRender: hasPermissions
+        allowRender: hasPermissions,
+        loading: false
       });
     }
   }
@@ -153,7 +163,8 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
       const apiUrl = `${remoteSiteUrl}/_api/web/GetFolderByServerRelativeUrl(@folderByServerRelativeUrl)/ListItemAllFields/EffectiveBasePermissions?@folderByServerRelativeUrl='${folderByServerRelativeUrl}'`;
       const hasPermissions = await this.checkRemotePermissions(apiUrl);
       this.setState({
-        allowRender: hasPermissions
+        allowRender: hasPermissions,
+        loading: false
       });
     }
   }
@@ -194,10 +205,15 @@ export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedCont
    */
   public render(): React.ReactElement<ISecurityTrimmedControlProps> {
     const { className } = this.props;
-    return (
-      this.state.allowRender ? (
-        <div className={className ? className : ""}>{this.props.children}</div>
-      ) : null
-    );
+    if(this.state.loading && this.props.showLoadingAnimation){
+      return <Spinner />;
+    }
+    if(this.state.allowRender){
+      return <div className={className ? className : ""}>{this.props.children}</div>;
+    }
+    else if(this.props.noPermissionsControl){
+      return this.props.noPermissionsControl;
+    }
+    return null;
   }
 }