From 0a3909797a78e83c9d447e6d997510c239aa5cc6 Mon Sep 17 00:00:00 2001
From: minnakt <minna.kt@mongodb.com>
Date: Mon, 6 Nov 2023 14:19:24 -0500
Subject: [PATCH] Reorder props & fix small bugs

---
 .../TablePopover/TableFilterPopover.tsx       | 12 ++++++------
 .../TablePopover/TableSearchPopover.tsx       | 19 ++++++++++++-------
 .../taskDuration/TaskDurationTable.tsx        | 10 ++++++----
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/TablePopover/TableFilterPopover.tsx b/src/components/TablePopover/TableFilterPopover.tsx
index 47ed93a1fe..c50817c32a 100644
--- a/src/components/TablePopover/TableFilterPopover.tsx
+++ b/src/components/TablePopover/TableFilterPopover.tsx
@@ -12,10 +12,10 @@ import { TreeDataEntry, TreeSelect } from "../TreeSelect";
 const { blue, gray } = palette;
 
 interface TableFilterPopoverProps {
-  value: string[];
-  options: TreeDataEntry[];
-  onConfirm: (filters: string[]) => void;
   "data-cy"?: string;
+  onConfirm: (filters: string[]) => void;
+  options: TreeDataEntry[];
+  value: string[];
 }
 
 export const TableFilterPopover: React.FC<TableFilterPopoverProps> = ({
@@ -38,7 +38,7 @@ export const TableFilterPopover: React.FC<TableFilterPopoverProps> = ({
   };
 
   return (
-    <Wrapper>
+    <FilterWrapper>
       <IconButton
         onClick={() => setActive(!active)}
         active={active}
@@ -58,10 +58,10 @@ export const TableFilterPopover: React.FC<TableFilterPopoverProps> = ({
           />
         </PopoverContainer>
       </Popover>
-    </Wrapper>
+    </FilterWrapper>
   );
 };
 
-const Wrapper = styled.div`
+const FilterWrapper = styled.div`
   margin-left: ${size.xxs};
 `;
diff --git a/src/components/TablePopover/TableSearchPopover.tsx b/src/components/TablePopover/TableSearchPopover.tsx
index 208058a47d..8fddec8d6d 100644
--- a/src/components/TablePopover/TableSearchPopover.tsx
+++ b/src/components/TablePopover/TableSearchPopover.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import styled from "@emotion/styled";
 import Icon from "@leafygreen-ui/icon";
 import IconButton from "@leafygreen-ui/icon-button";
@@ -12,10 +12,10 @@ import { useOnClickOutside } from "hooks";
 const { blue, gray } = palette;
 
 interface TableSearchPopoverProps {
-  value: string;
-  onConfirm: (search: string) => void;
   "data-cy"?: string;
+  onConfirm: (search: string) => void;
   placeholder?: string;
+  value: string;
 }
 
 export const TableSearchPopover: React.FC<TableSearchPopoverProps> = ({
@@ -26,7 +26,7 @@ export const TableSearchPopover: React.FC<TableSearchPopoverProps> = ({
 }) => {
   const [input, setInput] = useState(value);
   const [active, setActive] = useState(false);
-  const iconColor = input === "" ? gray.dark2 : blue.base;
+  const iconColor = value === "" ? gray.dark2 : blue.base;
 
   const buttonRef = useRef(null);
   const popoverRef = useRef(null);
@@ -34,13 +34,18 @@ export const TableSearchPopover: React.FC<TableSearchPopoverProps> = ({
   // Handle onClickOutside
   useOnClickOutside([buttonRef, popoverRef], () => setActive(false));
 
+  // If the value from the URL has changed, update the input.
+  useEffect(() => {
+    setInput(value);
+  }, [value]);
+
   const onEnter = () => {
     onConfirm(input);
     setActive(false);
   };
 
   return (
-    <Wrapper>
+    <SearchWrapper>
       <IconButton
         onClick={() => setActive(!active)}
         active={active}
@@ -65,10 +70,10 @@ export const TableSearchPopover: React.FC<TableSearchPopoverProps> = ({
           />
         </PopoverContainer>
       </Popover>
-    </Wrapper>
+    </SearchWrapper>
   );
 };
 
-const Wrapper = styled.div`
+const SearchWrapper = styled.div`
   margin-left: ${size.xxs};
 `;
diff --git a/src/pages/version/taskDuration/TaskDurationTable.tsx b/src/pages/version/taskDuration/TaskDurationTable.tsx
index eb1ece7225..aa31f5c4a6 100644
--- a/src/pages/version/taskDuration/TaskDurationTable.tsx
+++ b/src/pages/version/taskDuration/TaskDurationTable.tsx
@@ -51,10 +51,12 @@ export const TaskDurationTable: React.FC<Props> = ({ loading, tasks }) => {
 
   const sorting = useMemo(
     () => [
-      {
-        id: PatchTasksQueryParams.Duration,
-        desc: duration !== "ASC",
-      },
+      ...(duration && [
+        {
+          id: PatchTasksQueryParams.Duration,
+          desc: duration === "DESC",
+        },
+      ]),
     ],
     [duration]
   );