Documentation fixes + ComboBox control fixes

Author: estruyf

docs/documentation/docs/controls/ComboBoxListItemPicker.md

@@ -24,38 +24,38 @@ import { ComboBoxListItemPicker } from '@pnp/spfx-controls-react/lib/ComboBoxLis
 
 ```TypeScript
 <ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
-                columnInternalName='Title'
-                keyColumnInternalName='Id'
-                filter="Title eq 'SPFx'"
-                itemLimit={10}
-                onSelectedItem={this.onSelectedItem}
-                webUrl: this.context.pageContext.web.absoluteUrl,
-                spHttpClient: new SPHttpClient() />
+                        columnInternalName='Title'
+                        keyColumnInternalName='Id'
+                        filter="Title eq 'SPFx'"
+                        onSelectedItem={this.onSelectedItem}
+                        webUrl={this.context.pageContext.web.absoluteUrl}
+                        spHttpClient={this.context.spHttpClient} />
 ```
 
 - Use the `ComboBoxListItemPicker` with objects passed in defaultSelectedItems
+
 ```TypeScript
 <ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
-                columnInternalName='Title'
-                keyColumnInternalName='Id'
-                filter="Title eq 'SPFx'"
-                itemLimit={10}
-                defaultSelectedItems: [{Id: 2, Title:"Test"}]
-                onSelectedItem={this.onSelectedItem}
-                webUrl: this.context.pageContext.web.absoluteUrl,
-                spHttpClient: new SPHttpClient() />
+                        columnInternalName='Title'
+                        keyColumnInternalName='Id'
+                        filter="Title eq 'SPFx'"
+                        defaultSelectedItems=[{Id: 2, Title:"Test"}]
+                        onSelectedItem={this.onSelectedItem}
+                        webUrl={this.context.pageContext.web.absoluteUrl}
+                        spHttpClient={this.context.spHttpClient} />
 ```
+
 - Or only ids
+
 ```TypeScript
 <ComboBoxListItemPicker listId='da8daf15-d84f-4ab1-9800-7568f82fed3f'
-                columnInternalName='Title'
-                keyColumnInternalName='Id'
-                filter="Title eq 'SPFx'"
-                itemLimit={10}
-                defaultSelectedItems: [2]
-                onSelectedItem={this.onSelectedItem}
-                webUrl: this.context.pageContext.web.absoluteUrl,
-                spHttpClient: new SPHttpClient() />
+                        columnInternalName='Title'
+                        keyColumnInternalName='Id'
+                        filter="Title eq 'SPFx'" 
+                        defaultSelectedItems: [2]
+                        onSelectedItem={this.onSelectedItem}
+                        webUrl={this.context.pageContext.web.absoluteUrl}
+                        spHttpClient={this.context.spHttpClient} />
 ```
 
 - The `onSelectedItem` change event returns the list items selected and can be implemented as follows:
@@ -80,7 +80,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | webUrl | string | yes | Url to web hosting list |
 | spHttpClient | RequestClient | yes | Any implementation of PnPJS RequestClient |
 | listId | string | yes | Guid of the list. |
-| itemLimit | number | yes | Number of items which can be selected |
 | onSelectItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
 | className | string | no | ClassName for the picker. |
 | webUrl | string | no | URL of the site. By default it uses the current site URL. |

docs/documentation/docs/controls/SecurityTrimmedControl.md

