openvsx-webui-test 0.17.1

package/src/extension-registry-types.ts

@@ -0,0 +1,260 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+export type UrlString = string;
+export type TimestampString = string;
+
+export interface SuccessResult {
+    success: string;
+}
+export function isSuccess(obj: unknown): obj is SuccessResult {
+    return typeof obj === 'object' && typeof (obj as any).success === 'string';
+}
+
+export interface ErrorResult {
+    error: string;
+}
+export function isError(obj: unknown): obj is ErrorResult {
+    return typeof obj === 'object' && typeof (obj as any).error === 'string';
+}
+
+export interface ReportedError {
+    message: string;
+    code?: number | string;
+}
+
+export interface SearchResult {
+    offset: number;
+    totalSize: number;
+    extensions: SearchEntry[];
+}
+
+export interface SearchEntry {
+    url: UrlString;
+    // key: file type, value: url
+    files: { [id: string]: UrlString };
+    name: string;
+    namespace: string;
+    version: string;
+    timestamp?: TimestampString;
+    allVersions: {
+        url: UrlString;
+        // key: file type, value: url
+        files: { [id: string]: UrlString };
+        version: string;
+        // key: engine, value: version constraint
+        engines?: { [engine: string]: string };
+    }[];
+    averageRating?: number;
+    reviewCount?: number;
+    downloadCount?: number;
+    displayName?: string;
+    description?: string;
+    deprecated: boolean;
+}
+
+export const VERSION_ALIASES = ['latest', 'pre-release'];
+
+export interface Extension {
+    namespaceUrl: UrlString;
+    reviewsUrl: UrlString;
+    // key: file type, value: url
+    files: { [id: string]: UrlString };
+
+    name: string;
+    namespace: string;
+    version: string;
+    targetPlatform: string;
+    preRelease?: boolean;
+    publishedBy: UserData;
+    verified: boolean;
+    // key: version, value: url
+    allVersions: { [version: string]: UrlString };
+    active?: boolean;
+
+    averageRating?: number;
+    downloadCount: number;
+    reviewCount: number;
+
+    versionAlias: string[];
+    timestamp: TimestampString;
+    preview?: boolean;
+    displayName?: string;
+    namespaceDisplayName: string;
+    description?: string;
+
+    // key: engine, value: version constraint
+    engines?: Record<string, string>;
+    categories?: string[];
+    tags?: string[];
+    license?: string;
+    homepage?: string;
+    repository?: string;
+    bugs?: string;
+    markdown?: 'github' | 'standard';
+    galleryColor: string;
+    galleryTheme: 'light' | 'dark' | '';
+    qna?: UrlString | 'marketplace' | 'false';
+    badges?: Badge[];
+    dependencies?: ExtensionReference[];
+    bundledExtensions?: ExtensionReference[];
+
+    // key: target platform, value: download link
+    downloads: { [targetPlatform: string]: UrlString };
+    allTargetPlatformVersions?: VersionTargetPlatforms[];
+
+    deprecated: boolean
+    replacement?: {
+        url: string
+        displayName: string
+    }
+    downloadable: boolean
+}
+
+export interface Badge {
+    url: UrlString;
+    href: UrlString;
+    description: string;
+}
+
+export interface ExtensionReference {
+    namespace: string;
+    extension: string;
+    version?: string;
+}
+
+export interface VersionTargetPlatforms {
+    version: string;
+    targetPlatforms: string[];
+}
+
+export type StarRating = 1 | 2 | 3 | 4 | 5;
+export interface NewReview {
+    rating: StarRating;
+    title?: string;
+    comment: string;
+}
+
+export interface ExtensionReview extends NewReview {
+    user: UserData;
+    timestamp: TimestampString;
+}
+
+export interface ExtensionReviewList {
+    postUrl: UrlString;
+    deleteUrl: UrlString;
+    reviews: ExtensionReview[];
+}
+
+export interface UserData {
+    loginName: string;
+    tokensUrl: UrlString;
+    createTokenUrl: UrlString;
+    fullName?: string;
+    avatarUrl?: UrlString;
+    homepage?: string;
+    provider?: string;
+    role?: string;
+    publisherAgreement?: {
+        status: 'none' | 'signed' | 'outdated';
+        timestamp?: TimestampString;
+    },
+    additionalLogins?: UserData[];
+}
+
+export function isEqualUser(u1: UserData, u2: UserData): boolean {
+    return u1.loginName === u2.loginName;
+}
+
+export interface PersonalAccessToken {
+    id: number;
+    value?: string;
+    createdTimestamp: TimestampString;
+    accessedTimestamp?: TimestampString;
+    description: string;
+    deleteTokenUrl: UrlString;
+}
+
+export type ExtensionCategory =
+    'Programming Languages' |
+    'Snippets' |
+    'Linters' |
+    'Themes' |
+    'Debuggers' |
+    'Formatters' |
+    'Keymaps' |
+    'SCM Providers' |
+    'Other' |
+    'Extension Packs' |
+    'Language Packs' |
+    'Data Science' |
+    'Machine Learning' |
+    'Visualization' |
+    'Notebooks';
+
+export interface CsrfTokenJson {
+    value: string;
+    header: string;
+}
+
+export interface NamespaceMembership {
+    namespace: string;
+    role: MembershipRole;
+    user: UserData;
+}
+
+export interface NamespaceMembershipList {
+    namespaceMemberships: NamespaceMembership[];
+}
+
+export interface Namespace {
+    name: string;
+    extensions: { [key: string]: string };
+    verified: boolean;
+    membersUrl: UrlString;
+    roleUrl: UrlString;
+    detailsUrl: UrlString;
+}
+
+export interface NamespaceDetails {
+    name: string;
+    displayName: string;
+    description?: string;
+    logo?: UrlString;
+    logoBytes?: string;
+    website?: UrlString;
+    supportLink?: UrlString;
+    socialLinks: { [key: string]: UrlString | undefined };
+    extensions?: SearchEntry[];
+}
+
+export interface PublisherInfo {
+    user: UserData;
+    extensions: Extension[];
+    activeAccessTokenNum: number;
+}
+
+export interface TargetPlatformVersion {
+    targetPlatform: string;
+    version: string;
+    checked: boolean;
+}
+
+export interface RegistryVersion {
+    version: string
+}
+
+export interface LoginProviders {
+    loginProviders: Record<string, string>
+}
+
+export type MembershipRole = 'contributor' | 'owner';
+export type SortBy = 'relevance' | 'timestamp' | 'rating' | 'downloadCount';
+export type SortOrder = 'asc' | 'desc';

