Make minor PR adjustments

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

@@ -57,8 +57,8 @@ export type FormData = z.infer<typeof schema>;
 
 export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  const projectId = currentWorkspace?.id || "";
+  const projectId = currentWorkspace.id;
-  const { data: sshHostGroups } = useListWorkspaceSshHostGroups(currentWorkspace.id);
+  const { data: sshHostGroups } = useListWorkspaceSshHostGroups(projectId);
   const { data: members = [] } = useGetWorkspaceUsers(projectId);
   const { data: groups = [] } = useListWorkspaceGroups(projectId);
   const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});

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

@@ -1,4 +1,4 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -56,22 +56,38 @@ 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
+        <div className="flex justify-end">
-          I={ProjectPermissionActions.Create}
+          <a
-          a={ProjectPermissionSub.SshHostGroups}
+            target="_blank"
-        >
+            rel="noopener noreferrer"
-          {(isAllowed) => (
+            href="https://infisical.com/docs/documentation/platform/ssh/host-groups"
-            <Button
+          >
-              colorSchema="primary"
+            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-              type="button"
+              Documentation{" "}
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              <FontAwesomeIcon
-              onClick={() => handleAddSshHostGroupModal()}
+                icon={faArrowUpRightFromSquare}
-              isDisabled={!isAllowed}
+                className="mb-[0.06rem] ml-1 text-xs"
-            >
+              />
-              Add Group
+            </span>
-            </Button>
+          </a>
-          )}
+          <ProjectPermissionCan
-        </ProjectPermissionCan>
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SshHostGroups}
+          >
+            {(isAllowed) => (
+              <Button
+                colorSchema="primary"
+                type="button"
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => handleAddSshHostGroupModal()}
+                isDisabled={!isAllowed}
+                className="ml-4"
+              >
+                Add Group
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
       </div>
       <SshHostGroupsTable handlePopUpOpen={handlePopUpOpen} />
       <SshHostGroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

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

@@ -42,7 +42,7 @@ export const SshHostsSection = () => {
     <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">Hosts</p>
-        <div className="flex w-full justify-end">
+        <div className="flex justify-end">
           <a
             target="_blank"
             rel="noopener noreferrer"