diff --git a/client/src/app/pages/controls/tags/components/tag-table.tsx b/client/src/app/pages/controls/tags/components/tag-table.tsx index c3ee0036c..058aea3e0 100644 --- 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 = ({ - tagCategory, - onEdit, - onDelete, -}) => { - const { t } = useTranslation(); - - return ( - - - - - - - - {(tagCategory.tags || []) - .sort((a, b) => universalComparator(a.name, b.name)) - .map((tag) => ( - - - - - ))} - -
{t("terms.tagName")} -
{tag.name} - onEdit(tag), - }, - { - title: t("actions.delete"), - onClick: () => onDelete(tag), - }, - ]} - /> -
- ); -}; +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 = ({ + tagCategory, + onEdit, + onDelete, +}) => { + const { t } = useTranslation(); + + return ( + + + + + + + + {(tagCategory.tags || []) + .sort((a, b) => universalComparator(a.name, b.name)) + .map((tag) => ( + + + + + ))} + +
{t("terms.tagName")} +
{tag.name} + onEdit(tag)} + onDelete={() => onDelete(tag)} + /> +
+ ); +}; diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx index 6698adc12..138837447 100644 --- 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} - setTagCategoryModalState(tagCategory)} - onDelete={() => setTagCategoryToDelete(tagCategory)} - /> + + setTagCategoryModalState(tagCategory)} + onDelete={() => setTagCategoryToDelete(tagCategory)} + /> + {isCellExpanded(tagCategory) && (