SiliconLabsGH-43: Updated User Credential implementation

Forwarded: SiliconLabs#43
Bug-SiliconLabs: UIC-3222
Bug-Github: SiliconLabs#43

Integration of commits until : 
5664a2147a2c94bdf223ea89076e4ea036d92cca


Add following commits : 4a515ed86efd401d1212ab7974327ed82e973321
e0ea8149a0bf3ef5c69bf9dd2aa9206352d7eea5
d0049b2c28c0b98050ea0201e800a904a9c66df6

Author: silabs-borisl

applications/dev_ui/dev_gui/src/App.tsx

@@ -149,6 +149,23 @@ class App extends Component<{}, AppState> {
     this.setState({ CommissionableDevices: list });
   }
 
+  handleEvents(data: any) {
+    var toastType = toast.TYPE.DEFAULT;
+    switch (data.level) {
+      case 1:
+        toastType = toast.TYPE.INFO;
+        break;
+      case 2:
+        toastType = toast.TYPE.WARNING;
+        break;
+      case 3:
+      case 4:
+        toastType = toast.TYPE.ERROR;
+        break;
+    }
+    toast(data.message, { type: toastType })
+  }
+
   handleUPTIChange(list: any[]) {
     let upti = this.state.UPTI;
     upti.List = list;
@@ -414,6 +431,9 @@ class App extends Component<{}, AppState> {
       case "commissionable-device":
         this.handleCommissionableDevices(mes.data);
         break;
+      case "event":
+        this.handleEvents(mes.data);
+        break;
     }
   }
 

applications/dev_ui/dev_gui/src/dev-gui-api/handler.js

@@ -40,6 +40,20 @@ exports.processSmartStart = (topic, message) => {
     }
 }
 
+exports.processEvent = (topic, message) => {
+    console.log(`Received Event : '${message}'`);
+    if (message.toString() == "")
+        return;
+    try {
+        return {
+            type: "event",
+            data: JSON.parse(message)
+        };
+    } catch (error) {
+        return getErrorResponse(topic, message, error);
+    }
+}
+
 exports.processCluster = (topic, message) => {
     let index = -1;
     let match = topic.match(/ucl\/by-unid\/(.*)\/(ep\d+)\/(.*)/)

applications/dev_ui/dev_gui/src/dev-gui-api/main.js

@@ -33,7 +33,8 @@ let topics = ["ucl/SmartStart/List",
     "ucl/UPTICap/#",
     "ucl/by-machine-id/+/SystemMetrics/SupportedCommands",
     "ucl/by-machine-id/+/SystemMetrics/Attributes/#",
-    "ucl/by-mqtt-client/+/ApplicationMonitoring/Attributes/#"
+    "ucl/by-mqtt-client/+/ApplicationMonitoring/Attributes/#",
+    "ucl/Event"
 ];
 Object.keys(supportedClusters).forEach((i) => {
     topics.push(`ucl/by-unid/+/+/${i}/SupportedCommands`);
@@ -282,6 +283,8 @@ function onMqttMessage(topic, message) {
         response = handler.processAppMonitoringList(topic, message);
     } else if (topic.match(/ucl\/SmartStart\/CommissionableDevice\/(.*)/)) {
         response = handler.processCommissionableDevices(topic, message);
+    } else if (topic === "ucl/Event") {
+        response = handler.processEvent(topic, message);
     }
     if (response && Object.keys(response).length > 0)
         handler.addToQueue(response.type, response.data);

applications/dev_ui/dev_gui/src/pages/user-credential/user-credential.tsx

@@ -224,6 +224,7 @@ export class UserCredential extends React.Component<UserCredentialProps, UserCre
                   <th>Supported User Types</th>
                   <th>Supported Credential Types</th>
                   <th>Supported Credential Rules</th>
+                  <th>Admin PIN Code</th>
                   <th>Supported Commands</th>
                 </tr>
               </thead>
@@ -251,6 +252,13 @@ export class UserCredential extends React.Component<UserCredentialProps, UserCre
                           <td>{this.getBadges(item.UserCredential?.SupportedUserTypes?.Reported)}</td>
                           <td>{this.getSupportedCredentialType(item.UserCredential?.SupportedCredentialTypes?.Reported, item.UserCredential?.Credentials)}</td>
                           <td>{this.getBadges(item.UserCredential?.SupportedCredentialRules?.Reported)}</td>
+                          <td>{(item.UserCredential?.SupportAdminPinCode?.Reported) ?
+                            <Tooltip key={index} title={"Deactivation supported : " + item.UserCredential?.SupportAdminPinCodeDeactivation?.Reported}>
+                              <span>{item.UserCredential?.AdminPinCode?.Reported}</span>
+                            </Tooltip>
+                            : <RiIcons.RiCloseCircleFill color="red"/>
+                          }
+                          </td>
                           <td className="float-left">
                             {commands && commands.length
                               ? <DropdownButton menuAlign={'right'} variant="outline-primary" title="Commands" className="float-right" disabled={isOffline} size="sm">