DOP-3611: reverse options (#37)

options.json

@@ -5,7 +5,20 @@
       "resourceVersion": "2023-02-14"
     },
     "rootUrl": "https://mongodb.com/docs/atlas/reference/api-resources-spec/v2",
-    "resourceVersions": ["2022-09-09", "2022-10-18", "2023-02-14"]
+    "resourceVersions": [
+      "2022-01-01",
+      "2022-01-18",
+      "2022-02-01",
+      "2022-03-09",
+      "2022-04-18",
+      "2022-05-14",
+      "2022-06-09",
+      "2022-07-18",
+      "2022-08-14",
+      "2022-09-09",
+      "2022-10-18",
+      "2023-02-14"
+    ]
   },
   "backNavigationPath": "https://www.mongodb.com/docs/atlas/",
   "siteTitle": "MongoDB Atlas",

src/components/VersionSelector/Option.tsx

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

src/components/VersionSelector/VersionSelector.tsx

@@ -24,33 +24,37 @@ const VersionSelectorComponent = ({
   description,
   rootUrl,
 }: VersionSelectorProps): JSX.Element => {
-  const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion);
+  const descendingResourceVersions = resourceVersions.slice().reverse();
+  const initialSelectedIdx = descendingResourceVersions.indexOf(active.resourceVersion);
   const [open, setOpen] = React.useState<boolean>(false);
   const [focusedIdx, setFocusedIdx] = React.useState<number>(-1);
   const [selectedIdx, setSelectedIdx] = React.useState<number>(initialSelectedIdx);
 
   const menuListRef = React.useRef(null);
-
-  const options = resourceVersions.map((option, i) => {
-    return (
-      <Option
-        key={`option-${i}`}
-        selected={i === selectedIdx}
-        value={option}
-        option={`${option}${i === resourceVersions.length - 1 ? ' (latest)' : ''}`}
-        onClick={option => handleClick(i, option)}
-        focused={i === focusedIdx}
-      />
-    );
-  });
-
   useOutsideClick(menuListRef, () => {
     if (open) setOpen(false);
     setFocusedIdx(0);
   });
 
