Redesign content usage table

src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTable.tsx

@@ -0,0 +1,94 @@
+import { Table } from "optimizely-oui";
+import React, { useCallback } from "react";
+import { translations } from "../../../translations";
+import { ContentUsageDto } from "../../../dtos";
+import { TableColumn } from "../../../types";
+import ContentTypeUsageTableRow from "./ContentTypeUsageTableRow/ContentTypeUsageTableRow";
+import { navigateTo } from "../../../routes";
+
+enum ContentTypeUsageTableColumn {
+  ID = "id",
+  Name = "name",
+  LanguageBranch = "languageBranch",
+  PageUrl = "pageUrl",
+  Actions = "actions",
+}
+
+interface ContentTypeUsagesTableProps {
+  tableColumns: TableColumn<ContentUsageDto>[];
+  rows: ContentUsageDto[];
+  onSortChange: (column: TableColumn<ContentUsageDto>) => void;
+  sortDirection: string;
+}
+
+const ContentTypeUsagesTable = ({
+  tableColumns,
+  rows,
+  onSortChange,
+  sortDirection,
+}: ContentTypeUsagesTableProps) => {
+  const onTableRowClick = useCallback(
+    (url?: string | null, alwaysTriggerClick = false) =>
+      (event: React.PointerEvent) => {
+        if (!url) return;
+
+        const target = event.target as HTMLTableCellElement | undefined;
+
+        if ((target && target.tagName === "TD") || alwaysTriggerClick) {
+          navigateTo(url, true);
+        }
+      },
+    [navigateTo]
+  );
+
+  return (
+    <Table
+      tableLayoutAlgorithm="fixed"
+      className="forte-optimizely-content-usage-table"
+    >
+      <Table.THead>
+        <Table.TR>
+          {tableColumns
+            .filter((column) => column.visible)
+            .map((column) => (
+              <>
+                <Table.TH
+                  colSpan={column.columnSpanWidth}
+                  sorting={{
+                    canSort: column.sorting,
+                    handleSort: () => onSortChange(column),
+                    order: sortDirection,
+                  }}
+                  key={column.id}
+                >
+                  {column.name}
+                </Table.TH>
+              </>
+            ))}
+        </Table.TR>
+      </Table.THead>
+
+      <Table.TBody>
+        {rows.length > 0 ? (
+          rows.map(
+            (row) => (
+              <ContentTypeUsageTableRow
+                key={`${row.id}-${row.languageBranch}`}
+                {...row}
+                tableColumns={tableColumns}
+                onRowClick={onTableRowClick(row.editUrl)}
+              />
+            )
+          )
+        ) : (
+          <Table.TR noHover>
+            <Table.TD colSpan={5}>{translations.noResults}</Table.TD>
+          </Table.TR>
+        )}
+      </Table.TBody>
+    </Table>
+  );
+};
+
+export default ContentTypeUsagesTable;
+export { ContentTypeUsageTableColumn };

src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTableRow/ContentTypeUsageTableRow.tsx

@@ -0,0 +1,46 @@
+import { Table } from "optimizely-oui";
+import { useTranslations } from "../../../../Contexts/TranslationsProvider";
+import { ContentUsageDto } from "../../../../dtos";
+import { TableColumn } from "../../../../types";
+import PageUrlCell from "../../PageUrlCell/PageUrlCell";
+import React from "react";
+import { ContentTypeUsageTableColumn } from "../ContentTypeUsageTable";
+
+interface ContentTypeUsageTableRowProps<TableDataType> extends ContentUsageDto {
+    tableColumns: TableColumn<TableDataType>[];
+    onRowClick?: (event: React.PointerEvent) => void;
+  }
+
+const ContentTypeUsageTableRow = ({
+    tableColumns,
+    onRowClick,
+    ...row
+  }: ContentTypeUsageTableRowProps<ContentUsageDto>) => {
+    const {
+      views: {
+        contentUsagesView: {
+          table: { actions },
+        },
+      },
+    } = useTranslations();
+
+    return (
+      <Table.TR onRowClick={onRowClick}>
+        { tableColumns
+          .filter((column) => column.visible)
+          .map((column) =>
+          <Table.TD colSpan={column.columnSpanWidth}>
+            { column.id.toString() === ContentTypeUsageTableColumn.PageUrl &&
+            row.pageUrls.length > 0 ? (
+                <PageUrlCell pageUrls={row.pageUrls} />
+            ) : (
+                row[column.id]
+            )}
+          </Table.TD>
+        )}
+      </Table.TR>
+    );
+  };
+
+export default ContentTypeUsageTableRow;
+

src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/PageUrlCell/PageUrlCell.tsx

@@ -0,0 +1,19 @@
+import { Disclose } from "optimizely-oui";
+import React from "react";
+import PageUrlLink from "./PageUrlLink/PageUrlLink";
+
+const PageUrlCell = ({pageUrls}:{pageUrls: string[]}) => {
+    const isManyUrls = pageUrls.length > 1;
+
+    return isManyUrls ? (
+      <Disclose title="Many usages">
+        {pageUrls.map((pageUrl, index) => (
+          <PageUrlLink key={index} pageUrl={pageUrl}/>
+        ))}
+      </Disclose>
+    ) : (
+      <PageUrlLink pageUrl={pageUrls[0]}/>
+    );
+  }
+
+  export default PageUrlCell;

src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/PageUrlCell/PageUrlLink/PageUrlLink.tsx

@@ -0,0 +1,12 @@
+import { Link } from "optimizely-oui";
+import React from "react";
+
+const PageUrlLink = ({ pageUrl }: { pageUrl: string }) => {
+    return (
+      <Link href={pageUrl} newWindow>
+        <div className="forte-optimizely-content-usage-page-url">{pageUrl}</div>
+      </Link>
+    );
+  };
+
+export default PageUrlLink;

src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypeUsageView.scss

@@ -1,4 +1,20 @@
 .forte-optimizely-content-usage-spinner__center {
     display: flex;
     justify-content: center;
-}
+}
+
+.forte-optimizely-content-usage-page-url {
+    padding: 0 8px;
+    width: 100%;
+    &:hover {
+        background-color: var(--grey-50);
+    }
+}
+
+.oui-disclose.is-active{
+    .oui-disclose__content {
+        & > .forte-optimizely-content-usage-page-url:last-child {
+            padding-bottom: 0;
+        }
+    }
+}