openvsx-webui-test 0.17.1

package/src/pages/user/user-settings-delete-extension.tsx

@@ -0,0 +1,81 @@
+/** ******************************************************************************
+ * Copyright (c) 2025 Precies. Software OU and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ * ****************************************************************************** */
+
+import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
+import { Box } from '@mui/material';
+import { MainContext } from '../../context';
+import { isError, Extension, TargetPlatformVersion } from '../../extension-registry-types';
+import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
+import { ExtensionVersionContainer } from '../admin-dashboard/extension-version-container';
+import { useNavigate } from 'react-router';
+import { UserSettingsRoutes } from './user-settings';
+
+export const UserSettingsDeleteExtension: FunctionComponent<UserSettingsDeleteExtensionProps> = props => {
+    const navigate = useNavigate();
+    const abortController = useRef<AbortController>(new AbortController());
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    useEffect(() => {
+        findExtension();
+    }, [props.namespace, props.extension]);
+
+    const [loading, setLoading] = useState(false);
+
+    const { service, handleError } = useContext(MainContext);
+    const [extension, setExtension] = useState<Extension | undefined>(undefined);
+    const findExtension = async () => {
+        try {
+            setLoading(true);
+            const extensionDetail = await service.getExtension(abortController.current, props.namespace, props.extension);
+            if (isError(extensionDetail)) {
+                throw extensionDetail;
+            }
+            setExtension(extensionDetail);
+            setLoading(false);
+        } catch (err) {
+            setLoading(false);
+            setExtension(undefined);
+            if (err && err.status === 404) {
+                navigate(UserSettingsRoutes.EXTENSIONS);
+            } else {
+                handleError(err);
+            }
+        }
+    };
+
+    const onRemove = async (targetPlatformVersions?: TargetPlatformVersion[]) => {
+        if (extension == null) {
+            return;
+        }
+
+        await service.deleteExtensions(abortController.current, { namespace: extension.namespace, extension: extension.name, targetPlatformVersions: targetPlatformVersions?.map(({ version, targetPlatform }) => ({ version, targetPlatform })) });
+        await findExtension();
+    };
+
+    return (
+        <Box>
+            <DelayedLoadIndicator loading={loading} />
+            {
+                extension ?
+                    <ExtensionVersionContainer onRemove={onRemove} extension={extension} />
+                    : ''
+            }
+        </Box>
+    );
+};
+
+export interface UserSettingsDeleteExtensionProps {
+    namespace: string;
+    extension: string;
+}

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

@@ -0,0 +1,91 @@
+/** ******************************************************************************
+ * Copyright (c) 2022 Precies. Software and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ * ****************************************************************************** */
+
+import React, { FunctionComponent, useContext, useEffect, useState, useRef } from 'react';
+import { Extension } from '../../extension-registry-types';
+import { Box, Typography } from '@mui/material';
+import { PublishExtensionDialog } from './publish-extension-dialog';
+import { UserExtensionList } from './user-extension-list';
+import { isError } from '../../extension-registry-types';
+import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
+import { MainContext } from '../../context';
+
+export const UserSettingsExtensions: FunctionComponent = () => {
+
+    const [loading, setLoading] = useState(true);
+    const [extensions, setExtensions] = useState(Array<Extension>());
+    const { user, service, handleError } = useContext(MainContext);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        updateExtensions();
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const handleExtensionPublished = () => {
+        setLoading(true);
+        updateExtensions();
+    };
+
+    const updateExtensions = async (): Promise<void> => {
+        if (!user) {
+            return;
+        }
+        try {
+            const response = await service.getExtensions(abortController.current);
+            if (isError(response)) {
+                throw response;
+            }
+
+            const extensions = response as Extension[];
+            setExtensions(extensions);
+            setLoading(false);
+        } catch (err) {
+            handleError(err);
+            setLoading(false);
+        }
+    };
+
+    return <>
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' },
+                alignItems: { xs: 'center', sm: 'center', md: 'normal', lg: 'normal', xl: 'normal' }
+            }}
+        >
+            <Box>
+                <Typography variant='h5' gutterBottom>Extensions</Typography>
+            </Box>
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: { xs: 'center', sm: 'center', md: 'normal', lg: 'normal', xl: 'normal' }
+                }}
+            >
+                <Box mr={1} mb={1}>
+                    <PublishExtensionDialog extensionPublished={handleExtensionPublished}/>
+                </Box>
+            </Box>
+        </Box>
+        <Box mt={2}>
+            <DelayedLoadIndicator loading={loading} />
+            {
+                extensions && extensions.length > 0
+                ? <UserExtensionList extensions={extensions} loading={loading} canDelete />
+                : <Typography  variant='body1'>No extensions published under this namespace yet.</Typography>
+            }
+        </Box>
+    </>;
+};

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