+  const handleKeyDownSelect = React.useCallback(() => {
+    if (focusedIdx < 0) return;
+    if (focusedIdx === selectedIdx) return setOpen(false);
+    const resourceVersionReal = descendingResourceVersions[focusedIdx];
+
+    // navigate to resource version spec
+    let selectedResourceVersionUrl = `${rootUrl}/${resourceVersionReal}`;
+    const anchorTagIdx = window.location.href.indexOf('#tag');
+    if (anchorTagIdx > -1) {
+      selectedResourceVersionUrl += window.location.href.slice(anchorTagIdx);
+    }
+    window.location.href = selectedResourceVersionUrl;
+    setSelectedIdx(focusedIdx);
+    return setOpen(false);
+  }, [selectedIdx, rootUrl, focusedIdx, descendingResourceVersions]);
+
   const handleClick = (idx: number, resourceVersion: string) => {
     if (idx === selectedIdx) return setOpen(false);
+    if (resourceVersion === undefined) return setOpen(false);
 
     // navigate to resource version spec
     let selectedResourceVersionUrl = `${rootUrl}/${resourceVersion}`;
@@ -59,44 +63,63 @@ const VersionSelectorComponent = ({
       selectedResourceVersionUrl += window.location.href.slice(anchorTagIdx);
     }
     window.location.href = selectedResourceVersionUrl;
+    setFocusedIdx(idx);
     setSelectedIdx(idx);
     return setOpen(false);
   };
 
-  const handleFocusChange = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleFocusChange = React.useCallback(
-    const { key, shiftKey } = event;
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      const { key, shiftKey } = event;
+      if (key === 'ArrowDown' || (key === 'Tab' && !shiftKey)) {
+        // if we go down when we are already past the end, don't do anything
+        if (focusedIdx === descendingResourceVersions.length) return;
 
-    if (key === 'ArrowDown' || (key === 'Tab' && !shiftKey)) {
+        if (focusedIdx === -1) {
-      // if we go down when we are already past the end, don't do anything
+          // when first entering the dropdown via the down arrow key or tab,
-      if (focusedIdx === resourceVersions.length) return;
+          // we want to open the modal
+          setOpen(true);
+        } else if (focusedIdx === descendingResourceVersions.length - 1) {
+          // if we are at the last element of the dropdown, and attempt to go
+          // down again, we want to close the dropdown
+          setOpen(false);
+        }
 
-      if (focusedIdx === -1) {
+        setFocusedIdx(focusedIdx + 1);
-        // when first entering the dropdown via the down arrow key or tab,
+      } else if (key === 'ArrowUp' || (key === 'Tab' && shiftKey)) {
-        // we want to open the modal
+        // if we go down when we are already past the end, don't do anything
-        setOpen(true);
+        if (focusedIdx === -1) return;
-      } else if (focusedIdx === resourceVersions.length - 1) {
+
-        // if we are at the last element of the dropdown, and attempt to go
+        if (focusedIdx === descendingResourceVersions.length) {
-        // down again, we want to close the dropdown
+          // in this scenario, we are entering the dropdown from below
-        setOpen(false);
+          // we open the dropdown and start from the bottom
+          setOpen(true);
+        } else if (focusedIdx === 0) {
+          // if we reach the first element in the drop down, and we attempt to go up again,
+          // we want to close the dropdown
+          setOpen(false);
+        }
+
+        setFocusedIdx(focusedIdx - 1);
+      } else if (key === 'Enter' || key === ' ') {
+        handleKeyDownSelect();
       }
-      setFocusedIdx(focusedIdx + 1);
+    },
-    } else if (key === 'ArrowUp' || (key === 'Tab' && shiftKey)) {
+    [focusedIdx, descendingResourceVersions, handleKeyDownSelect],
-      // if we go down when we are already past the end, don't do anything
+  );
-      if (focusedIdx === -1) return;
 
-      if (focusedIdx === resourceVersions.length) {
+  const options = descendingResourceVersions.map((option, i) => {
-        // in this scenario, we are entering the dropdown from below
+    return (
-        // we open the dropdown and start from the bottom
+      <Option
-        setOpen(true);
+        key={`option-${i}`}
-      } else if (focusedIdx === 0) {
+        selected={i === selectedIdx}
-        // if we reach the first element in the drop down, and we attempt to go up again,
+        value={option}
-        // we want to close the dropdown
+        option={`${option}${i === 0 ? ' (latest)' : ''}`}
-        setOpen(false);
+        onClick={() => handleClick(i, option)}
-      }
+        focused={i === focusedIdx}
-
+      />
-      setFocusedIdx(focusedIdx - 1);
+    );
-    }
+  });
-  };
 
   return (
     <StyledWrapper onKeyDown={handleFocusChange} ref={menuListRef}>
@@ -105,7 +128,7 @@ const VersionSelectorComponent = ({
         {description && <StyledDescription>{description}</StyledDescription>}
         <StyledButton onClick={() => setOpen(!open)}>
           <StyledDisplay>
-            <StyledSelected>{resourceVersions[selectedIdx]}</StyledSelected>
+            <StyledSelected>{descendingResourceVersions[selectedIdx]}</StyledSelected>
             <ArrowIcon open={open} />
           </StyledDisplay>
         </StyledButton>

src/components/VersionSelector/styled.elements.ts

@@ -188,7 +188,7 @@ export const openDropdownStyle = css`
 export const StyledDropdown = styled.div.attrs<{ open: boolean }>({
   role: 'listbox',
   'aria-labelledby': 'View a different version of documentation.',
-  tabIndex: '-1',
+  tabIndex: '0',
 })<{ open: boolean }>`
   ${props => (props.open ? openDropdownStyle : `display: none;`)}
 `;

src/components/__tests__/VersionSelector.test.tsx

@@ -31,9 +31,9 @@ describe('VersionSelector', () => {
     wrapper.find('button').simulate('click');
     expect(wrapper.find('li')).toHaveLength(3);
 
-    wrapper.find('li').at(0).simulate('click');
+    wrapper.find('li').at(1).simulate('click');
     expect(JSON.stringify(window.location)).toBe(
-      JSON.stringify(`${versionData.rootUrl}/${versionData.resourceVersions[0]}`),
+      JSON.stringify(`${versionData.rootUrl}/${versionData.resourceVersions[1]}`),
     );
   });
 
@@ -42,7 +42,7 @@ describe('VersionSelector', () => {
     wrapper.find('button').simulate('click');
     expect(wrapper.find('li')).toHaveLength(3);
 
-    wrapper.find('li').at(2).simulate('click');
+    wrapper.find('li').at(0).simulate('click');
     expect(JSON.stringify(window.location)).not.toBe(
       JSON.stringify(`${versionData.rootUrl}/${versionData.resourceVersions[2]}`),
     );

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

@@ -46,42 +46,12 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
     aria-labelledby="View a different version of documentation."
     class="sc-kEqXSa litKaz"
     role="listbox"
-    tabindex="-1"
+    tabindex="0"
   >
     <div>
       <ul
         class="sc-gKAaRy iQghMf"
       >
-        <li
-          aria-selected="false"
-          class="sc-pNWdM kSTcTW"
-          role="option"
-          tabindex="0"
-        >
-          <span
-            class="sc-iqAclL dXUzZL"
-          />
-          <span
-            class="sc-jrsJWt hDLwjI"
-          >
-            2021-09-09
-          </span>
-        </li>
-        <li
-          aria-selected="false"
-          class="sc-pNWdM kSTcTW"
-          role="option"
-          tabindex="0"
-        >
-          <span
-            class="sc-iqAclL dXUzZL"
-          />
-          <span
-            class="sc-jrsJWt hDLwjI"
-          >
-            2022-10-18
-          </span>
-        </li>
         <li
           aria-selected="true"
           class="sc-pNWdM derVNM"
@@ -110,6 +80,36 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
             2023-01-01 (latest)
           </span>
         </li>
+        <li
+          aria-selected="false"
+          class="sc-pNWdM kSTcTW"
+          role="option"
+          tabindex="0"
+        >
+          <span
+            class="sc-iqAclL dXUzZL"
+          />
+          <span
+            class="sc-jrsJWt hDLwjI"
+          >
+            2022-10-18
+          </span>
+        </li>
+        <li
+          aria-selected="false"
+          class="sc-pNWdM kSTcTW"
+          role="option"
+          tabindex="0"
+        >
+          <span
+            class="sc-iqAclL dXUzZL"
+          />
+          <span
+            class="sc-jrsJWt hDLwjI"
+          >
+            2021-09-09
+          </span>
+        </li>
       </ul>
     </div>
   </div>