From 4a414174d8f6bbd82618cf8d2ba2a9b1f8c3a283 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 16 Jul 2024 12:02:12 -0400 Subject: [PATCH] :seedling: 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 --- client/src/app/hooks/table-controls/types.ts | 11 ++++++++++- .../app/hooks/table-controls/useTableControlProps.ts | 6 ++++++ .../applications-table/applications-table.tsx | 1 + .../manage-imports-details/manage-imports-details.tsx | 1 + .../applications/manage-imports/manage-imports.tsx | 1 + client/src/app/pages/archetypes/archetypes-page.tsx | 1 + .../assessment-settings/assessment-settings-page.tsx | 1 + .../components/questionnaires-table.tsx | 1 + .../controls/business-services/business-services.tsx | 3 ++- .../pages/controls/job-functions/job-functions.tsx | 3 ++- .../stakeholder-groups/stakeholder-groups.tsx | 3 ++- .../app/pages/controls/stakeholders/stakeholders.tsx | 3 ++- client/src/app/pages/controls/tags/tags.tsx | 3 ++- client/src/app/pages/external/jira/trackers.tsx | 3 ++- client/src/app/pages/identities/identities.tsx | 3 ++- .../components/manage-applications-form.tsx | 3 ++- .../migration-waves/components/stakeholders-table.tsx | 3 ++- .../components/wave-applications-table.tsx | 3 ++- .../migration-waves/components/wave-status-table.tsx | 3 ++- 19 files changed, 44 insertions(+), 12 deletions(-) diff --git a/client/src/app/hooks/table-controls/types.ts b/client/src/app/hooks/table-controls/types.ts index ba874adedf..d2293c2348 100644 --- 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; + /** + * 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; }; /** diff --git a/client/src/app/hooks/table-controls/useTableControlProps.ts b/client/src/app/hooks/table-controls/useTableControlProps.ts index a0ea625f37..accaf120b0 100644 --- 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 index 97159ccf9e..51e5f2cee3 100644 --- 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 index d28fe345a5..90860f262c 100644 --- 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 index 3bcf7d0a23..ec7883a8cb 100644 --- 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 index ccbfbc9c60..29fea0940f 100644 --- 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 index ff0715b5fe..efea63d633 100644 --- 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/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx index 48384839e4..6302f0a01d 100644 --- a/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx +++ b/client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx @@ -39,6 +39,7 @@ const QuestionnairesTable: React.FC = ({ 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 index 03f57a333d..285f4cad61 100644 --- 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 index b3b6220610..d6b76d6e2f 100644 --- 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 index 32d4144cac..6cae4e9c37 100644 --- 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 index 9011223fdd..d5e52cfe08 100644 --- 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 index fd25898175..6698adc124 100644 --- 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 index 43130fa648..2a1dba255a 100644 --- 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 index 0523076356..95ed88fa61 100644 --- 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 index a0783edca4..d427f528e9 100644 --- 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 = ({ 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 index fb2ab2c879..b2f32ac4c3 100644 --- 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 = ({ }) => { 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 index a922a7f448..2ff190fa23 100644 --- 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 = ({ 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 index 8e26a22e9e..80689f20c9 100644 --- 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 = ({ const tableControls = useLocalTableControls({ tableName: "wave-applications-table", - idProperty: "name", + idProperty: "id", + dataNameProperty: "name", items: migrationWave.fullApplications, columnNames: { appName: "Application name",