From 021017849c7657afbc2108c7c8a2e1523f6b6f00 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 14 May 2024 02:18:56 +0100
Subject: [PATCH] Enhanced column dropdown functionality and user interaction
 and added csv helper to escape new lines

---
 .../src/components/ServerTable/components.tsx  | 18 +++++++++++++++---
 .../src/lib/helpers/fileManipulations.ts       |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/ServerTable/components.tsx b/agenta-web/src/components/ServerTable/components.tsx
index de3d5bd30d..a1e5454f2c 100644
--- a/agenta-web/src/components/ServerTable/components.tsx
+++ b/agenta-web/src/components/ServerTable/components.tsx
@@ -1,9 +1,9 @@
 import {GenericObject, JSSTheme, PaginationQuery} from "@/lib/Types"
-import {Button, Dropdown, Input, Space} from "antd"
+import {Button, Dropdown, DropdownProps, Input, Space} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {FilterDropdownProps} from "antd/es/table/interface"
 import dayjs from "dayjs"
-import React, {ReactNode, useMemo} from "react"
+import React, {ReactNode, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import {Resizable} from "react-resizable"
 import EnforceAntdStyles from "../EnforceAntdStyles/EnforceAntdStyles"
@@ -100,6 +100,13 @@ interface ColsDropdownProps<T> {
 
 export const ColsDropdown = <T,>({columns, hiddenCols, setHiddenCols}: ColsDropdownProps<T>) => {
     const classes = useStyles()
+    const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
+
+    const handleOpenChangeFilterCols: DropdownProps["onOpenChange"] = (nextOpen, info) => {
+        if (info.source === "trigger" || nextOpen) {
+            setIsFilterColsDropdownOpen(nextOpen)
+        }
+    }
     const shownCols = useMemo(
         () =>
             columns
@@ -119,6 +126,8 @@ export const ColsDropdown = <T,>({columns, hiddenCols, setHiddenCols}: ColsDropd
     return (
         <Dropdown
             trigger={["click"]}
+            open={isFilterColsDropdownOpen}
+            onOpenChange={handleOpenChangeFilterCols}
             menu={{
                 selectedKeys: shownCols,
                 items: columns.map((item) => ({
@@ -130,7 +139,10 @@ export const ColsDropdown = <T,>({columns, hiddenCols, setHiddenCols}: ColsDropd
                         </Space>
                     ),
                 })) as any,
-                onClick: ({key}) => onColToggle(key),
+                onClick: ({key}) => {
+                    onColToggle(key)
+                    setIsFilterColsDropdownOpen(true)
+                },
                 className: classes.dropdownMenu,
             }}
         >
diff --git a/agenta-web/src/lib/helpers/fileManipulations.ts b/agenta-web/src/lib/helpers/fileManipulations.ts
index d4434e6200..e3b6890e92 100644
--- a/agenta-web/src/lib/helpers/fileManipulations.ts
+++ b/agenta-web/src/lib/helpers/fileManipulations.ts
@@ -5,6 +5,8 @@ export const convertToCsv = (rows: GenericObject[], header: string[]) => {
     return Papa.unparse({fields: header.filter((item) => !!item), data: rows})
 }
 
+export const escapeNewlines = (value: string) => value.replace(/\n/g, "\\n")
+
 export const downloadCsv = (csvContent: string, filename: string): void => {
     if (typeof window === "undefined") return