diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js index e1d5c11ce..ad57bed01 100644 --- a/src/registrar/assets/src/js/getgov/table-base.js +++ b/src/registrar/assets/src/js/getgov/table-base.js @@ -382,7 +382,7 @@ export class BaseTable { * for a member, they will also see the kebab column) * @param {Object} dataObjects - Data which contains info on domain requests or a user's permission * Currently returns a dictionary of either: - * - "needsAdditionalColumn": If a new column should be displayed + * - "hasAdditionalActions": If additional elements need to be added to the Action column * - "UserPortfolioPermissionChoices": A user's portfolio permission choices */ customizeTable(dataObjects){ return {}; } @@ -406,7 +406,7 @@ export class BaseTable { * Returns either: data.members, data.domains or data.domain_requests * @param {Object} dataObject - The data used to populate the row content * @param {HTMLElement} tbody - The table body to which the new row is appended to - * @param {Object} customTableOptions - Additional options for customizing row appearance (ie needsAdditionalColumn) + * @param {Object} customTableOptions - Additional options for customizing row appearance (ie hasAdditionalActions) */ addRow(dataObject, tbody, customTableOptions) { throw new Error('addRow must be defined'); diff --git a/src/registrar/assets/src/js/getgov/table-domain-requests.js b/src/registrar/assets/src/js/getgov/table-domain-requests.js index 51e4ea12b..f667a96b5 100644 --- a/src/registrar/assets/src/js/getgov/table-domain-requests.js +++ b/src/registrar/assets/src/js/getgov/table-domain-requests.js @@ -52,26 +52,8 @@ export class DomainRequestsTable extends BaseTable { // Manage "export as CSV" visibility for domain requests this.toggleExportButton(data.domain_requests); - let needsDeleteColumn = data.domain_requests.some(request => request.is_deletable); - - // Remove existing delete th and td if they exist - let existingDeleteTh = document.querySelector('.delete-header'); - if (!needsDeleteColumn) { - if (existingDeleteTh) - existingDeleteTh.remove(); - } else { - if (!existingDeleteTh) { - const delheader = document.createElement('th'); - delheader.setAttribute('scope', 'col'); - delheader.setAttribute('role', 'columnheader'); - delheader.setAttribute('class', 'delete-header width-5'); - delheader.innerHTML = ` - Delete Action`; - let tableHeaderRow = this.tableWrapper.querySelector('thead tr'); - tableHeaderRow.appendChild(delheader); - } - } - return { 'needsAdditionalColumn': needsDeleteColumn }; + let isDeletable = data.domain_requests.some(request => request.is_deletable); + return { 'hasAdditionalActions': isDeletable }; } addRow(dataObject, tbody, customTableOptions) { @@ -88,6 +70,7 @@ export class DomainRequestsTable extends BaseTable { Domain request cannot be deleted now. Edit the request for more information.`; let markupCreatorRow = ''; + if (this.portfolioValue) { markupCreatorRow = ` @@ -98,7 +81,7 @@ export class DomainRequestsTable extends BaseTable { } if (request.is_deletable) { - // 1st path: Just a modal trigger in any screen size for non-org users + // 1st path (non-org): Just a modal trigger in any screen size for non-org users modalTrigger = ` ${request.status} - - - - ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} - + +
+ + + ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} + + ${customTableOptions.hasAdditionalActions ? modalTrigger : ''} +
- ${customTableOptions.needsAdditionalColumn ? ''+modalTrigger+'' : ''} `; tbody.appendChild(row); if (request.is_deletable) DomainRequestsTable.addDomainRequestsModal(request.requested_domain, request.id, request.created_at, tbody); diff --git a/src/registrar/assets/src/js/getgov/table-domains.js b/src/registrar/assets/src/js/getgov/table-domains.js index a6373a5c2..51abf0c6a 100644 --- a/src/registrar/assets/src/js/getgov/table-domains.js +++ b/src/registrar/assets/src/js/getgov/table-domains.js @@ -55,7 +55,7 @@ export class DomainsTable extends BaseTable { ${markupForSuborganizationRow} - + ${member.name} - ${customTableOptions.needsAdditionalColumn ? ''+kebabHTML+'' : ''} + ${customTableOptions.hasAdditionalActions ? ''+kebabHTML+'' : ''} `; tbody.appendChild(row); if (domainsHTML || permissionsHTML) { @@ -137,7 +137,7 @@ export class MembersTable extends BaseTable { } // This easter egg is only for fixtures that dont have names as we are displaying their emails // All prod users will have emails linked to their account - if (customTableOptions.needsAdditionalColumn) MembersTable.addMemberDeleteModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row); + if (customTableOptions.hasAdditionalActions) MembersTable.addMemberDeleteModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row); } /** diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss index d73becd75..97f5710e9 100644 --- a/src/registrar/assets/src/sass/_theme/_base.scss +++ b/src/registrar/assets/src/sass/_theme/_base.scss @@ -281,4 +281,8 @@ abbr[title] { .maxw-fit-content { max-width: fit-content; +} + +.width-quarter { + width: 25%; } \ No newline at end of file diff --git a/src/registrar/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html index c48e2c9a6..b026a7a6b 100644 --- a/src/registrar/templates/includes/domain_requests_table.html +++ b/src/registrar/templates/includes/domain_requests_table.html @@ -186,8 +186,7 @@ Created by {% endif %} Status - Action - + Action diff --git a/src/registrar/templates/includes/domains_table.html b/src/registrar/templates/includes/domains_table.html index f9f8b4c9f..49ed272a6 100644 --- a/src/registrar/templates/includes/domains_table.html +++ b/src/registrar/templates/includes/domains_table.html @@ -214,7 +214,7 @@ scope="col" role="columnheader" > - Action + Action