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

Fix some page skeletons

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-21 18:09:40 +04:00
parent 9eb1a1cf9a
commit 33687286f5
5 changed files with 166 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/pages/organizations/SettingsPage.tsx
View File

@@ -12,10 +12,6 @@ export function SettingsViewSkeleton() {
description="Manage your details and personal preferences here" description="Manage your details and personal preferences here"
> >
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-1">
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
<div className="h-4 w-96 bg-muted animate-pulse rounded" />
</div>
<div className="space-y-2"> <div className="space-y-2">
{[1, 2].map((i) => ( {[1, 2].map((i) => (
<div key={i} className="h-64 bg-muted animate-pulse rounded-lg" /> <div key={i} className="h-64 bg-muted animate-pulse rounded-lg" />

9
apps/console/src/pages/organizations/policies/UpdatePolicyPage.tsx
View File

@@ -11,15 +11,6 @@ export function UpdatePolicyViewSkeleton() {
title="Update Policy" title="Update Policy"
description="Update an existing policy" description="Update an existing policy"
> >
<div className="flex items-center mb-6">
<div className="mr-4">
<div className="h-12 w-12 bg-muted animate-pulse rounded-lg" />
</div>
<div>
<div className="h-8 w-48 bg-muted animate-pulse rounded mb-2" />
<div className="h-4 w-64 bg-muted animate-pulse rounded" />
</div>
</div>
<div className="bg-muted animate-pulse rounded-lg h-[600px]" /> <div className="bg-muted animate-pulse rounded-lg h-[600px]" />
</PageTemplateSkeleton> </PageTemplateSkeleton>
); );

29
apps/console/src/pages/organizations/vendors/VendorListPage.tsx vendored
View File

@@ -12,21 +12,22 @@ export function VendorListViewSkeleton() {
description="Vendors are third-party services that your company uses. Add them to description="Vendors are third-party services that your company uses. Add them to
keep track of their risk and compliance status." keep track of their risk and compliance status."
> >
<div> <div className="space-y-6">
<div className="h-8 w-48 bg-muted animate-pulse rounded" /> <div className="rounded-xl border bg-card p-4 space-y-4">
<div className="h-4 w-96 bg-muted animate-pulse rounded mt-1" /> <div className="h-5 w-32 bg-muted animate-pulse rounded" />
</div> <div className="flex gap-2">
<div className="rounded-xl border bg-card p-4 space-y-4"> <div className="h-10 flex-1 bg-muted animate-pulse rounded" />
<div className="h-5 w-32 bg-muted animate-pulse rounded" /> <div className="h-10 w-32 bg-muted animate-pulse rounded" />
<div className="flex gap-2"> </div>
<div className="h-10 flex-1 bg-muted animate-pulse rounded" /> </div>
<div className="h-10 w-32 bg-muted animate-pulse rounded" /> <div className="space-y-2">
{[1, 2, 3].map((i) => (
<div
key={i}
className="h-[72px] bg-muted animate-pulse rounded-xl"
/>
))}
</div> </div>
</div>
<div className="space-y-2">
{[1, 2, 3].map((i) => (
<div key={i} className="h-[72px] bg-muted animate-pulse rounded-xl" />
))}
</div> </div>
</PageTemplateSkeleton> </PageTemplateSkeleton>
); );

298
apps/console/src/pages/organizations/vendors/VendorListView.tsx vendored
View File

@@ -245,47 +245,86 @@ function VendorListContent({
description="Vendors are third-party services that your company uses. Add them to description="Vendors are third-party services that your company uses. Add them to
keep track of their risk and compliance status." keep track of their risk and compliance status."
> >
<div className="rounded-xl border bg-card p-4"> <div className="space-y-6">
<div className="flex items-center gap-2 mb-4"> <div className="rounded-xl border bg-card p-4">
<Store className="h-5 w-5" /> <div className="flex items-center gap-2 mb-4">
<h3 className="font-medium">Add a vendor</h3> <Store className="h-5 w-5" />
</div> <h3 className="font-medium">Add a vendor</h3>
<div className="flex gap-2 relative"> </div>
<Input <div className="flex gap-2 relative">
type="text" <Input
placeholder="Type vendor's name" type="text"
value={searchTerm} placeholder="Type vendor's name"
style={{ borderRadius: "0.3rem" }} value={searchTerm}
onChange={(e) => { style={{ borderRadius: "0.3rem" }}
const value = e.target.value; onChange={(e) => {
setSearchTerm(value); const value = e.target.value;
if (value.trim() === "") { setSearchTerm(value);
setFilteredVendors([]); if (value.trim() === "") {
} else { setFilteredVendors([]);
const results = fuse.search(value).map((result) => result.item); } else {
setFilteredVendors(results); const results = fuse
} .search(value)
}} .map((result) => result.item);
/> setFilteredVendors(results);
}
}}
/>
{searchTerm.trim() !== "" && ( {searchTerm.trim() !== "" && (
<> <>
{filteredVendors.length > 0 ? ( {filteredVendors.length > 0 ? (
<div <div
style={{ borderRadius: "0.3rem" }} style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10" className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
> >
{filteredVendors.map((vendor: VendorItem) => ( {filteredVendors.map((vendor: VendorItem) => (
<button
key={vendor.id}
className="w-full px-3 py-2 text-left hover:bg-accent"
onClick={() => {
createVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
organizationId: data.organization.id,
name: vendor.name,
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({
title: "Vendor added",
description:
"The vendor has been added successfully",
});
},
});
}}
>
{vendor.name}
</button>
))}
</div>
) : (
<div
style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10"
>
<button <button
key={vendor.id} className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2"
className="w-full px-3 py-2 text-left hover:bg-accent"
onClick={() => { onClick={() => {
createVendor({ createVendor({
variables: { variables: {
connections: [vendorsConnection.vendors.__id], connections: [vendorsConnection.vendors.__id],
input: { input: {
organizationId: data.organization.id, organizationId: data.organization.id,
name: vendor.name, name: searchTerm.trim(),
description: "", description: "",
serviceStartAt: new Date().toISOString(), serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW", serviceCriticality: "LOW",
@@ -296,135 +335,100 @@ function VendorListContent({
setSearchTerm(""); setSearchTerm("");
setFilteredVendors([]); setFilteredVendors([]);
toast({ toast({
title: "Vendor added", title: "Vendor created",
description: description:
"The vendor has been added successfully", "The new vendor has been created successfully",
}); });
}, },
}); });
}} }}
> >
{vendor.name} <span className="font-medium">Create new vendor:</span>{" "}
{searchTerm}
</button> </button>
))} </div>
)}
</>
)}
</div>
</div>
<div className="space-y-2">
{vendors.map((vendor) => (
<Link
key={vendor?.id}
to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
className="block"
>
<div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8">
<AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
</Avatar>
<div className="flex items-center gap-2">
<p className="font-medium">{vendor?.name}</p>
{vendor?.description && (
<>
<span className="text-muted-foreground">•</span>
<p className="text-sm text-muted-foreground">
{vendor.description}
</p>
</>
)}
</div>
</div> </div>
) : ( <div className="flex items-center gap-2">
<div <Badge
style={{ borderRadius: "0.3rem" }} variant="secondary"
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10" className={
> vendor.riskTier === "CRITICAL"
<button ? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2" : vendor?.riskTier === "SIGNIFICANT"
onClick={() => { ? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
createVendor({ : "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
variables: { }
connections: [vendorsConnection.vendors.__id], >
input: { {vendor.riskTier}
organizationId: data.organization.id, </Badge>
name: searchTerm.trim(), <Button
description: "", variant="ghost"
serviceStartAt: new Date().toISOString(), size="icon"
serviceCriticality: "LOW", className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
riskTier: "GENERAL", onClick={(e) => {
e.preventDefault(); // Prevent navigation
if (
window.confirm(
"Are you sure you want to delete this vendor?"
)
) {
deleteVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
vendorId: vendor.id,
},
}, },
}, onCompleted() {
onCompleted() { toast({
setSearchTerm(""); title: "Vendor deleted",
setFilteredVendors([]); description:
toast({ "The vendor has been deleted successfully",
title: "Vendor created", });
description: },
"The new vendor has been created successfully", });
}); }
},
});
}} }}
> >
<span className="font-medium">Create new vendor:</span>{" "} <Trash2 className="h-4 w-4 transition-colors" />
{searchTerm} </Button>
</button> <ChevronRight className="h-4 w-4 text-muted-foreground" />
</div> </div>
)} </div>
</> </Link>
)} ))}
</div> </div>
</div> </div>
<div className="space-y-2">
{vendors.map((vendor) => (
<Link
key={vendor?.id}
to={`/organizations/${organizationId}/vendors/${vendor?.id}`}
className="block"
>
<div className="flex items-center justify-between p-4 rounded-xl border bg-card hover:bg-accent/5 transition-colors">
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8">
<AvatarFallback>{vendor?.name?.[0]}</AvatarFallback>
</Avatar>
<div className="flex items-center gap-2">
<p className="font-medium">{vendor?.name}</p>
{vendor?.description && (
<>
<span className="text-muted-foreground">•</span>
<p className="text-sm text-muted-foreground">
{vendor.description}
</p>
</>
)}
</div>
</div>
<div className="flex items-center gap-2">
<Badge
variant="secondary"
className={
vendor.riskTier === "CRITICAL"
? "bg-red-100 text-red-900 rounded-full px-3 py-0.5 text-xs font-medium"
: vendor?.riskTier === "SIGNIFICANT"
? "bg-yellow-100 text-yellow-900 rounded-full px-3 py-0.5 text-xs font-medium"
: "bg-green-100 text-green-900 rounded-full px-3 py-0.5 text-xs font-medium"
}
>
{vendor.riskTier}
</Badge>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:bg-transparent hover:[&>svg]:text-destructive"
onClick={(e) => {
e.preventDefault(); // Prevent navigation
if (
window.confirm(
"Are you sure you want to delete this vendor?"
)
) {
deleteVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
vendorId: vendor.id,
},
},
onCompleted() {
toast({
title: "Vendor deleted",
description:
"The vendor has been deleted successfully",
});
},
});
}
}}
>
<Trash2 className="h-4 w-4 transition-colors" />
</Button>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
</div>
</div>
</Link>
))}
</div>
<LoadAboveButton <LoadAboveButton
isLoading={isLoadingPrevious} isLoading={isLoadingPrevious}
hasMore={hasPrevious} hasMore={hasPrevious}

4
apps/console/src/pages/organizations/vendors/VendorPage.tsx vendored
View File

@@ -8,10 +8,6 @@ const VendorView = lazy(() => import("./VendorView"));
export function VendorViewSkeleton() { export function VendorViewSkeleton() {
return ( return (
<PageTemplateSkeleton> <PageTemplateSkeleton>
<div className="space-y-1">
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
<div className="h-4 w-96 bg-muted animate-pulse rounded" />
</div>
<div className="space-y-2"> <div className="space-y-2">
{[1, 2].map((i) => ( {[1, 2].map((i) => (
<div key={i} className="h-20 bg-muted animate-pulse rounded-lg" /> <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />