From bee65e86ec2f4c4daa8a540c3f2e9498f9309092 Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Tue, 21 Mar 2023 12:04:02 -0400
Subject: [PATCH] DOP-3564: (latest) flag (#19)

---
 src/components/VersionSelector/Option.tsx                   | 6 +++---
 src/components/VersionSelector/VersionSelector.tsx          | 3 ++-
 src/components/VersionSelector/types.ts                     | 1 +
 .../__tests__/__snapshots__/VersionSelector.test.tsx.snap   | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/VersionSelector/Option.tsx b/src/components/VersionSelector/Option.tsx
index 693ae072..62b750fe 100644
--- a/src/components/VersionSelector/Option.tsx
+++ b/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>
diff --git a/src/components/VersionSelector/VersionSelector.tsx b/src/components/VersionSelector/VersionSelector.tsx
index 63a7da89..924836db 100644
--- a/src/components/VersionSelector/VersionSelector.tsx
+++ b/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)}
               />
             ))}
diff --git a/src/components/VersionSelector/types.ts b/src/components/VersionSelector/types.ts
index ec5cf78a..e5fa6a9d 100644
--- a/src/components/VersionSelector/types.ts
+++ b/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;
 }
diff --git a/src/components/__tests__/__snapshots__/VersionSelector.test.tsx.snap b/src/components/__tests__/__snapshots__/VersionSelector.test.tsx.snap
index bf923da1..e1294cd6 100644
--- a/src/components/__tests__/__snapshots__/VersionSelector.test.tsx.snap
+++ b/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>