Update login mapping rendering on ssh hosts

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

@@ -91,19 +91,50 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                       {host.loginMappings.length === 0 ? (
                         <span className="italic text-mineshaft-400">None</span>
                       ) : (
-                        Object.entries(
+                        (() => {
-                          host.loginMappings.reduce(
+                          const hostMappings = host.loginMappings.filter(
-                            (acc, mapping) => {
+                            (m) => m.source !== LoginMappingSource.HOST_GROUP
-                              const key = `${mapping.loginUser}|${mapping.source}|${mapping.allowedPrincipals.usernames.sort().join(",")}`;
+                          );
-                              acc[key] = mapping;
+                          const groupMappings = host.loginMappings.filter(
+                            (m) => m.source === LoginMappingSource.HOST_GROUP
+                          );
+
+                          const hostLoginUserToPrincipals = hostMappings.reduce(
+                            (acc, { loginUser, allowedPrincipals }) => {
+                              acc[loginUser] = new Set(allowedPrincipals.usernames);
                               return acc;
                             },
-                            {} as Record<string, (typeof host.loginMappings)[number]>
+                            {} as Record<string, Set<string>>
-                          )
+                          );
-                        )
+
-                          .sort(([a], [b]) => a.localeCompare(b))
+                          const entriesFromHost = hostMappings.map(({ loginUser, allowedPrincipals }) => ({
-                          .map(([key, { loginUser, allowedPrincipals, source }]) => (
+                            loginUser,
-                            <div key={`${host.id}-${key}`} className="mb-2">
+                            source: LoginMappingSource.HOST,
+                            usernames: allowedPrincipals.usernames
+                          }));
+
+                          const entriesFromGroup = groupMappings
+                            .map(({ loginUser, allowedPrincipals }) => {
+                              const existing = hostLoginUserToPrincipals[loginUser] || new Set();
+                              const filteredUsernames = allowedPrincipals.usernames.filter((u) => !existing.has(u));
+                              return filteredUsernames.length > 0
+                                ? {
+                                    loginUser,
+                                    source: LoginMappingSource.HOST_GROUP,
+                                    usernames: filteredUsernames
+                                  }
+                                : null;
+                            })
+                            .filter(Boolean) as {
+                            loginUser: string;
+                            source: LoginMappingSource;
+                            usernames: string[];
+                          }[];
+
+                          return [...entriesFromHost, ...entriesFromGroup]
+                            .sort((a, b) => a.loginUser.localeCompare(b.loginUser))
+                            .map(({ loginUser, usernames, source }) => (
+                              <div key={`${host.id}-${loginUser}-${source}`} className="mb-2">
                                 <div className="text-mineshaft-200">
                                   {loginUser}
                                   {source === LoginMappingSource.HOST_GROUP && (
@@ -112,13 +143,17 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
                                     </span>
                                   )}
                                 </div>
-                              {allowedPrincipals.usernames.map((username) => (
+                                {usernames.map((username) => (
-                                <div key={`${host.id}-${key}-${username}`} className="ml-4">
+                                  <div
+                                    key={`${host.id}-${loginUser}-${source}-${username}`}
+                                    className="ml-4"
+                                  >
                                     └─ {username}
                                   </div>
                                 ))}
                               </div>
-                          ))
+                            ));
+                        })()
                       )}
                     </Td>
                     <Td className="text-right align-middle">
@@ -198,4 +233,8 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
       </TableContainer>
     </div>
   );
+};
+      </TableContainer>
+    </div>
+  );
 };