rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-03-20 16:55:49 +01:00
parent 7b320916af
commit 3b5122da5e
1 changed files with 54 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
apps/console/src/pages/iam/organizations/settings/AuditLogSettingsPage.tsx
View File

@@ -5,23 +5,23 @@ import {
Button, Button,
IconChevronDown, IconChevronDown,
Spinner, Spinner,
Table,
Tbody, Tbody,
Td, Td,
Th, Th,
Thead, Thead,
Table,
Tr, Tr,
} from "@probo/ui"; } from "@probo/ui";
import { import {
type PreloadedQuery,
graphql, graphql,
type PreloadedQuery,
useFragment, useFragment,
usePaginationFragment, usePaginationFragment,
usePreloadedQuery, usePreloadedQuery,
} from "react-relay"; } from "react-relay";
import type { AuditLogSettingsPageQuery } from "#/__generated__/iam/AuditLogSettingsPageQuery.graphql";
import type { AuditLogSettingsPageFragment$key } from "#/__generated__/iam/AuditLogSettingsPageFragment.graphql"; import type { AuditLogSettingsPageFragment$key } from "#/__generated__/iam/AuditLogSettingsPageFragment.graphql";
import type { AuditLogSettingsPageQuery } from "#/__generated__/iam/AuditLogSettingsPageQuery.graphql";
import type { AuditLogSettingsPageRefetchQuery } from "#/__generated__/iam/AuditLogSettingsPageRefetchQuery.graphql"; import type { AuditLogSettingsPageRefetchQuery } from "#/__generated__/iam/AuditLogSettingsPageRefetchQuery.graphql";
import type { AuditLogSettingsPageRowFragment$key } from "#/__generated__/iam/AuditLogSettingsPageRowFragment.graphql"; import type { AuditLogSettingsPageRowFragment$key } from "#/__generated__/iam/AuditLogSettingsPageRowFragment.graphql";
@@ -93,10 +93,10 @@ function ActionBadge({ action }: { action: string }) {
const verb = parts[parts.length - 1]; const verb = parts[parts.length - 1];
if ( if (
verb === "create" || verb === "create"
verb === "upload" || || verb === "upload"
verb === "import" || || verb === "import"
verb === "publish" || verb === "publish"
) { ) {
return <Badge variant="success" size="sm">{action}</Badge>; return <Badge variant="success" size="sm">{action}</Badge>;
} }
@@ -104,10 +104,10 @@ function ActionBadge({ action }: { action: string }) {
return <Badge variant="danger" size="sm">{action}</Badge>; return <Badge variant="danger" size="sm">{action}</Badge>;
} }
if ( if (
verb === "update" || verb === "update"
verb === "assign" || || verb === "assign"
verb === "unassign" || || verb === "unassign"
verb === "unarchive" || verb === "unarchive"
) { ) {
return <Badge variant="warning" size="sm">{action}</Badge>; return <Badge variant="warning" size="sm">{action}</Badge>;
} }
@@ -169,13 +169,13 @@ export function AuditLogSettingsPage(props: {
throw new Error("Relay node is not an organization"); throw new Error("Relay node is not an organization");
} }
const { data, loadNext, hasNext, isLoadingNext } = const { data, loadNext, hasNext, isLoadingNext }
usePaginationFragment< = usePaginationFragment<
AuditLogSettingsPageRefetchQuery, AuditLogSettingsPageRefetchQuery,
AuditLogSettingsPageFragment$key AuditLogSettingsPageFragment$key
>(auditLogSettingsPageFragment, organization); >(auditLogSettingsPageFragment, organization);
const entries = data?.auditLogEntries?.edges?.map((e) => e.node) ?? []; const entries = data?.auditLogEntries?.edges?.map(e => e.node) ?? [];
const totalCount = data?.auditLogEntries?.totalCount ?? 0; const totalCount = data?.auditLogEntries?.totalCount ?? 0;
return ( return (
@@ -189,45 +189,47 @@ export function AuditLogSettingsPage(props: {
</p> </p>
</div> </div>
{entries.length === 0 ? ( {entries.length === 0
<div className="text-center py-8"> ? (
<p className="text-sm text-txt-tertiary"> <div className="text-center py-8">
{__("No audit log entries yet.")} <p className="text-sm text-txt-tertiary">
</p> {__("No audit log entries yet.")}
</div> </p>
) : ( </div>
<div className="space-y-4"> )
<p className="text-sm text-txt-tertiary"> : (
{`${__("Showing")} ${entries.length} ${__("of")} ${totalCount} ${__("entries")}`} <div className="space-y-4">
</p> <p className="text-sm text-txt-tertiary">
<Table> {`${__("Showing")} ${entries.length} ${__("of")} ${totalCount} ${__("entries")}`}
<Thead> </p>
<Tr> <Table>
<Th>{__("Date")}</Th> <Thead>
<Th>{__("Actor")}</Th> <Tr>
<Th>{__("Action")}</Th> <Th>{__("Date")}</Th>
<Th>{__("Resource")}</Th> <Th>{__("Actor")}</Th>
</Tr> <Th>{__("Action")}</Th>
</Thead> <Th>{__("Resource")}</Th>
<Tbody> </Tr>
{entries.map((entry) => ( </Thead>
<AuditLogEntryRow key={entry.id} entryKey={entry} /> <Tbody>
))} {entries.map(entry => (
</Tbody> <AuditLogEntryRow key={entry.id} entryKey={entry} />
</Table> ))}
{hasNext && ( </Tbody>
<Button </Table>
variant="tertiary" {hasNext && (
onClick={() => loadNext(50)} <Button
className="mx-auto" variant="tertiary"
disabled={isLoadingNext} onClick={() => loadNext(50)}
icon={isLoadingNext ? Spinner : IconChevronDown} className="mx-auto"
> disabled={isLoadingNext}
{__("Show more")} icon={isLoadingNext ? Spinner : IconChevronDown}
</Button> >
{__("Show more")}
</Button>
)}
</div>
)} )}
</div>
)}
</div> </div>
); );
} }