refactor: notification row layouts

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -32,6 +32,7 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
       align="center"
       gap="condensed"
       data-testid="avatar"
+      className="truncate"
     >
       {!src || isBroken ? (
         isNonHuman ? (
@@ -48,7 +49,12 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
           onError={() => setIsBroken(true)}
         />
       )}
-      {name && <Text>{name}</Text>}
+      {name && (
+        // TODO add truncation logic for long names
+        <Text className="block truncate flex-shrink overflow-ellipsis">
+          {name}
+        </Text>
+      )}
     </Stack>
   );
 };

src/renderer/components/avatars/__snapshots__/AvatarWithFallback.test.tsx.snap

@@ -22,6 +22,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
           checked={props.checked}
           onChange={props.onChange}
           disabled={props.disabled}
+          data-testid={`checkbox-${props.name}`}
         />
 
         <div className="flex items-center ml-3">

src/renderer/components/fields/Checkbox.tsx

@@ -21,7 +21,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
         aria-labelledby={props.name}
       >
         {props.options.map((item) => {
-          const name = `${props.name}_${item.value.toLowerCase()}`;
+          const name = `radio-${props.name}-${item.value}`.toLowerCase();
 
           return (
             <div className="flex items-center gap-2" key={name}>
@@ -33,6 +33,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
                 value={item.value}
                 onChange={props.onChange}
                 checked={item.value === props.value}
+                data-testid={name}
               />
               <FieldLabel name={name} label={item.label} />
             </div>

src/renderer/components/fields/RadioGroup.tsx

@@ -3,7 +3,7 @@ import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
   const props: ITooltip = {
-    name: 'tooltip',
+    name: 'test',
     tooltip: 'This is some tooltip text',
   };
 
@@ -15,7 +15,7 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   it('should display on mouse enter / leave', () => {
     render(<Tooltip {...props} />);
 
-    const tooltipElement = screen.getByLabelText('tooltip');
+    const tooltipElement = screen.getByTestId('tooltip-test');
 
     fireEvent.mouseEnter(tooltipElement);
     expect(tooltipElement).toMatchSnapshot();

src/renderer/components/fields/Tooltip.test.tsx

@@ -1,4 +1,5 @@
 import { QuestionIcon } from '@primer/octicons-react';
+import { Box } from '@primer/react';
 import { type FC, type ReactNode, useState } from 'react';
 
 export interface ITooltip {
@@ -10,21 +11,22 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
-    <span
+    <Box
       id={props.name}
       aria-label={props.name}
       className="relative"
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
+      data-testid={`tooltip-${props.name}`}
     >
       <QuestionIcon className="ml-1 text-gitify-tooltip-icon" />
       {showTooltip && (
-        <div className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
-          <div className="text-left text-xs text-gitify-font">
+        <Box className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
+          <Box className="text-left text-xs text-gitify-font">
             {props.tooltip}
-          </div>
-        </div>
+          </Box>
+        </Box>
       )}
-    </span>
+    </Box>
   );
 };