Privacy - UI

Objective

To provide the facility of Abstraction of private details of users. It will also help in masking the sensetive details and unmasking of it by the authorized roles whenever needed.

Masking / Un-Masking of Data

Particular entry of an object from search API will come as masked if its enabled in mdms (mentioned in technical implementation below) which will be based on roles, if the value is masked in UI, the eye Icon will be present Infront of it, in order to allow the user to unmask it.

once User click on eye Icon, the corresponding search API will be called with plainAccessRequest
object in request info which will allow the data to be unmasked in the response object, this will lead to refreshing of value and whole data will be visible, and eye icon will disappear.

Technical Implementation Details:

the masking of data and its dependency on roles are being decided by the following mdms file :

egov-mdms-data/SecurityPolicy.json at develop · egovernments/egov-mdms-data (github.com)

lets take an example of an object in the mdms file i.e. WnSConnection

{
      "model": "WnSConnection",
      "uniqueIdentifier": {
        "name": "applicationNo",
        "jsonPath": "applicationNo"
      },
      "attributes": [
        {
          "name": "ownerType",
          "jsonPath": "connectionHolders/*/ownerType",
          "patternId": "005",
          "defaultVisibility": ""
        },        
        {
          "name": "plumberInfoMobileNumber",
          "jsonPath": "plumberInfo/*/mobileNumber",
          "patternId": "008",
          "defaultVisibility": ""
        },
        {
          "name": "relationship",
          "jsonPath": "connectionHolders/*/relationship",
          "patternId": "005",
          "defaultVisibility": ""
        }
      ],
      "roleBasedDecryptionPolicy": [
        {
          "roles": ["EMPLOYEE","CITIZEN","WS_CEMP","WS_DOC_VERIFIER","WS_FIELD_INSPECTOR","WS_APPROVER","WS_CLERK","SW_CEMP","SW_DOC_VERIFIER","SW_FIELD_INSPECTOR","SW_APPROVER","SW_CLERK"],
          "attributeAccessList": [
            
            {
              "attribute": "ownerType",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            },
            {
              "attribute": "plumberInfoMobileNumber",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            },
            {
              "attribute": "relationship",
              "firstLevelVisibility": "MASKED",
              "secondLevelVisibility": ""
            }
          ]
        }
      ]
    },

In this as the unique identifier is defined as applicationNo, so from UI plain request object which is being sent in search API will also contain recordId as applicationNo, Similarly the list of attributes mentioned here will be received as masked by default in response object from search API, the roles mentioned in the roles array will define the roles for which these attributes were to be masked.

Masking in details Page

In UI code repository, If any particular data has to be masked then we have to send a Privacy object along with corresponding data to ApplicationDetailsTemplate

example :

For Water Application details the connection holder details has to be masked, so for that privacy object is passed from the applicationdetails hook.

relationship object of connection holder details :

 { title: "WS_CONN_HOLDER_OWN_DETAIL_RELATION_LABEL", value: wsDataDetails?.connectionHolders?.[0]?.relationship,
              privacy: { uuid: uuid, fieldName: ["relationship"], model: "WnSConnection",showValue: false,
              loadData: {
                serviceName: serviceType === "WATER" ? "/ws-services/wc/_search" : "/sw-services/swc/_search",
                requestBody: {},
                requestParam: { tenantId, applicationNumber },
                jsonPath: serviceType === "WATER" ? "WaterConnection[0].connectionHolders[0].relationship" : "SewerageConnections[0].connectionHolders[0].relationship",
                isArray: false,
              }, },
            },

here uuid is the record id which we have to send for particular model, fieldName is the name defined in mdms as well as the exact param which we recieve in the response object, model is the model from SecurityPolicy MDMS, showValue is sent as true when if we want to append any data with the newly unmasked data, ususally this is used for property address and loadData is an object in which we sent the body and params for API call which we have to make in order to get the unmasked data. refer code DIGIT-Dev/Search.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

ApplicationDetailsTemplate has the eye icon already integrated with Row Component, which can be enabled by passing the above privacy object. refer code DIGIT-Dev/StatusTable.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

UnMaskComponent is the main component which handles all the unmasking action through eye icon, if in any place eye icon has to be implemented in order to give feature of unmasking then this component has to be integrated.

 const { isLoading, data } = Digit.Hooks.useCustomMDMS(
    Digit.ULBService.getStateId(),
    "DataSecurity",
    [{ name: "SecurityPolicy" }],
    {
      select: (data) => data?.DataSecurity?.SecurityPolicy?.find((elem) => elem?.model == privacy?.model) || {},
    }
  );
  const { privacy: privacyValue, updatePrivacy } = Digit.Hooks.usePrivacyContext();
  if (isLoading || privacy?.hide) {
    return null;
  }
  
  if (Digit.Utils.checkPrivacy(data, privacy) && iseyevisible) {
    sessionStorage.setItem("isPrivacyEnabled","true");
    return (
      <span
        onClick={() => {
          sessionStorage.setItem("eyeIconClicked",privacy?.fieldName);
          updatePrivacy(privacy?.uuid, privacy?.fieldName);
        }}
      >
      <div className={`tooltip`}>
        <PrivacyMaskIcon className="privacy-icon" style={style}></PrivacyMaskIcon>
            <span className="tooltiptext" style={{
                    fontSize: "medium",
                    width: "unset",
                    display: "block",
                    marginRight:"-60px",
                  }}>
                   {t("CORE_UNMASK_DATA")}
                  </span>
                </div>
      </span>
    );
  }
  return null;
});

first it loads the MDMS data and filter it out according to the particular model for which the unmaskComponent has been called, then it calles the checkprivacy obejct to verify if the privacy is enabled for that particular role and model (refer below code for privacy check)

if the checkprivacy is returned true, eye icon is visible, on clicking of it, will call the updateprivacy method which is defined in useprivacycontext hook : refer DIGIT-Dev/usePrivacyContext.js at 090ef18028a50f38222e426ec59ab9f123833af0 · egovernments/DIGIT-Dev (github.com)

this will trigger the search hook being called again with plainAccessRequest (mentioned in above picture), but for that privacy object has to be sent in the hook for re triggering.

For all the methods related to privacy please refer to the document below:

DIGIT-Dev/privacy.js at develop · egovernments/DIGIT-Dev (github.com)

Unmasking in Edit Details Page

For enabling eyeicon in text field similar steps has to be followed :

The search API Hook used to prefill the data in edit screen should have privacy object being sent in it.
Unmask component has to be defined with the corresponding component

refer : Index page for edit details : DIGIT-Dev/index.js at develop · egovernments/DIGIT-Dev (github.com)

MDMS data:

SecurityPolicy.json is being used to handle all privacy related action

MDMS Detail	Module Details Name	Master Detail Name

MDMS Detail	Module Details Name	Master Detail Name
List of Privacy object and roles associated to it	`DataSecurity`	`SecurityPolicy`