openvsx-webui-test 0.17.1 → 0.18.0-dev.0

package/src/hooks/scan-admin/use-tab-navigation.ts

@@ -0,0 +1,82 @@
+/********************************************************************************
+ * 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 { useMemo, useCallback } from 'react';
+import { useScanContext } from '../../context/scan-admin';
+
+/**
+ * Tab definitions for the Scans Admin page.
+ */
+export const TAB_DEFINITIONS = [
+    { index: 0, name: 'Scans', path: 'scans' },
+    { index: 1, name: 'Quarantined', path: 'quarantined' },
+    { index: 2, name: 'Auto Rejected', path: 'auto-rejected' },
+    { index: 3, name: 'Allowed Files', path: 'allowed-files' },
+    { index: 4, name: 'Blocked Files', path: 'blocked-files' },
+] as const;
+
+export type TabIndex = 0 | 1 | 2 | 3 | 4;
+export type TabName = typeof TAB_DEFINITIONS[number]['name'];
+
+/**
+ * Hook for managing tab navigation state and actions.
+ */
+export const useTabNavigation = () => {
+    const { state, actions } = useScanContext();
+
+    const setTab = useCallback((tab: number) => {
+        if (tab >= 0 && tab <= 4) {
+            actions.setTab(tab);
+        }
+    }, [actions]);
+
+    const currentTab = useMemo(() => {
+        return TAB_DEFINITIONS[state.selectedTab] || TAB_DEFINITIONS[0];
+    }, [state.selectedTab]);
+
+    const isScansTab = state.selectedTab === 0;
+    const isQuarantinedTab = state.selectedTab === 1;
+    const isAutoRejectedTab = state.selectedTab === 2;
+    const isAllowListTab = state.selectedTab === 3;
+    const isBlockListTab = state.selectedTab === 4;
+
+    const isScanDataTab = state.selectedTab <= 2;
+    const isFileDataTab = state.selectedTab >= 3;
+
+    return useMemo(() => ({
+        selectedTab: state.selectedTab,
+        currentTab,
+        tabs: TAB_DEFINITIONS,
+        setTab,
+        isScansTab,
+        isQuarantinedTab,
+        isAutoRejectedTab,
+        isAllowListTab,
+        isBlockListTab,
+        isScanDataTab,
+        isFileDataTab,
+    }), [
+        state.selectedTab,
+        currentTab,
+        setTab,
+        isScansTab,
+        isQuarantinedTab,
+        isAutoRejectedTab,
+        isAllowListTab,
+        isBlockListTab,
+        isScanDataTab,
+        isFileDataTab,
+    ]);
+};
+
+export type UseTabNavigationReturn = ReturnType<typeof useTabNavigation>;

package/src/hooks/scan-admin/use-url-sync.ts

