From d6d330265942054cc56bf033f0c448caba17c39b Mon Sep 17 00:00:00 2001
From: danieltonel <danieltonel.xyz@gmail.com>
Date: Tue, 22 Aug 2023 17:21:21 +0200
Subject: [PATCH 1/3] feat: make secrets overview sortable

---
 .../src/views/SecretOverviewPage/SecretOverviewPage.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index df88d8138..5f383ba98 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -4,7 +4,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 
+import { IconButton } from "@app/components/v2";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
 import {
@@ -46,6 +48,7 @@ export const SecretOverviewPage = () => {
   // coz when overflow the table goes to the right
   const parentTableRef = useRef<HTMLTableElement>(null);
   const [expandableTableWidth, setExpandableTableWidth] = useState(0);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
 
   useEffect(() => {
     const handleParentTableWidthResize = () => {
@@ -219,7 +222,7 @@ export const SecretOverviewPage = () => {
 
   const filteredSecretNames = secKeys?.filter((name) =>
     name.toUpperCase().includes(searchFilter.toUpperCase())
-  );
+  ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b || "") : b.localeCompare(a || ""));
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );
@@ -278,6 +281,9 @@ export const SecretOverviewPage = () => {
                 <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
                   <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-4 pb-3.5">
                     Name
+                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={() => setSortDir(prev => prev === "asc" ? "desc" : "asc")}>
+                      <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                    </IconButton>
                   </div>
                 </Th>
                 {userAvailableEnvs?.map(({ name, slug }, index) => {

From 954806d9506496137900249c57d87e487d4c4c33 Mon Sep 17 00:00:00 2001
From: danieltonel <danieltonel.xyz@gmail.com>
Date: Tue, 22 Aug 2023 17:59:11 +0200
Subject: [PATCH 2/3] chore: code cleanup

---
 frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 5f383ba98..2a6c5a252 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -222,7 +222,7 @@ export const SecretOverviewPage = () => {
 
   const filteredSecretNames = secKeys?.filter((name) =>
     name.toUpperCase().includes(searchFilter.toUpperCase())
-  ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b || "") : b.localeCompare(a || ""));
+  ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b) : b.localeCompare(a));
   const filteredFolderNames = folderNames?.filter((name) =>
     name.toLowerCase().includes(searchFilter.toLowerCase())
   );

From 77114e02cf9cc5640464b342c1af44ccef76f2ef Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 23 Aug 2023 17:42:29 -0700
Subject: [PATCH 3/3] fixed the import linting issues

---
 frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 2a6c5a252..4d0c4e494 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -2,16 +2,15 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 
-import { IconButton } from "@app/components/v2";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
 import {
   Button,
   EmptyState,
+  IconButton,
   Input,
   Table,
   TableContainer,