🌱 Add data attributes to table rows (#1996)

To enable easier and safer selection of table rows by testing code, add some data attributes to the tr: - `data-item-id` - Holds the `idProperty` value of a table's items. This is typically the item's id number but may be a frontend generated ID in some cases. - `data-item-name` - If the table property `dataNameProperty` is provided, hold the name property of a table's item. For any tables that use `/use.?*TableControls\(/`, add a `dataNameProperty` and if necessary, adjust the `idProperty`. A few tables for items without a good item id and name property were left with just the `idProperty`. --------- Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Jul 16, 2024 · 4a41417 · 4a41417
1 parent 646d3d6
commit 4a41417
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 12 deletions.
diff --git a/client/src/app/hooks/table-controls/types.ts b/client/src/app/hooks/table-controls/types.ts
@@ -1,6 +1,10 @@
 import { TableProps, TdProps, ThProps, TrProps } from "@patternfly/react-table";
 import { ISelectionStateArgs, useSelectionState } from "@migtools/lib-ui";
-import { DisallowCharacters, DiscriminatedArgs } from "@app/utils/type-utils";
+import {
+  DisallowCharacters,
+  DiscriminatedArgs,
+  KeyWithValueType,
+} from "@app/utils/type-utils";
 import {
   IFilterStateArgs,
   ILocalFilterDerivedStateArgs,
@@ -314,6 +318,11 @@ export type IUseTableControlPropsArgs<
      * The state for the columns feature. Returned by useColumnState.
      */
     columnState: IColumnState<TColumnKey>;
+    /**
+     * Name of a field in TItem to use as the table row's `data-item-name` value.  Without
+     * this property provided, the `data-item-name` is not added to the table row.
+     */
+    dataNameProperty?: KeyWithValueType<TItem, string>;
   };
 
 /**

diff --git a/client/src/app/hooks/table-controls/useTableControlProps.ts b/client/src/app/hooks/table-controls/useTableControlProps.ts
@@ -67,6 +67,9 @@ export const useTableControlProps = <
       isItemSelected,
     },
     columnNames,
+    idProperty,
+    dataNameProperty,
+    tableName,
     hasActionsColumn = false,
     variant,
     isFilterEnabled,
@@ -134,6 +137,9 @@ export const useTableControlProps = <
   const getTrProps: PropHelpers["getTrProps"] = ({ item, onRowClick }) => {
     const activeItemTrProps = getActiveItemTrProps({ item });
     return {
+      id: `${tableName}-row-item-${item[idProperty]}`,
+      "data-item-id": item[idProperty],
+      "data-item-name": dataNameProperty && item[dataNameProperty],
       ...(isActiveItemEnabled && activeItemTrProps),
       onRowClick: (event) =>
         handlePropagatedRowClick(event, () => {

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -321,6 +321,7 @@ export const ApplicationsTable: React.FC = () => {
   const tableControls = useLocalTableControls({
     tableName: "applications",
     idProperty: "id",
+    dataNameProperty: "name",
     items: applications || [],
     columnNames: {
       name: "Name",

diff --git a/client/src/app/pages/applications/manage-imports-details/manage-imports-details.tsx b/client/src/app/pages/applications/manage-imports-details/manage-imports-details.tsx
@@ -74,6 +74,7 @@ export const ManageImportsDetails: React.FC = () => {
   const tableControls = useLocalTableControls({
     tableName: "manage-imports-details",
     idProperty: "Application Name",
+    dataNameProperty: "Application Name",
     items: imports || [],
     columnNames: {
       name: t("terms.name"),

diff --git a/client/src/app/pages/applications/manage-imports/manage-imports.tsx b/client/src/app/pages/applications/manage-imports/manage-imports.tsx
@@ -80,6 +80,7 @@ export const ManageImports: React.FC = () => {
   const tableControls = useLocalTableControls({
     tableName: "manage-imports",
     idProperty: "id",
+    dataNameProperty: "filename",
     items: importSummaries,
     columnNames: {
       importTime: "Import Time",

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -196,6 +196,7 @@ const Archetypes: React.FC = () => {
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.archetypes,
     idProperty: "id",
+    dataNameProperty: "name",
     items: archetypes,
     isLoading: isFetching,
     hasActionsColumn: true,

diff --git a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
@@ -103,6 +103,7 @@ const AssessmentSettings: React.FC = () => {
   const tableControls = useLocalTableControls({
     tableName: "questionnaires-table",
     idProperty: "id",
+    dataNameProperty: "name",
     items: questionnaires || [],
     columnNames: {
       required: "Required",

diff --git a/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/...rc/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx
@@ -39,6 +39,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
   const tableControls = useLocalTableControls({
     tableName: "questionnaires-table",
     idProperty: "id",
+    dataNameProperty: "name",
     items: questionnaires || [],
     columnNames: {
       questionnaires: tableName,

diff --git a/client/src/app/pages/controls/business-services/business-services.tsx b/client/src/app/pages/controls/business-services/business-services.tsx
@@ -83,7 +83,8 @@ export const BusinessServices: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "business-services-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: businessServices,
     columnNames: {
       name: t("terms.name"),

diff --git a/client/src/app/pages/controls/job-functions/job-functions.tsx b/client/src/app/pages/controls/job-functions/job-functions.tsx
@@ -57,7 +57,8 @@ export const JobFunctions: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "job-functions-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: jobFunctions || [],
     columnNames: {
       name: t("terms.name"),

diff --git a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
@@ -100,7 +100,8 @@ export const StakeholderGroups: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "stakeholder-groups-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: stakeholderGroups,
     columnNames: {
       name: "Name",

diff --git a/client/src/app/pages/controls/stakeholders/stakeholders.tsx b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
@@ -96,7 +96,8 @@ export const Stakeholders: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "stakeholders-table",
-    idProperty: "email",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: stakeholders,
     columnNames: {
       email: "Email",

diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx
@@ -162,7 +162,8 @@ export const Tags: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "business-services-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: tagCategories,
     columnNames: {
       tagCategory: t("terms.tagCategory"),

diff --git a/client/src/app/pages/external/jira/trackers.tsx b/client/src/app/pages/external/jira/trackers.tsx
@@ -93,7 +93,8 @@ export const JiraTrackers: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "jira-Tracker-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: trackers,
     columnNames: {
       name: `${t("terms.instance")} name`,

diff --git a/client/src/app/pages/identities/identities.tsx b/client/src/app/pages/identities/identities.tsx
@@ -143,7 +143,8 @@ export const Identities: React.FC = () => {
 
   const tableControls = useLocalTableControls({
     tableName: "identities-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: identities,
     columnNames: {
       name: t("terms.name"),

diff --git a/client/src/app/pages/migration-waves/components/manage-applications-form.tsx b/client/src/app/pages/migration-waves/components/manage-applications-form.tsx
@@ -101,7 +101,8 @@ export const ManageApplicationsForm: React.FC<ManageApplicationsFormProps> = ({
 
   const tableControls = useLocalTableControls({
     tableName: "manage-applications-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: availableApplications,
     columnNames: {
       name: "Application Name",

diff --git a/client/src/app/pages/migration-waves/components/stakeholders-table.tsx b/client/src/app/pages/migration-waves/components/stakeholders-table.tsx
@@ -19,7 +19,8 @@ export const WaveStakeholdersTable: React.FC<IWaveStakeholdersTableProps> = ({
 }) => {
   const tableControls = useLocalTableControls({
     tableName: "wave-stakeholders-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: migrationWave.allStakeholders,
     columnNames: {
       name: "Name",

diff --git a/client/src/app/pages/migration-waves/components/wave-applications-table.tsx b/client/src/app/pages/migration-waves/components/wave-applications-table.tsx
@@ -36,7 +36,8 @@ export const WaveApplicationsTable: React.FC<IWaveApplicationsTableProps> = ({
 
   const tableControls = useLocalTableControls({
     tableName: "wave-applications-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: migrationWave.fullApplications,
     columnNames: {
       appName: "Name",

diff --git a/client/src/app/pages/migration-waves/components/wave-status-table.tsx b/client/src/app/pages/migration-waves/components/wave-status-table.tsx
@@ -62,7 +62,8 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
 
   const tableControls = useLocalTableControls({
     tableName: "wave-applications-table",
-    idProperty: "name",
+    idProperty: "id",
+    dataNameProperty: "name",
     items: migrationWave.fullApplications,
     columnNames: {
       appName: "Application name",