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

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

@@ -9,7 +9,17 @@
  ********************************************************************************/
 
 import React, { Fragment, FunctionComponent, ReactNode, useContext, useState, useEffect, useRef } from 'react';
-import { Box, Typography, Divider, Link } from '@mui/material';
+import {
+    Box,
+    Typography,
+    Divider,
+    Link,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogContentText,
+    DialogActions, Button
+} from '@mui/material';
 import { MainContext } from '../../context';
 import { toLocalTime } from '../../utils';
 import { ExtensionReview, Extension, ExtensionReviewList, isEqualUser, isError, UserData } from '../../extension-registry-types';
@@ -17,16 +27,30 @@ import { TextDivider } from '../../components/text-divider';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { ButtonWithProgress } from '../../components/button-with-progress';
 import { Timestamp } from '../../components/timestamp';
-import { ExportRatingStars } from './extension-rating-stars';
+import { ExtensionRatingStars } from './extension-rating-stars';
 import { ExtensionReviewDialog } from './extension-review-dialog';
 
 export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsProps> = props => {
     const [reviewList, setReviewList] = useState<ExtensionReviewList>();
     const [loading, setLoading] = useState<boolean>(true);
     const [revoked, setRevoked] = useState<boolean>(false);
+    const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+    const [removeReviewSet, setRemoveReviewSet] = useState(new Set<string>());
     const context = useContext(MainContext);
     const abortController = useRef<AbortController>(new AbortController());
 
+    const addRemoveReviewRequest = (loginName: string) => {
+        const newSet = new Set<string>(removeReviewSet);
+        newSet.add(loginName);
+        setRemoveReviewSet(newSet);
+    };
+
+    const deleteRemoveReviewRequest = (loginName: string) => {
+        const newSet = new Set<string>(removeReviewSet);
+        newSet.delete(loginName);
+        setRemoveReviewSet(newSet);
+    };
+
     useEffect(() => {
         updateReviews();
         return () => abortController.current.abort();
@@ -87,6 +111,58 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
         }
     };
 
+    const handleAdminRemoveReviewButton = async (r: ExtensionReview) => {
+        addRemoveReviewRequest(r.user.loginName);
+        try {
+            const result = await context.service.deleteUserReview(abortController.current, props.extension, r.user);
+            if (isError(result)) {
+                throw result;
+            }
+            saveCompleted();
+        } catch (err) {
+            context.handleError(err);
+        } finally {
+            deleteRemoveReviewRequest(r.user.loginName);
+        }
+    };
+
+    const renderAdminRemoveButton = (r: ExtensionReview): ReactNode => {
+        return <>
+            <Button
+                variant='contained'
+                color='error'
+                onClick={() => setRemoveDialogOpen(true)} >
+                Remove review
+            </Button>
+            <Dialog
+                open={removeDialogOpen}
+                onClose={() => setRemoveDialogOpen(false)}>
+                <DialogTitle>Remove Review</DialogTitle>
+                <DialogContent>
+                    <DialogContentText component='div'>
+                        <Typography>Confirm removal of review comment from <code>{r.user.loginName}</code>?</Typography>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant='contained'
+                        color='primary'
+                        onClick={() => setRemoveDialogOpen(false)} >
+                        Cancel
+                    </Button>
+                    <ButtonWithProgress
+                        autoFocus
+                        color='error'
+                        sx={{ ml: 1 }}
+                        working={removeReviewSet.has(r.user.loginName)}
+                        onClick={() => handleAdminRemoveReviewButton(r)} >
+                        Remove review
+                    </ButtonWithProgress>
+                </DialogActions>
+            </Dialog>
+            </>;
+    };
+
     const renderReviewList = (list?: ExtensionReviewList): ReactNode => {
         if (!list) {
             return '';
@@ -101,37 +177,47 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
 
     const renderReview = (r: ExtensionReview): ReactNode => {
         return <Fragment key={r.user.loginName + r.timestamp}>
-            <Box my={2}>
-                <Box display='flex'>
-                    {
-                        r.timestamp ?
-                        <>
-                            <Typography variant='body2'><Timestamp value={r.timestamp}/></Typography>
-                            <TextDivider />
-                        </>
-                        : null
-                    }
-                    <Typography variant='body2'>
+            <Box display='flex' justifyContent='space-between'>
+                <Box my={2}>
+                    <Box display='flex'>
                         {
-                            r.user.homepage ?
-                            <Link
-                                href={r.user.homepage}
-                                color='text.primary'
-                                underline='hover'
-                            >
-                                {r.user.loginName}
-                            </Link>
-                            :
-                            r.user.loginName
+                            r.timestamp ?
+                            <>
+                                <Typography variant='body2'><Timestamp value={r.timestamp}/></Typography>
+                                <TextDivider />
+                            </>
+                            : null
                         }
-                    </Typography>
-                </Box>
-                <Box display='flex' alignItems='center'>
-                    <ExportRatingStars number={r.rating} />
-                </Box>
-                <Box overflow='auto'>
-                    <Typography variant='body1' sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.comment}</Typography>
+                        <Typography variant='body2'>
+                            {
+                                r.user.homepage ?
+                                <Link
+                                    href={r.user.homepage}
+                                    color='text.primary'
+                                    underline='hover'
+                                >
+                                    {r.user.loginName}
+                                </Link>
+                                :
+                                r.user.loginName
+                            }
+                        </Typography>
+                    </Box>
+                    <Box display='flex' alignItems='center'>
+                        <ExtensionRatingStars number={r.rating} />
+                    </Box>
+                    <Box overflow='auto'>
+                        <Typography variant='body1' sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.comment}</Typography>
+                    </Box>
                 </Box>
+                {
+                    context.user?.role === 'admin' ?
+                        <Box mb={2} display='flex' alignItems='end'>
+                            {renderAdminRemoveButton(r)}
+                        </Box>
+                        :
+                        null
+                }
             </Box>
             <Divider />
         </Fragment>;

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

@@ -24,7 +24,7 @@ import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { HoverPopover } from '../../components/hover-popover';
 import { Extension, UserData, isError } from '../../extension-registry-types';
 import { TextDivider } from '../../components/text-divider';
-import { ExportRatingStars } from './extension-rating-stars';
+import { ExtensionRatingStars } from './extension-rating-stars';
 import { NamespaceDetailRoutes } from '../namespace-detail/namespace-detail';
 import { ExtensionDetailOverview } from './extension-detail-overview';
 import { ExtensionDetailChanges } from './extension-detail-changes';
@@ -399,7 +399,7 @@ export const ExtensionDetail: FunctionComponent = () => {
                             `Average rating: ${getRoundedRating(extension.averageRating)} out of 5 (${extension.reviewCount} reviews)`
                             : 'Not rated yet'
                     }>
-                    <ExportRatingStars number={extension.averageRating ?? 0} fontSize='small' />
+                    <ExtensionRatingStars number={extension.averageRating ?? 0} fontSize='small' />
                     ({reviewCountFormatted})
                 </StyledLink>
                 </Box>

package/src/pages/extension-detail/extension-rating-stars.tsx

@@ -13,12 +13,12 @@ import StarIcon from '@mui/icons-material/Star';
 import StarHalfIcon from '@mui/icons-material/StarHalf';
 import { Box } from '@mui/material';
 
-export interface ExportRatingStarsProps {
+export interface ExtensionRatingStarsProps {
     number: number;
     fontSize?: 'inherit' | 'small' | 'medium' | 'large';
 }
 
-export const ExportRatingStars: FunctionComponent<ExportRatingStarsProps> = props => {
+export const ExtensionRatingStars: FunctionComponent<ExtensionRatingStarsProps> = props => {
     const getStar = (i: number): ReactNode => {
         const starsNumber = props.number;
         const fontSize = props.fontSize ?? 'medium';

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

@@ -15,7 +15,7 @@ import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import { MainContext } from '../../context';
 import { ExtensionDetailRoutes } from '../extension-detail/extension-detail';
 import { SearchEntry } from '../../extension-registry-types';
-import { ExportRatingStars } from '../extension-detail/extension-rating-stars';
+import { ExtensionRatingStars } from '../extension-detail/extension-rating-stars';
 import { createRoute } from '../../utils';
 
 export const ExtensionListItem: FunctionComponent<ExtensionListItemProps> = props => {
@@ -92,7 +92,7 @@ export const ExtensionListItem: FunctionComponent<ExtensionListItemProps> = prop
                         </Typography>
                     </Box>
                     <Box display='flex' justifyContent='center'>
-                        <ExportRatingStars number={extension.averageRating ?? 0} fontSize='small' />
+                        <ExtensionRatingStars number={extension.averageRating ?? 0} fontSize='small' />
                         &nbsp;
                         {downloadCountFormatted != "0" && <><SaveAltIcon /> {downloadCountFormatted}</>}
                     </Box>

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

@@ -63,19 +63,44 @@ export const UserNamespaceExtensionListItem: FunctionComponent<UserNamespaceExte
         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 renderStatus = (): ReactNode => {
+        if (extension.reviewStatus === 'under_review') {
+            return <Box mt={0.25}>
+                <Typography variant='body2' sx={{ fontWeight: 600 }}>Under review</Typography>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                    {extension.reviewMessage ?? 'Your extension is being reviewed. Please contact support for details.'}
+                </Typography>
+            </Box>;
+        }
+
+        if (extension.reviewStatus === 'rejected') {
+            return <Box mt={0.25}>
+                <Typography variant='body2' sx={{ fontWeight: 600, color: 'error.main' }}>Rejected</Typography>
+                <Typography variant='body2' sx={{ color: 'text.secondary' }}>
+                    {extension.reviewMessage ?? 'Your extension could not be published.'}
+                </Typography>
+            </Box>;
+        }
+
+        if (inactive) {
+            return <Box mt={0.25}>
+                Deactivated
+            </Box>;
+        }
+
+        if (extension.timestamp) {
+            return <Paragraph mt={0.25}>
+                <span>Published:</span>
+                <Timestamp
+                    value={extension.timestamp}
+                    sx={noOverflow} />
+            </Paragraph>;
+        }
+
+        return null;
+    };
+
+    const status = renderStatus();
 
     const gotoDeleteRoute = (e: MouseEvent) => {
         e.preventDefault();

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

@@ -39,6 +39,10 @@ export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementPro
         }
     }, [dialogOpen]);
 
+    const closePublisherAgreement = () => {
+        setDialogOpen(false);
+    };
+
     const signPublisherAgreement = async (): Promise<void> => {
         try {
             setWorking(true);
@@ -89,19 +93,29 @@ export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementPro
         return null;
     }
 
+    const publisherAgreementName = pageSettings?.publisherAgreement?.name ?? '';
+    const publisherAgreementSigned = user.publisherAgreement.status == 'signed';
+
     let content: ReactNode;
-    if (user.publisherAgreement.status === 'signed') {
-        content = <Typography variant='body1'>
+    if (publisherAgreementSigned) {
+        content = <Box display='flex' justifyContent='space-between' alignItems='start'>
+            <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.'
+                    ? <>You signed the {publisherAgreementName} Publisher Agreement <Timestamp value={user.publisherAgreement.timestamp} />.</>
+                    : <>You signed the {publisherAgreementName} Publisher Agreement.</>
             }
-        </Typography>;
+            </Typography>
+            <Box display='flex' justifyContent='flex-end'>
+                <Button onClick={openPublisherAgreement} variant='outlined' color='secondary'>
+                    Show Publisher Agreement
+                </Button>
+            </Box>
+        </Box>;
     } 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
+                You need to sign the {publisherAgreementName} Publisher Agreement before you can publish
                 any extension to this registry.
             </Typography>
             <Box mt={2} display='flex' justifyContent='flex-end'>
@@ -113,7 +127,7 @@ export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementPro
     } else {
         content = <>
             <Typography variant='body1'>
-                You need to sign the Eclipse Foundation Open VSX Publisher Agreement before you can publish
+                You need to sign the {publisherAgreementName} 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>
@@ -132,7 +146,7 @@ export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementPro
         <Dialog
             open={dialogOpen}
             onClose={onClose}
-            maxWidth='md'
+            maxWidth='xl'
             sx={{ paperScrollPaper: { height: '75%', width: '100%' } }}>
             <DialogContent>
                 {
@@ -143,9 +157,14 @@ export const UserPublisherAgreement: FunctionComponent<UserPublisherAgreementPro
                                 sanitize={false}
                                 linkify={false} />
                             <Box display='flex' justifyContent='flex-end' >
-                                <ButtonWithProgress working={working} onClick={signPublisherAgreement}>
-                                    Agree
-                                </ButtonWithProgress>
+                                <Button onClick={closePublisherAgreement}>
+                                    Close
+                                </Button>
+                                { !publisherAgreementSigned &&
+                                    <ButtonWithProgress working={working} onClick={signPublisherAgreement}>
+                                        Agree
+                                    </ButtonWithProgress>
+                                }
                             </Box>
                         </DialogContentText>
                         :

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

@@ -8,12 +8,13 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, useContext } 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';
+import { MainContext } from "../../context";
 
 const ProfileGrid = styled(Grid)(({ theme }: {theme: Theme}) => ({
     [theme.breakpoints.up('lg')]: {
@@ -37,12 +38,13 @@ const ProfileGrid = styled(Grid)(({ theme }: {theme: Theme}) => ({
     marginBottom: theme.spacing(2)
 }));
 
-export const UserSettingsProfile: FunctionComponent<UserSettingsProfileProps> = props => {
+export const UserSettingsProfile: FunctionComponent<UserSettingsProfileProps> = ({ user, isAdmin }) => {
+
+    const { pageSettings } = useContext(MainContext);
 
-    const user = props.user;
     let publisherAgreementPanel: ReactNode = null;
     if (user.publisherAgreement) {
-        if (props.isAdmin) {
+        if (isAdmin) {
             let statusText = 'has not signed';
             if (user.publisherAgreement.status === 'signed') {
                 statusText = 'has signed';
@@ -50,8 +52,10 @@ export const UserSettingsProfile: FunctionComponent<UserSettingsProfileProps> =
                 statusText = 'has signed an outdated version of';
             }
 
+            const publisherAgreementName = pageSettings?.publisherAgreement?.name ?? '';
+
             publisherAgreementPanel = <Typography variant='body1' title={toLocalTime(user.publisherAgreement.timestamp)}>
-                {user.loginName} {statusText} the Eclipse publisher agreement.
+                {user.loginName} {statusText} the {publisherAgreementName} Publisher Agreement.
             </Typography>;
         } else {
             publisherAgreementPanel = <Grid container>
@@ -89,4 +93,4 @@ export const UserSettingsProfile: FunctionComponent<UserSettingsProfileProps> =
 export interface UserSettingsProfileProps {
     user: UserData;
     isAdmin?: boolean;
-}
+}

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

@@ -9,7 +9,9 @@
  ********************************************************************************/
 
 import React, { FunctionComponent, ReactNode, useContext, useEffect, useState, useRef } from 'react';
-import { Theme, Typography, Box, Paper, Button, Link, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import {
+    Theme, Typography, Box, Paper, Button, Link, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
+} from '@mui/material';
 import { Link as RouteLink } from 'react-router-dom';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 import { Timestamp } from '../../components/timestamp';
@@ -43,7 +45,7 @@ const DeleteButton = styled(Button)(({ theme }: { theme: Theme }) => ({
 
 export const UserSettingsTokens: FunctionComponent = () => {
 
-    const { service, user, handleError } = useContext(MainContext);
+    const { service, user, handleError, pageSettings } = useContext(MainContext);
 
     const [tokens, setTokens] = useState(new Array<PersonalAccessToken>());
     const [loading, setLoading] = useState(true);
@@ -120,13 +122,20 @@ export const UserSettingsTokens: FunctionComponent = () => {
 
     const agreement = user?.publisherAgreement;
     if (agreement && (agreement.status === 'none' || agreement.status === 'outdated')) {
+        const publisherAgreementName = pageSettings?.publisherAgreement?.name ?? '';
+        const publisherAgreementContact = pageSettings?.publisherAgreement?.email;
+
         return <Box>
             <EmptyTypography variant='body1'>
-                Access tokens cannot be created as you currently do not have an Eclipse Foundation Open VSX
-                Publisher Agreement signed. Please return to
+                Access tokens cannot be created as you currently do not have
+                an {publisherAgreementName} Publisher Agreement signed. Please return to
                 your <StyledRouteLink to={UserSettingsRoutes.PROFILE}>Profile</StyledRouteLink> page
-                to sign the Publisher Agreement. Should you believe this is in error, please
-                contact <StyledLink href='mailto:license@eclipse.org'>license@eclipse.org</StyledLink>.
+                to sign the Publisher Agreement.
+                { publisherAgreementContact !== undefined &&
+                    <> Should you believe this is in error, please
+                        contact <StyledLink href='mailto:{publisherAgreementContact}'>{publisherAgreementContact}</StyledLink>.
+                    </>
+                }
             </EmptyTypography>
         </Box>;
     }