Complete preliminary ssh host group feature

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

@@ -1,10 +1,11 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { DeleteActionModal, IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useRemoveHostFromSshHostGroup } from "@app/hooks/api";
 
@@ -16,13 +17,28 @@ type Props = {
 };
 
 export const SshHostGroupHostsSection = ({ sshHostGroupId }: Props) => {
+  const { subscription } = useSubscription();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "removeHostFromSshHostGroup",
-    "addHostGroupMembers"
+    "addHostGroupMembers",
+    "upgradePlan"
   ] as const);
 
   const { mutateAsync: removeHostFromGroup } = useRemoveHostFromSshHostGroup();
 
+  const handleAddSshHostModal = () => {
+    if (!subscription?.sshHostGroups) {
+      handlePopUpOpen("upgradePlan", {
+        description:
+          "You can manage hosts more efficiently with SSH host groups if you upgrade your Infisical plan to an Enterprise license."
+      });
+    } else {
+      handlePopUpOpen("addHostGroupMembers", {
+        sshHostGroupId
+      });
+    }
+  };
+
   const onRemoveSshHostSubmit = async (sshHostId: string) => {
     try {
       await removeHostFromGroup({
@@ -49,17 +65,16 @@ export const SshHostGroupHostsSection = ({ sshHostGroupId }: Props) => {
     <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">SSH Hosts</h3>
-        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.SshHosts}>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Edit}
+          a={ProjectPermissionSub.SshHostGroups}
+        >
           {(isAllowed) => (
             <IconButton
               ariaLabel="add host"
               variant="plain"
               className="group relative"
-              onClick={() =>
-                handlePopUpOpen("addHostGroupMembers", {
-                  sshHostGroupId
-                })
-              }
+              onClick={() => handleAddSshHostModal()}
               isDisabled={!isAllowed}
             >
               <FontAwesomeIcon icon={faPlus} />
@@ -84,6 +99,11 @@ export const SshHostGroupHostsSection = ({ sshHostGroupId }: Props) => {
           )
         }
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
     </div>
   );
 };

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

@@ -42,6 +42,7 @@ export const SshHostGroupHostsTable = ({ sshHostGroupId, handlePopUpOpen }: Prop
             <Tr>
               <Th>Alias</Th>
               <Th>Hostname</Th>
+              <Th>Added On</Th>
               <Th />
             </Tr>
           </THead>
@@ -53,6 +54,7 @@ export const SshHostGroupHostsTable = ({ sshHostGroupId, handlePopUpOpen }: Prop
                   <Tr className="h-10" key={`host-${host.id}`}>
                     <Td>{host.alias ?? "-"}</Td>
                     <Td>{host.hostname}</Td>
+                    <Td>{new Date(host.joinedGroupAt).toLocaleDateString()}</Td>
                     <Td className="flex justify-end">
                       <ProjectPermissionCan
                         I={ProjectPermissionActions.Edit}