feat: create jsii@5 compatible replacement for KeyValueTableWidget (#619)

As noted in https://aws.github.io/jsii/compiler-and-rosetta-maintenance/#how-difficult-is-it-to-migrate-from-1x-to-50x, tuples aren't supported with jsii@5.

`KeyValueTableWidget` will be removed in a future version for the upgrade.

---

_By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license_

Author: Eugene Cheung

API.md

@@ -1,27 +1,10 @@
-import { TextWidget } from "aws-cdk-lib/aws-cloudwatch";
+import { KeyValueTableWidgetV2 } from "./KeyValueTableWidgetV2";
 
-import { FullWidth } from "../../common/widget";
-
-export class KeyValueTableWidget extends TextWidget {
+/**
+ * @deprecated Use {@link KeyValueTableWidgetV2} instead.
+ */
+export class KeyValueTableWidget extends KeyValueTableWidgetV2 {
   constructor(data: [string, string][]) {
-    super({
-      width: FullWidth,
-      height: 3,
-      markdown: KeyValueTableWidget.toMarkdown(data),
-    });
-  }
-
-  private static toMarkdown(data: [string, string][]) {
-    let headerRow = "";
-    let subHeaderRow = "";
-    let valueRow = "";
-
-    data.forEach(([key, value]) => {
-      headerRow += "| " + key;
-      subHeaderRow += "|---";
-      valueRow += "| " + value;
-    });
-
-    return `${headerRow}\n${subHeaderRow}\n${valueRow}`;
+    super(data.map(([key, value]) => ({ key, value })));
   }
 }

lib/dashboard/widget/KeyValueTableWidget.ts

@@ -0,0 +1,32 @@
+import { TextWidget } from "aws-cdk-lib/aws-cloudwatch";
+
+import { FullWidth } from "../../common/widget";
+
+export interface KeyValue {
+  readonly key: string;
+  readonly value: string;
+}
+
+export class KeyValueTableWidgetV2 extends TextWidget {
+  constructor(data: KeyValue[]) {
+    super({
+      width: FullWidth,
+      height: 3,
+      markdown: KeyValueTableWidgetV2.toMarkdown(data),
+    });
+  }
+
+  private static toMarkdown(data: KeyValue[]) {
+    let headerRow = "";
+    let subHeaderRow = "";
+    let valueRow = "";
+
+    data.forEach(({ key, value }) => {
+      headerRow += "| " + key;
+      subHeaderRow += "|---";
+      valueRow += "| " + value;
+    });
+
+    return `${headerRow}\n${subHeaderRow}\n${valueRow}`;
+  }
+}

lib/dashboard/widget/KeyValueTableWidgetV2.ts

@@ -3,6 +3,7 @@ export * from "./BitmapWidget";
 export * from "./CustomWidget";
 export * from "./HeaderWidget";
 export * from "./KeyValueTableWidget";
+export * from "./KeyValueTableWidgetV2";
 export * from "./MonitoringHeaderWidget";
 export * from "./StrictGraphWidget";
 export * from "./UnofficialWidgets";

lib/dashboard/widget/index.ts

@@ -0,0 +1,11 @@
+import { KeyValueTableWidgetV2, KeyValue } from "../../../lib/dashboard/widget";
+
+test("snapshot test", () => {
+  const data: KeyValue[] = [
+    { key: "name", value: "John Wick" },
+    { key: "has", value: "a dog" },
+  ];
+  const widget = new KeyValueTableWidgetV2(data);
+
+  expect(widget.toJson()).toMatchSnapshot();
+});