Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested ternary operations #1112

Merged
merged 1 commit into from
Feb 14, 2025
Merged

Nested ternary operations #1112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 41 additions & 37 deletions webui/src/pages/admin-dashboard/admin-dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/

import React, { FunctionComponent, useContext, useState } from 'react';
import React, { FunctionComponent, ReactNode, useContext, useState } from 'react';
import { Box, Container, CssBaseline, Typography, IconButton } from '@mui/material';
import { createRoute } from '../../utils';
import { Sidepanel } from '../../components/sidepanel/sidepanel';
Expand All @@ -32,6 +32,17 @@ export namespace AdminDashboardRoutes {
export const PUBLISHER_ADMIN = createRoute([ROOT, 'publisher']);
}

const Message: FunctionComponent<{message: string}> = ({ message }) => {
return (<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%'
}}>
<Typography variant='h6'>{message}</Typography>
</Box>);
};

export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
const { user, canLogin } = useContext(MainContext);

Expand All @@ -41,44 +52,37 @@ export const AdminDashboard: FunctionComponent<AdminDashboardProps> = props => {
const [currentPage, setCurrentPage] = useState<string | undefined>(useLocation().pathname);
const handleOpenRoute = (route: string) => setCurrentPage(route);

const message = user ? 'You are not authorized as administrator.' : !props.userLoading && canLogin ? 'You are not logged in.' : null;
let content: ReactNode = null;
if (user?.role === 'admin') {
content = <>
<Sidepanel>
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' icon={<AssignmentIndIcon />} route={AdminDashboardRoutes.NAMESPACE_ADMIN} />
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' icon={<ExtensionSharpIcon />} route={AdminDashboardRoutes.EXTENSION_ADMIN} />
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' icon={<PersonIcon />} route={AdminDashboardRoutes.PUBLISHER_ADMIN} />
</Sidepanel>
<Box overflow='auto' flex={1}>
<IconButton onClick={toMainPage} sx={{ float: 'right', mt: 1, mr: 1 }}>
<HighlightOffIcon/>
</IconButton>
<Container sx={{ pt: 8, height: '100%' }} maxWidth='lg'>
<Routes>
<Route path='/namespaces' element={<NamespaceAdmin/>} />
<Route path='/extensions' element={<ExtensionAdmin/>} />
<Route path='/publisher' element={<PublisherAdmin/>} />
<Route path='*' element={<Welcome/>} />
</Routes>
</Container>
</Box>
</>;
} else if (user) {
content = <Message message='You are not authorized as administrator.'/>;
} else if (!props.userLoading && canLogin) {
content = <Message message='You are not logged in.'/>;
}

return <>
<CssBaseline />
<Box display='flex' height='100vh'>
{
user?.role === 'admin' ?
<>
<Sidepanel>
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' icon={<AssignmentIndIcon />} route={AdminDashboardRoutes.NAMESPACE_ADMIN} />
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' icon={<ExtensionSharpIcon />} route={AdminDashboardRoutes.EXTENSION_ADMIN} />
<NavigationItem onOpenRoute={handleOpenRoute} active={currentPage === AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' icon={<PersonIcon />} route={AdminDashboardRoutes.PUBLISHER_ADMIN} />
</Sidepanel>
<Box overflow='auto' flex={1}>
<IconButton onClick={toMainPage} sx={{ float: 'right', mt: 1, mr: 1 }}>
<HighlightOffIcon/>
</IconButton>
<Container sx={{ pt: 8, height: '100%' }} maxWidth='lg'>
<Routes>
<Route path='/namespaces' element={<NamespaceAdmin/>} />
<Route path='/extensions' element={<ExtensionAdmin/>} />
<Route path='/publisher' element={<PublisherAdmin/>} />
<Route path='*' element={<Welcome/>} />
</Routes>
</Container>
</Box>
</>
: message ?
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%'
}}>
<Typography variant='h6'>{message}</Typography>
</Box>
: null
}
</Box>
<Box display='flex' height='100vh'>{content}</Box>
</>;
};