@@ -0,0 +1,293 @@
+/********************************************************************************
+ * 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 { useEffect, useRef, useCallback } from 'react';
+import { useScanContext } from '../../context/scan-admin';
+import { DateRangeType, EnforcementType } from '../../context/scan-admin/scan-types';
+
+/**
+ * URL parameter keys
+ */
+const URL_PARAMS = {
+    TAB: 'tab',
+    PAGE: 'page',
+    PUBLISHER: 'publisher',
+    NAMESPACE: 'namespace',
+    NAME: 'name',
+    DATE_RANGE: 'dateRange',
+    FILE_DATE_RANGE: 'fileDateRange',
+    ENFORCEMENT: 'enforcement',
+    // Checkbox filters
+    STATUS_FILTERS: 'status',
+    QUARANTINE_FILTERS: 'quarantine',
+    THREAT_SCANNER_FILTERS: 'threatScanner',
+    VALIDATION_TYPE_FILTERS: 'validationType',
+} as const;
+
+/**
+ * Tab name to index mapping
+ */
+const TAB_NAME_TO_INDEX: Record<string, number> = {
+    'scans': 0,
+    'quarantined': 1,
+    'auto-rejected': 2,
+    'allowed-files': 3,
+    'blocked-files': 4,
+};
+
+const TAB_INDEX_TO_NAME: Record<number, string> = {
+    0: 'scans',
+    1: 'quarantined',
+    2: 'auto-rejected',
+    3: 'allowed-files',
+    4: 'blocked-files',
+};
+
+/**
+ * Valid date range values
+ */
+const VALID_DATE_RANGES: DateRangeType[] = ['today', 'last7days', 'last30days', 'last90days', 'all'];
+
+/**
+ * Valid enforcement values
+ */
+const VALID_ENFORCEMENTS: EnforcementType[] = ['enforced', 'notEnforced', 'all'];
+
+/**
+ * Hook to sync scan admin state with URL parameters.
+ * This enables bookmarkable URLs and browser back/forward navigation.
+ */
+export const useUrlSync = () => {
+    const { state, dispatch } = useScanContext();
+    const isInitialized = useRef(false);
+    const isUpdatingFromUrl = useRef(false);
+
+    /**
+     * Parse URL parameters and apply to state on initial load
+     */
+    const initializeFromUrl = useCallback(() => {
+        const params = new URLSearchParams(window.location.search);
+
+        // Tab
+        const tabParam = params.get(URL_PARAMS.TAB);
+        if (tabParam && TAB_NAME_TO_INDEX[tabParam] !== undefined) {
+            dispatch({ type: 'SET_TAB', payload: TAB_NAME_TO_INDEX[tabParam] });
+        }
+
+        // Page (URL is 1-indexed, state is 0-indexed)
+        const pageParam = params.get(URL_PARAMS.PAGE);
+        if (pageParam) {
+            const page = parseInt(pageParam, 10);
+            if (!isNaN(page) && page >= 1) {
+                dispatch({ type: 'SET_PAGE', payload: page - 1 });
+            }
+        }
+
+        // Search queries
+        const publisherParam = params.get(URL_PARAMS.PUBLISHER);
+        if (publisherParam) {
+            dispatch({ type: 'SET_PUBLISHER_QUERY', payload: publisherParam });
+        }
+
+        const namespaceParam = params.get(URL_PARAMS.NAMESPACE);
+        if (namespaceParam) {
+            dispatch({ type: 'SET_NAMESPACE_QUERY', payload: namespaceParam });
+        }
+
+        const nameParam = params.get(URL_PARAMS.NAME);
+        if (nameParam) {
+            dispatch({ type: 'SET_NAME_QUERY', payload: nameParam });
+        }
+
+        // Date range
+        const dateRangeParam = params.get(URL_PARAMS.DATE_RANGE);
+        if (dateRangeParam && VALID_DATE_RANGES.indexOf(dateRangeParam as DateRangeType) !== -1) {
+            dispatch({ type: 'SET_DATE_RANGE', payload: dateRangeParam as DateRangeType });
+        }
+
+        // File date range
+        const fileDateRangeParam = params.get(URL_PARAMS.FILE_DATE_RANGE);
+        if (fileDateRangeParam && VALID_DATE_RANGES.indexOf(fileDateRangeParam as DateRangeType) !== -1) {
+            dispatch({ type: 'SET_FILE_DATE_RANGE', payload: fileDateRangeParam as DateRangeType });
+        }
+
+        // Enforcement
+        const enforcementParam = params.get(URL_PARAMS.ENFORCEMENT);
+        if (enforcementParam && VALID_ENFORCEMENTS.indexOf(enforcementParam as EnforcementType) !== -1) {
+            dispatch({ type: 'SET_ENFORCEMENT', payload: enforcementParam as EnforcementType });
+        }
+
+        // Status filters (comma-separated)
+        const statusFiltersParam = params.get(URL_PARAMS.STATUS_FILTERS);
+        if (statusFiltersParam) {
+            const filters = new Set(statusFiltersParam.split(',').filter(Boolean));
+            if (filters.size > 0) {
+                dispatch({ type: 'SET_STATUS_FILTERS', payload: filters });
+            }
+        }
+
+        // Quarantine filters (comma-separated)
+        const quarantineFiltersParam = params.get(URL_PARAMS.QUARANTINE_FILTERS);
+        if (quarantineFiltersParam) {
+            const filters = new Set(quarantineFiltersParam.split(',').filter(Boolean));
+            if (filters.size > 0) {
+                dispatch({ type: 'SET_QUARANTINE_FILTERS', payload: filters });
+            }
+        }
+
+        // Threat scanner filters (comma-separated)
+        const threatScannerFiltersParam = params.get(URL_PARAMS.THREAT_SCANNER_FILTERS);
+        if (threatScannerFiltersParam) {
+            const filters = new Set(threatScannerFiltersParam.split(',').filter(Boolean));
+            if (filters.size > 0) {
+                dispatch({ type: 'SET_THREAT_SCANNER_FILTERS', payload: filters });
+            }
+        }
+
+        // Validation type filters (comma-separated)
+        const validationTypeFiltersParam = params.get(URL_PARAMS.VALIDATION_TYPE_FILTERS);
+        if (validationTypeFiltersParam) {
+            const filters = new Set(validationTypeFiltersParam.split(',').filter(Boolean));
+            if (filters.size > 0) {
+                dispatch({ type: 'SET_VALIDATION_TYPE_FILTERS', payload: filters });
+            }
+        }
+    }, [dispatch]);
+
+    /**
+     * Update URL parameters from state
+     */
+    const updateUrlFromState = useCallback(() => {
+        if (isUpdatingFromUrl.current) {
+            return;
+        }
+
+        const params = new URLSearchParams();
+
+        // Tab (only add if not default)
+        if (state.selectedTab !== 0) {
+            params.set(URL_PARAMS.TAB, TAB_INDEX_TO_NAME[state.selectedTab] || 'scans');
+        }
+
+        // Page (only add if not first page, URL is 1-indexed)
+        if (state.currentPage > 0) {
+            params.set(URL_PARAMS.PAGE, String(state.currentPage + 1));
+        }
+
+        // Search queries (only add if not empty)
+        if (state.publisherQuery) {
+            params.set(URL_PARAMS.PUBLISHER, state.publisherQuery);
+        }
+        if (state.namespaceQuery) {
+            params.set(URL_PARAMS.NAMESPACE, state.namespaceQuery);
+        }
+        if (state.nameQuery) {
+            params.set(URL_PARAMS.NAME, state.nameQuery);
+        }
+
+        // Date range (only add if not default)
+        if (state.dateRange !== 'all') {
+            params.set(URL_PARAMS.DATE_RANGE, state.dateRange);
+        }
+
+        // File date range (only add if not default)
+        if (state.fileDateRange !== 'all') {
+            params.set(URL_PARAMS.FILE_DATE_RANGE, state.fileDateRange);
+        }
+
+        // Enforcement (only add if not tab-specific default)
+        // Tabs 1 (Quarantined) and 2 (Auto Rejected) default to 'enforced', others default to 'all'
+        const defaultEnforcement = (state.selectedTab === 1 || state.selectedTab === 2) ? 'enforced' : 'all';
+        if (state.enforcement !== defaultEnforcement) {
+            params.set(URL_PARAMS.ENFORCEMENT, state.enforcement);
+        }
+
+        // Status filters (only add if any are selected)
+        if (state.statusFilters.size > 0) {
+            params.set(URL_PARAMS.STATUS_FILTERS, Array.from(state.statusFilters).join(','));
+        }
+
+        // Quarantine filters (only add if any are selected - default is empty)
+        if (state.quarantineFilters.size > 0) {
+            params.set(URL_PARAMS.QUARANTINE_FILTERS, Array.from(state.quarantineFilters).join(','));
+        }
+
+        // Threat scanner filters (only add if any are selected)
+        if (state.threatScannerFilters.size > 0) {
+            params.set(URL_PARAMS.THREAT_SCANNER_FILTERS, Array.from(state.threatScannerFilters).join(','));
+        }
+
+        // Validation type filters (only add if any are selected)
+        if (state.validationTypeFilters.size > 0) {
+            params.set(URL_PARAMS.VALIDATION_TYPE_FILTERS, Array.from(state.validationTypeFilters).join(','));
+        }
+
+        // Build new URL
+        const newSearch = params.toString();
+        const newUrl = newSearch
+            ? `${window.location.pathname}?${newSearch}`
+            : window.location.pathname;
+
+        // Update URL without triggering a page reload
+        if (window.location.search !== (newSearch ? `?${newSearch}` : '')) {
+            window.history.replaceState(null, '', newUrl);
+        }
+    }, [state.selectedTab, state.currentPage, state.publisherQuery, state.namespaceQuery, state.nameQuery, state.dateRange, state.fileDateRange, state.enforcement, state.statusFilters, state.quarantineFilters, state.threatScannerFilters, state.validationTypeFilters]);
+
+    /**
+     * Handle browser back/forward navigation
+     */
+    const handlePopState = useCallback(() => {
+        isUpdatingFromUrl.current = true;
+        initializeFromUrl();
+        // Reset the flag after a short delay to allow state to settle
+        setTimeout(() => {
+            isUpdatingFromUrl.current = false;
+        }, 100);
+    }, [initializeFromUrl]);
+
+    // Initialize from URL on mount
+    useEffect(() => {
+        if (!isInitialized.current) {
+            isInitialized.current = true;
+            isUpdatingFromUrl.current = true;
+            initializeFromUrl();
+            // Reset the flag after initialization
+            setTimeout(() => {
+                isUpdatingFromUrl.current = false;
+            }, 100);
+        }
+    }, [initializeFromUrl]);
+
+    // Update URL when state changes
+    useEffect(() => {
+        if (isInitialized.current) {
+            updateUrlFromState();
+        }
+    }, [updateUrlFromState]);
+
+    // Listen for browser back/forward
+    useEffect(() => {
+        window.addEventListener('popstate', handlePopState);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+        };
+    }, [handlePopState]);
+
+    return {
+        initializeFromUrl,
+        updateUrlFromState,
+    };
+};
+
+export type UseUrlSyncReturn = ReturnType<typeof useUrlSync>;

