✨ tags table change button styles (#2119)

Changing the style of the edit & delete buttons in tags table (including the tags category) Part of #1318 UI tests PR: 1237 Signed-off-by: TalyaNeima <[email protected]> Co-authored-by: Scott Dickerson <[email protected]> Co-authored-by: Maayan Hadasi <[email protected]>
konveyor · Jan 22, 2025 · ea8405e · ea8405e
1 parent 501c787
commit ea8405e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 26 deletions.
diff --git a/client/src/app/pages/controls/tags/components/tag-table.tsx b/client/src/app/pages/controls/tags/components/tag-table.tsx
@@ -1,17 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Table,
-  Thead,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-  ActionsColumn,
-} from "@patternfly/react-table";
+import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
 import { Tag, TagCategory } from "@app/api/models";
 import "./tag-table.css";
 import { universalComparator } from "@app/utils/utils";
+import { ControlTableActionButtons } from "../../ControlTableActionButtons";
 
 export interface TabTableProps {
   tagCategory: TagCategory;
@@ -40,20 +33,10 @@ export const TagTable: React.FC<TabTableProps> = ({
           .map((tag) => (
             <Tr key={tag.name}>
               <Td>{tag.name}</Td>
-              <Td isActionCell>
-                <ActionsColumn
-                  items={[
-                    {
-                      title: t("actions.edit"),
-                      onClick: () => onEdit(tag),
-                    },
-                    {
-                      title: t("actions.delete"),
-                      onClick: () => onDelete(tag),
-                    },
-                  ]}
-                />
-              </Td>
+              <ControlTableActionButtons
+                onEdit={() => onEdit(tag)}
+                onDelete={() => onDelete(tag)}
+              />
             </Tr>
           ))}
       </Tbody>

diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx
@@ -43,7 +43,6 @@ import { COLOR_NAMES_BY_HEX_VALUE } from "@app/Constants";
 import { TagForm } from "./components/tag-form";
 import { TagCategoryForm } from "./components/tag-category-form";
 import { getTagCategoryFallbackColor } from "@app/components/labels/item-tag-label/item-tag-label";
-import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
 import { Color } from "@app/components/Color";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
@@ -57,6 +56,7 @@ import {
 import { useLocalTableControls } from "@app/hooks/table-controls";
 import { RBAC, controlsWriteScopes, RBAC_TYPE } from "@app/rbac";
 import { TagTable } from "./components/tag-table";
+import { ControlTableActionButtons } from "../ControlTableActionButtons";
 
 export const Tags: React.FC = () => {
   const { t } = useTranslation();
@@ -385,9 +385,9 @@ export const Tags: React.FC = () => {
                         >
                           {tagCategory.tags?.length || 0}
                         </Td>
-                        <AppTableActionButtons
+                        <ControlTableActionButtons
                           isDeleteEnabled={!!tagCategory.tags?.length}
-                          tooltipMessage={t(
+                          deleteTooltipMessage={t(
                             "message.cannotDeleteNonEmptyTagCategory"
                           )}
                           onEdit={() => setTagCategoryModalState(tagCategory)}