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

Working towards resolving:
#1283

---------

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

client/public/locales/en/translation.json

@@ -178,6 +178,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?",
@@ -220,7 +221,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>
   );