Adding aria-labels to checkbox cells in declarative table (#23204)

extensions/import/src/test/wizard/pages/modifyColumnsPage.test.ts

@@ -56,9 +56,7 @@ describe('import extension modify Column Page', function () {
 		should.notEqual(modifyColumnsPage.form, undefined, 'form should not be undefined');
 	});
 
-	it('handleImport updates table value correctly when import is successful', async function() {
-
-
+	it('handleImport updates table value correctly when import is successful', async function () {
 		let testProseColumns = [
 			{
 				columnName: 'column1',
@@ -75,8 +73,35 @@ describe('import extension modify Column Page', function () {
 		];
 
 		let testTableData = [
-			[ 'column1', 'nvarchar(50)', false, false],
-			[ 'column2', 'nvarchar(50)', false, false]
+			[
+				{
+					value: 'column1'
+				}, {
+					value: 'nvarchar(50)'
+				}, {
+					value: false,
+					ariaLabel: constants.primaryKeyText,
+					enabled: true
+				}, {
+					value: false,
+					ariaLabel: constants.allowNullsText,
+					enabled: true
+				}
+			], [
+				{
+					value: 'column2'
+				}, {
+					value: 'nvarchar(50)'
+				}, {
+					value: false,
+					ariaLabel: constants.primaryKeyText,
+					enabled: true
+				}, {
+					value: false,
+					ariaLabel: constants.allowNullsText,
+					enabled: true
+				}
+			]
 		];
 
 		mockImportModel.object.proseColumns = testProseColumns;
@@ -98,7 +123,7 @@ describe('import extension modify Column Page', function () {
 		await modifyColumnsPage.onPageEnter();
 
 		// checking if all the required components are correctly initialized
-		should.deepEqual(modifyColumnsPage.table.data, testTableData);
+		should.deepEqual(modifyColumnsPage.table.dataValues, testTableData);
 
 	});
 });

extensions/import/src/wizard/pages/modifyColumnsPage.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
-import { ColumnMetadata, ColumnMetadataArray } from '../api/models';
+import { ColumnMetadata } from '../api/models';
 import { ImportPage } from '../api/importPage';
 import * as constants from '../../common/constants';
 
@@ -83,8 +83,25 @@ export class ModifyColumnsPage extends ImportPage {
 		this._form = form;
 	}
 
-	private static convertMetadata(column: ColumnMetadata): any[] {
-		return [column.columnName, column.dataType, false, column.nullable];
+	private static convertMetadata(column: ColumnMetadata): azdata.DeclarativeTableCellValue[] {
+		return [
+			{
+				value: column.columnName,
+			},
+			{
+				value: column.dataType,
+			},
+			{
+				value: false,
+				ariaLabel: constants.primaryKeyText,
+				enabled: true
+			},
+			{
+				value: column.nullable,
+				ariaLabel: constants.allowNullsText,
+				enabled: true
+			}
+		];
 	}
 
 	async start(): Promise<boolean> {
@@ -94,12 +111,12 @@ export class ModifyColumnsPage extends ImportPage {
 
 		this.table.onDataChanged((e) => {
 			this.model.proseColumns = [];
-			this.table.data.forEach((row) => {
+			this.table.dataValues.forEach((row) => {
 				this.model.proseColumns.push({
-					columnName: row[0].value,
-					dataType: row[1].value,
-					primaryKey: row[2].value,
-					nullable: row[3].value
+					columnName: <string>row[0].value,
+					dataType: <string>row[1].value,
+					primaryKey: <boolean>row[2].value,
+					nullable: <boolean>row[3].value
 				});
 			});
 		});
@@ -131,7 +148,7 @@ export class ModifyColumnsPage extends ImportPage {
 		this.instance.changeNextButtonLabel(constants.importDataText);
 		this.loading.loading = false;
 		this.instance.registerNavigationValidator((info) => {
-			return this.table.data && this.table.data.length > 0;
+			return this.table.dataValues && this.table.dataValues.length > 0;
 		});
 		return true;
 	}
@@ -147,7 +164,7 @@ export class ModifyColumnsPage extends ImportPage {
 
 	private emptyTable() {
 		this.table.updateProperties({
-			data: [],
+			dataValues: [],
 			columns: []
 		});
 	}
@@ -160,13 +177,13 @@ export class ModifyColumnsPage extends ImportPage {
 	}
 
 	private async populateTable() {
-		let data: ColumnMetadataArray[] = [];
+		let data: azdata.DeclarativeTableCellValue[][] = [];
 
 		this.model.proseColumns.forEach((column) => {
 			data.push(ModifyColumnsPage.convertMetadata(column));
 		});
 
-		this.table.updateProperties({
+		this.table.updateProperties(<azdata.DeclarativeTableProperties>{
 			columns: [{
 				displayName: constants.columnNameText,
 				valueType: azdata.DeclarativeDataType.string,
@@ -191,7 +208,7 @@ export class ModifyColumnsPage extends ImportPage {
 				width: '100px',
 				showCheckAll: true
 			}],
-			data: data
+			dataValues: data
 		});
 	}
 }