rocky-linux
/
peridot
mirror of https://github.com/rocky-linux/peridot.git
4
0
Fork 0
Code Issues Projects Releases Activity

Merge pull request #93 from TheTedAdams/dark-mode 

Add errata dark mode
This commit is contained in:
resf-prow[bot] 2023-02-02 02:02:35 +00:00 committed by GitHub
parent 3131651ae3 c6e8688dc0
commit c69be4edc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 148911 additions and 1307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147529
.yarn/releases/yarn-1.22.19.cjs vendored Executable file
View File

File diff suppressed because one or more lines are too long

3
.yarnrc.yml Normal file
View File

@ -0,0 +1,3 @@
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-1.22.19.cjs

40
apollo/ui/src/components/Overview.tsx
View File

@ -51,6 +51,7 @@ import {
Input,
InputGroup,
InputLeftElement,
Link,
Select,
Spinner,
Stack,
@ -80,13 +81,18 @@ import {
} from 'bazel-bin/apollo/proto/v1/client_typescript/models';
import { reqap } from 'common/ui/reqap';
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Link as RouterLink } from 'react-router-dom';
import { api } from '../api';
import { COLOR_RESF_GREEN } from '../styles';
export const Overview = () => {
const inputBackground = useColorModeValue('white', 'gray.800');
const inputBackground = useColorModeValue('white', undefined);
const tableBg = useColorModeValue('white', 'gray.800');
const pagerButtonScheme = useColorModeValue('blackAlpha', 'gray');
const linkBlue = useColorModeValue('blue.600', 'blue.300');
const linkPurple = useColorModeValue('purple.600', 'purple.300');
const [advisories, setAdvisories] = useState<V1Advisory[]>();
const [lastUpdated, setLastUpdated] = useState<Date>();
@ -340,7 +346,7 @@ export const Overview = () => {
size="xs"
isAttached
alignItems="stretch"
colorScheme="blackAlpha"
colorScheme={pagerButtonScheme}
>
<IconButton
aria-label="First Page"
@ -359,7 +365,7 @@ export const Overview = () => {
// borderTop="1px solid"
// borderBottom="1px solid"
borderColor="gray.200"
backgroundColor="white"
backgroundColor={tableBg}
lineHeight="24px"
px={2}
>
@ -401,9 +407,9 @@ export const Overview = () => {
<AlertDescription>Failed to load errata</AlertDescription>
</Alert>
) : (
<Box backgroundColor="white" boxShadow="base">
<Box backgroundColor={tableBg} boxShadow="base">
<TableContainer>
<Table size="sm">
<Table size="sm" variant="striped">
<Thead>
<Tr>
<Th {...stickyProps} width="36px" />
@ -424,37 +430,33 @@ export const Overview = () => {
)}
{advisories?.map((a, idx) => (
<Tr key={a.name}>
<Td
backgroundColor={idx % 2 ? 'gray.50' : undefined}
textAlign="center"
pr={0}
>
<Td textAlign="center" pr={0}>
{severityToBadge(a.severity, a.type)}
</Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
<Td>
<Link
className="text-peridot-primary visited:text-purple-500"
as={RouterLink}
to={`/${a.name}`}
color={linkBlue}
_visited={{ color: linkPurple }}
>
{a.name}
</Link>
</Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
<Td>
{a.synopsis?.replace(
/^(Critical|Important|Moderate|Low): /,
''
)}
</Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
<Td>
{typeToText(a.type)}
{a.type === V1AdvisoryType.Security
? ` / ${severityToText(a.severity)}`
: ''}
</Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
{a.affectedProducts?.join(', ')}
</Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
<Td>{a.affectedProducts?.join(', ')}</Td>
<Td>
{Intl.DateTimeFormat(undefined, {
day: '2-digit',
month: 'short',

32
apollo/ui/src/components/Root.tsx
View File

@ -30,7 +30,17 @@
* POSSIBILITY OF SUCH DAMAGE.
*/
import { Box, HStack, Text, Link as ChakraLink } from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
import {
Box,
HStack,
Text,
Link as ChakraLink,
useColorMode,
IconButton,
useColorModeValue,
DarkMode,
} from '@chakra-ui/react';
import { RESFLogo } from 'common/ui/RESFLogo';
import React from 'react';
import { Route, Switch } from 'react-router';
@ -41,6 +51,11 @@ import { Overview } from './Overview';
import { ShowErrata } from './ShowErrata';
export const Root = () => {
const { colorMode, toggleColorMode } = useColorMode();
const SwitchIcon = useColorModeValue(MoonIcon, SunIcon);
const bodyBg = useColorModeValue('gray.100', 'gray.900');
return (
<Box
display="flex"
@ -55,6 +70,7 @@ export const Root = () => {
display="flex"
flexDirection="row"
alignItems="center"
justifyContent="space-between"
py="1"
px={4}
>
@ -75,8 +91,20 @@ export const Root = () => {
</Text>
</HStack>
</Link>
<DarkMode>
<IconButton
size="md"
fontSize="lg"
aria-label={`Switch to ${
colorMode === 'light' ? 'dark' : 'light'
} mode`}
variant="ghost"
onClick={toggleColorMode}
icon={<SwitchIcon />}
/>
</DarkMode>
</Box>
<Box as="main" flexGrow={1} overflow="auto">
<Box as="main" flexGrow={1} overflow="auto" background={bodyBg}>
<Switch>
<Route path="/" exact component={Overview} />
<Route path="/:id" component={ShowErrata} />

24
apollo/ui/src/components/ShowErrata.tsx
View File

@ -51,6 +51,7 @@ import {
Tabs,
Text,
UnorderedList,
useColorModeValue,
VStack,
} from '@chakra-ui/react';
import {
@ -68,7 +69,7 @@ import { RouteComponentProps } from 'react-router';
import { Link as RouterLink } from 'react-router-dom';
import { api } from '../api';
import { COLOR_RESF_BLUE, COLOR_RESF_GREEN } from '../styles';
import { COLOR_RESF_GREEN } from '../styles';
interface ShowErrataParams {
id: string;
@ -80,6 +81,11 @@ export interface ShowErrataProps
export const ShowErrata = (props: ShowErrataProps) => {
const id = props.match.params.id;
const cardBg = useColorModeValue('white', 'gray.800');
const sideBg = useColorModeValue('gray.100', 'gray.700');
const linkBlue = useColorModeValue('blue.600', 'blue.300');
const linkPurple = useColorModeValue('purple.600', 'purple.300');
const [errata, setErrata] = useState<V1Advisory>();
const [isLoading, setIsLoading] = useState(true);
const [isError, setIsError] = useState(false);
@ -152,7 +158,7 @@ export const ShowErrata = (props: ShowErrataProps) => {
<>
<HStack
alignItems="center"
backgroundColor="white"
backgroundColor={cardBg}
py="2"
px="4"
spacing="6"
@ -168,7 +174,7 @@ export const ShowErrata = (props: ShowErrataProps) => {
<Text fontSize="sm">{errata.synopsis}</Text>
</VStack>
</HStack>
<Tabs backgroundColor="white" p="2">
<Tabs backgroundColor={cardBg} p="2">
<TabList>
<Tab>Erratum</Tab>
<Tab>Affected Packages</Tab>
@ -238,7 +244,7 @@ export const ShowErrata = (props: ShowErrataProps) => {
minWidth="300px"
spacing="5"
flexShrink={0}
backgroundColor="gray.100"
backgroundColor={sideBg}
>
<Text>
<b>Issued:</b> {errata.publishedAt?.toLocaleDateString()}
@ -270,7 +276,10 @@ export const ShowErrata = (props: ShowErrataProps) => {
<Link
href={x.sourceLink}
isExternal
color={COLOR_RESF_BLUE}
color={linkBlue}
_visited={{
color: linkPurple,
}}
>
{x.sourceBy} - {x.ticket}
</Link>
@ -295,7 +304,10 @@ export const ShowErrata = (props: ShowErrataProps) => {
<Link
href={x.sourceLink}
isExternal
color={COLOR_RESF_BLUE}
color={linkBlue}
_visited={{
color: linkPurple,
}}
>
{text}
</Link>

16
apollo/ui/src/entrypoint.tsx
View File

@ -32,20 +32,24 @@
import 'tailwind/tailwind.css';
import { ChakraProvider } from '@chakra-ui/react';
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Root } from './components/Root';
import theme from './theme';
export const app = () => {
ReactDOM.render(
<BrowserRouter>
<ChakraProvider>
<Root />
</ChakraProvider>
</BrowserRouter>,
<>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<BrowserRouter>
<ChakraProvider theme={theme}>
<Root />
</ChakraProvider>
</BrowserRouter>
</>,
document.getElementById('root')
);
};

52
apollo/ui/src/theme.ts Normal file
View File

@ -0,0 +1,52 @@
/*
* Copyright (c) All respective contributors to the Peridot Project. All rights reserved.
* Copyright (c) 2021-2022 Rocky Enterprise Software Foundation, Inc. All rights reserved.
* Copyright (c) 2021-2022 Ctrl IQ, Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* 3. Neither the name of the copyright holder nor the names of its contributors
* may be used to endorse or promote products derived from this software without
* specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
import { extendTheme, type Theme, type ThemeConfig } from '@chakra-ui/react';
const config: ThemeConfig = {
initialColorMode: 'system',
};
const styles: Theme['styles'] = {
global: (props) => ({
':root': {
colorScheme: props.colorMode,
},
}),
};
const theme = extendTheme({
config,
styles,
});
export default theme;

3
package.json
View File

@ -112,5 +112,6 @@
"express": "^4.17.1",
"helmet": "^4.4.1",
"http-proxy-middleware": "^1.0.6"
}
},
"packageManager": "yarn@1.22.19"
}

2519
yarn.lock
View File

File diff suppressed because it is too large Load Diff