Skip to content

fix(sdk): make whole row clickable #1458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rsbh wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix(sdk): make whole row clickable #1458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f66488d
fix: make project list clickable
rsbh Mar 18, 2026
3bac37c
fix: make teams list row clickable
rsbh Mar 18, 2026
41cd3dc
fix: make service account list row clickable
rsbh Mar 18, 2026
3c5291b
fix: remove unsued props
rsbh Mar 18, 2026
fe135d8
Update web/sdk/react/views/teams/list/teams-list-page.tsx
rsbh Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 6 additions & 16 deletions web/sdk/react/views/api-keys/list/api-keys-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@ import { Button, type DataTableColumnDef, Flex, Text } from '@raystack/apsara';
import type { ServiceUser } from '~/src';
import { timestampToDayjs } from '~/utils/timestamp';
import type { Timestamp } from '@bufbuild/protobuf/wkt';
import React from 'react';

interface GetColumnsOptions {
dateFormat: string;
onServiceAccountClick?: (id: string) => void;
onDeleteClick?: (id: string) => void;
}

export const getColumns = ({
dateFormat,
onServiceAccountClick,
onDeleteClick
}: GetColumnsOptions): DataTableColumnDef<ServiceUser, unknown>[] => {
return [
Expand All @@ -21,19 +20,7 @@ export const getColumns = ({
accessorKey: 'title',
cell: ({ row, getValue }) => {
const value = getValue() as string;
return (
<Text
size="small"
style={{
textDecoration: 'none',
color: 'var(--rs-color-foreground-base-primary)',
cursor: 'pointer'
}}
onClick={() => onServiceAccountClick?.(row.original.id || '')}
>
{value}
</Text>
);
return <Text>{value}</Text>;
}
},
{
Expand All @@ -60,7 +47,10 @@ export const getColumns = ({
size="small"
color="danger"
data-test-id="frontier-sdk-delete-service-account-btn"
onClick={() => onDeleteClick?.(value)}
onClick={(e: React.MouseEvent) => {
e.stopPropagation();
onDeleteClick?.(value);
}}
>
<TrashIcon />
</Button>
Expand Down
30 changes: 21 additions & 9 deletions web/sdk/react/views/api-keys/list/api-keys-list-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ const ServiceAccountsTable = ({
}: ServiceAccountsTableProps) => {
const columns = getColumns({
dateFormat: dateFormat || DEFAULT_DATE_FORMAT,
onServiceAccountClick,
onDeleteClick
});

Expand All @@ -152,6 +151,7 @@ const ServiceAccountsTable = ({
isLoading={isLoading}
defaultSort={{ name: 'createdAt', order: 'desc' }}
mode="client"
onRowClick={row => onServiceAccountClick?.(row.id)}
>
<Flex direction="column" gap={7} className={styles.tableWrapper}>
<Flex justify="between" gap={3}>
Expand Down Expand Up @@ -203,10 +203,7 @@ export default function ApiKeysListPage({
organization?.id
);

const {
data: serviceUsersData,
isLoading: isServiceUsersLoading
} = useQuery(
const { data: serviceUsersData, isLoading: isServiceUsersLoading } = useQuery(
FrontierServiceQueries.listOrganizationServiceUsers,
create(ListOrganizationServiceUsersRequestSchema, {
id: organization?.id ?? ''
Expand All @@ -216,7 +213,10 @@ export default function ApiKeysListPage({
}
);

const serviceUsers = useMemo(() => serviceUsersData?.serviceusers ?? [], [serviceUsersData]);
const serviceUsers = useMemo(
() => serviceUsersData?.serviceusers ?? [],
[serviceUsersData]
);

const isLoading =
isActiveOrganizationLoading ||
Expand Down Expand Up @@ -255,13 +255,25 @@ export default function ApiKeysListPage({

return (
<Flex direction="column" className={sharedStyles.pageWrapper}>
<Flex direction="column" className={`${sharedStyles.container} ${sharedStyles.containerFlex}`}>
<Flex direction="row" justify="between" align="center" className={sharedStyles.header}>
<Flex
direction="column"
className={`${sharedStyles.container} ${sharedStyles.containerFlex}`}
>
<Flex
direction="row"
justify="between"
align="center"
className={sharedStyles.header}
>
<ApiKeysHeader isLoading={isLoading} />
</Flex>
{canUpdateWorkspace || isLoading ? (
serviceAccountsCount > 0 || isLoading ? (
<Flex direction="column" gap={9} className={sharedStyles.contentWrapper}>
<Flex
direction="column"
gap={9}
className={sharedStyles.contentWrapper}
>
<ServiceAccountsTable
isLoading={isLoading}
serviceUsers={serviceUsers}
Expand Down
160 changes: 80 additions & 80 deletions web/sdk/react/views/projects/list/projects-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,57 +9,46 @@ import { Text, DropdownMenu } from '@raystack/apsara';
import type { Project } from '@raystack/proton/frontier';
import type { DataTableColumnDef } from '@raystack/apsara';
import orgStyles from '../../../components/organization/organization.module.css';
import React from 'react';

export const getColumns = (
userAccessOnProject: Record<string, string[]>,
onProjectClick?: (projectId: string) => void,
onDeleteProjectClick?: (projectId: string) => void
): DataTableColumnDef<Project, unknown>[] => [
{
header: 'Title',
accessorKey: 'title',
cell: ({ row, getValue }) => {
return (
<span
onClick={() => onProjectClick?.(row.original.id || '')}
style={{
textDecoration: 'none',
color: 'var(--rs-color-foreground-base-primary)',
fontSize: 'var(--rs-font-size-small)',
cursor: 'pointer'
}}
>
{getValue() as string}
</span>
);
}
},
{
header: 'Members',
accessorKey: 'membersCount',
cell: ({ row, getValue }) => {
const value = getValue() as string;
return value ? <Text>{value} members</Text> : null;
}
},
{
header: '',
accessorKey: 'id',
meta: {
style: {
textAlign: 'end'
}
},
enableSorting: false,
cell: ({ row, getValue }) => (
<ProjectActions
project={row.original as Project}
userAccessOnProject={userAccessOnProject}
onProjectClick={onProjectClick}
onDeleteProjectClick={onDeleteProjectClick}
/>
)
{
header: 'Title',
accessorKey: 'title',
cell: ({ row, getValue }) => {
return <Text>{getValue() as string}</Text>;
}
},
{
header: 'Members',
accessorKey: 'membersCount',
cell: ({ row, getValue }) => {
const value = getValue() as string;
return value ? <Text>{value} members</Text> : null;
}
},
{
header: '',
accessorKey: 'id',
meta: {
style: {
textAlign: 'end'
}
},
enableSorting: false,
cell: ({ row, getValue }) => (
<ProjectActions
project={row.original as Project}
userAccessOnProject={userAccessOnProject}
onProjectClick={onProjectClick}
onDeleteProjectClick={onDeleteProjectClick}
/>
)
}
];

const ProjectActions = ({
Expand All @@ -73,41 +62,52 @@ const ProjectActions = ({
onProjectClick?: (projectId: string) => void;
onDeleteProjectClick?: (projectId: string) => void;
}) => {
const canUpdateProject = (userAccessOnProject[project.id!] ?? []).includes(
'update'
);
const canDeleteProject = (userAccessOnProject[project.id!] ?? []).includes(
'delete'
);
const canDoActions = canUpdateProject || canDeleteProject;
const canUpdateProject = (userAccessOnProject[project.id!] ?? []).includes(
'update'
);
const canDeleteProject = (userAccessOnProject[project.id!] ?? []).includes(
'delete'
);
const canDoActions = canUpdateProject || canDeleteProject;

return canDoActions ? (
<DropdownMenu placement="bottom-end">
<DropdownMenu.Trigger asChild style={{ cursor: 'pointer' }}>
<DotsHorizontalIcon />
</DropdownMenu.Trigger>
{/* @ts-ignore */}
<DropdownMenu.Content portal={false}>
<DropdownMenu.Group>
{canUpdateProject ? (
<DropdownMenu.Item
onClick={() => onProjectClick?.(project.id || '')}
className={orgStyles.dropdownActionItem}
>
<Pencil1Icon /> Rename
</DropdownMenu.Item>
) : null}
{canDeleteProject ? (
<DropdownMenu.Item
onClick={() => onDeleteProjectClick?.(project.id || '')}
className={orgStyles.dropdownActionItem}
>
<TrashIcon /> Delete project
</DropdownMenu.Item>
) : null}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu>
) : null;
};
function onDeleteClick(e: React.MouseEvent) {
e.stopPropagation();
onDeleteProjectClick?.(project.id || '');
}

function onRenameClick(e: React.MouseEvent) {
e.stopPropagation();
onProjectClick?.(project.id || '');
}

return canDoActions ? (
<DropdownMenu placement="bottom-end">
<DropdownMenu.Trigger asChild style={{ cursor: 'pointer' }}>
<DotsHorizontalIcon />
</DropdownMenu.Trigger>
{/* @ts-ignore */}
<DropdownMenu.Content portal={false}>
<DropdownMenu.Group>
{canUpdateProject ? (
<DropdownMenu.Item
onClick={onRenameClick}
className={orgStyles.dropdownActionItem}
data-test-id="frontier-sdk-project-list-rename-link"
>
<Pencil1Icon /> Rename
</DropdownMenu.Item>
) : null}
{canDeleteProject ? (
<DropdownMenu.Item
onClick={onDeleteClick}
className={orgStyles.dropdownActionItem}
data-test-id="frontier-sdk-project-list-delete-link"
>
<TrashIcon /> Delete project
</DropdownMenu.Item>
) : null}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu>
) : null;
};
Loading
Loading