Updated Docs

samples/react-manage-profile-card-properties/README.md

@@ -6,11 +6,17 @@ We can create, edit, delete, directory properties that can be add to profile car
 
 Only users with Tenant Admin Role are allowed to managed profile card properties. 
 
-##  Site Designs List
+##  Manage Profile Card Properties
 
-![site design list](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/dev/samples/react-manage-sitedesigns/assets/screen1.jpg)
+![manageProps](assets/Screenshot1.png)
 
+![manageProps](assets/Screenshot2.png)
 
+![manageProps](assets/Screenshot3.png)
+
+![manageProps](assets/Screenshot4.png)
+
+![manageProps](assets/Screenshot5.png)
 
 
 
@@ -59,6 +65,7 @@ Version|Date|Comments
   - `gulp bundle --ship`
   - `gulp package-solution --ship`
   - `Add to AppCatalog and deploy`
-  - approve the required permissions (User.ReadWrite) on SharePoint Admin in App permissions
   
-<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-manage-sitedesigns" />
+- approve the required permissions (User.ReadWrite, Directory.AccessAsUser.All) on SharePoint Admin in App permissions
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-manage-profile-card-properties" />

samples/react-manage-profile-card-properties/config/package-solution.json

@@ -11,6 +11,10 @@
       {
         "resource": "Microsoft Graph",
         "scope": "User.ReadWrite.All"
+      },
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Directory.AccessAsUser.All"
       }
     ]
   },

samples/react-manage-profile-card-properties/src/components/ManageProfileCardProperties/ManageProfileCardProperties.tsx

@@ -124,8 +124,8 @@ export default class ManageProfileCardProperties extends React.Component<
         name: "Directory Property Name",
         fieldName: "displayAttribute",
         isResizable: true,
-        maxWidth: 160,
+        maxWidth: 210,
-        minWidth: 50,
+        minWidth: 150,
         isSorted: true,
         isSortedDescending: false,
         onColumnClick: this._onColumnClick,
@@ -349,6 +349,12 @@ export default class ManageProfileCardProperties extends React.Component<
     this._selection.setAllSelected(false);
     this.setState({ isLoading: true, hasError: false, errorMessage: null });
     const _listItems = await this._getProfileCardProperties();
+    // update Application context
+    this.applicationContext = {
+      ...this.applicationContext,
+      listItems: _listItems,
+    };
+    // update State
     this.setState({
       listItems: _listItems,
       selectedItem: undefined,
@@ -364,9 +370,8 @@ export default class ManageProfileCardProperties extends React.Component<
         displayNewPanel: false,
         displayDeletePanel: false,
       });
-      this._selection.setAllSelected(false);
+      // refresh List
-      const _listItems = await this._getProfileCardProperties();
+      await this._onRefresh();
-      this.setState({ listItems: _listItems, selectedItem: undefined });
     } else {
       this.setState({
         displayEditPanel: false,

samples/react-manage-profile-card-properties/src/webparts/manageProfileCardProperties/ManageProfileCardPropertiesWebPart.manifest.json

@@ -20,7 +20,7 @@
     "group": { "default": "Other" },
     "title": { "default": "Manage Profile Card Properties" },
     "description": { "default": "Manage Profile Card Properties" },
-    "officeFabricIconFontName": "Page",
+    "officeFabricIconFontName": "TaskManager",
     "properties": {
       "title": "Manage Profile Card Properties"
     }

samples/react-manage-profile-card-properties/tslint.json

@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,