Expand Down
11 changes: 8 additions & 3 deletions webui/src/pages/admin-dashboard/extension-remove-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,20 @@ export const ExtensionRemoveDialog: FunctionComponent<ExtensionRemoveDialogProps
}
};

let buttonText = 'Remove Version';
if (removeAll()) {
buttonText = 'Remove Extension';
} else if (removeVersions()) {
buttonText = 'Remove Versions';
}

return <>
<Button
variant='contained'
color='secondary'
onClick={() => setDialogOpen(true)}
disabled={props.targetPlatformVersions.length === 0} >
{
removeAll() ? 'Remove Extension' : removeVersions() ? 'Remove Versions' : 'Remove Version'
}
{buttonText}
</Button>
<Dialog
open={dialogOpen}
Expand Down
55 changes: 27 additions & 28 deletions webui/src/pages/admin-dashboard/namespace-admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/

import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
import React, { FunctionComponent, useState, useContext, useEffect, useRef, ReactNode } from 'react';
import { Typography, Box } from '@mui/material';
import { NamespaceDetail, NamespaceDetailConfigContext } from '../user/user-settings-namespace-detail';
import { ButtonWithProgress } from '../../components/button-with-progress';
Expand Down Expand Up @@ -77,37 +77,36 @@ export const NamespaceAdmin: FunctionComponent = props => {
}
};

let listContainer: ReactNode = '';
if (currentNamespace && pageSettings && user) {
listContainer = <NamespaceDetailConfigContext.Provider value={{ defaultMemberRole: 'owner' }}>
<NamespaceDetail
setLoadingState={setLoading}
namespace={currentNamespace}
filterUsers={() => true}
fixSelf={false}
/>
</NamespaceDetailConfigContext.Provider>;
} else if (notFound) {
listContainer = <Box display='flex' flexDirection='column' justifyContent='center' alignItems='center'>
<Typography variant='body1'>
Namespace {notFound} not found. Do you want to create it?
</Typography>
<Box mt={3}>
<ButtonWithProgress
working={creating}
onClick={onCreate}>
Create Namespace {notFound}
</ButtonWithProgress>
</Box>
</Box>;
}

return <SearchListContainer
searchContainer={
[<StyledInput key='nsi' placeholder='Namespace' onSubmit={fetchNamespace} onChange={onChangeInput} />]
}
listContainer={<>
{
currentNamespace && pageSettings && user ?
<NamespaceDetailConfigContext.Provider value={{ defaultMemberRole: 'owner' }}>
<NamespaceDetail
setLoadingState={setLoading}
namespace={currentNamespace}
filterUsers={() => true}
fixSelf={false}
/>
</NamespaceDetailConfigContext.Provider>
: notFound ?
<Box display='flex' flexDirection='column' justifyContent='center' alignItems='center'>
<Typography variant='body1'>
Namespace {notFound} not found. Do you want to create it?
</Typography>
<Box mt={3}>
<ButtonWithProgress
working={creating}
onClick={onCreate}>
Create Namespace {notFound}
</ButtonWithProgress>
</Box>
</Box>
: ''
}
</>}
listContainer={listContainer}
loading={loading}
/>;
};
29 changes: 15 additions & 14 deletions webui/src/pages/admin-dashboard/publisher-admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/

import React, { FunctionComponent, useState, useContext, createContext, useEffect, useRef } from 'react';
import React, { FunctionComponent, useState, useContext, createContext, useEffect, useRef, ReactNode } from 'react';
import { Typography, Box } from '@mui/material';
import { PublisherInfo } from '../../extension-registry-types';
import { MainContext } from '../../context';
Expand Down Expand Up @@ -63,23 +63,24 @@ export const PublisherAdmin: FunctionComponent = props => {
fetchPublisher();
};

