Revise PR based on coderabbit, greptile review

frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/AddHostGroupMemberModal.tsx

@@ -38,7 +38,8 @@ export const AddHostGroupMemberModal = ({ popUp, handlePopUpToggle }: Props) =>
     sshHostGroupId: popUpData?.sshHostGroupId,
     filter: EHostGroupMembershipFilter.NON_GROUP_MEMBERS
   });
-  const { mutateAsync: addHostToSshHostGroup } = useAddHostToSshHostGroup();
+  const { mutateAsync: addHostToSshHostGroup, isPending: isAddingHostToSshHostGroup } =
+    useAddHostToSshHostGroup();
 
   const handleAddHost = async (sshHostId: string) => {
     try {
@@ -99,11 +100,11 @@ export const AddHostGroupMemberModal = ({ popUp, handlePopUpToggle }: Props) =>
                         >
                           {(isAllowed) => (
                             <Button
-                              isLoading={isPending}
+                              isLoading={isAddingHostToSshHostGroup}
                               isDisabled={!isAllowed}
                               colorSchema="primary"
                               variant="outline_bg"
-                              type="submit"
+                              type="button"
                               onClick={() => handleAddHost(host.id)}
                             >
                               Add

frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/components/SshHostGroupHostsTable.tsx

@@ -47,7 +47,7 @@ export const SshHostGroupHostsTable = ({ sshHostGroupId, handlePopUpOpen }: Prop
             </Tr>
           </THead>
           <TBody>
-            {isPending && <TableSkeleton columns={2} innerKey="ssh-host-group-hosts" />}
+            {isPending && <TableSkeleton columns={4} innerKey="ssh-host-group-hosts" />}
             {!isPending &&
               data?.hosts.map((host) => {
                 return (
@@ -61,10 +61,10 @@ export const SshHostGroupHostsTable = ({ sshHostGroupId, handlePopUpOpen }: Prop
                         a={ProjectPermissionSub.SshHostGroups}
                       >
                         {(isAllowed) => (
-                          <Tooltip content="Remove user from group">
+                          <Tooltip content="Remove host from group">
                             <IconButton
                               isDisabled={!isAllowed}
-                              ariaLabel="Remove user from group"
+                              ariaLabel="Remove host from group"
                               onClick={() =>
                                 handlePopUpOpen("removeHostFromSshHostGroup", {
                                   sshHostId: host.id,

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupModal.tsx

@@ -34,7 +34,7 @@ type Props = {
 
 const schema = z
   .object({
-    name: z.string().trim(),
+    name: z.string().trim().min(1).max(64),
     loginMappings: z
       .object({
         loginUser: z.string().trim().min(1),

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsSection.tsx

@@ -56,11 +56,14 @@ export const SshHostGroupsSection = () => {
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Host Groups</p>
-        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.SshHosts}>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Create}
+          a={ProjectPermissionSub.SshHostGroups}
+        >
           {(isAllowed) => (
             <Button
               colorSchema="primary"
-              type="submit"
+              type="button"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => handleAddSshHostGroupModal()}
               isDisabled={!isAllowed}

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx

@@ -120,7 +120,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
                           </ProjectPermissionCan>
                           <ProjectPermissionCan
                             I={ProjectPermissionActions.Delete}
-                            a={ProjectPermissionSub.SshHosts}
+                            a={ProjectPermissionSub.SshHostGroups}
                           >
                             {(isAllowed) => (
                               <DropdownMenuItem