awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 01:27:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make secrets overview sortable

Browse Source
This commit is contained in:
danieltonel
2023-08-22 17:21:21 +02:00
parent 81743d55ab
commit d6d3302659
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+7 -1
View File
@@ -4,7 +4,9 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; import { faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 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 { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import NavHeader from "@app/components/navigation/NavHeader"; import NavHeader from "@app/components/navigation/NavHeader";
import { import {
@@ -46,6 +48,7 @@ export const SecretOverviewPage = () => {
// coz when overflow the table goes to the right // coz when overflow the table goes to the right
const parentTableRef = useRef<HTMLTableElement>(null); const parentTableRef = useRef<HTMLTableElement>(null);
const [expandableTableWidth, setExpandableTableWidth] = useState(0); const [expandableTableWidth, setExpandableTableWidth] = useState(0);
const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
useEffect(() => { useEffect(() => {
const handleParentTableWidthResize = () => { const handleParentTableWidthResize = () => {
@@ -219,7 +222,7 @@ export const SecretOverviewPage = () => {
const filteredSecretNames = secKeys?.filter((name) => const filteredSecretNames = secKeys?.filter((name) =>
name.toUpperCase().includes(searchFilter.toUpperCase()) name.toUpperCase().includes(searchFilter.toUpperCase())
); ).sort((a, b) => sortDir === "asc" ? a.localeCompare(b || "") : b.localeCompare(a || ""));
const filteredFolderNames = folderNames?.filter((name) => const filteredFolderNames = folderNames?.filter((name) =>
name.toLowerCase().includes(searchFilter.toLowerCase()) 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"> <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"> <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-4 pb-3.5">
Name Name
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={() => setSortDir(prev => prev === "asc" ? "desc" : "asc")}>
<FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
</IconButton>
</div> </div>
</Th> </Th>
{userAvailableEnvs?.map(({ name, slug }, index) => { {userAvailableEnvs?.map(({ name, slug }, index) => {