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

Merge pull request #884 from monto7926/sortable-secrets-overview

Browse Source 
feat: make secrets overview sortable
This commit is contained in:
vmatsiiako
2023-08-23 17:47:34 -07:00
committed by GitHub
parent 3ac1795a5b 77114e02cf
commit 88695a2f8c
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+7 -2
View File
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Link from "next/link"; 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 { faArrowDown, faArrowUp, faFolderBlank, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -10,6 +10,7 @@ import NavHeader from "@app/components/navigation/NavHeader";
import { import {
Button, Button,
EmptyState, EmptyState,
IconButton,
Input, Input,
Table, Table,
TableContainer, TableContainer,
@@ -46,6 +47,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 +221,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 +280,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) => {