From 797d15274b74070e3eb84657bf93a9a56132239c 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 Signed-off-by: Ian Bolton <ibolton@redhat.com> --- .../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")} + /> + )} </> ); };