PR suggestions

konveyor · Mar 26, 2024 · 463ee9a · 463ee9a
1 parent e2a0503
commit 463ee9a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 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
@@ -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
@@ -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
@@ -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")}
+        />
+      )}
     </>
   );
 };