@@ -56,6 +56,19 @@ import { SecurityTrimmedControl } from "@pnp/spfx-controls-react/lib/SecurityTri
 </SecurityTrimmedControl>
 ```
 
+**Show a control when the user doesn't have permissions**
+
+```jsx
+<SecurityTrimmedControl context={this.props.context}
+                        level={PermissionLevel.remoteListOrLib}
+                        remoteSiteUrl="https://<tenant>.sharepoint.com/sites/<siteName>"
+                        relativeLibOrListUrl="/sites/<siteName>/<list-or-library-URL>"
+                        permissions={[SPPermission.addListItems]}
+                        noPermissionsControl={<p>SOrry, you don't have permissions to this list.</p>}>
+  {/* Specify the components to load when user has the required permissions */}
+</SecurityTrimmedControl>
+```
+
 ## Implementation
 
 The `SecurityTrimmedControl` can be configured with the following properties:
@@ -70,6 +83,8 @@ The `SecurityTrimmedControl` can be configured with the following properties:
 | folderPath | string | no | Specify the name of a folder to check the user permissions against. Will be overridden if itemId is present. |
 | itemId | number | no | Specify the ID of the item to check the user permissions against. Takes precedence over folder. |
 | className | string | no | Specify the className to be used on the parent element. |
+| noPermissionsControl | JSX.Element | no | Optional. Specify the control you want to render if user doesn't have permissions. |
+| showLoadingAnimation | boolean | no | Optional. Specify should render loading animation. |
 
 The `PermissionLevel` enum has the following values:
 

src/common/dal/ListItemRepository.ts

@@ -1,24 +1,24 @@
-import { RequestClient } from "@pnp/common/src/netutil";
+import { SPHttpClient } from '@microsoft/sp-http';
 
 export class ListItemRepository {
-    constructor(protected SiteUrl: string, protected SPClient: RequestClient) {
+    constructor(protected SiteUrl: string, protected SPClient: SPHttpClient) {
 
     }
     /**
-     * 
+     *
      * @param filterText text value of the filter part of oData query 'Id eq 1'
-     * @param listId 
-     * @param internalColumnName 
-     * @param keyInternalColumnName 
-     * @param webUrl 
-     * @param top 
+     * @param listId
+     * @param internalColumnName
+     * @param keyInternalColumnName
+     * @param webUrl
+     * @param top
      */
     public async getListItemsByFilterClause(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, top?: number): Promise<any[]> {
         let returnItems: any[];
         try {
             const webAbsoluteUrl = !webUrl ? this.SiteUrl : webUrl;
             const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}`;
-            const data = await this.SPClient.get(apiUrl);
+            const data = await this.SPClient.get(apiUrl, SPHttpClient.configurations.v1);
             if (data.ok) {
                 const results = await data.json();
                 if (results && results.value && results.value.length > 0) {
@@ -31,4 +31,4 @@ export class ListItemRepository {
             return Promise.reject(error);
         }
     }
-}
+}

src/common/mocks/RequestClientMock.ts

@@ -1,9 +1,9 @@
-import { RequestClient, FetchOptions } from "@pnp/common/src/netutil";
+import { SPHttpClient, SPHttpClientConfiguration, ISPHttpClientOptions, SPHttpClientResponse } from '@microsoft/sp-http';
 
