Fixed hover over issue

frontend/src/ManageGranularAccess/AppResourcePermission.jsx

@@ -23,10 +23,10 @@ function AppResourcePermissions({
   return (
     <div
       className="manage-resource-permission"
-      onMouseOver={() => {
+      onMouseEnter={() => {
         setHover(true);
       }}
-      onMouseOut={() => {
+      onMouseLeave={() => {
         setHover(false);
       }}
       onClick={() => {
@@ -48,101 +48,112 @@ function AppResourcePermissions({
               )
             }
             placement="top"
+          >
+            <div
+              onMouseEnter={() => {
+                setNotClickable(true);
+              }}
+              onMouseLeave={() => {
+                setNotClickable(false);
+              }}
+            >
+              <label className="form-check form-check-inline">
+                <input
+                  className="form-check-input"
+                  type="radio"
+                  onClick={() => {
+                    !appsPermissions.canEdit &&
+                      updateOnlyGranularPermissions(permissions, {
+                        canEdit: !appsPermissions.canEdit,
+                        canView: appsPermissions.canEdit,
+                        ...(!appsPermissions.canEdit && { hideFromDashboard: false }),
+                      });
+                  }}
+                  checked={appsPermissions.canEdit}
+                  disabled={isRoleGroup || disableEditUpdate}
+                  data-cy="app-create-checkbox"
+                />
+                <span className="form-check-label" data-cy="app-create-label">
+                  {'Edit'}
+                </span>
+                {/* <span class={`text-muted tj-text-xxsm ${isRoleGroup && 'check-label-disable'}`}>Create apps in this workspace</span> */}
+                <span class={`tj-text-xxsm`}>Access to app builder</span>
+              </label>
+            </div>
+          </OverlayTrigger>
+          <div
+            onMouseEnter={() => {
+              setNotClickable(true);
+            }}
+            onMouseLeave={() => {
+              setNotClickable(false);
+            }}
           >
             <label className="form-check form-check-inline">
               <input
-                onMouseOver={() => {
-                  setNotClickable(true);
-                }}
-                onMouseOut={() => {
-                  setNotClickable(false);
-                }}
                 className="form-check-input"
                 type="radio"
                 onClick={() => {
-                  !appsPermissions.canEdit &&
+                  !appsPermissions.canView &&
                     updateOnlyGranularPermissions(permissions, {
-                      canEdit: !appsPermissions.canEdit,
-                      canView: appsPermissions.canEdit,
-                      ...(!appsPermissions.canEdit && { hideFromDashboard: false }),
+                      canView: !appsPermissions.canView,
+                      canEdit: appsPermissions.canView,
                     });
                 }}
-                checked={appsPermissions.canEdit}
+                checked={appsPermissions.canView}
                 disabled={isRoleGroup || disableEditUpdate}
-                data-cy="app-create-checkbox"
+                data-cy="app-delete-checkbox"
               />
-              <span className="form-check-label" data-cy="app-create-label">
-                {'Edit'}
+              <span className="form-check-label" data-cy="app-delete-label">
+                {'View'}
               </span>
-              {/* <span class={`text-muted tj-text-xxsm ${isRoleGroup && 'check-label-disable'}`}>Create apps in this workspace</span> */}
-              <span class={`tj-text-xxsm`}>Access to app builder</span>
+              <span class={`tj-text-xxsm`}>Only access released version of apps</span>
             </label>
-          </OverlayTrigger>
-          <label className="form-check form-check-inline">
-            <input
-              onMouseOver={() => {
-                setNotClickable(true);
-              }}
-              onMouseOut={() => {
-                setNotClickable(false);
-              }}
-              className="form-check-input"
-              type="radio"
-              onClick={() => {
-                !appsPermissions.canView &&
+          </div>
+          <div
+            onMouseEnter={() => {
+              setNotClickable(true);
+            }}
+            onMouseLeave={() => {
+              setNotClickable(false);
+            }}
+          >
+            <label className="form-check form-check-inline">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                onChange={() => {
                   updateOnlyGranularPermissions(permissions, {
-                    canView: !appsPermissions.canView,
-                    canEdit: appsPermissions.canView,
+                    hideFromDashboard: !appsPermissions.hideFromDashboard,
                   });
-              }}
-              checked={appsPermissions.canView}
-              disabled={isRoleGroup || disableEditUpdate}
-              data-cy="app-delete-checkbox"
-            />
-            <span className="form-check-label" data-cy="app-delete-label">
-              {'View'}
-            </span>
-            <span class={`tj-text-xxsm`}>Only access released version of apps</span>
-          </label>
-          <label className="form-check form-check-inline">
-            <input
-              onMouseOver={() => {
-                setNotClickable(true);
-              }}
-              onMouseOut={() => {
-                setNotClickable(false);
-              }}
-              className="form-check-input"
-              type="checkbox"
-              onChange={() => {
-                updateOnlyGranularPermissions(permissions, {
-                  hideFromDashboard: !appsPermissions.hideFromDashboard,
-                });
-              }}
-              checked={appsPermissions.hideFromDashboard}
-              disabled={isRoleGroup || !appsPermissions.canView}
-              data-cy="app-delete-checkbox"
-            />
-            <span className="form-check-label" data-cy="app-delete-label">
-              {'Hide from dashbaord'}
-            </span>
-            <span class={`tj-text-xxsm`}>App will be accessible by URL only</span>
-          </label>
+                }}
+                checked={appsPermissions.hideFromDashboard}
+                disabled={isRoleGroup || !appsPermissions.canView}
+                data-cy="app-delete-checkbox"
+              />
+              <span className="form-check-label" data-cy="app-delete-label">
+                {'Hide from dashbaord'}
+              </span>
+              <span class={`tj-text-xxsm`}>App will be accessible by URL only</span>
+            </label>
+          </div>
         </div>
       </div>
       <div>
         <GroupChipTD groups={apps} />
       </div>
       <div className="edit-icon-container">
-        <ButtonSolid
-          leftIcon="editrectangle"
-          className="edit-permission-custom"
-          iconWidth="14"
-          onClick={() => {
-            openEditPermissionModal(permissions);
-          }}
-          disabled={isRoleGroup}
-        />
+        {onHover && (
+          <ButtonSolid
+            leftIcon="editrectangle"
+            className="edit-permission-custom"
+            iconWidth="14"
+            onClick={() => {
+              openEditPermissionModal(permissions);
+            }}
+            disabled={isRoleGroup}
+          />
+        )}
       </div>
     </div>
   );

frontend/src/ManageGranularAccess/index.jsx

@@ -365,12 +365,8 @@ class ManageGranularAccessComponent extends React.Component {
 
   render() {
     const {
-      isEmpty,
       showAddPermissionModal,
-      errors,
       selectedApps,
-      initialPermissionState,
-      isAll,
       isCustom,
       granularPermissions,
       isLoading,
@@ -379,11 +375,8 @@ class ManageGranularAccessComponent extends React.Component {
       modalType,
       newPermissionName,
       showAutoRoleChangeModal,
-      autoRoleChangeModalMessage,
       autoRoleChangeModalList,
       autoRoleChangeMessageType,
-      updateParam,
-      updatingPermission,
       updateType,
       deleteConfirmationModal,
       deletingPermissions,