feat(widget): header widget supports adding description (#276)

Adding support for description. Later can be used to add generic description parameters to every monitoring props (user ask).

---

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

Author: voho

API.md

@@ -9,15 +9,47 @@ export enum HeaderLevel {
 }
 
 export class HeaderWidget extends TextWidget {
-  constructor(text: string, level?: HeaderLevel) {
+  constructor(
+    text: string,
+    level?: HeaderLevel,
+    description?: string,
+    descriptionHeight?: number
+  ) {
     super({
       width: FullWidth,
-      height: 1,
-      markdown: HeaderWidget.toMarkdown(text, level ?? HeaderLevel.LARGE),
+      height: HeaderWidget.calculateHeight(description, descriptionHeight),
+      markdown: HeaderWidget.toMarkdown(
+        text,
+        level ?? HeaderLevel.LARGE,
+        description
+      ),
     });
   }
 
-  private static toMarkdown(text: string, level: HeaderLevel) {
+  private static calculateHeight(
+    description?: string,
+    descriptionHeight?: number
+  ) {
+    let result = 1;
+    if (description) {
+      result += descriptionHeight ?? 1;
+    }
+    return result;
+  }
+
+  private static toMarkdown(
+    text: string,
+    level: HeaderLevel,
+    description?: string
+  ) {
+    const parts = [this.toHeaderMarkdown(text, level)];
+    if (description) {
+      parts.push(description);
+    }
+    return parts.join("\n\n");
+  }
+
+  private static toHeaderMarkdown(text: string, level: HeaderLevel) {
     return "#".repeat(level + 1) + " " + text;
   }
 }

lib/dashboard/widget/HeaderWidget.ts

@@ -4,11 +4,18 @@ export interface MonitoringHeaderWidgetProps {
   readonly title: string;
   readonly family?: string;
   readonly goToLinkUrl?: string;
+  readonly description?: string;
+  readonly descriptionHeight?: number;
 }
 
 export class MonitoringHeaderWidget extends HeaderWidget {
   constructor(props: MonitoringHeaderWidgetProps) {
-    super(MonitoringHeaderWidget.getText(props), HeaderLevel.SMALL);
+    super(
+      MonitoringHeaderWidget.getText(props),
+      HeaderLevel.SMALL,
+      props.description,
+      props.descriptionHeight
+    );
   }
 
   private static getText(props: MonitoringHeaderWidgetProps): string {
@@ -19,7 +26,7 @@ export class MonitoringHeaderWidget extends HeaderWidget {
     }
 
     if (props.family) {
-      return `${props.family} **${title}**`;
+      title = `${props.family} **${title}**`;
     }
 
     return title;

lib/dashboard/widget/MonitoringHeaderWidget.ts

@@ -0,0 +1,24 @@
+import { HeaderLevel, HeaderWidget } from "../../../lib/dashboard/widget";
+
+test("snapshot test - title only", () => {
+  const widget = new HeaderWidget("text");
+
+  expect(widget.toJson()).toMatchSnapshot();
+});
+
+test("snapshot test - title and description, no custom height", () => {
+  const widget = new HeaderWidget("text", HeaderLevel.LARGE, "description");
+
+  expect(widget.toJson()).toMatchSnapshot();
+});
+
+test("snapshot test - title and description, with custom height", () => {
+  const widget = new HeaderWidget(
+    "text",
+    HeaderLevel.LARGE,
+    "very long description",
+    5
+  );
+
+  expect(widget.toJson()).toMatchSnapshot();
+});

test/dashboard/widget/HeaderWidget.test.ts

@@ -36,3 +36,26 @@ test("snapshot test: with link and custom text", () => {
 
   expect(widget.toJson()).toMatchSnapshot();
 });
+
+test("snapshot test: with link, custom text and description", () => {
+  const widget = new MonitoringHeaderWidget({
+    title: "DummyTitle",
+    family: "DummyFamily",
+    goToLinkUrl: "http://amazon.com",
+    description: "CustomDescription",
+  });
+
+  expect(widget.toJson()).toMatchSnapshot();
+});
+
+test("snapshot test: with link, custom text and description with custom height", () => {
+  const widget = new MonitoringHeaderWidget({
+    title: "DummyTitle",
+    family: "DummyFamily",
+    goToLinkUrl: "http://amazon.com",
+    description: "CustomDescription",
+    descriptionHeight: 10,
+  });
+
+  expect(widget.toJson()).toMatchSnapshot();
+});