openvsx-webui-test 0.17.1

package/src/pages/user/user-namespace-extension-list-item.tsx

@@ -0,0 +1,135 @@
+/********************************************************************************
+ * 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, { useContext, FunctionComponent, useState, useEffect, useRef, ReactNode, MouseEvent } from 'react';
+import { Extension } from '../../extension-registry-types';
+import { Paper, Typography, Box, styled, IconButton } from '@mui/material';
+import { Link as RouteLink, useNavigate } from 'react-router-dom';
+import { MainContext } from '../../context';
+import { createRoute } from '../../utils';
+import { Timestamp } from '../../components/timestamp';
+import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { UserSettingsRoutes } from './user-settings';
+
+const getOpacity = (extension: Extension) => {
+    if (extension.deprecated) {
+        return 0.5;
+    } else if (extension.active === false) {
+        return 0.75;
+    } else {
+        return 1;
+    }
+};
+
+const noOverflow = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    ml: 0.5
+};
+
+const Paragraph = styled(Box)({
+    display: 'flex',
+    justifyContent: 'space-between',
+});
+
+export const UserNamespaceExtensionListItem: FunctionComponent<UserNamespaceExtensionListItemProps> = props => {
+    const { pageSettings, service } = useContext(MainContext);
+    const [icon, setIcon] = useState<string | undefined>(undefined);
+    const { extension } = props;
+    const route = extension && createRoute([ExtensionDetailRoutes.ROOT, extension.namespace, extension.name]) || '';
+    const deleteRoute = extension && createRoute([UserSettingsRoutes.EXTENSIONS, extension.namespace, extension.name, 'delete']) || '';
+    const inactive = extension.active === false;
+    const abortController = useRef<AbortController>(new AbortController());
+    const navigate = useNavigate();
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+    useEffect(() => {
+        if (icon) {
+            URL.revokeObjectURL(icon);
+        }
+
+        service.getExtensionIcon(abortController.current, extension).then(setIcon);
+    }, [extension]);
+
+    let status: ReactNode = null;
+    if (inactive) {
+        status = <Box mt={0.25}>
+            Deactivated
+        </Box>;
+    } else if (extension.timestamp) {
+        status = <Paragraph mt={0.25}>
+            <span>Published:</span>
+            <Timestamp
+                value={extension.timestamp}
+                sx={noOverflow} />
+        </Paragraph>;
+    }
+
+    const gotoDeleteRoute = (e: MouseEvent) => {
+        e.preventDefault();
+        navigate(deleteRoute);
+    };
+
+    return (
+        extension ? (
+            <RouteLink to={route} style={{ textDecoration: 'none' }}>
+                <Paper
+                    elevation={3}
+                    title={`${extension.namespace}.${extension.name} ${extension.version} ${inactive ? '(deactivated)' : ''}`}
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        p: 1,
+                        opacity: getOpacity(extension),
+                        filter: extension.deprecated ? 'grayscale(100%)' : null
+                    }}>
+                    <Box
+                        component='img'
+                        src={icon ?? pageSettings?.urls.extensionDefaultIcon ?? ''}
+                        alt={extension.displayName ?? extension.name}
+                        sx={{
+                            flex: '0 0 15%',
+                            display: 'block',
+                            mr: 2,
+                            width: '3rem',
+                            maxHeight: '4rem',
+                        }}
+                    />
+                    <Box component='div' sx={{ flex: '1', overflow: 'hidden' }}>
+                        <Paragraph>
+                            <Typography variant='h6' noWrap sx={{ fontSize: '1.15rem' }}>
+                                {extension.displayName ?? extension.name}
+                            </Typography>
+                            {props.canDelete && deleteRoute && <IconButton onClick={gotoDeleteRoute}>
+                                <DeleteIcon color='error' sx={{ fontSize: '1.15rem' }}/>
+                            </IconButton>}
+                        </Paragraph>
+                        <Paragraph>
+                            <span>Version:</span>
+                            <Box component='span' sx={noOverflow}>{extension.version}</Box>
+                        </Paragraph>
+                        {status}
+                    </Box>
+                </Paper>
+            </RouteLink>
+        )
+            : null
+    );
+};
+
+export interface UserNamespaceExtensionListItemProps {
+    extension: Extension;
+    canDelete?: boolean
+}

package/src/pages/user/user-namespace-extension-list.tsx

@@ -0,0 +1,72 @@
+/********************************************************************************
+ * 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 } from 'react';
+import { Namespace, isError, Extension, ErrorResult } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+import { UserExtensionList } from './user-extension-list';
+import { Typography } from '@mui/material';
+
+export const UserNamespaceExtensionListContainer: FunctionComponent<UserNamespaceExtensionListContainerProps> = props => {
+    const [extensions, setExtensions] = useState<Extension[]>();
+    const [loading, setLoading] = useState<boolean>(true);
+    const context = useContext(MainContext);
+
+    const abortController = useRef<AbortController>(new AbortController());
+    useEffect(() => {
+        updateExtensions();
+        return () => abortController.current.abort();
+    }, []);
+
+    useEffect(() => {
+        setExtensions(undefined);
+        setLoading(true);
+        updateExtensions();
+    }, [props.namespace.name]);
+
+    const updateExtensions = async (): Promise<void> => {
+        const extensionsURLs: string[] = Object.keys(props.namespace.extensions).map((key: string) => props.namespace.extensions[key]);
+
+        const getExtension = async (url: string) => {
+            let result: Extension | ErrorResult;
+            try {
+                result = await context.service.getExtensionDetail(abortController.current, url);
+                if (isError(result)) {
+                    throw result;
+                }
+                return result;
+            } catch (error) {
+                context.handleError(error);
+                return undefined;
+            }
+        };
+
+        const extensionUnfiltered = await Promise.all(
+            extensionsURLs.map((url: string) => getExtension(url))
+        );
+        const extensions = extensionUnfiltered.filter(e => e != null) as Extension[];
+
+        setExtensions(extensions);
+        setLoading(false);
+    };
+
+    return <>
+        <Typography variant='h5'>Extensions</Typography>
+        {
+            extensions && extensions.length > 0
+                ? <UserExtensionList extensions={extensions} loading={loading} canDelete />
+                : <Typography  variant='body1'>No extensions published under this namespace yet.</Typography>
+        }
+    </>;
+};
+
+export interface UserNamespaceExtensionListContainerProps {
+    namespace: Namespace;
+}

package/src/pages/user/user-namespace-member-component.tsx

@@ -0,0 +1,91 @@
+/********************************************************************************
+ * 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 } from 'react';
+import { Box, Typography, Avatar, Select, MenuItem, Button, SelectChangeEvent } from '@mui/material';
+import { NamespaceMembership, MembershipRole, Namespace, UserData } from '../../extension-registry-types';
+import { MainContext } from '../../context';
+
+export const UserNamespaceMember: FunctionComponent<UserNamespaceMemberProps> = props => {
+    const equalUser = (user1: UserData | undefined, user2: UserData | undefined) => {
+        return user1?.loginName === user2?.loginName && user1?.provider === user2?.provider;
+    };
+
+    const memberUser = props.member.user;
+    const context = useContext(MainContext);
+    const contextUser = context.user;
+    return <Box key={'member:' + memberUser.loginName} p={2} display='flex' alignItems='center'>
+        <Box alignItems='center' overflow='auto' width='33%'>
+            <Typography sx={{ fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis' }}>{memberUser.loginName}</Typography>
+            {memberUser.fullName ? <Typography variant='body2'>{memberUser.fullName}</Typography> : ''}
+        </Box>
+        {
+            memberUser.avatarUrl ?
+                <Box display='flex' alignItems='center'>
+                    <Avatar src={memberUser.avatarUrl}></Avatar>
+                </Box>
+                : ''
+        }
+        <Box
+            sx={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
+            }}
+        >
+            {
+                props.fixSelf && equalUser(memberUser, contextUser) ?
+                    <Box
+                        sx={{
+                            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+                            fontWeight: 500,
+                            lineHeight: '1.75',
+                            letterSpacing: '0.02857em',
+                            textTransform: 'uppercase',
+                            border: '1px solid rgba(0, 0, 0, 0.23)',
+                            borderRadius: 4,
+                            padding: '5px 15px',
+                            fontSize: '0.875rem'
+                        }}
+                    >
+                        Owner
+                    </Box>
+                    :
+                    <>
+                        <Box m={1}>
+                            <Select
+                                variant='outlined'
+                                value={props.member.role}
+                                onChange={(event: SelectChangeEvent<MembershipRole>) => props.onChangeRole(event.target.value as MembershipRole)}>
+                                <MenuItem value='contributor'>Contributor</MenuItem>
+                                <MenuItem value='owner'>Owner</MenuItem>
+                            </Select>
+                        </Box>
+                        <Button
+                            variant='outlined'
+                            sx={{ color: 'error.main', height: 36 }}
+                            onClick={() => props.onRemoveUser()}>
+                            Delete
+                        </Button>
+                    </>
+            }
+        </Box>
+    </Box>;
+};
+
+export interface UserNamespaceMemberProps {
+    namespace: Namespace;
+    member: NamespaceMembership;
+    fixSelf: boolean;
+    onChangeRole: (role: MembershipRole) => void;
+    onRemoveUser: () => void;
+}

package/src/pages/user/user-namespace-member-list.tsx

@@ -0,0 +1,113 @@
+/********************************************************************************
+ * 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, useEffect, useState, useContext, useRef } from 'react';
+import { Box, Typography, Button, Paper } from '@mui/material';
+import { UserNamespaceMember } from './user-namespace-member-component';
+import { Namespace, NamespaceMembership, MembershipRole, isError, UserData } from '../../extension-registry-types';
+import { AddMemberDialog } from './add-namespace-member-dialog';
+import { MainContext } from '../../context';
+
+export const UserNamespaceMemberList: FunctionComponent<UserNamespaceMemberListProps> = props => {
+    const { service, user, handleError } = useContext(MainContext);
+    const [members, setMembers] = useState<NamespaceMembership[]>([]);
+    const [addDialogIsOpen, setAddDialogIsOpen] = useState(false);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        fetchMembers();
+    }, [props.namespace]);
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    const handleCloseAddDialog = async () => {
+        setAddDialogIsOpen(false);
+        fetchMembers();
+    };
+    const handleOpenAddDialog = () => {
+        setAddDialogIsOpen(true);
+    };
+
+    const fetchMembers = async () => {
+        try {
+            const membershipList = await service.getNamespaceMembers(abortController.current, props.namespace);
+            const members = membershipList.namespaceMemberships;
+            setMembers(members);
+        } catch (err) {
+            handleError(err);
+        }
+    };
+
+    const changeRole = async (membership: NamespaceMembership, role: MembershipRole | 'remove') => {
+        try {
+            props.setLoadingState(true);
+            const endpoint = props.namespace.roleUrl;
+            const result = await service.setNamespaceMember(abortController.current, endpoint, membership.user, role);
+            if (isError(result)) {
+                throw result;
+            }
+            await fetchMembers();
+            props.setLoadingState(false);
+        } catch (err) {
+            handleError(err);
+            props.setLoadingState(false);
+        }
+    };
+
+    if (!user) {
+        return null;
+    }
+    return <>
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                mb: 1,
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
+            }}
+        >
+            <Typography variant='h5'>Members</Typography>
+            <Button sx={{ ml: { xs: 2, sm: 2, md: 2, lg: 0, xl: 0 } }} variant='outlined' onClick={handleOpenAddDialog}>
+                Add Namespace Member
+            </Button>
+        </Box>
+        {members.length ?
+            <Paper elevation={3}>
+                {members.map(member =>
+                    <UserNamespaceMember
+                        key={'nspcmbr-' + member.user.loginName + member.user.provider}
+                        namespace={props.namespace}
+                        member={member}
+                        fixSelf={props.fixSelf}
+                        onChangeRole={role => changeRole(member, role)}
+                        onRemoveUser={() => changeRole(member, 'remove')} />)}
+            </Paper> :
+            <Typography variant='body1'>There are no members assigned yet.</Typography>}
+        <AddMemberDialog
+            members={members}
+            namespace={props.namespace}
+            onClose={handleCloseAddDialog}
+            open={addDialogIsOpen}
+            setLoadingState={props.setLoadingState}
+            filterUsers={props.filterUsers} />
+    </>;
+};
+
+export interface UserNamespaceMemberListProps {
+    namespace: Namespace;
+    setLoadingState: (loadingState: boolean) => void;
+    filterUsers: (user: UserData) => boolean;
+    fixSelf: boolean;
+}

package/src/pages/user/user-publisher-agreement.tsx

@@ -0,0 +1,164 @@
+/********************************************************************************
+ * 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, useState, useEffect, useRef, ReactNode } from 'react';
+import {
+    Box, Typography, Paper, Button, Dialog, DialogContent, DialogContentText, Link
+} from '@mui/material';
+import { UserData, isError, ReportedError } from '../../extension-registry-types';
+import { SanitizedMarkdown } from '../../components/sanitized-markdown';
+import { Timestamp } from '../../components/timestamp';
+import { ButtonWithProgress } from '../../components/button-with-progress';
+import { createAbsoluteURL } from '../../utils';
+import { MainContext } from '../../context';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementProps> = props => {
+    const { service, pageSettings, updateUser, handleError } = useContext(MainContext);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [working, setWorking] = useState(false);
+    const [agreementText, setAgreementText] = useState('');
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        return () => {
+            abortController.current.abort();
+        };
+    }, []);
+
+    useEffect(() => {
+        if (dialogOpen) {
+            onDialogOpened();
+        }
+    }, [dialogOpen]);
+
+    const signPublisherAgreement = async (): Promise<void> => {
+        try {
+            setWorking(true);
+            const result = await service.signPublisherAgreement(abortController.current);
+            if (isError(result)) {
+                throw result;
+            }
+            updateUser();
+            setDialogOpen(false);
+        } catch (err) {
+            if (!(err as ReportedError).code) {
+                Object.assign(err, { code: 'publisher-agreement-problem' });
+            }
+            handleError(err);
+        } finally {
+            setWorking(false);
+        }
+    };
+
+    const openPublisherAgreement = () => {
+        if (!pageSettings.urls.publisherAgreement) {
+            handleError({ error: 'Publisher agreement text is not available.' });
+        } else {
+            setDialogOpen(true);
+        }
+    };
+
+    const onDialogOpened = async () => {
+        const agreementURL = pageSettings.urls.publisherAgreement;
+        if (agreementURL) {
+            try {
+                const agreementMd = await service.getStaticContent(abortController.current, agreementURL);
+                setAgreementText(agreementMd);
+            } catch (err) {
+                handleError(err);
+            }
+        } else {
+            setAgreementText('Publisher agreement text is not available.');
+        }
+    };
+
+    const onClose = () => {
+        setDialogOpen(false);
+    };
+
+    const user = props.user;
+    if (!user.publisherAgreement) {
+        return null;
+    }
+
+    let content: ReactNode;
+    if (user.publisherAgreement.status === 'signed') {
+        content = <Typography variant='body1'>
+            {
+                user.publisherAgreement.timestamp
+                    ? <>You signed the Eclipse Foundation Open VSX Publisher Agreement <Timestamp value={user.publisherAgreement.timestamp} />.</>
+                    : 'You signed the Eclipse Foundation Open VSX Publisher Agreement.'
+            }
+        </Typography>;
+    } else if (user.additionalLogins?.find(login => login.provider === 'eclipse')) {
+        content = <>
+            <Typography variant='body1'>
+                You need to sign the Eclipse Foundation Open VSX Publisher Agreement before you can publish
+                any extension to this registry.
+            </Typography>
+            <Box mt={2} display='flex' justifyContent='flex-end'>
+                <Button onClick={openPublisherAgreement} variant='outlined' color='secondary'>
+                    Show Publisher Agreement
+                </Button>
+            </Box>
+        </>;
+    } else {
+        content = <>
+            <Typography variant='body1'>
+                You need to sign the Eclipse Foundation Open VSX Publisher Agreement before you can publish
+                any extension to this registry. To start the signing process, please log in with
+                an Eclipse Foundation account.
+            </Typography>
+            <Box mt={2} display='flex' justifyContent='flex-end'>
+                <Link href={createAbsoluteURL([service.serverUrl, 'oauth2', 'authorization', 'eclipse'])}>
+                    <Button variant='outlined' color='secondary'>
+                        Log in with Eclipse
+                    </Button>
+                </Link>
+            </Box>
+        </>;
+    }
+
+    return <>
+        <Paper sx={{ p: 2 }} elevation={3}>{content}</Paper>
+        <Dialog
+            open={dialogOpen}
+            onClose={onClose}
+            maxWidth='md'
+            sx={{ paperScrollPaper: { height: '75%', width: '100%' } }}>
+            <DialogContent>
+                {
+                    agreementText ?
+                        <DialogContentText component='div'>
+                            <SanitizedMarkdown
+                                content={agreementText}
+                                sanitize={false}
+                                linkify={false} />
+                            <Box display='flex' justifyContent='flex-end' >
+                                <ButtonWithProgress working={working} onClick={signPublisherAgreement}>
+                                    Agree
+                                </ButtonWithProgress>
+                            </Box>
+                        </DialogContentText>
+                        :
+                        <Box height={1} display='flex' justifyContent='center' alignItems='center'>
+                            <CircularProgress color='secondary' />
+                        </Box>
+                }
+            </DialogContent>
+        </Dialog>
+    </>;
+
+};
+
+export interface UserPublisherAgreementProps {
+    user: UserData;
+}

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

@@ -0,0 +1,47 @@
+/********************************************************************************
+ * 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, { ChangeEvent, ReactElement } from 'react';
+import { Tabs, Tab, useTheme, useMediaQuery } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom';
+import { createRoute } from '../../utils';
+import { UserSettingsRoutes } from './user-settings';
+
+export const UserSettingTabs = (): ReactElement => {
+
+    const theme = useTheme();
+    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) => {
+        navigate(generateRoute(newTab));
+    };
+
+    const generateRoute = (tab: string) => {
+        return createRoute([UserSettingsRoutes.ROOT, tab]);
+    };
+
+    return (
+        <Tabs
+            value={tab}
+            onChange={handleChange}
+            orientation={isATablet ? 'horizontal' : 'vertical'}
+            centered={isAMobile ? true : false}
+            indicatorColor='secondary'
+        >
+            <Tab value='profile' label='Profile' />
+            <Tab value='tokens' label='Access Tokens' />
+            <Tab value='namespaces' label='Namespaces' />
+            <Tab value='extensions' label='Extensions' />
+        </Tabs>
+    );
+};