From 483dbf020876fe1ea93d0a51d43b73d499ddb0f4 Mon Sep 17 00:00:00 2001
From: Cannon Lock <clock@wisc.edu>
Date: Tue, 19 Nov 2024 08:40:22 -0600
Subject: [PATCH] Run prettier

---
 .../app/director/components/NamespaceCard.tsx | 25 ++++----
 .../director/components/NamespaceCardList.tsx |  4 +-
 .../director/components/NamespaceDropdown.tsx | 62 +++++++++++++------
 web_ui/frontend/app/director/page.tsx         | 20 ++++--
 .../frontend/components/InformationSpan.tsx   | 21 ++++---
 .../components/Namespace/NamespaceIcon.tsx    | 17 +++--
 .../components/NamespaceCapabilitiesTable.tsx | 22 +++++--
 7 files changed, 105 insertions(+), 66 deletions(-)

diff --git a/web_ui/frontend/app/director/components/NamespaceCard.tsx b/web_ui/frontend/app/director/components/NamespaceCard.tsx
index b12706b83..7e8215f43 100644
--- a/web_ui/frontend/app/director/components/NamespaceCard.tsx
+++ b/web_ui/frontend/app/director/components/NamespaceCard.tsx
@@ -1,10 +1,6 @@
 import { secureFetch } from '@/helpers/login';
 import React, { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Typography,
-} from '@mui/material';
+import { Box, Paper, Typography } from '@mui/material';
 import { NamespaceIcon } from '@/components/Namespace/index';
 import { NamespaceDropdown } from './NamespaceDropdown';
 import { Namespace, ServerDetailed, ServerGeneral } from '@/types';
