Merge pull request #1466 from flanksource/1409-health-dropdown-click-…

…target-text-not-button 1409-health-dropdown-click-target-text-not-button
flanksource · Oct 30, 2023 · 4d9cb5d · 4d9cb5d
2 parents 3ac389c + 3357833
commit 4d9cb5d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 42 deletions.
diff --git a/src/components/TopologyFilters/TopologyFilterBar.tsx b/src/components/TopologyFilters/TopologyFilterBar.tsx
@@ -7,6 +7,7 @@ import { ComponentLabelsDropdown } from "../Dropdown/ComponentLabelsDropdown";
 import { ComponentTypesDropdown } from "../Dropdown/ComponentTypesDropdown";
 import { ReactSelectDropdown, StateOption } from "../ReactSelectDropdown";
 import TopologyPopOver from "../TopologyPopover";
+import { TopologySort } from "../TopologyPopover/topologySort";
 
 type TopologyFilterBarProps = {
   data?: GetTopologyApiResponse;
@@ -155,14 +156,13 @@ export default function TopologyFilterBar({
             }}
           />
         </div>
+
+        <div className="flex">
+          <TopologySort sortLabels={sortLabels} />
+        </div>
       </div>
-      <TopologyPopOver
-        size={topologyCardSize}
-        setSize={setTopologyCardSize}
-        sortLabels={sortLabels || []}
-        searchParams={searchParams}
-        setSearchParams={setSearchParams}
-      />
+
+      <TopologyPopOver size={topologyCardSize} setSize={setTopologyCardSize} />
     </div>
   );
 }
diff --git a/src/components/TopologyPopover/index.tsx b/src/components/TopologyPopover/index.tsx
@@ -1,7 +1,5 @@
 import { NavigateOptions, URLSearchParamsInit } from "react-router-dom";
-
 import { TopologyPreference } from "./topologyPreference";
-import { defaultSortLabels, TopologySort } from "./topologySort";
 
 export type SetURLSearchParams = (
   nextInit?:
@@ -10,30 +8,23 @@ export type SetURLSearchParams = (
   navigateOpts?: NavigateOptions
 ) => void;
 
-export const TopologyPopOver = ({
-  size,
-  setSize,
-  sortLabels,
-  searchParams,
-  setSearchParams
-}: {
+type TopologyPopOverProps = {
   size: string;
-  sortLabels: typeof defaultSortLabels;
   setSize: (v: string) => void;
-  searchParams: URLSearchParams;
-  setSearchParams: SetURLSearchParams;
-}) => {
+};
+
+export default function TopologyPopOver({
+  size,
+  setSize
+}: TopologyPopOverProps) {
   const setCardWidth = (width: string) => {
     setSize(`${width}px`);
     localStorage.setItem("topology_card_width", `${width}px`);
   };
 
   return (
-    <div className="relative pt-5 sm:flex md:self-center md:pt-0 pl-3 flex items-center">
-      <TopologySort sortLabels={sortLabels} />
+    <div className="relative pt-5 sm:flex md:self-center md:pt-0 flex items-center">
       <TopologyPreference cardSize={size} setCardWidth={setCardWidth} />
     </div>
   );
-};
-
-export default TopologyPopOver;
+}
diff --git a/src/components/TopologyPopover/topologySort.tsx b/src/components/TopologyPopover/topologySort.tsx
@@ -148,34 +148,38 @@ export const TopologySort = ({
     <>
       <div
         ref={popoverRef as LegacyRef<HTMLDivElement>}
-        className="flex mt-1 cursor-pointer md:mt-0 md:items-center border border-gray-300 bg-white rounded-md shadow-sm px-3 py-2"
+        className="flex cursor-pointer p-0 items-center border border-gray-300 bg-white rounded-md shadow-sm"
       >
-        {sortByDirection === "asc" && (
-          <BsSortUp
-            className="w-5 h-5 text-gray-700 hover:text-gray-900"
-            onClick={() => onSelectSortOption(sortBy, "desc")}
-          />
-        )}
-        {sortByDirection === "desc" && (
-          <BsSortDown
-            className="w-5 h-5 text-gray-700 hover:text-gray-900"
-            onClick={() => onSelectSortOption(sortBy, "asc")}
-          />
-        )}
-        <span
-          className="flex ml-2 text-sm text-gray-700 capitalize bold hover:text-gray-900"
+        <div
+          onClick={() =>
+            onSelectSortOption(
+              sortBy,
+              sortByDirection === "asc" ? "desc" : "asc"
+            )
+          }
+          className="flex items-center justify-center text-gray-700 hover:text-gray-900 px-3 py-1 pr-1 rounded-l-md h-full"
+        >
+          {sortByDirection === "asc" && (
+            <BsSortUp className="w-5 h-5 text-gray-700 hover:text-gray-900" />
+          )}
+          {sortByDirection === "desc" && (
+            <BsSortDown className="w-5 h-5 text-gray-700 hover:text-gray-900" />
+          )}
+        </div>
+        <div
+          className="flex ml-2 text-sm text-gray-700 capitalize bold hover:text-gray-900 px-3 py-1 pl-0 rounded-r-md h-full items-center"
           onClick={() => setIsPopoverActive((val) => !val)}
         >
           {sortLabels.find((s) => s.value === sortBy)?.label}
-        </span>
+        </div>
       </div>
       <div className="relative">
         <div
           role="menu"
           aria-orientation="vertical"
           aria-labelledby="menu-button"
           className={clsx(
-            "origin-top-right absolute right-0 mt-6 z-50 divide-y divide-gray-100 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none capitalize w-48",
+            "origin-top-right absolute right-0 mt-10 z-50 divide-y divide-gray-100 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none capitalize w-48",
             isPopoverActive ? "display-block" : "hidden"
           )}
         >