From 4434642f44dd4fcfdf2b377dec3010f708dd8a1d Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Wed, 9 Apr 2025 23:53:29 +0000
Subject: [PATCH] Fix: Improved sites and subnets display for better user
 experience.  No longer shows continual loading, instead displays default
 headers and "no results" message when appropriate.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/5e8d7bb0-ab4a-4d9f-a7d5-5f2fd4e43809.jpg
---
 client/src/pages/sites-page.tsx | 262 +++++++++++++++++---------------
 1 file changed, 139 insertions(+), 123 deletions(-)

diff --git a/client/src/pages/sites-page.tsx b/client/src/pages/sites-page.tsx
index 59075b7..0426f7f 100644
--- a/client/src/pages/sites-page.tsx
+++ b/client/src/pages/sites-page.tsx
@@ -579,7 +579,11 @@ export default function SitesPage() {
               </div>
             </CardHeader>
             <CardContent>
-              {isLoadingSites || !selectedConnection ? (
+              {!selectedConnection ? (
+                <div className="text-center py-10">
+                  <p className="text-muted-foreground">Please select a connection to view sites.</p>
+                </div>
+              ) : isLoadingSites ? (
                 <div className="space-y-3">
                   {[...Array(5)].map((_, i) => (
                     <div key={i} className="flex items-center space-x-4">
@@ -592,7 +596,7 @@ export default function SitesPage() {
                   <p className="text-destructive font-medium">Error loading sites</p>
                   <p className="text-muted-foreground">{sitesError.message || "Unknown error occurred"}</p>
                 </div>
-              ) : sitesData?.data && sitesData.data.length > 0 ? (
+              ) : (
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -604,70 +608,74 @@ export default function SitesPage() {
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {sitesData?.data?.map((site: AdSite) => (
-                      <TableRow key={site.objectGUID}>
-                        <TableCell className="font-medium">{site.name}</TableCell>
-                        <TableCell>{site.description || '—'}</TableCell>
-                        <TableCell>{site.location || '—'}</TableCell>
-                        <TableCell>
-                          {site.subnets && site.subnets.length > 0 
-                            ? site.subnets.map((subnet, idx) => (
-                                <Badge key={idx} variant="outline" className="mr-1">
-                                  {subnet.split(',')[0].replace('CN=', '')}
-                                </Badge>
-                              ))
-                            : '—'}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex space-x-2">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => setEditingSite(site)}
-                            >
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <AlertDialog>
-                              <AlertDialogTrigger asChild>
-                                <Button
-                                  variant="outline"
-                                  size="sm"
-                                  className="text-destructive"
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                </Button>
-                              </AlertDialogTrigger>
-                              <AlertDialogContent>
-                                <AlertDialogHeader>
-                                  <AlertDialogTitle>
-                                    Are you sure you want to delete this site?
-                                  </AlertDialogTitle>
-                                  <AlertDialogDescription>
-                                    This action cannot be undone. This will permanently delete the
-                                    site "{site.name}" and all of its data from the server.
-                                  </AlertDialogDescription>
-                                </AlertDialogHeader>
-                                <AlertDialogFooter>
-                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                  <AlertDialogAction
-                                    onClick={() => deleteSiteMutation.mutate(site.objectGUID)}
-                                    className="bg-destructive text-destructive-foreground"
+                    {sitesData?.data && sitesData.data.length > 0 ? (
+                      sitesData.data.map((site: AdSite) => (
+                        <TableRow key={site.objectGUID}>
+                          <TableCell className="font-medium">{site.name}</TableCell>
+                          <TableCell>{site.description || '—'}</TableCell>
+                          <TableCell>{site.location || '—'}</TableCell>
+                          <TableCell>
+                            {site.subnets && site.subnets.length > 0 
+                              ? site.subnets.map((subnet, idx) => (
+                                  <Badge key={idx} variant="outline" className="mr-1">
+                                    {subnet.split(',')[0].replace('CN=', '')}
+                                  </Badge>
+                                ))
+                              : '—'}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex space-x-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setEditingSite(site)}
+                              >
+                                <Edit className="h-4 w-4" />
+                              </Button>
+                              <AlertDialog>
+                                <AlertDialogTrigger asChild>
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-destructive"
                                   >
-                                    Delete
-                                  </AlertDialogAction>
-                                </AlertDialogFooter>
-                              </AlertDialogContent>
-                            </AlertDialog>
-                          </div>
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                  <AlertDialogHeader>
+                                    <AlertDialogTitle>
+                                      Are you sure you want to delete this site?
+                                    </AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                      This action cannot be undone. This will permanently delete the
+                                      site "{site.name}" and all of its data from the server.
+                                    </AlertDialogDescription>
+                                  </AlertDialogHeader>
+                                  <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction
+                                      onClick={() => deleteSiteMutation.mutate(site.objectGUID)}
+                                      className="bg-destructive text-destructive-foreground"
+                                    >
+                                      Delete
+                                    </AlertDialogAction>
+                                  </AlertDialogFooter>
+                                </AlertDialogContent>
+                              </AlertDialog>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={5} className="text-center py-6">
+                          <p className="text-muted-foreground">No sites found for this connection.</p>
                         </TableCell>
                       </TableRow>
-                    ))}
+                    )}
                   </TableBody>
                 </Table>
-              ) : (
-                <div className="text-center py-10">
-                  <p className="text-muted-foreground">No sites found for this connection.</p>
-                </div>
               )}
 
               {/* Pagination for sites */}
@@ -832,7 +840,11 @@ export default function SitesPage() {
               </div>
             </CardHeader>
             <CardContent>
-              {isLoadingSubnets || !selectedConnection ? (
+              {!selectedConnection ? (
+                <div className="text-center py-10">
+                  <p className="text-muted-foreground">Please select a connection to view subnets.</p>
+                </div>
+              ) : isLoadingSubnets ? (
                 <div className="space-y-3">
                   {[...Array(5)].map((_, i) => (
                     <div key={i} className="flex items-center space-x-4">
@@ -845,7 +857,7 @@ export default function SitesPage() {
                   <p className="text-destructive font-medium">Error loading subnets</p>
                   <p className="text-muted-foreground">{subnetsError.message || "Unknown error occurred"}</p>
                 </div>
-              ) : subnetsData?.data && subnetsData.data.length > 0 ? (
+              ) : (
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -858,71 +870,75 @@ export default function SitesPage() {
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {subnetsData?.data?.map((subnet: AdSubnet) => (
-                      <TableRow key={subnet.objectGUID}>
-                        <TableCell className="font-medium">{subnet.name}</TableCell>
-                        <TableCell>{subnet.cidr || '—'}</TableCell>
-                        <TableCell>{subnet.description || '—'}</TableCell>
-                        <TableCell>{subnet.location || '—'}</TableCell>
-                        <TableCell>
-                          {subnet.siteObject ? (
-                            <Badge variant="outline">
-                              {subnet.siteObject.split(',')[0].replace('CN=', '')}
-                            </Badge>
-                          ) : (
-                            '—'
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex space-x-2">
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => setEditingSubnet(subnet)}
-                            >
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <AlertDialog>
-                              <AlertDialogTrigger asChild>
-                                <Button
-                                  variant="outline"
-                                  size="sm"
-                                  className="text-destructive"
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                </Button>
-                              </AlertDialogTrigger>
-                              <AlertDialogContent>
-                                <AlertDialogHeader>
-                                  <AlertDialogTitle>
-                                    Are you sure you want to delete this subnet?
-                                  </AlertDialogTitle>
-                                  <AlertDialogDescription>
-                                    This action cannot be undone. This will permanently delete the
-                                    subnet "{subnet.name}" and all of its data from the server.
-                                  </AlertDialogDescription>
-                                </AlertDialogHeader>
-                                <AlertDialogFooter>
-                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                  <AlertDialogAction
-                                    onClick={() => deleteSubnetMutation.mutate(subnet.objectGUID)}
-                                    className="bg-destructive text-destructive-foreground"
+                    {subnetsData?.data && subnetsData.data.length > 0 ? (
+                      subnetsData.data.map((subnet: AdSubnet) => (
+                        <TableRow key={subnet.objectGUID}>
+                          <TableCell className="font-medium">{subnet.name}</TableCell>
+                          <TableCell>{subnet.cidr || '—'}</TableCell>
+                          <TableCell>{subnet.description || '—'}</TableCell>
+                          <TableCell>{subnet.location || '—'}</TableCell>
+                          <TableCell>
+                            {subnet.siteObject ? (
+                              <Badge variant="outline">
+                                {subnet.siteObject.split(',')[0].replace('CN=', '')}
+                              </Badge>
+                            ) : (
+                              '—'
+                            )}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex space-x-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setEditingSubnet(subnet)}
+                              >
+                                <Edit className="h-4 w-4" />
+                              </Button>
+                              <AlertDialog>
+                                <AlertDialogTrigger asChild>
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="text-destructive"
                                   >
-                                    Delete
-                                  </AlertDialogAction>
-                                </AlertDialogFooter>
-                              </AlertDialogContent>
-                            </AlertDialog>
-                          </div>
+                                    <Trash2 className="h-4 w-4" />
+                                  </Button>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                  <AlertDialogHeader>
+                                    <AlertDialogTitle>
+                                      Are you sure you want to delete this subnet?
+                                    </AlertDialogTitle>
+                                    <AlertDialogDescription>
+                                      This action cannot be undone. This will permanently delete the
+                                      subnet "{subnet.name}" and all of its data from the server.
+                                    </AlertDialogDescription>
+                                  </AlertDialogHeader>
+                                  <AlertDialogFooter>
+                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                    <AlertDialogAction
+                                      onClick={() => deleteSubnetMutation.mutate(subnet.objectGUID)}
+                                      className="bg-destructive text-destructive-foreground"
+                                    >
+                                      Delete
+                                    </AlertDialogAction>
+                                  </AlertDialogFooter>
+                                </AlertDialogContent>
+                              </AlertDialog>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-center py-6">
+                          <p className="text-muted-foreground">No subnets found for this connection.</p>
                         </TableCell>
                       </TableRow>
-                    ))}
+                    )}
                   </TableBody>
                 </Table>
-              ) : (
-                <div className="text-center py-10">
-                  <p className="text-muted-foreground">No subnets found for this connection.</p>
-                </div>
               )}
 
               {/* Pagination for subnets */}