openvsx-webui-test 0.20.0-dev.5 → 0.20.2-dev.0

package/src/pages/extension-detail/use-extension-details.tsx

@@ -0,0 +1,101 @@
+/******************************************************************************
+ * Copyright (c) 2026 Contributors to the Eclipse Foundation.
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * https://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *****************************************************************************/
+
+import { useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { MainContext } from '../../context';
+import { Extension, isError } from '../../extension-registry-types';
+import { ErrorResponse } from '../../server-request';
+
+interface UseExtensionDetailResult {
+  loading: boolean;
+  extension: Extension | undefined;
+  error: Error | undefined;
+  icon: string | undefined;
+  reload: () => void;
+}
+
+export const useExtensionDetail = (
+  namespace: string,
+  name: string,
+  target: string,
+  version: string
+): UseExtensionDetailResult => {
+  const abortController = useRef<AbortController>(new AbortController());
+
+  const { handleError, service } = useContext(MainContext);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+  const [extension, setExtension] = useState<Extension>();
+  const [icon, setIcon] = useState<string>();
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    return () => {
+      abortController.current.abort();
+      if (icon) {
+        URL.revokeObjectURL(icon);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!namespace || !name) return;
+
+    const fetchExtension = async () => {
+      setExtension(undefined);
+      setError(undefined);
+      setIcon(undefined);
+
+      const extensionUrl = service.getExtensionApiUrl({ namespace, name, target, version });
+      const response = await service.getExtensionDetail(abortController.current, extensionUrl);
+      if (isError(response)) throw response;
+
+      const ext = response as Extension;
+      const iconUrl = await service.getExtensionIcon(abortController.current, ext);
+      if (abortController.current.signal.aborted) {
+        if (iconUrl) {
+          URL.revokeObjectURL(iconUrl);
+        }
+      } else {
+        setExtension(ext);
+        setIcon(iconUrl);
+      }
+    };
+
+    setLoading(true);
+    fetchExtension()
+      .then(() => {
+        setLoading(false);
+      })
+      .catch(err => {
+          if (abortController.current.signal.aborted) {
+            setLoading(false);
+            return;
+          }
+
+          const errorResponse = err as Partial<ErrorResponse>;
+          if (errorResponse?.status === 404) {
+            setError(new Error(`Extension Not Found: ${namespace}.${name}`));
+          } else {
+            setError(err instanceof Error ? err : new Error('Failed to load extension details'));
+            handleError(err as Error | Partial<ErrorResponse>);
+          }
+          setLoading(false);
+      });
+  }, [namespace, name, target, version, reloadKey]);
+
+  // This function updates the reloadKey state to trigger a refetch of the extension details.
+  const reload = useCallback(() => setReloadKey(k => k + 1), []);
+
+  return { loading, extension, error, icon, reload };
+};

package/src/pages/user/avatar.tsx

@@ -12,7 +12,7 @@ import { FunctionComponent, useContext, useRef, useState } from 'react';
 import { Avatar, Menu, Typography, MenuItem, Link, Divider, IconButton } from '@mui/material';
 import { Link as RouteLink } from 'react-router-dom';
 import { UserSettingsRoutes } from './user-settings-routes';
-import { AdminDashboardRoutes } from '../admin-dashboard/admin-routes';
+import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard-routes';
 import { MainContext } from '../../context';
 import { LogoutForm } from './logout';
 

package/src/pages/user/user-setting-tabs.tsx

