PR feedback

This commit is contained in:
CocoByte 2025-01-07 21:37:46 -07:00
parent bff08333a0
commit 018967e0ac
No known key found for this signature in database
GPG key ID: BBFAA2526384C97F
4 changed files with 12 additions and 19 deletions

View file

@ -382,7 +382,7 @@ export class BaseTable {
* for a member, they will also see the kebab column) * 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 * @param {Object} dataObjects - Data which contains info on domain requests or a user's permission
* Currently returns a dictionary of either: * Currently returns a dictionary of either:
* - "needsAdditionalColumn": If a new column should be displayed * - "isDeletable": If a new column should be displayed
* - "UserPortfolioPermissionChoices": A user's portfolio permission choices * - "UserPortfolioPermissionChoices": A user's portfolio permission choices
*/ */
customizeTable(dataObjects){ return {}; } customizeTable(dataObjects){ return {}; }
@ -406,7 +406,7 @@ export class BaseTable {
* Returns either: data.members, data.domains or data.domain_requests * Returns either: data.members, data.domains or data.domain_requests
* @param {Object} dataObject - The data used to populate the row content * @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 {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 isDeletable)
*/ */
addRow(dataObject, tbody, customTableOptions) { addRow(dataObject, tbody, customTableOptions) {
throw new Error('addRow must be defined'); throw new Error('addRow must be defined');

View file

@ -53,7 +53,7 @@ export class DomainRequestsTable extends BaseTable {
this.toggleExportButton(data.domain_requests); this.toggleExportButton(data.domain_requests);
let needsDeleteColumn = data.domain_requests.some(request => request.is_deletable); let needsDeleteColumn = data.domain_requests.some(request => request.is_deletable);
return { 'needsAdditionalColumn': needsDeleteColumn }; return { 'isDeletable': needsDeleteColumn };
} }
addRow(dataObject, tbody, customTableOptions) { addRow(dataObject, tbody, customTableOptions) {
@ -71,11 +71,8 @@ export class DomainRequestsTable extends BaseTable {
let markupCreatorRow = ''; let markupCreatorRow = '';
// Forces columns of the domain request and domain tables to align in non-org views
let columnWidthLimiterClass = 'width-quarter';
if (this.portfolioValue) { if (this.portfolioValue) {
columnWidthLimiterClass = '';
markupCreatorRow = ` markupCreatorRow = `
<td> <td>
<span class="text-wrap break-word">${request.creator ? request.creator : ''}</span> <span class="text-wrap break-word">${request.creator ? request.creator : ''}</span>
@ -119,15 +116,15 @@ export class DomainRequestsTable extends BaseTable {
<td data-label="Status"> <td data-label="Status">
${request.status} ${request.status}
</td> </td>
<td class="${columnWidthLimiterClass}"> <td class="${ this.portfolioValue ? '' : "width-quarter"}">
<div class="grid-row grid-gap"> <div class="tablet:display-flex tablet:flex-row">
<a href="${actionUrl}"> <a href="${actionUrl}" ${customTableOptions.isDeletable ? "class='margin-right-2'" : ''}>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use> <use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use>
</svg> </svg>
${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain : 'New domain request'}</span> ${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain : 'New domain request'}</span>
</a> </a>
${customTableOptions.needsAdditionalColumn ? modalTrigger : ''} ${customTableOptions.isDeletable ? modalTrigger : ''}
</div> </div>
</td> </td>
`; `;

View file

@ -23,12 +23,8 @@ export class DomainsTable extends BaseTable {
const row = document.createElement('tr'); const row = document.createElement('tr');
let markupForSuborganizationRow = ''; let markupForSuborganizationRow = '';
// Forces columns of the domain request and domain tables to align in non-org views
let columnWidthLimiterClass = 'width-quarter';
if (this.portfolioValue) { if (this.portfolioValue) {
columnWidthLimiterClass = ''
markupForSuborganizationRow = ` markupForSuborganizationRow = `
<td> <td>
<span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span> <span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span>
@ -59,7 +55,7 @@ export class DomainsTable extends BaseTable {
</svg> </svg>
</td> </td>
${markupForSuborganizationRow} ${markupForSuborganizationRow}
<td class="${columnWidthLimiterClass}"> <td class="${ this.portfolioValue ? '' : "width-quarter"}">
<a href="${actionUrl}"> <a href="${actionUrl}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24"> <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#${domain.svg_icon}"></use> <use xlink:href="/public/img/sprite.svg#${domain.svg_icon}"></use>

View file

@ -61,7 +61,7 @@ export class MembersTable extends BaseTable {
tableHeaderRow.appendChild(extraActionsHeader); tableHeaderRow.appendChild(extraActionsHeader);
} }
return { return {
'needsAdditionalColumn': hasEditPermission, 'isDeletable': hasEditPermission,
'UserPortfolioPermissionChoices' : data.UserPortfolioPermissionChoices 'UserPortfolioPermissionChoices' : data.UserPortfolioPermissionChoices
}; };
} }
@ -78,7 +78,7 @@ export class MembersTable extends BaseTable {
const num_domains = member.domain_urls.length; const num_domains = member.domain_urls.length;
const last_active = this.handleLastActive(member.last_active); const last_active = this.handleLastActive(member.last_active);
let cancelInvitationButton = member.type === "invitedmember" ? "Cancel invitation" : "Remove member"; let cancelInvitationButton = member.type === "invitedmember" ? "Cancel invitation" : "Remove member";
const kebabHTML = customTableOptions.needsAdditionalColumn ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member.name}`): ''; const kebabHTML = customTableOptions.isDeletable ? generateKebabHTML('remove-member', unique_id, cancelInvitationButton, `for ${member.name}`): '';
const row = document.createElement('tr'); const row = document.createElement('tr');
@ -129,7 +129,7 @@ export class MembersTable extends BaseTable {
${member.action_label} <span class="usa-sr-only">${member.name}</span> ${member.action_label} <span class="usa-sr-only">${member.name}</span>
</a> </a>
</td> </td>
${customTableOptions.needsAdditionalColumn ? '<td>'+kebabHTML+'</td>' : ''} ${customTableOptions.isDeletable ? '<td>'+kebabHTML+'</td>' : ''}
`; `;
tbody.appendChild(row); tbody.appendChild(row);
if (domainsHTML || permissionsHTML) { 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 // 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 // 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);
} }
/** /**