👻 Refactor tags table to remove deprecated legacy table dep (#1849)

Resolves https://issues.redhat.com/browse/MTA-2224

---------

<!--
## PR Title Prefix

Every **PR Title** should be prefixed with :text: to indicate its type.

- Breaking change: ⚠️ (`⚠️`)
- Non-breaking feature: ✨ (`✨`)
- Patch fix: 🐛 (`🐛`)
- Docs: 📖 (`📖`)
- Infra/Tests/Other: 🌱 (`🌱`)
- No release note: 👻 (`👻`)

For example, a pull request containing breaking changes might look like
`⚠️ My pull request contains breaking changes`.

Since GitHub supports emoji aliases (ie. `👻`), there is no need to
include
the emoji directly in the PR title -- **please use the alias**. It used
to be
the case that projects using emojis for PR typing had to include the
emoji
directly because GitHub didn't render the alias. Given that `⚠️`
is
easy enough to read as text, easy to parse in release tooling, and
rendered in
GitHub well, we prefer to standardize on the alias.

For more information, please see the Konveyor
[Versioning
Doc](https://github.com/konveyor/release-tools/blob/main/VERSIONING.md).
-->

Signed-off-by: Ian Bolton <[email protected]>

client/public/locales/en/translation.json

@@ -177,6 +177,7 @@
     "blockedDeleteTarget": "Cannot delete {{what}} because it is associated with a target.",
     "defaultBlockedDelete": "Cannot delete {{what}} because it is associated with another object.",
     "cannotDeleteApplicationsAssignedToMigrationWave": "Cannot delete applications that are assigned to a migration wave.",
+    "cannotDeleteNonEmptyTagCategory": "Cannot delete a tag category that contains tags.",
     "continueConfirmation": "Yes, continue",
     "copyAssessmentAndReviewBody": "Some of the selected target applications have an in-progress or complete assessment/review. By continuing, the existing assessment(s)/review(s) will be replaced by the copied assessment/review. Do you wish to continue?",
     "copyAssessmentAndReviewQuestion": "Copy assessment and review?",
@@ -218,7 +219,9 @@
     "toTagApplication": "Either no tags exist yet or you may not have permission to view any. If you have permission, try creating a new custom tag.",
     "unsavedChanges": "Are you sure you want to close the assessment? Any unsaved changes will be lost.",
     "noAnswers": "Are you sure you want to close the assessment? There are no answers to save.",
-    "unlinkTicket": "Unlink from Jira"
+    "unlinkTicket": "Unlink from Jira",
+    "noTagsAvailable": "No tags available",
+    "noAssociatedTags": "This tag category has no associated tags."
   },
   "proposedActions": {
     "refactor": "Refactor",

client/src/app/components/labels/item-tag-label/item-tag-label.tsx

@@ -3,7 +3,7 @@ import { Tag, TagCategory } from "@app/api/models";
 import { COLOR_HEX_VALUES_BY_NAME } from "@app/Constants";
 import { LabelCustomColor } from "@app/components/LabelCustomColor";
 
-export const getTagCategoryFallbackColor = (category?: TagCategory) => {
+export const getTagCategoryFallbackColor = (category?: TagCategory | null) => {
   if (!category?.id) return COLOR_HEX_VALUES_BY_NAME.gray;
   const colorValues = Object.values(COLOR_HEX_VALUES_BY_NAME);
   return colorValues[category?.id % colorValues.length];

client/src/app/pages/controls/tags/components/tag-table.tsx

@@ -8,101 +8,53 @@ import {
   Tbody,
   Td,
   ActionsColumn,
-  IAction,
-  cellWidth,
-  ICell,
-  IRow,
-  IRowData,
 } from "@patternfly/react-table";
 import { Tag, TagCategory } from "@app/api/models";
 import "./tag-table.css";
 
-const ENTITY_FIELD = "entity";
-
-const getRow = (rowData: IRowData): Tag => {
-  return rowData[ENTITY_FIELD];
-};
-
 export interface TabTableProps {
   tagCategory: TagCategory;
   onEdit: (tag: Tag) => void;
   onDelete: (tag: Tag) => void;
 }
 
 export const TagTable: React.FC<TabTableProps> = ({
-  tagCategory: tagCategory,
+  tagCategory,
   onEdit,
   onDelete,
 }) => {
   const { t } = useTranslation();
 
-  const columns: ICell[] = [
-    {
-      title: t("terms.tagName"),
-      transforms: [cellWidth(100)],
-      cellFormatters: [],
-      props: {
-        className: "columnPadding",
-      },
-    },
-  ];
-
-  const rows: IRow[] = [];
-  (tagCategory.tags || [])
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .forEach((item) => {
-      rows.push({
-        [ENTITY_FIELD]: item,
-        noPadding: true,
-        cells: [
-          {
-            title: item.name,
-          },
-        ],
-      });
-    });
-
-  const editRow = (row: Tag) => {
-    onEdit(row);
-  };
-
-  const deleteRow = (row: Tag) => {
-    onDelete(row);
-  };
-
-  const defaultActions = (tag: IRowData): IAction[] => [
-    {
-      title: t("actions.edit"),
-      onClick: () => editRow(getRow(tag)),
-    },
-    {
-      title: t("actions.delete"),
-      onClick: () => deleteRow(getRow(tag)),
-    },
-  ];
-
   return (
     <Table borders={false} aria-label="Tag table" variant="compact" isNested>
       <Thead noWrap>
         <Tr>
           <Th>{t("terms.tagName")}</Th>
-          <Td></Td>
+          <Td />
         </Tr>
       </Thead>
       <Tbody>
-        {rows.map((row: IRow) => {
-          const rowActions = defaultActions(row);
-          return (
-            <Tr>
-              {row.cells?.map((cell: any) => (
-                <Td>{cell.title}</Td>
-              ))}
+        {(tagCategory.tags || [])
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((tag) => (
+            <Tr key={tag.name}>
+              <Td>{tag.name}</Td>
               <Td isActionCell>
-                {rowActions && <ActionsColumn items={rowActions} />}
+                <ActionsColumn
+                  items={[
+                    {
+                      title: t("actions.edit"),
+                      onClick: () => onEdit(tag),
+                    },
+                    {
+                      title: t("actions.delete"),
+                      onClick: () => onDelete(tag),
+                    },
+                  ]}
+                />
               </Td>
             </Tr>
-          );
-        })}
+          ))}
       </Tbody>
     </Table>
   );