Add background color for null cell in query editor result grid (#22370)

This commit is contained in:
Hai Cao
2023-03-20 15:55:57 -07:00
committed by GitHub
parent f9e72b0d93
commit ffc7f05c10
5 changed files with 35 additions and 9 deletions

View File

@@ -85,7 +85,7 @@ export function hyperLinkFormatter(row: number | undefined, cell: any | undefine
/**
* Format all text to replace all new lines with spaces and performs HTML entity encoding
*/
export function textFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {
export function textFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined, addClasses?: string): string | { text: string, addClasses: string } {
let cellClasses = 'grid-cell-value-container';
let valueToDisplay = '';
let titleValue = '';
@@ -122,7 +122,13 @@ export function textFormatter(row: number | undefined, cell: any | undefined, va
titleValue = valueToDisplay;
}
return `<span title="${titleValue}" style="${cellStyle}" class="${cellClasses}">${valueToDisplay}</span>`;
const formattedValue = `<span title="${titleValue}" style="${cellStyle}" class="${cellClasses}">${valueToDisplay}</span>`;
if (addClasses) {
return { text: formattedValue, addClasses: addClasses };
}
return formattedValue;
}
function getCellDisplayValue(cellValue: string): string {
@@ -132,7 +138,7 @@ function getCellDisplayValue(cellValue: string): string {
}
export function iconCssFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {
export function iconCssFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string | { text: string, addClasses: string } {
if (isCssIconCellValue(value)) {
return `<div role="image" title="${escape(value.title ?? '')}" aria-label="${escape(value.title ?? '')}" class="grid-cell-value-container icon codicon slick-icon-cell-content ${value.iconCssClass}"></div>`;
}

View File

@@ -16,6 +16,9 @@ suite('Grid shared services tests', () => {
isNull: false
};
let formattedHtml = SharedServices.textFormatter(undefined, undefined, cellValue, undefined, undefined);
if (typeof formattedHtml !== 'string') {
formattedHtml = formattedHtml.text;
}
// Then the result is HTML for a span element containing the cell value's display value as plain text
verifyFormattedHtml(formattedHtml, testText);
@@ -24,6 +27,9 @@ suite('Grid shared services tests', () => {
test('textFormatter should encode HTML when formatting a string', () => {
// If I format a string that contains HTML
let formattedHtml = SharedServices.textFormatter(undefined, undefined, testText, undefined, undefined);
if (typeof formattedHtml !== 'string') {
formattedHtml = formattedHtml.text;
}
// Then the result is HTML for a span element containing the given text as plain text
verifyFormattedHtml(formattedHtml, testText);