awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
x032205
2025-12-10 20:19:36 -05:00
parent 0ed0504b90
commit 4cd8a641b1
2 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/pages/pam/PamAccountsPage/components/PamAccountCard.tsx
View File

@@ -1,6 +1,6 @@
import { LogInIcon } from "lucide-react"; import { Badge, UnstableButton } from "@app/components/v3";
import { PAM_RESOURCE_TYPE_MAP, TPamAccount } from "@app/hooks/api/pam"; import { PAM_RESOURCE_TYPE_MAP, TPamAccount } from "@app/hooks/api/pam";
import { LogInIcon, PackageOpenIcon } from "lucide-react";
type Props = { type Props = {
account: TPamAccount; account: TPamAccount;
@@ -9,39 +9,43 @@ type Props = {
}; };
export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => { export const PamAccountCard = ({ account, onAccess, accountPath }: Props) => {
const { name, description } = account; const { name, description, resource } = account;
const { image, name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[account.resource.resourceType]; const { image, name: resourceTypeName } = PAM_RESOURCE_TYPE_MAP[account.resource.resourceType];
return ( return (
<button <button
onClick={() => onAccess(account)}
type="button" type="button"
key={account.id} key={account.id}
className="flex cursor-pointer flex-col overflow-clip rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 text-start transition-transform duration-100 hover:scale-[103%] hover:bg-mineshaft-700" className="flex flex-col overflow-clip rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4 text-start transition-transform duration-100"
> >
<div className="flex items-center gap-4"> <div className="flex items-center gap-3.5">
<div className="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner"> <img
<img alt={resourceTypeName}
alt={resourceTypeName} src={`/images/integrations/${image}`}
src={`/images/integrations/${image}`} className="size-10 object-contain"
className="size-7 object-contain" />
/>
</div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<p className="truncate text-lg font-medium text-mineshaft-100">{name}</p> <p className="truncate text-lg font-medium text-mineshaft-100">{name}</p>
<LogInIcon className="size-5 text-mineshaft-400" /> <UnstableButton onClick={() => onAccess(account)} size="xs" variant="outline">
<LogInIcon />
Connect
</UnstableButton>
</div> </div>
<p <p
className={`${accountPath ? "text-mineshaft-300" : "text-mineshaft-400"} truncate text-xs leading-4`} className={`${accountPath ? "text-mineshaft-300" : "text-mineshaft-400"} truncate text-xs leading-4`}
> >
{accountPath || "root"} {resourceTypeName} - {accountPath || "root"}
</p> </p>
</div> </div>
</div> </div>
<p className="mt-4 truncate text-sm text-mineshaft-400">{description || "No description"}</p> <Badge variant="neutral" className="mt-3.5">
<PackageOpenIcon />
{resource.name}
</Badge>
<p className="mt-2 truncate text-sm text-mineshaft-400">{description || "No description"}</p>
</button> </button>
); );
}; };

6
frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx
View File

@@ -262,7 +262,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
setAccountView(e); setAccountView(e);
// Reset perPage to appropriate default for the view // Reset perPage to appropriate default for the view
const newPerPage = e === PamAccountView.Flat ? 16 : 10; const newPerPage = e === PamAccountView.Flat ? 12 : 10;
setPerPage(newPerPage); setPerPage(newPerPage);
setUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, newPerPage); setUserTablePreference("pamAccountsTable", PreferenceKey.PerPage, newPerPage);
@@ -417,7 +417,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
{accountView === PamAccountView.Nested && <FolderBreadCrumbs path={accountPath} />} {accountView === PamAccountView.Nested && <FolderBreadCrumbs path={accountPath} />}
{accountView === PamAccountView.Flat ? ( {accountView === PamAccountView.Flat ? (
<> <>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{filteredAccounts.map((account) => ( {filteredAccounts.map((account) => (
<PamAccountCard <PamAccountCard
key={account.id} key={account.id}
@@ -434,7 +434,7 @@ export const PamAccountsTable = ({ projectId }: Props) => {
perPage={perPage} perPage={perPage}
onChangePage={(newPage) => setPage(newPage)} onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={handlePerPageChange} onChangePerPage={handlePerPageChange}
perPageList={[8, 12, 16, 20, 40]} perPageList={[9, 12, 15, 18, 27]}
/> />
</> </>
) : ( ) : (