DOP-3564: (latest) flag (#19)

src/components/VersionSelector/Option.tsx

@@ -3,18 +3,18 @@ import { StyledLi, StyledOptionText, StyledPlaceholder } from './styled.elements
 import Checkmark from './CheckmarkSvg';
 import { OptionProps } from './types';
 
-export const Option = ({ option, selected, onClick }: OptionProps) => {
+export const Option = ({ option, value, selected, onClick }: OptionProps) => {
   const KEY_ENTER = 'ENTER';
   const KEY_SPACE = 'SPACE';
 
   const handleKeyPress = (event: React.KeyboardEvent) => {
     if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
-      onClick(option);
+      onClick(value);
     }
   };
 
   return (
-    <StyledLi onClick={() => onClick(option)} onKeyPress={handleKeyPress} selected={selected}>
+    <StyledLi onClick={() => onClick(value)} onKeyPress={handleKeyPress} selected={selected}>
       {selected ? <Checkmark /> : <StyledPlaceholder />}
       <StyledOptionText>{option}</StyledOptionText>
     </StyledLi>

src/components/VersionSelector/VersionSelector.tsx

@@ -59,7 +59,8 @@ const VersionSelectorComponent = ({
               <Option
                 key={`option-${i}`}
                 selected={i === selectedIdx}
-                option={option}
+                value={option}
+                option={`${option}${i === resourceVersions.length - 1 ? ' (latest)' : ''}`}
                 onClick={option => handleClick(i, option)}
               />
             ))}

src/components/VersionSelector/types.ts

@@ -11,6 +11,7 @@ export interface VersionSelectorProps {
 
 export interface OptionProps {
   option: string;
+  value: string;
   selected: boolean;
   onClick: (option: string) => void;
 }

src/components/__tests__/__snapshots__/VersionSelector.test.tsx.snap

@@ -107,7 +107,7 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
           <span
             class="sc-jrsJWt hDLwjI"
           >
-            2023-01-01
+            2023-01-01 (latest)
           </span>
         </li>
       </ul>