@@ -20,6 +20,7 @@ export const UserSettingTabs = (): ReactElement => {
     const isATablet = useMediaQuery(theme.breakpoints.down('md'));
     const isAMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const { tab } = useParams();
+
     const navigate = useNavigate();
 
     const handleChange = (event: ChangeEvent, newTab: string) => {
@@ -32,10 +33,10 @@ export const UserSettingTabs = (): ReactElement => {
 
     return (
         <Tabs
-            value={tab}
+            value={tab ?? 'extensions'}
             onChange={handleChange}
             orientation={isATablet ? 'horizontal' : 'vertical'}
-            centered={isAMobile ? true : false}
+            centered={isAMobile}
             indicatorColor='secondary'
         >
             <Tab value='profile' label='Profile' />

package/src/pages/user/user-settings-namespace-detail.tsx

@@ -14,9 +14,10 @@ import { Box, Button, Link, Paper, Grid, Typography } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import WarningIcon from '@mui/icons-material/Warning';
 import { UserNamespaceExtensionListContainer } from './user-namespace-extension-list';
-import { AdminDashboardRoutes } from '../admin-dashboard/admin-routes';
+import { AdminDashboardRoutes } from '../admin-dashboard/admin-dashboard-routes';
 import { Namespace, UserData } from '../../extension-registry-types';
 import { NamespaceChangeDialog } from '../admin-dashboard/namespace-change-dialog';
+import { NamespaceDeleteDialog } from '../admin-dashboard/namespace-delete-dialog';
 import { UserNamespaceMemberList } from './user-namespace-member-list';
 import { UserNamespaceDetails } from './user-namespace-details';
 
@@ -61,6 +62,7 @@ const NamespaceHeader = styled(Box)(({ theme }: { theme: Theme }) => ({
 
 export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props => {
     const [changeDialogIsOpen, setChangeDialogIsOpen] = useState(false);
+    const [deleteDialogIsOpen, setDeleteDialogIsOpen] = useState(false);
     const { pathname } = useLocation();
 
     const handleCloseChangeDialog = async () => {
@@ -70,6 +72,19 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
         setChangeDialogIsOpen(true);
     };
 
+    const handleCloseDeleteDialog = async () => {
+        setDeleteDialogIsOpen(false);
+    };
+    const handleDeletedNamespace = async () => {
+        setDeleteDialogIsOpen(false);
+        if (props.onDelete !== undefined) {
+            props.onDelete();
+        }
+    };
+
+    const handleOpenDeleteDialog = () => {
+        setDeleteDialogIsOpen(true);
+    };
     const warningColor = props.theme === 'dark' ? '#fff' : '#151515';
     return <>
         <NamespaceDetailContainer container direction='column' spacing={4}>
@@ -101,9 +116,20 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
                 <NamespaceHeader>
                     <Typography variant='h4'>{props.namespace.name}</Typography>
                     { pathname.startsWith(AdminDashboardRoutes.NAMESPACE_ADMIN)
-                        ? <Button sx={{ ml: { xs: 2, sm: 2, md: 2, lg: 0, xl: 0 } }} variant='outlined' onClick={handleOpenChangeDialog}>
-                            Change Namespace
-                        </Button>
+                        ?
+                        <Box>
+                            <Button sx={{ ml: { xs: 2, sm: 2, md: 2, lg: 0, xl: 0 } }} variant='outlined' onClick={handleOpenChangeDialog}>
+                                Change Namespace
+                            </Button>
+                            { Object.keys(props.namespace.extensions).length === 0 &&
+                                <Button
+                                    variant='outlined'
+                                    sx={{ color: 'error.main', height: 36, ml: { xs: 2 } }}
+                                    onClick={handleOpenDeleteDialog}>
+                                    Delete
+                                </Button>
+                            }
+                        </Box>
                         : null
                     }
                 </NamespaceHeader>
@@ -137,6 +163,12 @@ export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props =>
             onClose={handleCloseChangeDialog}
             namespace={props.namespace}
             setLoadingState={props.setLoadingState} />
+        <NamespaceDeleteDialog
+            open={deleteDialogIsOpen}
+            onClose={handleCloseDeleteDialog}
+            onDelete={handleDeletedNamespace}
+            namespace={props.namespace}
+            setLoadingState={props.setLoadingState} />
     </>;
 };
 
@@ -147,4 +179,5 @@ export interface NamespaceDetailProps {
     setLoadingState: (loading: boolean) => void;
     namespaceAccessUrl?: string;
     theme?: string;
-}
+    onDelete?: () => void;
+}

package/src/pages/user/user-settings-namespaces.tsx

@@ -117,7 +117,7 @@ export const UserSettingsNamespaces: FunctionComponent = () => {
                 filterUsers={(foundUser: UserData) => foundUser.provider !== user?.provider || foundUser.loginName !== user?.loginName}
                 fixSelf={true}
                 namespaceAccessUrl={namespaceAccessUrl}
-                theme={pageSettings.themeType}/>
+                theme={pageSettings.themeType} />
         </Box>;
     } else if (!loading) {
         namespaceContainer = <Typography variant='body1'>No namespaces available. Read <Link color='secondary' href={namespaceAccessUrl} target='_blank'>here</Link> about claiming namespaces.</Typography>;

package/lib/pages/admin-dashboard/admin-routes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"admin-routes.d.ts","sourceRoot":"","sources":["../../../src/pages/admin-dashboard/admin-routes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;+EAW+E;AAI/E,yBAAiB,oBAAoB,CAAC;IAC3B,MAAM,IAAI,oBAAoB,CAAC;IAC/B,MAAM,IAAI,QAAsB,CAAC;IACjC,MAAM,eAAe,QAAoC,CAAC;IAC1D,MAAM,eAAe,QAAoC,CAAC;IAC1D,MAAM,eAAe,QAAmC,CAAC;IACzD,MAAM,WAAW,QAA+B,CAAC;IACjD,MAAM,KAAK,QAA+B,CAAC;IAC3C,MAAM,SAAS,QAAmC,CAAC;IACnD,MAAM,WAAW,QAA+B,CAAC;IACjD,MAAM,IAAI,QAA8B,CAAC;CACnD"}

package/lib/pages/admin-dashboard/admin-routes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"admin-routes.js","sourceRoot":"","sources":["../../../src/pages/admin-dashboard/admin-routes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;+EAW+E;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,KAAW,oBAAoB,CAWpC;AAXD,WAAiB,oBAAoB;IACpB,yBAAI,GAAG,iBAAiB,CAAC;IACzB,yBAAI,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,CAAC,CAAC,CAAC;IAC3B,oCAAe,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IACpD,oCAAe,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IACpD,oCAAe,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IACnD,gCAAW,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,0BAAK,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IACrC,8BAAS,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAC7C,gCAAW,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,yBAAI,GAAG,WAAW,CAAC,CAAC,qBAAA,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AACpD,CAAC,EAXgB,oBAAoB,KAApB,oBAAoB,QAWpC"}