mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-28 05:44:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

improve formatting in data tables

Browse source
This commit is contained in:
Milo Schwartz 2024-11-25 23:07:21 -05:00
parent 2312258468
commit 7c9e57ef12
No known key found for this signature in database
12 changed files with 154 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

2
server/routers/resource/listResources.ts
View file

@ -58,6 +58,7 @@ function queryResources(
fullDomain: resources.fullDomain, fullDomain: resources.fullDomain,
ssl: resources.ssl, ssl: resources.ssl,
siteName: sites.name, siteName: sites.name,
siteId: sites.niceId,
passwordId: resourcePassword.passwordId, passwordId: resourcePassword.passwordId,
pincodeId: resourcePincode.pincodeId, pincodeId: resourcePincode.pincodeId,
sso: resources.sso, sso: resources.sso,
@ -86,6 +87,7 @@ function queryResources(
ssl: resources.ssl, ssl: resources.ssl,
fullDomain: resources.fullDomain, fullDomain: resources.fullDomain,
siteName: sites.name, siteName: sites.name,
siteId: sites.niceId,
passwordId: resourcePassword.passwordId, passwordId: resourcePassword.passwordId,
sso: resources.sso, sso: resources.sso,
pincodeId: resourcePincode.pincodeId, pincodeId: resourcePincode.pincodeId,

35
server/routers/user/inviteUser.ts
View file

@ -86,7 +86,6 @@ export async function inviteUser(
inviteTracker[email].timestamps.push(currentTime); inviteTracker[email].timestamps.push(currentTime);
logger.debug("here0")
const org = await db const org = await db
.select() .select()
.from(orgs) .from(orgs)
@ -98,7 +97,6 @@ export async function inviteUser(
); );
} }
logger.debug("here1")
const existingUser = await db const existingUser = await db
.select() .select()
.from(users) .from(users)
@ -114,7 +112,6 @@ export async function inviteUser(
); );
} }
logger.debug("here2")
const inviteId = generateRandomString( const inviteId = generateRandomString(
10, 10,
alphabet("a-z", "A-Z", "0-9"), alphabet("a-z", "A-Z", "0-9"),
@ -124,7 +121,6 @@ export async function inviteUser(
const tokenHash = await hashPassword(token); const tokenHash = await hashPassword(token);
logger.debug("here3")
// delete any existing invites for this email // delete any existing invites for this email
await db await db
.delete(userInvites) .delete(userInvites)
@ -133,7 +129,6 @@ export async function inviteUser(
) )
.execute(); .execute();
logger.debug("here4")
await db.insert(userInvites).values({ await db.insert(userInvites).values({
inviteId, inviteId,
orgId, orgId,
@ -145,23 +140,21 @@ export async function inviteUser(
const inviteLink = `${config.app.base_url}/invite?token=${inviteId}-${token}`; const inviteLink = `${config.app.base_url}/invite?token=${inviteId}-${token}`;
logger.debug("here5") await sendEmail(
// await sendEmail( SendInviteLink({
// SendInviteLink({ email,
// email, inviteLink,
// inviteLink, expiresInDays: (validHours / 24).toString(),
// expiresInDays: (validHours / 24).toString(), orgName: org[0].name || orgId,
// orgName: org[0].name || orgId, inviterName: req.user?.email,
// inviterName: req.user?.email, }),
// }), {
// { to: email,
// to: email, from: config.email?.no_reply,
// from: config.email?.no_reply, subject: "You're invited to join a Fossorial organization",
// subject: "You're invited to join a Fossorial organization", },
// }, );
// );
logger.debug("here6")
return response<InviteUserResponse>(res, { return response<InviteUserResponse>(res, {
data: { data: {
inviteLink, inviteLink,

2
src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
View file

@ -24,7 +24,7 @@ export default function AccessPageHeaderAndNav({
return ( return (
<> <>
<SettingsSectionTitle <SettingsSectionTitle
title="Users & Roles" title="Manage Users & Roles"
description="Invite users and add them to roles to manage access to your description="Invite users and add them to roles to manage access to your
organization" organization"
/> />

32
src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
View file

@ -22,7 +22,7 @@ import {
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { Plus } from "lucide-react"; import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
@ -61,19 +61,23 @@ export function RolesDataTable<TData, TValue>({
return ( return (
<div> <div>
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between pb-4">
<Input <div className="flex items-center max-w-sm mr-2 w-full relative">
placeholder="Search roles" <Input
value={ placeholder="Search roles"
(table.getColumn("name")?.getFilterValue() as string) ?? value={
"" (table
} .getColumn("name")
onChange={(event) => ?.getFilterValue() as string) ?? ""
table }
.getColumn("name") onChange={(event) =>
?.setFilterValue(event.target.value) table
} .getColumn("name")
className="max-w-sm mr-2" ?.setFilterValue(event.target.value)
/> }
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button <Button
onClick={() => { onClick={() => {
if (addRole) { if (addRole) {

37
src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
View file

@ -23,7 +23,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../../components/DataTablePagination"; import { DataTablePagination } from "../../../../../../components/DataTablePagination";
import { Plus } from "lucide-react"; import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -61,20 +61,23 @@ export function UsersDataTable<TData, TValue>({
return ( return (
<div> <div>
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between pb-4">
<Input <div className="flex items-center max-w-sm mr-2 w-full relative">
placeholder="Search users" <Input
value={ placeholder="Search users"
(table value={
.getColumn("email") (table
?.getFilterValue() as string) ?? "" .getColumn("email")
} ?.getFilterValue() as string) ?? ""
onChange={(event) => }
table onChange={(event) =>
.getColumn("email") table
?.setFilterValue(event.target.value) .getColumn("email")
} ?.setFilterValue(event.target.value)
className="max-w-sm mr-2" }
/> className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button <Button
onClick={() => { onClick={() => {
if (inviteUser) { if (inviteUser) {
@ -98,7 +101,7 @@ export function UsersDataTable<TData, TValue>({
: flexRender( : flexRender(
header.column.columnDef header.column.columnDef
.header, .header,
header.getContext() header.getContext(),
)} )}
</TableHead> </TableHead>
); );
@ -119,7 +122,7 @@ export function UsersDataTable<TData, TValue>({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</TableCell> </TableCell>
))} ))}

2
src/app/[orgId]/settings/components/Header.tsx
View file

@ -149,7 +149,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) {
size="lg" size="lg"
role="combobox" role="combobox"
aria-expanded={open} aria-expanded={open}
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral" className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-muted"
> >
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">

8
src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
View file

@ -309,7 +309,7 @@ export default function ResourceAuthenticationPage() {
<section className="space-y-8"> <section className="space-y-8">
<SettingsSectionTitle <SettingsSectionTitle
title="Users & Roles" title="Users & Roles"
description="Configure which users can access this resource (only applicable if SSO enabled)" description="Configure which users and roles can visit this resource"
size="1xl" size="1xl"
/> />
@ -320,11 +320,13 @@ export default function ResourceAuthenticationPage() {
defaultChecked={resource.sso} defaultChecked={resource.sso}
onCheckedChange={(val) => setSsoEnabled(val)} onCheckedChange={(val) => setSsoEnabled(val)}
/> />
<Label htmlFor="sso-toggle">Allow SSO</Label> <Label htmlFor="sso-toggle">
Allow Unified Login
</Label>
</div> </div>
<span className="text-muted-foreground text-sm"> <span className="text-muted-foreground text-sm">
Existing users will only have to login once for all Existing users will only have to login once for all
resources that have SSO enabled. resources that have this enabled.
</span> </span>
</div> </div>

32
src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
View file

@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination"; import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus } from "lucide-react"; import { Plus, Search } from "lucide-react";
interface ResourcesDataTableProps<TData, TValue> { interface ResourcesDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -62,19 +62,23 @@ export function ResourcesDataTable<TData, TValue>({
return ( return (
<div> <div>
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between pb-4">
<Input <div className="flex items-center max-w-sm mr-2 w-full relative">
placeholder="Search resources" <Input
value={ placeholder="Search resources"
(table.getColumn("name")?.getFilterValue() as string) ?? value={
"" (table
} .getColumn("name")
onChange={(event) => ?.getFilterValue() as string) ?? ""
table }
.getColumn("name") onChange={(event) =>
?.setFilterValue(event.target.value) table
} .getColumn("name")
className="max-w-sm mr-2" ?.setFilterValue(event.target.value)
/> }
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button <Button
onClick={() => { onClick={() => {
if (addResource) { if (addResource) {

17
src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
View file

@ -35,6 +35,7 @@ export type ResourceRow = {
orgId: string; orgId: string;
domain: string; domain: string;
site: string; site: string;
siteId: string;
hasAuth: boolean; hasAuth: boolean;
}; };
@ -106,7 +107,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
return ( return (
<Button variant="outline"> <Button variant="outline">
<Link <Link
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`} href={`/${resourceRow.orgId}/settings/sites/${resourceRow.siteId}`}
> >
{resourceRow.site} {resourceRow.site}
</Link> </Link>
@ -175,7 +176,19 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
}, },
{ {
accessorKey: "hasAuth", accessorKey: "hasAuth",
header: "Authentication", header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Authentication
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => { cell: ({ row }) => {
const resourceRow = row.original; const resourceRow = row.original;
return ( return (

1
src/app/[orgId]/settings/resources/page.tsx
View file

@ -51,6 +51,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
orgId: params.orgId, orgId: params.orgId,
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`, domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
site: resource.siteName || "None", site: resource.siteName || "None",
siteId: resource.siteId || "Unknown",
hasAuth: hasAuth:
resource.sso || resource.sso ||
resource.pincodeId !== null || resource.pincodeId !== null ||

36
src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
View file

@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../components/DataTablePagination"; import { DataTablePagination } from "../../../../../components/DataTablePagination";
import { Plus } from "lucide-react"; import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];
@ -62,19 +62,23 @@ export function SitesDataTable<TData, TValue>({
return ( return (
<div> <div>
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between pb-4">
<Input <div className="flex items-center max-w-sm mr-2 w-full relative">
placeholder="Search sites" <Input
value={ placeholder="Search sites"
(table.getColumn("name")?.getFilterValue() as string) ?? value={
"" (table
} .getColumn("name")
onChange={(event) => ?.getFilterValue() as string) ?? ""
table }
.getColumn("name") onChange={(event) =>
?.setFilterValue(event.target.value) table
} .getColumn("name")
className="max-w-sm mr-2" ?.setFilterValue(event.target.value)
/> }
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button <Button
onClick={() => { onClick={() => {
if (addSite) { if (addSite) {
@ -98,7 +102,7 @@ export function SitesDataTable<TData, TValue>({
: flexRender( : flexRender(
header.column.columnDef header.column.columnDef
.header, .header,
header.getContext() header.getContext(),
)} )}
</TableHead> </TableHead>
); );
@ -119,7 +123,7 @@ export function SitesDataTable<TData, TValue>({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</TableCell> </TableCell>
))} ))}

42
src/app/[orgId]/settings/sites/components/SitesTable.tsx
View file

@ -100,15 +100,51 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
}, },
{ {
accessorKey: "mbIn", accessorKey: "mbIn",
header: "MB In", header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data In
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
}, },
{ {
accessorKey: "mbOut", accessorKey: "mbOut",
header: "MB Out", header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data Out
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
}, },
{ {
accessorKey: "type", accessorKey: "type",
header: "Connection Type", header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Connection Type
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => { cell: ({ row }) => {
const originalRow = row.original; const originalRow = row.original;