Revise PR based on coderabbit, greptile review

frontend/src/hooks/api/sshHost/types.ts

@@ -3,6 +3,14 @@ export enum LoginMappingSource {
   HOST_GROUP = "hostGroup"
 }
 
+export type TLoginMapping = {
+  loginUser: string;
+  allowedPrincipals: {
+    usernames: string[];
+  };
+  source: LoginMappingSource;
+};
+
 export type TSshHost = {
   id: string;
   projectId: string;
@@ -10,13 +18,7 @@ export type TSshHost = {
   alias: string | null;
   userCertTtl: string;
   hostCertTtl: string;
-  loginMappings: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-    source: LoginMappingSource;
-  }[];
+  loginMappings: TLoginMapping[];
 };
 
 export type TCreateSshHostDTO = {
@@ -25,12 +27,7 @@ export type TCreateSshHostDTO = {
   alias?: string;
   userCertTtl?: string;
   hostCertTtl?: string;
-  loginMappings: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-  }[];
+  loginMappings: TLoginMapping[];
 };
 
 export type TUpdateSshHostDTO = {
@@ -39,12 +36,7 @@ export type TUpdateSshHostDTO = {
   alias?: string;
   userCertTtl?: string;
   hostCertTtl?: string;
-  loginMappings?: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-  }[];
+  loginMappings?: TLoginMapping[];
 };
 
 export type TDeleteSshHostDTO = {

frontend/src/hooks/api/sshHostGroup/types.ts

@@ -1,37 +1,22 @@
-import { TSshHost } from "../sshHost/types";
+import { TLoginMapping, TSshHost } from "../sshHost/types";
 
 export type TSshHostGroup = {
   id: string;
   projectId: string;
   name: string;
-  loginMappings: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-  }[];
+  loginMappings: TLoginMapping[];
 };
 
 export type TCreateSshHostGroupDTO = {
   projectId: string;
   name: string;
-  loginMappings: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-  }[];
+  loginMappings: TLoginMapping[];
 };
 
 export type TUpdateSshHostGroupDTO = {
   sshHostGroupId: string;
   name?: string;
-  loginMappings?: {
-    loginUser: string;
-    allowedPrincipals: {
-      usernames: string[];
-    };
-  }[];
+  loginMappings?: TLoginMapping[];
 };
 
 export type TDeleteSshHostGroupDTO = {
@@ -39,7 +24,7 @@ export type TDeleteSshHostGroupDTO = {
 };
 
 export type TListSshHostGroupHostsResponse = {
-  hosts: TSshHost & { joinedGroupAt: string; isPartOfGroup: boolean }[];
+  hosts: (TSshHost & { joinedGroupAt: string; isPartOfGroup: boolean })[];
   totalCount: number;
 };
 

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -13,9 +13,9 @@ import {
   TBreadcrumbFormat
 } from "@app/components/v2";
 import {
-  useProjectPermission,
   ProjectPermissionActions,
   ProjectPermissionSub,
+  useProjectPermission,
   useSubscription,
   useWorkspace
 } from "@app/context";

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