From 7938bbe8e2f3983e04d2e6708904f018dfecb17e Mon Sep 17 00:00:00 2001 From: CocoByte Date: Fri, 3 Jan 2025 12:26:46 -0700 Subject: [PATCH 1/5] Combine action column and delete columns. Make "Action" header visible --- .../src/js/getgov/table-domain-requests.js | 20 ++++++++++--------- .../includes/domain_requests_table.html | 2 +- .../templates/includes/domains_table.html | 2 +- 3 files changed, 13 insertions(+), 11 deletions(-) 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..3078a0fbf 100644 --- a/src/registrar/assets/src/js/getgov/table-domain-requests.js +++ b/src/registrar/assets/src/js/getgov/table-domain-requests.js @@ -98,7 +98,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 = ` - - - ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} - +
+ + + ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} + + ${customTableOptions.needsAdditionalColumn ? 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/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html index 56cdc2cec..9ab65ef7b 100644 --- a/src/registrar/templates/includes/domain_requests_table.html +++ b/src/registrar/templates/includes/domain_requests_table.html @@ -186,7 +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 15becea7a..db9f10087 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 From 581dc7081d5a5946b51807c82841ee3df0b24938 Mon Sep 17 00:00:00 2001 From: CocoByte Date: Mon, 6 Jan 2025 13:37:11 -0700 Subject: [PATCH 2/5] Make non-org Domain and Domain Request table columns align --- .../src/js/getgov/table-domain-requests.js | 24 ++++--------------- .../assets/src/js/getgov/table-domains.js | 6 ++++- .../assets/src/sass/_theme/_base.scss | 4 ++++ 3 files changed, 14 insertions(+), 20 deletions(-) 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 3078a0fbf..3d5d114c3 100644 --- a/src/registrar/assets/src/js/getgov/table-domain-requests.js +++ b/src/registrar/assets/src/js/getgov/table-domain-requests.js @@ -53,24 +53,6 @@ export class DomainRequestsTable extends BaseTable { 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 }; } @@ -88,8 +70,12 @@ export class DomainRequestsTable extends BaseTable { Domain request cannot be deleted now. Edit the request for more information.`; let markupCreatorRow = ''; + + // Forces columns of the domain request and domain tables to align in non-org views + let columnWidthLimiterClass = 'width-quarter'; if (this.portfolioValue) { + columnWidthLimiterClass = ''; markupCreatorRow = ` ${request.creator ? request.creator : ''} @@ -133,7 +119,7 @@ export class DomainRequestsTable extends BaseTable { ${request.status} - +
${suborganization} @@ -55,7 +59,7 @@ export class DomainsTable extends BaseTable { ${markupForSuborganizationRow} - + ${request.creator ? request.creator : ''} @@ -119,15 +116,15 @@ export class DomainRequestsTable extends BaseTable { ${request.status} - -
- + +
+ ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} - ${customTableOptions.needsAdditionalColumn ? modalTrigger : ''} + ${customTableOptions.isDeletable ? modalTrigger : ''}
`; diff --git a/src/registrar/assets/src/js/getgov/table-domains.js b/src/registrar/assets/src/js/getgov/table-domains.js index deeb04988..51abf0c6a 100644 --- a/src/registrar/assets/src/js/getgov/table-domains.js +++ b/src/registrar/assets/src/js/getgov/table-domains.js @@ -23,12 +23,8 @@ export class DomainsTable extends BaseTable { const row = document.createElement('tr'); let markupForSuborganizationRow = ''; - - // Forces columns of the domain request and domain tables to align in non-org views - let columnWidthLimiterClass = 'width-quarter'; if (this.portfolioValue) { - columnWidthLimiterClass = '' markupForSuborganizationRow = ` ${suborganization} @@ -59,7 +55,7 @@ export class DomainsTable extends BaseTable { ${markupForSuborganizationRow} - + ${member.name} - ${customTableOptions.needsAdditionalColumn ? ''+kebabHTML+'' : ''} + ${customTableOptions.isDeletable ? ''+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.addMemberModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row); + if (customTableOptions.isDeletable) MembersTable.addMemberModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row); } /** From b27f45b8d782f1042f432f82a4ce618bdb219fcd Mon Sep 17 00:00:00 2001 From: CocoByte Date: Wed, 8 Jan 2025 11:00:23 -0700 Subject: [PATCH 4/5] resolved merge conflict --- src/registrar/assets/src/js/getgov/table-members.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/registrar/assets/src/js/getgov/table-members.js b/src/registrar/assets/src/js/getgov/table-members.js index be149a059..6b1a485cb 100644 --- a/src/registrar/assets/src/js/getgov/table-members.js +++ b/src/registrar/assets/src/js/getgov/table-members.js @@ -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.isDeletable) MembersTable.addMemberDeleteModal(num_domains, member.email || "Samwise Gamgee", member_delete_url, unique_id, row); } /** From cad6238932a5d74dc610531e2d7960aa9380294c Mon Sep 17 00:00:00 2001 From: CocoByte Date: Fri, 10 Jan 2025 20:58:15 -0700 Subject: [PATCH 5/5] Rename and cleanup --- src/registrar/assets/src/js/getgov/table-base.js | 4 ++-- .../assets/src/js/getgov/table-domain-requests.js | 8 ++++---- src/registrar/assets/src/js/getgov/table-members.js | 8 ++++---- .../templates/includes/domain_requests_table.html | 1 - 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/registrar/assets/src/js/getgov/table-base.js b/src/registrar/assets/src/js/getgov/table-base.js index 4b7133d64..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: - * - "isDeletable": 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 isDeletable) + * @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 722ad1eef..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,8 +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); - return { 'isDeletable': needsDeleteColumn }; + let isDeletable = data.domain_requests.some(request => request.is_deletable); + return { 'hasAdditionalActions': isDeletable }; } addRow(dataObject, tbody, customTableOptions) { @@ -118,13 +118,13 @@ export class DomainRequestsTable extends BaseTable {
- + ${actionLabel} ${request.requested_domain ? request.requested_domain : 'New domain request'} - ${customTableOptions.isDeletable ? modalTrigger : ''} + ${customTableOptions.hasAdditionalActions ? modalTrigger : ''}
`; diff --git a/src/registrar/assets/src/js/getgov/table-members.js b/src/registrar/assets/src/js/getgov/table-members.js index 6b1a485cb..99a7fc652 100644 --- a/src/registrar/assets/src/js/getgov/table-members.js +++ b/src/registrar/assets/src/js/getgov/table-members.js @@ -61,7 +61,7 @@ export class MembersTable extends BaseTable { tableHeaderRow.appendChild(extraActionsHeader); } return { - 'isDeletable': hasEditPermission, + 'hasAdditionalActions': hasEditPermission, 'UserPortfolioPermissionChoices' : data.UserPortfolioPermissionChoices }; } @@ -78,7 +78,7 @@ export class MembersTable extends BaseTable { const num_domains = member.domain_urls.length; const last_active = this.handleLastActive(member.last_active); let cancelInvitationButton = member.type === "invitedmember" ? "Cancel invitation" : "Remove member"; - const kebabHTML = customTableOptions.isDeletable ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member.name}`): ''; + const kebabHTML = customTableOptions.hasAdditionalActions ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member.name}`): ''; const row = document.createElement('tr'); @@ -129,7 +129,7 @@ export class MembersTable extends BaseTable { ${member.action_label} ${member.name} - ${customTableOptions.isDeletable ? ''+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.isDeletable) 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/templates/includes/domain_requests_table.html b/src/registrar/templates/includes/domain_requests_table.html index f5215f22e..b026a7a6b 100644 --- a/src/registrar/templates/includes/domain_requests_table.html +++ b/src/registrar/templates/includes/domain_requests_table.html @@ -187,7 +187,6 @@ {% endif %} Status Action -