@@ -0,0 +1,148 @@
+/********************************************************************************
+ * Copyright (c) 2020 TypeFox and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React, { FunctionComponent, createContext, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+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-dashboard';
+import { Namespace, UserData } from '../../extension-registry-types';
+import { NamespaceChangeDialog } from '../admin-dashboard/namespace-change-dialog';
+import { UserNamespaceMemberList } from './user-namespace-member-list';
+import { UserNamespaceDetails } from './user-namespace-details';
+
+export interface NamespaceDetailConfig {
+    defaultMemberRole?: 'contributor' | 'owner';
+}
+export const NamespaceDetailConfigContext = createContext<NamespaceDetailConfig>({});
+
+const NamespaceDetailContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({
+    flex: 5,
+    padding: theme.spacing(0, 1),
+    [theme.breakpoints.only('md')]: {
+        width: '80%'
+    },
+    [theme.breakpoints.down('sm')]: {
+        width: '100%'
+    }
+}));
+
+const WarningPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({
+    maxWidth: '800px',
+    margin: `0 ${theme.spacing(6)} ${theme.spacing(4)} ${theme.spacing(6)}`,
+    padding: theme.spacing(2),
+    display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+        margin: `0 0 ${theme.spacing(2)} 0`,
+    }
+}));
+
+const NamespaceHeader = styled(Box)(({ theme }: { theme: Theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        alignItems: 'center'
+    }
+}));
+
+export const NamespaceDetail: FunctionComponent<NamespaceDetailProps> = props => {
+    const [changeDialogIsOpen, setChangeDialogIsOpen] = useState(false);
+    const { pathname } = useLocation();
+
+    const handleCloseChangeDialog = async () => {
+        setChangeDialogIsOpen(false);
+    };
+    const handleOpenChangeDialog = () => {
+        setChangeDialogIsOpen(true);
+    };
+
+    const warningColor = props.theme === 'dark' ? '#fff' : '#151515';
+    return <>
+        <NamespaceDetailContainer container direction='column' spacing={4}>
+            {
+                !props.namespace.verified && props.namespaceAccessUrl
+                ? <Grid item>
+                    <WarningPaper
+                        sx={{
+                            backgroundColor: `warning.${props.theme}`,
+                            color: warningColor,
+                            '& a': {
+                                color: warningColor,
+                                textDecoration: 'underline'
+                            }
+                        }}>
+                        <WarningIcon fontSize='large' />
+                        <Box ml={1}>
+                            This namespace is not verified. <Link
+                                href={props.namespaceAccessUrl}
+                                target='_blank' >
+                                See the documentation
+                            </Link> to learn about claiming namespaces.
+                        </Box>
+                    </WarningPaper>
+                </Grid>
+                : null
+            }
+            <Grid item>
+                <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>
+                        : null
+                    }
+                </NamespaceHeader>
+            </Grid>
+            {
+                props.namespace.membersUrl
+                ? <Grid item>
+                    <UserNamespaceMemberList
+                        setLoadingState={props.setLoadingState}
+                        namespace={props.namespace}
+                        filterUsers={props.filterUsers}
+                        fixSelf={props.fixSelf} />
+                </Grid>
+                : null
+            }
+            {
+                props.namespace.detailsUrl
+                ? <Grid item>
+                    <UserNamespaceDetails namespace={props.namespace}/>
+                </Grid>
+                : null
+            }
+            <Grid item>
+                <UserNamespaceExtensionListContainer
+                    namespace={props.namespace}
+                />
+            </Grid>
+        </NamespaceDetailContainer>
+        <NamespaceChangeDialog
+            open={changeDialogIsOpen}
+            onClose={handleCloseChangeDialog}
+            namespace={props.namespace}
+            setLoadingState={props.setLoadingState} />
+    </>;
+};
+
+export interface NamespaceDetailProps {
+    namespace: Namespace;
+    filterUsers: (user: UserData) => boolean;
+    fixSelf: boolean;
+    setLoadingState: (loading: boolean) => void;
+    namespaceAccessUrl?: string;
+    theme?: string;
+}

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

@@ -0,0 +1,157 @@
+/********************************************************************************
+ * Copyright (c) 2020 TypeFox and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React, { FunctionComponent, useContext, useEffect, useState, useRef, ReactNode } from 'react';
+import { Box, Typography, Tabs, Tab, useTheme, useMediaQuery, Link } from '@mui/material';
+import { Namespace, UserData } from '../../extension-registry-types';
+import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
+import { MainContext } from '../../context';
+import { NamespaceDetail } from './user-settings-namespace-detail';
+import { CreateNamespaceDialog } from './create-namespace-dialog';
+
+interface NamespaceTabProps {
+    chosenNamespace: Namespace,
+    onChange: (value: Namespace) => void,
+    namespaces: Namespace[]
+}
+
+const NamespacesTabs = (props: NamespaceTabProps) => {
+    const theme = useTheme();
+    const isATablet = useMediaQuery(theme.breakpoints.down('md'));
+    return <Tabs
+        orientation={isATablet ? 'horizontal' : 'vertical'}
+        value={props.chosenNamespace}
+        onChange={(event, value) => props.onChange(value)}
+        variant={isATablet ? 'scrollable' : 'standard'}
+        scrollButtons={isATablet ? 'auto' : false}
+        indicatorColor='secondary'
+        sx={{ width: { xs: '80%', sm: '80%', md: '80%', lg: '160px', xl: '160px' } }}
+    >
+        {
+            props.namespaces.map(namespace => {
+                return <Tab
+                    sx={{
+                        root: {
+                            minHeight: '24px'
+                        },
+                        wrapper: {
+                            textTransform: 'none'
+                        }
+                    }}
+                    key={'nmspc-' + namespace.name}
+                    value={namespace}
+                    label={namespace.name}
+                />;
+            })
+        }
+    </Tabs>;
+};
+
+export const UserSettingsNamespaces: FunctionComponent = () => {
+
+    const [loading, setLoading] = useState(true);
+    const [namespaces, setNamespaces] = useState<Array<Namespace>>([]);
+    const [chosenNamespace, setChosenNamespace] = useState<Namespace>();
+    const { pageSettings, service, user, handleError } = useContext(MainContext);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        initNamespaces();
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const handleChangeNamespace = (value: Namespace): void => {
+        doHandleChangeNamespace(value);
+    };
+
+    const doHandleChangeNamespace = async(chosenNamespace: Namespace): Promise<void> => {
+        setChosenNamespace(chosenNamespace);
+    };
+
+    const initNamespaces = async(): Promise<void> => {
+        try {
+            const namespaces = await service.getNamespaces(abortController.current);
+            const chosenNamespace = namespaces.length ? namespaces[0] : undefined;
+            setNamespaces(namespaces);
+            setChosenNamespace(chosenNamespace);
+            setLoading(false);
+        } catch (err) {
+            handleError(err);
+            setLoading(false);
+        }
+    };
+
+    const handleNamespaceCreated = () => {
+        setLoading(true);
+        initNamespaces();
+    };
+
+    let namespaceContainer: ReactNode = null;
+    const namespaceAccessUrl = pageSettings.urls.namespaceAccessInfo;
+    if (namespaces.length > 0 && chosenNamespace) {
+        namespaceContainer = <Box
+            sx={{
+                display: 'flex',
+                width: '100%',
+                flexDirection: { xs: 'column', sm: 'column', md: 'column', lg: 'row', xl: 'row' },
+                alignItems: { xs: 'center', sm: 'center', md: 'center', lg: 'normal', xl: 'normal' }
+            }}
+        >
+            <NamespacesTabs
+                chosenNamespace={chosenNamespace}
+                namespaces={namespaces}
+                onChange={handleChangeNamespace}
+            />
+            <NamespaceDetail
+                namespace={chosenNamespace}
+                setLoadingState={(loading: boolean) => setLoading(loading)}
+                filterUsers={(foundUser: UserData) => foundUser.provider !== user?.provider || foundUser.loginName !== user?.loginName}
+                fixSelf={true}
+                namespaceAccessUrl={namespaceAccessUrl}
+                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>;
+    }
+
+    return <>
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' },
+                alignItems: { xs: 'center', sm: 'center', md: 'normal', lg: 'normal', xl: 'normal' }
+            }}
+        >
+            <Box>
+                <Typography variant='h5' gutterBottom>Namespaces</Typography>
+            </Box>
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    justifyContent: { xs: 'center', sm: 'center', md: 'normal', lg: 'normal', xl: 'normal' }
+                }}
+            >
+                <Box sx={{ mr: 1, mb: 1 }}>
+                    <CreateNamespaceDialog
+                        namespaceCreated={handleNamespaceCreated}
+                    />
+                </Box>
+            </Box>
+        </Box>
+        <Box mt={2}>
+            <DelayedLoadIndicator loading={loading}/>
+            {namespaceContainer}
+        </Box>
+    </>;
+};

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

@@ -0,0 +1,92 @@
+/********************************************************************************
+ * Copyright (c) 2019 TypeFox and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React, { FunctionComponent, ReactNode } from 'react';
+import { Theme, Grid, Typography, Avatar } from '@mui/material';
+import { toLocalTime } from '../../utils';
+import { UserData } from '../../extension-registry-types';
+import { UserPublisherAgreement } from './user-publisher-agreement';
+import styled from '@mui/material/styles/styled';
+
+const ProfileGrid = styled(Grid)(({ theme }: {theme: Theme}) => ({
+    [theme.breakpoints.up('lg')]: {
+        justifyContent: 'space-between'
+    },
+    ['@media(max-width: 1040px)']: {
+        flexDirection: 'row-reverse',
+        justifyContent: 'flex-end',
+        '& > div:first-of-type': {
+            marginLeft: '2rem'
+        }
+    },
+    [theme.breakpoints.down('sm')]: {
+        textAlign: 'center',
+        flexDirection: 'column-reverse',
+        '& > div:first-of-type': {
+            marginLeft: '0',
+            marginTop: '2rem'
+        }
+    },
+    marginBottom: theme.spacing(2)
+}));
+
+export const UserSettingsProfile: FunctionComponent<UserSettingsProfileProps> = props => {
+
+    const user = props.user;
+    let publisherAgreementPanel: ReactNode = null;
+    if (user.publisherAgreement) {
+        if (props.isAdmin) {
+            let statusText = 'has not signed';
+            if (user.publisherAgreement.status === 'signed') {
+                statusText = 'has signed';
+            } else if (user.publisherAgreement.status === 'outdated') {
+                statusText = 'has signed an outdated version of';
+            }
+
+            publisherAgreementPanel = <Typography variant='body1' title={toLocalTime(user.publisherAgreement.timestamp)}>
+                {user.loginName} {statusText} the Eclipse publisher agreement.
+            </Typography>;
+        } else {
+            publisherAgreementPanel = <Grid container>
+                <Grid item xs={12}>
+                    <UserPublisherAgreement user={user} />
+                </Grid>
+            </Grid>;
+        }
+    }
+
+    return <>
+        <ProfileGrid container>
+            <Grid item>
+                <Typography variant='h5' gutterBottom>Profile</Typography>
+                <Typography variant='body1'>Login name: {user.loginName}</Typography>
+                <Typography variant='body1'>Full name: {user.fullName}</Typography>
+            </Grid>
+            <Grid item>
+                <Avatar
+                    variant='rounded'
+                    src={user.avatarUrl}
+                    sx={{
+                        width: '150px',
+                        height: '150px',
+                        my: 0,
+                        mx: { xs: 'auto', sm: 'auto', md: 0, lg: 0, xl: 0 }
+                    }}
+                />
+            </Grid>
+        </ProfileGrid>
+        {publisherAgreementPanel}
+    </>;
+};
+
+export interface UserSettingsProfileProps {
+    user: UserData;
+    isAdmin?: boolean;
+}