From c8dbba0980d254d9e6fb9222d93e36902c1822b4 Mon Sep 17 00:00:00 2001
From: SteveGT96 <steve.tsala@intesys.it>
Date: Wed, 20 Nov 2024 15:51:50 +0100
Subject: [PATCH] fix(OH2-430): Fix edit group component and update text field
 component

---
 .../admin/users/editGroup/EditGroup.tsx       | 45 +++++++++----------
 .../accessories/textField/TextField.tsx       |  1 +
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
index ddbed24a7..d06654cf1 100644
--- a/src/components/accessories/admin/users/editGroup/EditGroup.tsx
+++ b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -1,6 +1,6 @@
 import { useFormik } from "formik";
 import { useAppDispatch, useAppSelector } from "libraries/hooks/redux";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
 import { useNavigate } from "react-router-dom";
@@ -51,13 +51,23 @@ export const EditGroup = () => {
   const [dirtyPermissions, setDirtyPermissions] = useState<boolean>(false);
 
   // make sure everything is loaded before displaying the editor
-  const [isPermissionEditorAvailable, setIsPermissionEditorAvailable] =
-    useState<boolean>(false);
+  const isPermissionEditorAvailable = useMemo(
+    () => canUpdatePermissions && group.data && permissions.data,
+    [canUpdatePermissions, group.data, permissions.data]
+  );
 
-  // keep track of which permissions have been updated and how
-  const [updatedPermissionsStack, setUpdatedPermissionsStack] = useState<
-    Array<PermissionActionType>
-  >([]);
+  // compare permissions to update the update stack
+  // and display permissions when ready
+  const updatedPermissionsStack = useMemo(() => {
+    if (canUpdatePermissions && group.data && permissions.data) {
+      return comparePermissions(
+        permissions.data,
+        group.data?.permissions ?? [],
+        groupPermissions
+      );
+    }
+    return [];
+  }, [canUpdatePermissions, group.data, permissions.data, groupPermissions]);
 
   const handleUpdatePermissions = ({
     permissions: perms,
@@ -120,22 +130,6 @@ export const EditGroup = () => {
     };
   }, []);
 
-  // compare permissions to update the update stack
-  // and display permissions when ready
-  useEffect(() => {
-    if (canUpdatePermissions && group.data && permissions.data) {
-      setIsPermissionEditorAvailable(true);
-
-      const newPermissionStack = comparePermissions(
-        permissions.data,
-        group.data?.permissions ?? [],
-        groupPermissions
-      );
-
-      setUpdatedPermissionsStack(newPermissionStack);
-    }
-  }, [canUpdatePermissions, group.data, permissions.data, groupPermissions]);
-
   const handleFormReset = () => {
     resetForm();
     setGroupPermissions(group.data?.permissions ?? []);
@@ -165,7 +159,10 @@ export const EditGroup = () => {
 
   return (
     <>
-      {group.isLoading || group.status === "IDLE" || permissions.isLoading ? (
+      {group.isLoading ||
+      group.status === "IDLE" ||
+      permissions.status === "IDLE" ||
+      permissions.isLoading ? (
         <CircularProgress style={{ marginLeft: "50%", position: "relative" }} />
       ) : (
         <div className="newGroupForm">
diff --git a/src/components/accessories/textField/TextField.tsx b/src/components/accessories/textField/TextField.tsx
index 587aa9081..2187bdc24 100644
--- a/src/components/accessories/textField/TextField.tsx
+++ b/src/components/accessories/textField/TextField.tsx
@@ -44,6 +44,7 @@ const TextField: FunctionComponent<IProps> = ({
         disabled={disabled}
         InputProps={InputProps}
         inputProps={{ maxLength }}
+        InputLabelProps={{ shrink: !!field.value }}
         required={required === FIELD_VALIDATION.REQUIRED}
       />
       {maxLength && maxLength > 0 && (