github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-09 15:38:03 -05: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 { LogInIcon, PackageOpenIcon } from "lucide-react";
type Props = {
account: TPamAccount;
@@ -9,39 +9,43 @@ type 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];
return (
<button
onClick={() => onAccess(account)}
type="button"
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="rounded-sm border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
<img
alt={resourceTypeName}
src={`/images/integrations/${image}`}
className="size-7 object-contain"
/>
</div>
<div className="flex items-center gap-3.5">
<img
alt={resourceTypeName}
src={`/images/integrations/${image}`}
className="size-10 object-contain"
/>
<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>
<LogInIcon className="size-5 text-mineshaft-400" />
<UnstableButton onClick={() => onAccess(account)} size="xs" variant="outline">
<LogInIcon />
Connect
</UnstableButton>
</div>
<p
className={`${accountPath ? "text-mineshaft-300" : "text-mineshaft-400"} truncate text-xs leading-4`}
>
{accountPath || "root"}
{resourceTypeName} - {accountPath || "root"}
</p>
</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>
);
};

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

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