Add namespace hiding within the ObjectInput and remove objects prefixed with namespace in ObjectList

Author: fallow64

packages/components/src/AuthenticatedClient/AuthenticatedClient.tsx

@@ -34,8 +34,6 @@ function AuthenticatedClient(props: UsePelicanClientOptions) {
         namespaceName,
     } = usePelicanClient(props);
 
-    console.log(shortcuts);
-
     return (
         <Box mt={6} {...(uploadRef.current?.dragHandlers ?? {})}>
             <Box
@@ -55,6 +53,8 @@ function AuthenticatedClient(props: UsePelicanClientOptions) {
                             setObjectUrl={setObjectUrl}
                             onChange={handleRefetchObject}
                             loading={loading}
+                            federation={federationName}
+                            namespace={namespaceName}
                         />
                         <ClientMetadata
                             federation={federationName}
@@ -82,6 +82,7 @@ function AuthenticatedClient(props: UsePelicanClientOptions) {
                         loginRequired={loginRequired}
                         canLogin={true}
                         onLoginRequest={handleLogin}
+                        namespace={namespaceName}
                     />
                 </Box>
                 {shortcuts.length > 0 && (

packages/components/src/ObjectInput/ObjectInput.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { KeyboardDoubleArrowRight } from "@mui/icons-material";
-import { Box, InputAdornment, LinearProgress, TextField } from "@mui/material";
+import { KeyboardDoubleArrowRight, Visibility, VisibilityOff } from "@mui/icons-material";
+import { Box, IconButton, InputAdornment, LinearProgress, TextField } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
 import { useDebounceCallback } from "usehooks-ts";
 
 interface ObjectInputProps {
@@ -16,25 +17,54 @@ interface ObjectInputProps {
     onChange: (url: string) => void;
 
     loading: boolean;
+
+    federation?: string | null;
+    namespace?: string | null;
 }
 
 /**
  * The ObjectInput component allows users to input an object URL, handles authentication if required,
  * and displays a loading indicator during asynchronous operations.
  */
-function ObjectInput({ objectUrl, setObjectUrl, onChange, loading }: ObjectInputProps) {
+function ObjectInput({ objectUrl, setObjectUrl, onChange, loading, federation, namespace }: ObjectInputProps) {
     const debounced = useDebounceCallback(onChange, 300);
+    const [showPrefix, setShowPrefix] = useState(false);
+
+    // keep track of the last prefix to avoid flicker during loading
+    const lastPrefixRef = useRef<string | null>(null);
+
+    // calculate the prefix to hide
+    const prefix = federation && namespace ? `pelican://${federation}${namespace}` : null;
+
+    // remember the last prefix
+    useEffect(() => {
+        if (prefix) {
+            lastPrefixRef.current = prefix;
+        }
+    }, [prefix]);
+
+    // Use the current prefix if available, otherwise use the last known prefix
+    const effectivePrefix = prefix || lastPrefixRef.current;
+
+    // Determine what to display in the input
+    const displayValue =
+        !showPrefix && effectivePrefix && objectUrl.startsWith(effectivePrefix)
+            ? objectUrl.slice(effectivePrefix.length) || "/"
+            : objectUrl;
 
     return (
         <Box display={"flex"} flexDirection={"column"}>
             <Box display={"flex"} alignItems={"center"}>
                 <TextField
                     fullWidth
                     onChange={(e) => {
-                        setObjectUrl(e.target.value);
-                        debounced(e.target.value);
+                        // If prefix is hidden, reconstruct the full URL
+                        const newValue =
+                            !showPrefix && effectivePrefix ? effectivePrefix + e.target.value : e.target.value;
+                        setObjectUrl(newValue);
+                        debounced(newValue);
                     }}
-                    value={objectUrl}
+                    value={displayValue}
                     id="pelican-url"
                     placeholder={"Enter Pelican URL ( pelican://<federation>/<namespace>/* )"}
                     variant="outlined"
@@ -46,6 +76,18 @@ function ObjectInput({ objectUrl, setObjectUrl, onChange, loading }: ObjectInput
                                     <KeyboardDoubleArrowRight />
                                 </InputAdornment>
                             ),
+                            endAdornment: prefix && (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => setShowPrefix(!showPrefix)}
+                                        edge="end"
+                                        title={showPrefix ? "Hide prefix" : "Show full URL"}
+                                    >
+                                        {showPrefix ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
                         },
                     }}
                 />

packages/components/src/ObjectView/ObjectView.tsx

@@ -28,6 +28,8 @@ interface ObjectListProps {
     loginRequired: boolean;
     canLogin: boolean;
     onLoginRequest?: () => void;
+    /** Namespace prefix to strip from display (e.g., /namespace) */
+    namespace?: string | null;
 }
 
 /**
@@ -41,6 +43,7 @@ function ObjectView({
     loginRequired,
     canLogin,
     onLoginRequest,
+    namespace,
 }: ObjectListProps) {
     const [sortColumn, setSortColumn] = useState<SortableColumn>("href");
     const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
@@ -171,7 +174,7 @@ function ObjectView({
                                     style={{ cursor: "pointer" }}
                                 >
                                     <TableCell sx={{ px: 2, py: 1 }}>
-                                        <ObjectName {...obj} />
+                                        <ObjectName {...obj} namespace={namespace} />
                                     </TableCell>
                                     <TableCell sx={{ px: 2, py: 1 }}>
                                         {obj.iscollection ? "" : formatBytes(obj.getcontentlength)}
@@ -234,12 +237,20 @@ function ObjectView({
     );
 }
 
-function ObjectName(object: ObjectList) {
+function ObjectName(props: ObjectList & { namespace?: string | null }) {
+    const { href, iscollection, getlastmodified, namespace } = props;
+
+    // Strip namespace from the display name
+    let displayName = href;
+    if (namespace && href.startsWith(namespace)) {
+        displayName = href.slice(namespace.length) || "/";
+    }
+
     return (
         <Box display="flex" alignItems="center" gap={1}>
-            {object.iscollection ? (
+            {iscollection ? (
                 // Check if this is the parent directory (first item with empty getlastmodified)
-                object.getlastmodified === "" ? (
+                getlastmodified === "" ? (
                     <ArrowUpward color="primary" fontSize="small" />
                 ) : (
                     <Folder color="primary" fontSize="small" />
@@ -248,7 +259,7 @@ function ObjectName(object: ObjectList) {
                 <InsertDriveFile color="action" fontSize="small" />
             )}
             {/* Show ".." for parent directory (synthetic entry with empty getlastmodified) */}
-            {object.iscollection && object.getlastmodified === "" ? ".." : object.href}
+            {iscollection && getlastmodified === "" ? ".." : displayName}
         </Box>
     );
 }

packages/components/src/PublicClient/PublicClient.tsx

@@ -35,6 +35,8 @@ function PublicClient(props: UsePelicanClientOptions) {
                         setObjectUrl={setObjectUrl}
                         onChange={handleRefetchObject}
                         loading={loading}
+                        federation={federationName}
+                        namespace={namespaceName}
                     />
                     <ClientMetadata
                         federation={federationName}
@@ -51,6 +53,7 @@ function PublicClient(props: UsePelicanClientOptions) {
                 onDownload={handleDownload}
                 canLogin={false}
                 loginRequired={loginRequired}
+                namespace={namespaceName}
             />
         </Box>
     );

packages/components/src/usePelicanClient/usePelicanClient.tsx

@@ -275,7 +275,7 @@ function usePelicanClient({ objectUrl, setObjectUrl, enableAuth = true }: UsePel
 
         handleRefetchObject(objectUrl);
         setInitialFetchDone(true);
-    }, [authExchangeComplete, initialFetchDone, objectUrl, objectUrl, federations, handleRefetchObject]);
+    }, [authExchangeComplete, initialFetchDone, objectUrl, federations, handleRefetchObject]);
 
     const handleExplore = useCallback(
         (href: string) => {