Reorder props & fix small bugs

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};
 `;

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,21 +26,26 @@ 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);
 
   // 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};
 `;

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]
   );