let listContainer: ReactNode = '';
if (publisher && pageSettings && user) {
listContainer = <UpdateContext.Provider value={{ handleUpdate }}>
<PublisherDetails publisherInfo={publisher} />
</UpdateContext.Provider>;
} else if (notFound) {
listContainer = <Box display='flex' flexDirection='column'>
<Typography variant='body1' color='error'>
Publisher {notFound} not found.
</Typography>
</Box>;
}

return <SearchListContainer
searchContainer={
[<StyledInput placeholder='Publisher Name' key='pi' onSubmit={fetchPublisher} onChange={onChangeInput} />]
}
listContainer={
publisher && pageSettings && user ?
<UpdateContext.Provider value={{ handleUpdate }}>
<PublisherDetails publisherInfo={publisher} />
</UpdateContext.Provider>
: notFound ?
<Box display='flex' flexDirection='column'>
<Typography variant='body1' color='error'>
Publisher {notFound} not found.
</Typography>
</Box>
: ''
}
listContainer={listContainer}
loading={loading}
/>;
};
24 changes: 13 additions & 11 deletions webui/src/pages/extension-detail/extension-detail-overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,18 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
.filter(version => extension.versionAlias.indexOf(version) < 0 && VERSION_ALIASES.indexOf(version) >= 0);
// filter internal tags
const tags = extension.tags?.filter(t => !t.startsWith('__'));

let downloadButton: ReactNode = null;
if (extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 1) {
downloadButton = <ExtensionDetailDownloadsMenu downloads={extension.downloads} />;
} else if (extension.downloadable && extension.downloads && Object.keys(extension.downloads).length == 1) {
downloadButton = <Button variant='contained' color='secondary' sx={{ mt: 2 }}
href={extension.downloads[Object.keys(extension.downloads)[0]]}
>
Download
</Button>;
}

return <Box
sx={{
display: 'flex',
Expand Down Expand Up @@ -345,17 +357,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
{renderResourceLink('Repository', resourceLink, extension.repository)}
{renderResourceLink('Bugs', resourceLink, extension.bugs)}
{renderResourceLink('Q\'n\'A', resourceLink, extension.qna)}
{
extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 1 ?
<ExtensionDetailDownloadsMenu downloads={extension.downloads} />
: extension.downloadable && extension.downloads && Object.keys(extension.downloads).length == 1 ?
<Button variant='contained' color='secondary' sx={{ mt: 2 }}
href={extension.downloads[Object.keys(extension.downloads)[0]]}
>
Download
</Button>
: null
}
{downloadButton}
{
DownloadTerms && extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 0
? <DownloadTerms />
Expand Down
31 changes: 16 additions & 15 deletions webui/src/pages/user/user-namespace-extension-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/

import React, { useContext, FunctionComponent, useState, useEffect, useRef } from 'react';
import React, { useContext, FunctionComponent, useState, useEffect, useRef, ReactNode } from 'react';
import { Extension } from '../../extension-registry-types';
import { Paper, Typography, Box, styled } from '@mui/material';
import { Link as RouteLink } from 'react-router-dom';
Expand Down Expand Up @@ -59,6 +59,20 @@ 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>;
}

return (
extension ? (
<RouteLink to={route} style={{ textDecoration: 'none' }}>
Expand Down Expand Up @@ -92,20 +106,7 @@ export const UserNamespaceExtensionListItem: FunctionComponent<UserNamespaceExte
<span>Version:</span>
<Box component='span' sx={noOverflow}>{extension.version}</Box>
</Paragraph>
{
inactive ?
<Box mt={0.25}>
Deactivated
</Box>
: extension.timestamp ?
<Paragraph mt={0.25}>
<span>Published:</span>
<Timestamp
value={extension.timestamp}
sx={noOverflow} />
</Paragraph>
: null
}
{status}
</Box>
</Paper>
</RouteLink>
Expand Down
Loading