package/src/page-settings.ts

@@ -16,6 +16,10 @@ import { Cookie } from './utils';
 export interface PageSettings {
     pageTitle: string;
     themeType?: 'light' | 'dark';
+    publisherAgreement?: {
+        name?: string;
+        email?: string;
+    };
     elements: {
         toolbarContent?: ComponentType;
         defaultMenuContent?: ComponentType;

package/src/pages/admin-dashboard/admin-dashboard.tsx

@@ -23,6 +23,8 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { Welcome } from './welcome';
 import { PublisherAdmin } from './publisher-admin';
 import PersonIcon from '@mui/icons-material/Person';
+import { ScanAdmin } from './scan-admin';
+import SecurityIcon from '@mui/icons-material/Security';
 
 export namespace AdminDashboardRoutes {
     export const ROOT = 'admin-dashboard';
@@ -30,6 +32,7 @@ export namespace AdminDashboardRoutes {
     export const NAMESPACE_ADMIN = createRoute([ROOT, 'namespaces']);
     export const EXTENSION_ADMIN = createRoute([ROOT, 'extensions']);
     export const PUBLISHER_ADMIN = createRoute([ROOT, 'publisher']);
+    export const SCANS_ADMIN = createRoute([ROOT, 'scans']);
 }
 
 const Message: FunctionComponent<{message: string}> = ({ message }) => {
@@ -59,16 +62,37 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' icon={<AssignmentIndIcon />} route={AdminDashboardRoutes.NAMESPACE_ADMIN} />
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' icon={<ExtensionSharpIcon />} route={AdminDashboardRoutes.EXTENSION_ADMIN} />
                 <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' icon={<PersonIcon />} route={AdminDashboardRoutes.PUBLISHER_ADMIN} />
+                <NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.SCANS_ADMIN} label='Scans' icon={<SecurityIcon />} route={AdminDashboardRoutes.SCANS_ADMIN} />
             </Sidepanel>
-            <Box overflow='auto' flex={1}>
+            <Box
+                overflow='auto'
+                flex={1}
+                sx={{
+                    overflowY: 'scroll',
+                    '&::-webkit-scrollbar': {
+                        width: '12px',
+                    },
+                    '&::-webkit-scrollbar-track': {
+                        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                        borderRadius: '6px',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                        },
+                    },
+                }}
+            >
                 <IconButton onClick={toMainPage} sx={{ float: 'right', mt: 1, mr: 1 }}>
                     <HighlightOffIcon/>
                 </IconButton>
-                <Container sx={{ pt: 8, height: '100%' }} maxWidth='lg'>
+                <Container sx={{ pt: 4, pb: 4, px: 3, height: '100%' }} maxWidth='xl'>
                     <Routes>
                         <Route path='/namespaces' element={<NamespaceAdmin/>} />
                         <Route path='/extensions' element={<ExtensionAdmin/>} />
                         <Route path='/publisher' element={<PublisherAdmin/>} />
+                        <Route path='/scans' element={<ScanAdmin/>} />
                         <Route path='*' element={<Welcome/>} />
                     </Routes>
                 </Container>

package/src/pages/admin-dashboard/publisher-admin.tsx

@@ -17,7 +17,7 @@ import { SearchListContainer } from './search-list-container';
 import { PublisherDetails } from './publisher-details';
 
 export const UpdateContext = createContext({ handleUpdate: () => { } });
-export const PublisherAdmin: FunctionComponent = props => {
+export const PublisherAdmin: FunctionComponent = () => {
     const { pageSettings, service, user, handleError } = useContext(MainContext);
 
     const abortController = useRef<AbortController>(new AbortController());

package/src/pages/admin-dashboard/publisher-revoke-dialog.tsx

@@ -61,6 +61,7 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
     const tokenCount = props.publisherInfo.activeAccessTokenNum;
     const extensionCount = props.publisherInfo.extensions.filter(e => e.active).length;
     const hasAgreement = props.publisherInfo.user.publisherAgreement?.status !== 'none';
+
     return <>
         <Button
             variant='contained'
@@ -74,7 +75,7 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
             <DialogTitle >Revoke Publisher Contributions</DialogTitle>
             <DialogContent>
                 <DialogContentText component='div'>
-                    <Typography>
+                    <Typography component='div'>
                         {
                             !tokenCount && !extensionCount && !hasAgreement ?
                             <>

package/src/pages/admin-dashboard/scan-admin.tsx

@@ -0,0 +1,109 @@
+/********************************************************************************
+ * 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 React, { FunctionComponent, useContext } from 'react';
+import { Box, Typography } from '@mui/material';
+import { ScanProvider } from '../../context/scan-admin';
+import { useTabNavigation, useUrlSync } from '../../hooks/scan-admin';
+import {
+    TabToolbar,
+    TabPanel,
+    ScansTabContent,
+    QuarantinedTabContent,
+    AutoRejectedTabContent,
+    AllowListTabContent,
+    BlockListTabContent,
+    QuarantineDialog,
+    FileDialog,
+} from '../../components/scan-admin';
+import { MainContext } from '../../context';
+
+/**
+ * Inner component that consumes the ScanContext.
+ * Uses lean tab components that consume context via hooks.
+ */
+const ScanAdminContent: FunctionComponent = () => {
+    const { selectedTab, setTab } = useTabNavigation();
+
+    // Sync state with URL parameters for bookmarkable URLs and browser navigation
+    useUrlSync();
+
+    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+        setTab(newValue);
+    };
+
+    return (
+        <Box sx={{
+            width: 'min(1500px, 100vw - 280px)',
+            maxWidth: 'none',
+            mx: 'auto',
+            px: 2,
+            pb: 3,
+            position: 'relative',
+            left: '50%',
+            transform: 'translateX(-50%)',
+        }}>
+            <Typography variant='h5' gutterBottom sx={{ mb: 2 }}>
+                Extension Scans
+            </Typography>
+            <Box sx={{ width: '100%' }}>
+                <TabToolbar
+                    selectedTab={selectedTab}
+                    onTabChange={handleTabChange}
+                    tabs={['Scans', 'Quarantined', 'Auto Rejected', 'Allowed Files', 'Blocked Files']}
+                />
+
+                {/* Tab panels - each tab content component consumes context via hooks */}
+                <TabPanel value={selectedTab} index={0}>
+                    <ScansTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={1}>
+                    <QuarantinedTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={2}>
+                    <AutoRejectedTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={3}>
+                    <AllowListTabContent />
+                </TabPanel>
+
+                <TabPanel value={selectedTab} index={4}>
+                    <BlockListTabContent />
+                </TabPanel>
+            </Box>
+
+            {/* Dialogs - consume context via hooks */}
+            <QuarantineDialog />
+            <FileDialog />
+        </Box>
+    );
+};
+
+/**
+ * Main ScanAdmin component that provides the context.
+ * This is the entry point for the scan administration feature.
+ */
+export const ScanAdmin: FunctionComponent = () => {
+    const { service, handleError } = useContext(MainContext);
+
+    return (
+        <ScanProvider service={service} handleError={handleError}>
+            <ScanAdminContent />
+        </ScanProvider>
+    );
+};
+
+export default ScanAdmin;

package/src/pages/admin-dashboard/welcome.tsx

@@ -27,6 +27,7 @@ export const Welcome: FunctionComponent = props => {
                     <WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
                     <WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
                     <WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.SCANS_ADMIN} label='Scans' description='View security scan results and manage quarantined extensions' />
                 </Grid>
             </Paper>
         </Grid>

package/src/pages/extension-detail/extension-detail-overview.tsx

@@ -141,6 +141,13 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
         </>;
     };
 
+    const renderIdentifierSection = (): ReactNode => {
+        return <>
+            <Typography variant='h6'>Unique Identifier</Typography>
+            <Typography variant='body2'><code>{`${extension.namespace}.${extension.name}`}</code></Typography>
+        </>;
+    };
+
     const renderAliasesSection = (otherAliases: string[], sx: SxProps<Theme>): ReactNode => {
         const { extension } = props;
         const aliasButtons = otherAliases.length ?
@@ -321,6 +328,13 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                     (otherAliases.length || extension.versionAlias.length) ? <Box>{renderAliasesSection(otherAliases, tagButton)}</Box> : ''
                 }
             </Box>
+
+            <Box sx={resourcesGroup}>
+                <Box>
+                    {renderIdentifierSection()}
+                </Box>
+            </Box>
+
             <Box sx={resourcesGroup}>
                 {
                     extension.categories && extension.categories.length > 0 ?
@@ -331,7 +345,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                 }
                 {
                     tags && tags.length > 0 ?
-                        <Box mt={2}>
+                        <Box mt={extension.categories && extension.categories.length > 0 ? 2 : 0}>
                             {renderButtonList('search', 'Tags', tags, tagButton)}
                         </Box>
                         : null
@@ -392,4 +406,4 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
 export interface ExtensionDetailOverviewProps {
     extension: Extension;
     selectVersion: (version: string) => void;
-}
+}