pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-24 13:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

lighten dark background, add more info to resources table

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-24 22:34:11 -05:00
parent 658a6ca7bb
commit ce2bfcddd5
11 changed files with 191 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
View File

@@ -9,7 +9,16 @@ import {
DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu";
import { Button } from "@app/components/ui/button";
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
import {
Copy,
ArrowRight,
ArrowUpDown,
MoreHorizontal,
Check,
ArrowUpRight,
ShieldOff,
ShieldCheck,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import api from "@app/api";
@@ -26,6 +35,7 @@ export type ResourceRow = {
orgId: string;
domain: string;
site: string;
hasAuth: boolean;
};
type ResourcesTableProps = {
@@ -91,10 +101,99 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
</Button>
);
},
cell: ({ row }) => {
const resourceRow = row.original;
return (
<Button variant="outline">
<Link
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`}
>
{resourceRow.site}
</Link>
<ArrowUpRight className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "domain",
header: "Domain",
cell: ({ row }) => {
const resourceRow = row.original;
return (
<div className="flex items-center">
<Link
href={`https://${resourceRow.domain}`}
target="_blank"
rel="noopener noreferrer"
className="hover:underline mr-2"
>
{resourceRow.domain}
</Link>
<Button
variant="ghost"
className="h-6 w-6 p-0"
onClick={() => {
navigator.clipboard.writeText(
resourceRow.domain,
);
const originalIcon = document.querySelector(
`#icon-${resourceRow.id}`,
);
if (originalIcon) {
originalIcon.classList.add("hidden");
}
const checkIcon = document.querySelector(
`#check-icon-${resourceRow.id}`,
);
if (checkIcon) {
checkIcon.classList.remove("hidden");
setTimeout(() => {
checkIcon.classList.add("hidden");
if (originalIcon) {
originalIcon.classList.remove(
"hidden",
);
}
}, 2000);
}
}}
>
<Copy
id={`icon-${resourceRow.id}`}
className="h-4 w-4"
/>
<Check
id={`check-icon-${resourceRow.id}`}
className="hidden text-green-500 h-4 w-4"
/>
<span className="sr-only">Copy domain</span>
</Button>
</div>
);
},
},
{
accessorKey: "hasAuth",
header: "Authentication",
cell: ({ row }) => {
const resourceRow = row.original;
return (
<div>
{resourceRow.hasAuth ? (
<span className="text-green-500 flex items-center space-x-2">
<ShieldCheck className="w-4 h-4" />
<span>Protected</span>
</span>
) : (
<span className="text-yellow-500 flex items-center space-x-2">
<ShieldOff className="w-4 h-4" />
<span>Not Protected</span>
</span>
)}
</div>
);
},
},
{
id: "actions",
@@ -130,11 +229,11 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
<button
onClick={() => {
setSelectedResource(
resourceRow
resourceRow,
);
setIsDeleteModalOpen(true);
}}
className="text-red-600 hover:text-red-800 hover:underline cursor-pointer"
className="text-red-500"
>
Delete
</button>
@@ -146,7 +245,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
className="ml-2"
onClick={() =>
router.push(
`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`
`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`,
)
}
>

12
src/app/[orgId]/settings/resources/page.tsx
View File

@@ -19,7 +19,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
try {
const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
`/org/${params.orgId}/resources`,
await authCookieHeader()
await authCookieHeader(),
);
resources = res.data.data.resources;
} catch (e) {
@@ -31,8 +31,8 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
const getOrg = cache(async () =>
internal.get<AxiosResponse<GetOrgResponse>>(
`/org/${params.orgId}`,
await authCookieHeader()
)
await authCookieHeader(),
),
);
const res = await getOrg();
org = res.data.data;
@@ -49,8 +49,12 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
id: resource.resourceId,
name: resource.name,
orgId: params.orgId,
domain: resource.subdomain || "",
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
site: resource.siteName || "None",
hasAuth:
resource.sso ||
resource.pincodeId !== null ||
resource.pincodeId !== null,
};
});