Fix header wrapping in safari. Add tooltip to type/severity row icons

This commit is contained in:
Ted Adams 2022-11-01 10:33:09 -07:00
parent 67fb8751fd
commit d778d5843c
4 changed files with 118 additions and 119 deletions

View File

@ -34,7 +34,6 @@ import {
AddIcon, AddIcon,
ArrowLeftIcon, ArrowLeftIcon,
ArrowRightIcon, ArrowRightIcon,
ChevronDownIcon,
MinusIcon, MinusIcon,
SearchIcon, SearchIcon,
} from '@chakra-ui/icons'; } from '@chakra-ui/icons';
@ -69,7 +68,6 @@ import {
import { import {
severityToBadge, severityToBadge,
severityToText, severityToText,
typeToBadge,
typeToText, typeToText,
} from 'apollo/ui/src/enumToText'; } from 'apollo/ui/src/enumToText';
import { import {
@ -77,7 +75,6 @@ import {
ListAdvisoriesFiltersTypeEnum, ListAdvisoriesFiltersTypeEnum,
} from 'bazel-bin/apollo/proto/v1/client_typescript'; } from 'bazel-bin/apollo/proto/v1/client_typescript';
import { import {
AdvisorySeverity,
V1Advisory, V1Advisory,
V1AdvisoryType, V1AdvisoryType,
} from 'bazel-bin/apollo/proto/v1/client_typescript/models'; } from 'bazel-bin/apollo/proto/v1/client_typescript/models';
@ -432,7 +429,7 @@ export const Overview = () => {
textAlign="center" textAlign="center"
pr={0} pr={0}
> >
{severityToBadge(a.severity)} {severityToBadge(a.severity, a.type)}
</Td> </Td>
<Td backgroundColor={idx % 2 ? 'gray.50' : undefined}> <Td backgroundColor={idx % 2 ? 'gray.50' : undefined}>
<Link <Link

View File

@ -50,6 +50,7 @@ export const Root = () => {
alignItems="stretch" alignItems="stretch"
> >
<Box <Box
as="header"
background={`linear-gradient(to bottom right, ${COLOR_RESF_GREEN}, ${COLOR_RESF_BLUE})`} background={`linear-gradient(to bottom right, ${COLOR_RESF_GREEN}, ${COLOR_RESF_BLUE})`}
display="flex" display="flex"
flexDirection="row" flexDirection="row"
@ -61,12 +62,14 @@ export const Root = () => {
<HStack flexGrow={1} height="90%" spacing="2"> <HStack flexGrow={1} height="90%" spacing="2">
<RESFLogo className="fill-current text-white" /> <RESFLogo className="fill-current text-white" />
<Text <Text
as="h1"
borderLeft="1px solid" borderLeft="1px solid"
pl="2" pl="2"
lineHeight="30px" lineHeight="30px"
fontSize="xl" fontSize="xl"
fontWeight="300" fontWeight="300"
color="white" color="white"
whiteSpace="nowrap"
> >
Product Errata Product Errata
</Text> </Text>
@ -80,6 +83,7 @@ export const Root = () => {
</Switch> </Switch>
</Box> </Box>
<Box <Box
as="footer"
px="4" px="4"
// backgroundColor="#10859E" // backgroundColor="#10859E"
background={`linear-gradient(to top left, ${COLOR_RESF_GREEN}, ${COLOR_RESF_BLUE})`} background={`linear-gradient(to top left, ${COLOR_RESF_GREEN}, ${COLOR_RESF_BLUE})`}

View File

@ -158,7 +158,7 @@ export const ShowErrata = (props: ShowErrataProps) => {
spacing="6" spacing="6"
mb={2} mb={2}
> >
{severityToBadge(errata.severity, 40)} {severityToBadge(errata.severity, errata.type, 40)}
<VStack alignItems="stretch" spacing="0" flexGrow={1}> <VStack alignItems="stretch" spacing="0" flexGrow={1}>
<HStack justifyContent="space-between"> <HStack justifyContent="space-between">
<Text fontSize="lg" fontWeight="bold"> <Text fontSize="lg" fontWeight="bold">

View File

@ -30,7 +30,7 @@
* POSSIBILITY OF SUCH DAMAGE. * POSSIBILITY OF SUCH DAMAGE.
*/ */
import { Box, Tag, TagProps } from '@chakra-ui/react'; import { Box, Tag, TagProps, Tooltip } from '@chakra-ui/react';
import { import {
AdvisorySeverity, AdvisorySeverity,
V1AdvisoryType, V1AdvisoryType,
@ -53,10 +53,20 @@ export const severityToText = (severity?: AdvisorySeverity): string => {
}; };
export const severityToBadge = ( export const severityToBadge = (
severity?: AdvisorySeverity, severity: AdvisorySeverity | undefined,
type: V1AdvisoryType | undefined,
size: number = 20 size: number = 20
): React.ReactNode => { ): React.ReactNode => {
return { return (
<Tooltip
label={`${typeToText(type)}${
type === V1AdvisoryType.Security ? ` / ${severityToText(severity)}` : ''
}`}
placement="top-start"
hasArrow
>
{
{
[AdvisorySeverity.Critical]: ( [AdvisorySeverity.Critical]: (
<Box <Box
as="svg" as="svg"
@ -152,7 +162,10 @@ export const severityToBadge = (
</g> </g>
</Box> </Box>
), ),
}[severity || AdvisorySeverity.Unknown]; }[severity || AdvisorySeverity.Unknown]
}
</Tooltip>
);
}; };
export const typeToText = (type?: V1AdvisoryType): string => { export const typeToText = (type?: V1AdvisoryType): string => {
@ -167,18 +180,3 @@ export const typeToText = (type?: V1AdvisoryType): string => {
return 'Unknown'; return 'Unknown';
} }
}; };
export const typeToBadge = (
type?: V1AdvisoryType,
size: TagProps['size'] = 'sm'
): React.ReactNode => {
return (
<Tag
variant="outline"
size={size}
colorScheme={type === V1AdvisoryType.Security ? 'orange' : 'gray'}
>
{typeToText(type)}
</Tag>
);
};