-export class RequestClientMock implements RequestClient {
-    public Requests: { url: string, method: string, options?: FetchOptions, resultString: string }[] = [];
-    public OnRequest: (url: string, method: string, options?: FetchOptions) => void;
-    public fetch(url: string, options?: FetchOptions): Promise<Response> {
+export class RequestClientMock extends SPHttpClient {
+    public Requests: { url: string, method: string, options?: ISPHttpClientOptions, resultString: string }[] = [];
+    public OnRequest: (url: string, method: string, options?: ISPHttpClientOptions) => void;
+    public fetch(url: string, configuration: SPHttpClientConfiguration, options: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
         let mockedResponse = this.Requests.filter(req => req.method === options.method && req.url == url)[0];
         let response: Response;
         if (mockedResponse) {
@@ -18,29 +18,29 @@ export class RequestClientMock implements RequestClient {
                 statusText: "Not fount",
             });
         }
-        return Promise.resolve(response);
+        return Promise.resolve(new SPHttpClientResponse(response));
     }
-    public fetchRaw(url: string, options?: FetchOptions): Promise<Response> {
-        return this.fetch(url,options);
+    public fetchRaw(url: string, configuration: SPHttpClientConfiguration, options?: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
+        return this.fetch(url, configuration, options);
     }
-    public get(url: string, options?: FetchOptions): Promise<Response> {
+    public get(url: string, configuration: SPHttpClientConfiguration, options?: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
         options = options || {};
         options.method = "GET";
-        return this.fetch(url,options);
+        return this.fetch(url, configuration, options);
     }
-    public post(url: string, options?: FetchOptions): Promise<Response> {
+    public post(url: string, configuration: SPHttpClientConfiguration, options?: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
         options = options || {};
         options.method = "POST";
-        return this.fetch(url,options);
+        return this.fetch(url, configuration, options);
     }
-    public patch(url: string, options?: FetchOptions): Promise<Response> {
+    public patch(url: string, configuration: SPHttpClientConfiguration, options?: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
         options = options || {};
         options.method = "PATCH";
-        return this.fetch(url,options);
+        return this.fetch(url, configuration, options);
     }
-    public delete(url: string, options?: FetchOptions): Promise<Response> {
+    public delete(url: string, configuration: SPHttpClientConfiguration, options?: ISPHttpClientOptions): Promise<SPHttpClientResponse> {
         options = options || {};
         options.method = "DELETE";
-        return this.fetch(url,options);
+        return this.fetch(url, configuration, options);
     }
-}
+}

src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx

@@ -8,7 +8,7 @@ import { RequestClientMock } from '../../common/mocks/RequestClientMock';
 
 declare const sinon;
 
-let mockHttpClient: RequestClientMock = new RequestClientMock();
+let mockHttpClient: RequestClientMock = new RequestClientMock(null);
 mockHttpClient.Requests.push({
   url: "/sites/test-site/_api/web/lists('TestId')/items?$select=Id,Title&$filter=Id gt 0",
   method: "GET",
@@ -23,9 +23,8 @@ describe('<ComboBoxListItemPicker />', () => {
         webUrl="/sites/test-site"
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         onInitialized={() => {
-         
+
           expect(comboBox.state('availableOptions')).to.have.length(10);
           resolve();
         }}
@@ -40,20 +39,19 @@ describe('<ComboBoxListItemPicker />', () => {
         webUrl="/sites/test-site"
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         onInitialized={() => {
-         
+
           let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
           ddBtn.simulate('click');
           //actual list is not part of the component
           let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[3];
           (checkBoxBtn as HTMLButtonElement).click();
-          
+
           //ddBtn.simulate('click');
         }}
         onSelectedItem={(item) => {
           expect(item.Id).to.equal(4);
-          
+
           resolve();
         }} />);
     });
@@ -67,11 +65,10 @@ describe('<ComboBoxListItemPicker />', () => {
         defaultSelectedItems={[1]}
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         onInitialized={() => {
           let ddInput = comboBox.find('.ms-ComboBox-Input').first();
           expect((ddInput.getNode() as any).value).to.be.equal("Test 1");
-          
+
           resolve();
         }}
         onSelectedItem={(item) => {
@@ -87,12 +84,11 @@ describe('<ComboBoxListItemPicker />', () => {
         defaultSelectedItems={[{Id:1, Title: "Test 1"}]}
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         onInitialized={() => {
-         
+
           let ddInput = comboBox.find('.ms-ComboBox-Input').first();
           expect((ddInput.getNode() as any).value).to.be.equal("Test 1");
-          
+
           resolve();
         }}
         onSelectedItem={(item) => {
@@ -107,10 +103,9 @@ describe('<ComboBoxListItemPicker />', () => {
         webUrl="/sites/test-site"
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         multiSelect={true}
         onInitialized={() => {
-         
+
           let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
           ddBtn.simulate('click');
           //actual list is not part of the component
@@ -121,7 +116,7 @@ describe('<ComboBoxListItemPicker />', () => {
         onSelectedItem={(item) => {
           expect(item.Id).to.equal(4);
           expect(item.selected).to.be.equal(true);
-          
+
           let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
           ddBtn.simulate('click');
           resolve();
@@ -138,9 +133,8 @@ describe('<ComboBoxListItemPicker />', () => {
         filter="Id gt 0"
         listId="TestId"
         multiSelect={true}
-        itemLimit={20}
         onInitialized={() => {
-         
+
           let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
           ddBtn.simulate('click');
           let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[0];
@@ -163,10 +157,9 @@ describe('<ComboBoxListItemPicker />', () => {
         defaultSelectedItems={[1,2]}
         filter="Id gt 0"
         listId="TestId"
-        itemLimit={20}
         multiSelect={true}
         onInitialized={() => {
-         
+
           let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
           ddBtn.simulate('click');
           let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[0];
@@ -181,4 +174,4 @@ describe('<ComboBoxListItemPicker />', () => {
         }} />);
     });
   });
-});
+});