Changing style of edit&delete buttons

Signed-off-by: TalyaNaima <[email protected]>
konveyor · Oct 8, 2024 · d37a868 · d37a868
1 parent 4837443
commit d37a868
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 71 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,62 +1,47 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import {
-  Table,
-  Thead,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-  ActionsColumn,
-} from "@patternfly/react-table";
-import { Tag, TagCategory } from "@app/api/models";
-import "./tag-table.css";
-import { universalComparator } from "@app/utils/utils";
-
-export interface TabTableProps {
-  tagCategory: TagCategory;
-  onEdit: (tag: Tag) => void;
-  onDelete: (tag: Tag) => void;
-}
-
-export const TagTable: React.FC<TabTableProps> = ({
-  tagCategory,
-  onEdit,
-  onDelete,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Table borders={false} aria-label="Tag table" variant="compact" isNested>
-      <Thead noWrap>
-        <Tr>
-          <Th>{t("terms.tagName")}</Th>
-          <Td />
-        </Tr>
-      </Thead>
-      <Tbody>
-        {(tagCategory.tags || [])
-          .sort((a, b) => universalComparator(a.name, b.name))
-          .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>
-            </Tr>
-          ))}
-      </Tbody>
-    </Table>
-  );
-};
+import React from "react";
+import { useTranslation } from "react-i18next";
+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;
+  onEdit: (tag: Tag) => void;
+  onDelete: (tag: Tag) => void;
+}
+
+export const TagTable: React.FC<TabTableProps> = ({
+  tagCategory,
+  onEdit,
+  onDelete,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Table borders={false} aria-label="Tag table" variant="compact" isNested>
+      <Thead noWrap>
+        <Tr>
+          <Th>{t("terms.tagName")}</Th>
+          <Td />
+        </Tr>
+      </Thead>
+      <Tbody>
+        {(tagCategory.tags || [])
+          .sort((a, b) => universalComparator(a.name, b.name))
+          .map((tag) => (
+            <Tr key={tag.name}>
+              <Td>{tag.name}</Td>
+              <Td isActionCell>
+                <ControlTableActionButtons
+                  onEdit={() => onEdit(tag)}
+                  onDelete={() => onDelete(tag)}
+                />
+              </Td>
+            </Tr>
+          ))}
+      </Tbody>
+    </Table>
+  );
+};
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,14 +385,16 @@ export const Tags: React.FC = () => {
                         >
                           {tagCategory.tags?.length || 0}
                         </Td>
-                        <AppTableActionButtons
-                          isDeleteEnabled={!!tagCategory.tags?.length}
-                          tooltipMessage={t(
-                            "message.cannotDeleteNonEmptyTagCategory"
-                          )}
-                          onEdit={() => setTagCategoryModalState(tagCategory)}
-                          onDelete={() => setTagCategoryToDelete(tagCategory)}
-                        />
+                        <Td>
+                          <ControlTableActionButtons
+                            isDeleteEnabled={!!tagCategory.tags?.length}
+                            deleteTooltipMessage={t(
+                              "message.cannotDeleteNonEmptyTagCategory"
+                            )}
+                            onEdit={() => setTagCategoryModalState(tagCategory)}
+                            onDelete={() => setTagCategoryToDelete(tagCategory)}
+                          />
+                        </Td>
                       </TableRowContentWithControls>
                     </Tr>
                     {isCellExpanded(tagCategory) && (