package/src/header-menu.tsx

@@ -0,0 +1,69 @@
+/********************************************************************************
+ * 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, { ComponentType, FunctionComponent, useContext, useEffect, useState } from 'react';
+import { Menu, IconButton, useTheme } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import MenuIcon from '@mui/icons-material/Menu';
+import { MainContext } from './context';
+import { useLocation } from 'react-router-dom';
+
+export const HeaderMenu: FunctionComponent = () => {
+    const theme = useTheme();
+    const { pageSettings } = useContext(MainContext);
+    const {
+        defaultMenuContent: DefaultMenuContent,
+        mobileMenuContent: MobileMenuContent
+    } = pageSettings.elements;
+    const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
+    if (isMobile && MobileMenuContent) {
+        return <MobileHeaderMenu menuContent={MobileMenuContent} />;
+    } else if (DefaultMenuContent) {
+        return <DefaultMenuContent />;
+    } else {
+        return null;
+    }
+};
+
+export const MobileHeaderMenu: FunctionComponent<MobileHeaderMenuProps> = props => {
+
+    const location = useLocation();
+    const [open, setOpen] = useState(false);
+    const [anchorEl, setAnchorEl] = useState<Element>();
+
+    useEffect(() => {
+        setOpen(false);
+    }, [location]);
+
+    const MenuContent = props.menuContent;
+    return <>
+        <IconButton
+            title='Menu'
+            aria-label='Menu'
+            onClick={(event) => {
+                setAnchorEl(event.currentTarget);
+                setOpen(!open);
+            }}>
+            <MenuIcon />
+        </IconButton>
+        <Menu
+            open={open}
+            anchorEl={anchorEl}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            onClose={() => setOpen(false)} >
+            <MenuContent />
+        </Menu>
+    </>;
+};
+
+export interface MobileHeaderMenuProps {
+    menuContent: ComponentType;
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+export * from './main';
+export * from './page-settings';
+export * from './extension-registry-service';
+export * from './extension-registry-types';
+export * from './pages/extension-detail/extension-detail';
+export * from './pages/extension-list/extension-list';
+export * from './pages/namespace-detail/namespace-detail';
+export * from './pages/user/user-settings';

package/src/main.css

@@ -0,0 +1,26 @@
+html, body {
+    height: 100%;
+}
+
+img {
+    object-fit: contain;
+}
+
+.visually-hidden {
+    position: absolute;
+    left: -100000rem;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+@keyframes fadein {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes fadeout {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}

package/src/main.tsx

@@ -0,0 +1,135 @@
+/********************************************************************************
+ * 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, useEffect, useState, useRef } from 'react';
+import { CssBaseline } from '@mui/material';
+import { Route, Routes } from 'react-router-dom';
+import { AdminDashboard, AdminDashboardRoutes } from './pages/admin-dashboard/admin-dashboard';
+import { ErrorDialog } from './components/error-dialog';
+import { handleError } from './utils';
+import { ExtensionRegistryService } from './extension-registry-service';
+import { UserData, isError, ReportedError, isSuccess, LoginProviders } from './extension-registry-types';
+import { MainContext } from './context';
+import { PageSettings } from './page-settings';
+import { ErrorResponse } from './server-request';
+
+import '../src/main.css';
+import { OtherPages } from './other-pages';
+
+export const Main: FunctionComponent<MainProps> = props => {
+    const [user, setUser] = useState<UserData>();
+    const [userLoading, setUserLoading] = useState<boolean>(true);
+    const [loginProviders, setLoginProviders] = useState<Record<string, string> | undefined>(props.loginProviders);
+    const [error, setError] = useState<{message: string, code?: number | string}>();
+    const [isErrorDialogOpen, setIsErrorDialogOpen] = useState<boolean>(false);
+    const abortController = useRef<AbortController>(new AbortController());
+
+    useEffect(() => {
+        getLoginProviders();
+
+        // If there was an authentication error, get the message from the server and show it
+        const searchParams = new URLSearchParams(window.location.search);
+        if (searchParams.has('auth-error')) {
+            props.service.getUserAuthError(abortController.current).then(onError);
+        }
+
+        // Get data of the currently logged in user
+        updateUser();
+
+        return () => abortController.current.abort();
+    }, []);
+
+    const updateUser = async () => {
+        try {
+            setUserLoading(true);
+            const user = await props.service.getUser(abortController.current);
+            if (isError(user)) {
+                // An error result with HTTP OK status indicates that the user is not logged in.
+                setUser(undefined);
+            } else {
+                setUser(user as UserData);
+            }
+        } catch (err) {
+            onError(err);
+        }
+
+        setUserLoading(false);
+    };
+
+    const getLoginProviders = async () => {
+        if (props.loginProviders != null) {
+            return;
+        }
+
+        const data = await props.service.getLoginProviders(abortController.current);
+        if (isSuccess(data)) {
+            console.log(data.success);
+        } else {
+            setLoginProviders((data as LoginProviders).loginProviders);
+        }
+    };
+
+    const onError = (err: Error | Partial<ErrorResponse> | ReportedError) => {
+        if (err instanceof DOMException && err.message.trim() === 'The operation was aborted.') {
+            // ignore error caused by AbortController.abort()
+            return;
+        }
+
+        const message = handleError(err);
+        const code = (err as ReportedError).code;
+        setError({ message, code });
+        setIsErrorDialogOpen(true);
+    };
+
+    const onErrorDialogClose = () => {
+        setIsErrorDialogOpen(false);
+    };
+
+    const renderPageContent = (): ReactNode => {
+        const { mainHeadTags: MainHeadTagsComponent } = props.pageSettings.elements;
+        return <>
+            { MainHeadTagsComponent ? <MainHeadTagsComponent pageSettings={props.pageSettings}/> : null }
+            <Routes>
+                <Route path={AdminDashboardRoutes.MAIN + '/*'} element={<AdminDashboard userLoading={userLoading} />} />
+                <Route path='*' element={ <OtherPages user={user} userLoading={userLoading} /> } />
+            </Routes>
+            {
+                error ?
+                    <ErrorDialog
+                        errorMessage={error.message}
+                        errorCode={error.code}
+                        isErrorDialogOpen={isErrorDialogOpen}
+                        handleCloseDialog={onErrorDialogClose} />
+                    : null
+            }
+        </>;
+    };
+
+    const mainContext: MainContext = {
+        service: props.service,
+        pageSettings: props.pageSettings,
+        user,
+        updateUser,
+        loginProviders,
+        handleError: onError
+    };
+    return <>
+        <CssBaseline />
+        <MainContext.Provider value={mainContext}>
+            {renderPageContent()}
+        </MainContext.Provider>
+    </>;
+};
+
+export interface MainProps {
+    service: ExtensionRegistryService;
+    pageSettings: PageSettings;
+    loginProviders?: Record<string, string>;
+}

package/src/not-found.tsx

@@ -0,0 +1,12 @@
+import React, { FunctionComponent } from 'react';
+import { Box, Container, Typography } from '@mui/material';
+import BrokenImageIcon from '@mui/icons-material/BrokenImage';
+
+export const NotFound: FunctionComponent = () => {
+    return <Container>
+        <Box height='30vh' display='flex' flexWrap='wrap' justifyContent='center' alignItems='center'>
+            <Typography variant='h3'>Oooups...this is a 404 page.</Typography>
+            <BrokenImageIcon sx={{ fontSize: '4rem', flexBasis: '100%' }} />
+        </Box>
+    </Container>;
+};

package/src/other-pages.tsx

@@ -0,0 +1,134 @@
+import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { AppBar, Box, Toolbar } from '@mui/material';
+import { styled, Theme } from '@mui/material/styles';
+import { Banner } from './components/banner';
+import { MainContext } from './context';
+import { HeaderMenu } from './header-menu';
+import { ExtensionListContainer, ExtensionListRoutes } from './pages/extension-list/extension-list-container';
+import { UserSettings, UserSettingsRoutes } from './pages/user/user-settings';
+import { NamespaceDetail, NamespaceDetailRoutes } from './pages/namespace-detail/namespace-detail';
+import { ExtensionDetail, ExtensionDetailRoutes } from './pages/extension-detail/extension-detail';
+import { getCookieValueByKey, setCookie } from './utils';
+import { UserData } from './extension-registry-types';
+import { NotFound } from './not-found';
+
+const ToolbarItem = styled(Box)({
+    display: 'flex',
+    alignItems: 'center'
+});
+
+const Wrapper = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    minHeight: '100vh'
+});
+
+const Footer = styled('footer')(({ theme }: { theme: Theme }) => ({
+    position: 'fixed',
+    bottom: 0,
+    width: '100%',
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: '0px -2px 6px 0px rgba(0, 0, 0, 0.5)',
+    backgroundImage: theme.palette.mode == 'dark' ? 'linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08))' : undefined
+}));
+
+export const OtherPages: FunctionComponent<OtherPagesProps> = (props) => {
+    const { pageSettings } = useContext(MainContext);
+    const {
+        additionalRoutes: AdditionalRoutes,
+        banner: BannerComponent,
+        footer: FooterComponent,
+        toolbarContent: ToolbarContent
+    } = pageSettings.elements;
+
+    const [isBannerOpen, setIsBannerOpen] = useState(false);
+    const [isFooterExpanded, setIsFooterExpanded] = useState(false);
+
+    useEffect(() => {
+        // Check a cookie to determine whether a banner should be shown
+        const banner = pageSettings.elements.banner;
+        if (banner) {
+            let open = true;
+            if (banner.cookie) {
+                const bannerClosedCookie = getCookieValueByKey(banner.cookie.key);
+                if (bannerClosedCookie === banner.cookie.value) {
+                    open = false;
+                }
+            }
+            setIsBannerOpen(open);
+        }
+    }, []);
+
+    const onDismissBannerButtonClick = () => {
+        const onClose = pageSettings.elements.banner?.props?.onClose;
+        if (onClose) {
+            onClose();
+        }
+        const cookie = pageSettings.elements.banner?.cookie;
+        if (cookie) {
+            setCookie(cookie);
+        }
+        setIsBannerOpen(false);
+    };
+
+    const getContentPadding = (): number => {
+        const footerHeight = pageSettings.elements.footer?.props.footerHeight;
+        return footerHeight ? footerHeight + 24 : 0;
+    };
+
+    return <Wrapper>
+        <AppBar position='relative' color='inherit' elevation={3}>
+            <Toolbar sx={{ justifyContent: 'space-between' }}>
+                <ToolbarItem>
+                    {ToolbarContent ? <ToolbarContent /> : null}
+                </ToolbarItem>
+                <ToolbarItem>
+                    <HeaderMenu />
+                </ToolbarItem>
+            </Toolbar>
+        </AppBar>
+        {
+            BannerComponent ?
+                <Banner
+                    open={isBannerOpen}
+                    showDismissButton={BannerComponent.props?.dismissButton?.show}
+                    dismissButtonLabel={BannerComponent.props?.dismissButton?.label}
+                    dismissButtonOnClick={onDismissBannerButtonClick}
+                    color={BannerComponent.props?.color}
+                    theme={pageSettings.themeType}
+                >
+                    <BannerComponent.content />
+                </Banner>
+                : null
+        }
+        <Box pb={`${getContentPadding()}px`}>
+            <Routes>
+                <Route path={ExtensionListRoutes.MAIN} element={ <ExtensionListContainer /> } />
+                <Route path={UserSettingsRoutes.MAIN} element={<UserSettings userLoading={props.userLoading} />} />
+                <Route path={UserSettingsRoutes.DELETE_EXTENSION} element={<UserSettings userLoading={props.userLoading} />} />
+                <Route path={NamespaceDetailRoutes.MAIN} element={ <NamespaceDetail /> } />
+                <Route path={ExtensionDetailRoutes.MAIN} element={<ExtensionDetail />} />
+                <Route path={ExtensionDetailRoutes.MAIN_TARGET} element={<ExtensionDetail />} />
+                {AdditionalRoutes ?? null}
+                <Route path='*' element={<NotFound />} />
+            </Routes>
+        </Box>
+        {
+            FooterComponent ?
+                <Footer
+                    onMouseEnter={() => setIsFooterExpanded(true)}
+                    onMouseLeave={() => setIsFooterExpanded(false)} >
+                    <FooterComponent.content expanded={isFooterExpanded} />
+                </Footer>
+                : null
+        }
+    </Wrapper>;
+};
+
+export interface OtherPagesProps {
+    user?: UserData;
+    userLoading: boolean;
+}