From 463ee9afc6e03c04fdbb138bf29b57341ae6aa94 Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton@redhat.com>
Date: Tue, 26 Mar 2024 10:17:07 -0400
Subject: [PATCH] PR suggestions

---
 .../applications-table/applications-table.tsx |  2 ++
 .../components/manage-columns-modal.tsx       |  4 +--
 .../components/manage-columns-toolbar.tsx     | 34 ++++++++++---------
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
index 6116c3b3f4..720f0daf5c 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -805,6 +805,8 @@ export const ApplicationsTable: React.FC = () => {
                   </ToolbarItem>
                 </RBAC>
               </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarGroup variant="icon-button-group">
               {dropdownItems.length ? (
                 <ToolbarItem id="toolbar-kebab">
                   <KebabDropdown
diff --git a/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx b/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
index ac0c8a9881..d8aec5d7aa 100644
--- a/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
+++ b/client/src/app/pages/applications/applications-table/components/manage-columns-modal.tsx
@@ -18,7 +18,6 @@ import {
 import { ColumnState } from "@app/hooks/table-controls/column/useColumnState";
 
 export interface ManagedColumnsProps<TColumnKey extends string> {
-  showModal: boolean;
   onClose(): void;
   columns: ColumnState<TColumnKey>[];
   setColumns: (newColumns: ColumnState<TColumnKey>[]) => void;
@@ -29,7 +28,6 @@ export interface ManagedColumnsProps<TColumnKey extends string> {
 }
 
 export const ManageColumnsModal = <TColumnKey extends string>({
-  showModal,
   description = "Selected columns will be displayed in the table.",
   onClose,
   columns,
@@ -59,7 +57,7 @@ export const ManageColumnsModal = <TColumnKey extends string>({
   return (
     <Modal
       title={title}
-      isOpen={showModal}
+      isOpen={true}
       variant="small"
       description={
         <TextContent>
diff --git a/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx b/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx
index 8403a44b0f..91d4f5a726 100644
--- a/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx
+++ b/client/src/app/pages/applications/applications-table/components/manage-columns-toolbar.tsx
@@ -9,8 +9,8 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ColumnState } from "@app/hooks/table-controls/column/useColumnState";
 import { ManageColumnsModal } from "./manage-columns-modal";
+import { ColumnsIcon } from "@patternfly/react-icons";
 
-// Define props to accept columns and setColumns directly
 interface ManageColumnsToolbarProps<TColumnKey extends string> {
   columns: ColumnState<TColumnKey>[];
   setColumns: (newColumns: ColumnState<TColumnKey>[]) => void;
@@ -24,28 +24,30 @@ export const ManageColumnsToolbar = <TColumnKey extends string>({
   const [isOpen, setIsOpen] = useState(false);
   return (
     <>
-      <ToolbarItem variant="overflow-menu">
+      <ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuGroup groupType="button" isPersistent>
             <OverflowMenuItem isPersistent>
-              <Button variant="link" onClick={() => setIsOpen(true)}>
-                Manage columns
-              </Button>
+              <Button
+                variant="plain"
+                onClick={() => setIsOpen(true)}
+                icon={<ColumnsIcon />}
+              ></Button>
             </OverflowMenuItem>
           </OverflowMenuGroup>
         </OverflowMenu>
       </ToolbarItem>
-
-      <ManageColumnsModal
-        showModal={isOpen}
-        onClose={() => setIsOpen(false)}
-        description={t("Selected columns will be displayed in the table.")}
-        setColumns={setColumns}
-        columns={columns}
-        saveLabel={t("Save")}
-        cancelLabel={t("Cancel")}
-        title={t("Manage Columns")}
-      />
+      {isOpen && (
+        <ManageColumnsModal
+          onClose={() => setIsOpen(false)}
+          description={t("Selected columns will be displayed in the table.")}
+          setColumns={setColumns}
+          columns={columns}
+          saveLabel={t("Save")}
+          cancelLabel={t("Cancel")}
+          title={t("Manage Columns")}
+        />
+      )}
     </>
   );
 };