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

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,
ssl: resources.ssl,
siteName: sites.name,
siteId: sites.niceId,
passwordId: resourcePassword.passwordId,
pincodeId: resourcePincode.pincodeId,
sso: resources.sso,
@ -86,6 +87,7 @@ function queryResources(
ssl: resources.ssl,
fullDomain: resources.fullDomain,
siteName: sites.name,
siteId: sites.niceId,
passwordId: resourcePassword.passwordId,
sso: resources.sso,
pincodeId: resourcePincode.pincodeId,

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

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

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

@ -24,7 +24,7 @@ export default function AccessPageHeaderAndNav({
return (
<>
<SettingsSectionTitle
title="Users & Roles"
title="Manage Users & Roles"
description="Invite users and add them to roles to manage access to your
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 { useState } from "react";
import { Input } from "@app/components/ui/input";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> {
@ -61,19 +61,23 @@ export function RolesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search roles"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search roles"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.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
onClick={() => {
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 { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../../components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@ -61,20 +61,23 @@ export function UsersDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search users"
value={
(table
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("email")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search users"
value={
(table
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("email")
?.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
onClick={() => {
if (inviteUser) {
@ -98,7 +101,7 @@ export function UsersDataTable<TData, TValue>({
: flexRender(
header.column.columnDef
.header,
header.getContext()
header.getContext(),
)}
</TableHead>
);
@ -119,7 +122,7 @@ export function UsersDataTable<TData, TValue>({
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</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"
role="combobox"
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 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">
<SettingsSectionTitle
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"
/>
@ -320,11 +320,13 @@ export default function ResourceAuthenticationPage() {
defaultChecked={resource.sso}
onCheckedChange={(val) => setSsoEnabled(val)}
/>
<Label htmlFor="sso-toggle">Allow SSO</Label>
<Label htmlFor="sso-toggle">
Allow Unified Login
</Label>
</div>
<span className="text-muted-foreground text-sm">
Existing users will only have to login once for all
resources that have SSO enabled.
resources that have this enabled.
</span>
</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 { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface ResourcesDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@ -62,19 +62,23 @@ export function ResourcesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search resources"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search resources"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.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
onClick={() => {
if (addResource) {

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

@ -35,6 +35,7 @@ export type ResourceRow = {
orgId: string;
domain: string;
site: string;
siteId: string;
hasAuth: boolean;
};
@ -106,7 +107,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
return (
<Button variant="outline">
<Link
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`}
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.siteId}`}
>
{resourceRow.site}
</Link>
@ -175,7 +176,19 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
},
{
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 }) => {
const resourceRow = row.original;
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,
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
site: resource.siteName || "None",
siteId: resource.siteId || "Unknown",
hasAuth:
resource.sso ||
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 { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@ -62,19 +62,23 @@ export function SitesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search sites"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search sites"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.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
onClick={() => {
if (addSite) {
@ -98,7 +102,7 @@ export function SitesDataTable<TData, TValue>({
: flexRender(
header.column.columnDef
.header,
header.getContext()
header.getContext(),
)}
</TableHead>
);
@ -119,7 +123,7 @@ export function SitesDataTable<TData, TValue>({
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</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",
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",
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",
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 }) => {
const originalRow = row.original;