@@ -15,7 +11,9 @@ export interface NamespaceCardProps {
 
 export const NamespaceCard = ({ namespace }: NamespaceCardProps) => {
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
-  const [servers, setServers] = useState<ServerDetailed[] | undefined>(undefined);
+  const [servers, setServers] = useState<ServerDetailed[] | undefined>(
+    undefined
+  );
 
   return (
     <>
@@ -39,9 +37,7 @@ export const NamespaceCard = ({ namespace }: NamespaceCardProps) => {
           }}
         >
           <Box my={'auto'} ml={1} display={'flex'} flexDirection={'row'}>
-            <NamespaceIcon
-              serverType={'namespace'}
-            />
+            <NamespaceIcon serverType={'namespace'} />
             <Typography sx={{ pt: '2px' }}>{namespace.path}</Typography>
           </Box>
         </Box>
@@ -56,16 +52,17 @@ export const NamespaceCard = ({ namespace }: NamespaceCardProps) => {
 };
 
 const getAssociatedServers = async (namespace: Namespace) => {
-  const servers = await Promise.all([...namespace.origins, ...namespace.caches].map(getServer));
+  const servers = await Promise.all(
+    [...namespace.origins, ...namespace.caches].map(getServer)
+  );
 
   // Alert the console if any servers are undefined, as this is unlikely to happen naturally
-  if(servers.some((s) => s === undefined)) {
-    console.error("Failed to fetch all servers, some are undefined");
+  if (servers.some((s) => s === undefined)) {
+    console.error('Failed to fetch all servers, some are undefined');
   }
 
   return servers.filter((s) => s !== undefined) as ServerDetailed[];
-
-}
+};
 
 // TODO: Consolidate this when https://github.com/PelicanPlatform/pelican/pull/1687 is merged
 const getServer = async (name: string): Promise<ServerDetailed | undefined> => {
diff --git a/web_ui/frontend/app/director/components/NamespaceCardList.tsx b/web_ui/frontend/app/director/components/NamespaceCardList.tsx
index e6580d112..a13a20fad 100644
--- a/web_ui/frontend/app/director/components/NamespaceCardList.tsx
+++ b/web_ui/frontend/app/director/components/NamespaceCardList.tsx
@@ -1,6 +1,4 @@
-import React, {
-  useState
-} from 'react';
+import React, { useState } from 'react';
 import { Box, TextField } from '@mui/material';
 import { NamespaceCard, NamespaceCardProps } from './';
 import { CardList } from '@/components';
diff --git a/web_ui/frontend/app/director/components/NamespaceDropdown.tsx b/web_ui/frontend/app/director/components/NamespaceDropdown.tsx
index 35b2276a5..7ebad9872 100644
--- a/web_ui/frontend/app/director/components/NamespaceDropdown.tsx
+++ b/web_ui/frontend/app/director/components/NamespaceDropdown.tsx
@@ -13,7 +13,7 @@ interface NamespaceDropdownProps {
 export const NamespaceDropdown = ({
   namespace,
   servers,
-  transition
+  transition,
 }: NamespaceDropdownProps) => {
   return (
     <>
@@ -22,33 +22,57 @@ export const NamespaceDropdown = ({
           <Grid item xs={12} md={12}>
             <InformationSpan name={'Path'} value={namespace.path} />
             <InformationSpanHeader title={'Token Generation'} />
-            {namespace.tokenGeneration?.map((tg) =>
+            {namespace.tokenGeneration?.map((tg) => (
               <Fragment key={tg.issuer}>
                 <InformationSpan indent={1} name={'Issuer'} value={tg.issuer} />
-                <InformationSpan indent={2} name={'Strategy'} value={tg.strategy} />
-                <InformationSpan indent={2} name={'VaultServer'} value={tg.vaultServer} />
-                <InformationSpan indent={2} name={'Max Scope Depth'} value={tg.maxScopeDepth.toString()} />
+                <InformationSpan
+                  indent={2}
+                  name={'Strategy'}
+                  value={tg.strategy}
+                />
+                <InformationSpan
+                  indent={2}
+                  name={'VaultServer'}
+                  value={tg.vaultServer}
+                />
+                <InformationSpan
+                  indent={2}
+                  name={'Max Scope Depth'}
+                  value={tg.maxScopeDepth.toString()}
+                />
               </Fragment>
-            )}
+            ))}
             <InformationSpanHeader title={'Token Issuer'} />
-            {namespace.tokenIssuer?.map((ti) =>
+            {namespace.tokenIssuer?.map((ti) => (
               <Fragment key={ti.issuer}>
                 <InformationSpan indent={1} name={'Issuer'} value={ti.issuer} />
-                <InformationSpanHeader indent={2} title={"Base Paths"} />
-                {ti.basePaths.map((bp) =>
-                  <InformationSpan key={bp} indent={3} name={'Base Path'} value={bp} />
-                )}
-                { ti.restrictedPaths && (
+                <InformationSpanHeader indent={2} title={'Base Paths'} />
+                {ti.basePaths.map((bp) => (
+                  <InformationSpan
+                    key={bp}
+                    indent={3}
+                    name={'Base Path'}
+                    value={bp}
+                  />
+                ))}
+                {ti.restrictedPaths && (
                   <>
-                    <InformationSpanHeader indent={2} title={"Restricted Paths"} />
-                    {ti.restrictedPaths?.map((rp) =>
-                      <InformationSpan key={rp} indent={3} name={'Restricted Path'} value={rp} />
-                    )}
+                    <InformationSpanHeader
+                      indent={2}
+                      title={'Restricted Paths'}
+                    />
+                    {ti.restrictedPaths?.map((rp) => (
+                      <InformationSpan
+                        key={rp}
+                        indent={3}
+                        name={'Restricted Path'}
+                        value={rp}
+                      />
+                    ))}
                   </>
-                  )
-                }
+                )}
               </Fragment>
-            )}
+            ))}
           </Grid>
         </Grid>
         <Box sx={{ my: 1 }}>
diff --git a/web_ui/frontend/app/director/page.tsx b/web_ui/frontend/app/director/page.tsx
index 78f8bec42..7d88242b4 100644
--- a/web_ui/frontend/app/director/page.tsx
+++ b/web_ui/frontend/app/director/page.tsx
@@ -31,7 +31,10 @@ import { NamespaceCardList } from './components/NamespaceCardList';
 
 export default function Page() {
   const { data } = useSWR<ServerGeneral[]>('getServers', getServers);
-  const { data: namespaces } = useSWR<Namespace[]>('getNamespaces', getNamespaces);
+  const { data: namespaces } = useSWR<Namespace[]>(
+    'getNamespaces',
+    getNamespaces
+  );
 
   const { data: user, error } = useSWR('getUser', getUser);
 
@@ -87,9 +90,11 @@ export default function Page() {
             </Typography>
             {cacheData ? (
               <NamespaceCardList
-                data={namespaces?.map((namespace) => {
-                  return {namespace}
-                }) || []}
+                data={
+                  namespaces?.map((namespace) => {
+                    return { namespace };
+                  }) || []
+                }
               />
             ) : (
               <Box>
@@ -122,7 +127,10 @@ const getServers = async () => {
 };
 
 const getNamespaces = async () => {
-  const url = new URL('/api/v1.0/director_ui/namespaces', window.location.origin);
+  const url = new URL(
+    '/api/v1.0/director_ui/namespaces',
+    window.location.origin
+  );
 
   let response = await fetch(url);
   if (response.ok) {
@@ -132,4 +140,4 @@ const getNamespaces = async () => {
   }
 
   throw new Error('Failed to fetch servers');
-}
+};
diff --git a/web_ui/frontend/components/InformationSpan.tsx b/web_ui/frontend/components/InformationSpan.tsx
index bf2d55ab7..46ddd89b4 100644
--- a/web_ui/frontend/components/InformationSpan.tsx
+++ b/web_ui/frontend/components/InformationSpan.tsx
@@ -4,10 +4,10 @@ import React, { ReactNode } from 'react';
 
 export const InformationSpanHeader = ({
   title,
-  indent = 0
+  indent = 0,
 }: {
-  title: string,
-  indent?: number
+  title: string;
+  indent?: number;
 }) => {
   return (
     <Box
@@ -25,18 +25,19 @@ export const InformationSpanHeader = ({
       }}
     >
       <Typography variant={'body2'} sx={{ display: 'inline', mr: 2 }}>
-        {"\u00A0\u00A0\u00A0\u00A0".repeat(Math.max(indent - 1, 0))}{indent > 0 ? "↳\u00A0" : ""}{title}
-      </Typography>
-      <Typography variant={'body2'} sx={{ display: 'inline' }}>
+        {'\u00A0\u00A0\u00A0\u00A0'.repeat(Math.max(indent - 1, 0))}
+        {indent > 0 ? '↳\u00A0' : ''}
+        {title}
       </Typography>
+      <Typography variant={'body2'} sx={{ display: 'inline' }}></Typography>
     </Box>
   );
-}
+};
 
 export const InformationSpan = ({
   name,
   value,
-  indent = 0
+  indent = 0,
 }: {
   name: string;
   value: string;
@@ -58,7 +59,9 @@ export const InformationSpan = ({
         }}
       >
         <Typography variant={'body2'} sx={{ display: 'inline', mr: 2 }}>
-          {"\u00A0\u00A0\u00A0\u00A0".repeat(Math.max(indent - 1, 0))}{indent > 0 ? "↳\u00A0" : ""}{name}:
+          {'\u00A0\u00A0\u00A0\u00A0'.repeat(Math.max(indent - 1, 0))}
+          {indent > 0 ? '↳\u00A0' : ''}
+          {name}:
         </Typography>
         <Typography variant={'body2'} sx={{ display: 'inline' }}>
           {value}
diff --git a/web_ui/frontend/components/Namespace/NamespaceIcon.tsx b/web_ui/frontend/components/Namespace/NamespaceIcon.tsx
index 9fae82c1f..ba8bcd19c 100644
--- a/web_ui/frontend/components/Namespace/NamespaceIcon.tsx
+++ b/web_ui/frontend/components/Namespace/NamespaceIcon.tsx
@@ -13,7 +13,6 @@ const NamespaceIcon = ({
   color?: string;
   bgcolor?: string;
 }) => {
-
   const avatarPixelSize = useMemo(() => {
     switch (size) {
       case 'large':
@@ -25,7 +24,7 @@ const NamespaceIcon = ({
       default:
         return 30;
     }
-  }, [size])
+  }, [size]);
 
   const iconPixelSize = useMemo(() => {
     switch (size) {
@@ -38,7 +37,7 @@ const NamespaceIcon = ({
       default:
         return 24;
     }
-  }, [])
+  }, []);
 
   if (serverType == 'namespace') {
     return (
@@ -51,10 +50,10 @@ const NamespaceIcon = ({
               width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor
+              bgcolor,
             }}
           >
-            <FolderOpen sx={{fontSize: iconPixelSize}} htmlColor={color} />
+            <FolderOpen sx={{ fontSize: iconPixelSize }} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>
@@ -72,10 +71,10 @@ const NamespaceIcon = ({
               width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor
+              bgcolor,
             }}
           >
-            <TripOrigin sx={{fontSize: iconPixelSize}} htmlColor={color} />
+            <TripOrigin sx={{ fontSize: iconPixelSize }} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>
@@ -93,10 +92,10 @@ const NamespaceIcon = ({
               width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor
+              bgcolor,
             }}
           >
-            <Storage sx={{fontSize: iconPixelSize}} htmlColor={color} />
+            <Storage sx={{ fontSize: iconPixelSize }} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>
diff --git a/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx b/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx
index b7cb70501..66b1dc43a 100644
--- a/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx
+++ b/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx
@@ -13,8 +13,8 @@ import { grey } from '@mui/material/colors';
 import { NamespaceIcon } from '@/components/Namespace';
 
 interface NamespaceCapabilitiesTableProps {
-  namespace: Namespace
-  servers?: ServerDetailed[]
+  namespace: Namespace;
+  servers?: ServerDetailed[];
 }
 
 /**
@@ -26,9 +26,8 @@ interface NamespaceCapabilitiesTableProps {
  */
 export const NamespaceCapabilitiesTable = ({
   namespace,
-  servers
+  servers,
 }: NamespaceCapabilitiesTableProps) => {
-
   const theme = useTheme();
 
   return (
@@ -64,8 +63,19 @@ export const NamespaceCapabilitiesTable = ({
                 <Grid container spacing={1}>
                   <Grid item xs={3}>
                     <Box display={'flex'} height={'100%'}>
-                      <Typography variant={'body2'} my={'auto'} display={"flex"}>
-                        <NamespaceIcon serverType={server.type.toLowerCase() as 'origin' | 'cache'} size={"small"} bgcolor={"white"} color={theme.palette.primary.main} />
+                      <Typography
+                        variant={'body2'}
+                        my={'auto'}
+                        display={'flex'}
+                      >
+                        <NamespaceIcon
+                          serverType={
+                            server.type.toLowerCase() as 'origin' | 'cache'
+                          }
+                          size={'small'}
+                          bgcolor={'white'}
+                          color={theme.palette.primary.main}
+                        />
                         {server.name}
                       </Typography>
                     </Box>