diff --git a/client/src/app/hooks/table-controls/types.ts b/client/src/app/hooks/table-controls/types.ts index ba874aded..d2293c234 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 a0ea625f3..accaf120b 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 97159ccf9..51e5f2cee 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 d28fe345a..90860f262 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 3bcf7d0a2..ec7883a8c 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 ccbfbc9c6..29fea0940 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 ff0715b5f..efea63d63 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 48384839e..6302f0a01 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 03f57a333..285f4cad6 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 b3b622061..d6b76d6e2 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 32d4144ca..6cae4e9c3 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 9011223fd..d5e52cfe0 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 fd2589817..6698adc12 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 43130fa64..2a1dba255 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 052307635..95ed88fa6 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 a0783edca..d427f528e 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 fb2ab2c87..b2f32ac4c 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 a922a7f44..2ff190fa2 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 8e26a22e9..80689f20c 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",