Merge pull request #58 from TheTedAdams/product-errata-header-fix

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

apollo/ui/src/components/Overview.tsx

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

apollo/ui/src/components/Root.tsx

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

apollo/ui/src/components/ShowErrata.tsx

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

apollo/ui/src/enumToText.tsx

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