chore: remove ts-ignore from code when possible (#30)

Author: MikeDombo

src/main/js/dashboard-frontend/src/__tests__/ComponentTable.test.tsx

@@ -22,7 +22,7 @@ import { render } from "@testing-library/react";
 import ComponentTable from "../components/ComponentTable";
 import { SERVICE_ROUTE_HREF_PREFIX } from "../util/constNames";
 
-let componentTable: ElementWrapper;
+let componentTable: ElementWrapper<Element>;
 
 beforeEach(async () => {
   let { container } = render(
@@ -34,18 +34,18 @@ beforeEach(async () => {
 });
 
 test("Table fetches and displays data from the server", () => {
-  // @ts-ignore
-  let rows = componentTable.findTable().findRows();
+  let rows = componentTable.findTable()!.findRows();
   expect(rows.length).toEqual(4); // user-defined elements from fullRangeList
 });
 
 test("Service item points to the right href", () => {
   expect(
-    //@ts-ignore
-    componentTable
-      .findTable()
-      .findBodyCell(1, 2)
-      .getElement().firstElementChild.getAttribute("href")
+      componentTable
+          .findTable()!
+          .findBodyCell(1, 2)!
+          .getElement()!
+          .firstElementChild!
+          .getAttribute("href")
   ).toEqual(SERVICE_ROUTE_HREF_PREFIX + fullRangeList[0].name);
 });
 

src/main/js/dashboard-frontend/src/__tests__/ConfigEditor.test.tsx

@@ -29,19 +29,16 @@ test("If config get is successful then config is editable", (done) => {
   let configEditor = wrapper(container);
   setTimeout(() => {
     expect(
-      // @ts-ignore
-      configEditor.findButton().getElement()
+      configEditor.findButton()!.getElement()
     ).not.toBeDisabled();
     try {
-      // @ts-ignore
-      configEditor.findFlashbar().findItems()[0].findContent().getElement()
+      configEditor.findFlashbar()!.findItems()[0].findContent()!.getElement()
         .innerHTML;
       fail("Flashbar contains items even when config load is successful");
     } catch (e) {}
     expect(
-      // @ts-ignore
       configEditor
-        .find(".ace_text-input")
+        .find(".ace_text-input")!
         .getElement()
         .getAttributeNames()
         .includes("readonly")
@@ -60,18 +57,15 @@ test("If config get is unsuccessful then an error is displayed", (done) => {
   let configEditor = wrapper(container);
   setTimeout(() => {
     expect(
-      // @ts-ignore
-      configEditor.findButton().getElement()
+      configEditor.findButton()!.getElement()
     ).toBeDisabled();
     expect(
-        // @ts-ignore
-      configEditor.findFlashbar().findItems()[0].findContent().getElement()
+      configEditor.findFlashbar()!.findItems()[0].findContent()!.getElement()
         .innerHTML
     ).toContain(mockConfigError);
     expect(
-        // @ts-ignore
       configEditor
-        .find(".ace_text-input")
+        .find(".ace_text-input")!
         .getElement()
         .getAttributeNames()
         .includes("readonly")
@@ -90,12 +84,10 @@ test("If config update is successful then flashbar displays new message", (done)
   let configEditor = wrapper(container);
 
   setTimeout(() => {
-    // @ts-ignore
-    configEditor.findButton().click();
+    configEditor.findButton()!.click();
     setTimeout(() => {
       expect(
-          // @ts-ignore
-          configEditor.findFlashbar().findItems()[0].getElement().innerHTML
+          configEditor.findFlashbar()!.findItems()[0].getElement().innerHTML
       ).toContain("updated successfully");
       done();
     }, 50);

src/main/js/dashboard-frontend/src/__tests__/DetailHeader.test.tsx

@@ -11,15 +11,18 @@ import wrapper, {ElementWrapper,} from "@cloudscape-design/components/test-utils
 import {render} from "@testing-library/react";
 import 'mutationobserver-shim';
 
-import {SERVER} from "../index";
+import {SERVER as mockServer} from "../index";
 import {multipleComponentUpdates} from "../communication/__mocks__/mockedData";
+import {default as ServerEndpointMock} from "../communication/__mocks__/ServerEndpoint";
 import DetailHeader from "../components/details/DetailHeader";
 import {APICall} from "../util/CommUtils";
 
 jest.mock("../communication/ServerEndpoint");
 jest.mock("../index");
 
-let detailHeader: ElementWrapper;
+const SERVER = mockServer as unknown as ServerEndpointMock;
+
+let detailHeader: ElementWrapper<Element>;
 
 beforeEach(async () => {
   let { container } = render(
@@ -31,44 +34,35 @@ beforeEach(async () => {
 test("Buttons are enabled based on service status", () => {
   SERVER.pushComponentUpdate(0);
   expect(
-    // @ts-ignore
-    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]")!.getElement()
   ).not.toBeDisabled();
   expect(
-    // @ts-ignore
-    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]")!.getElement()
   ).not.toBeDisabled();
 
   SERVER.pushComponentUpdate(1);
   expect(
-    // @ts-ignore
-    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]")!.getElement()
   ).toBeDisabled();
   expect(
-      // @ts-ignore
-    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]")!.getElement()
   ).not.toBeDisabled();
 
   SERVER.pushComponentUpdate(2);
   expect(
-      // @ts-ignore
-    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]")!.getElement()
   ).not.toBeDisabled();
   expect(
-    // @ts-ignore
-    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]")!.getElement()
   ).toBeDisabled();
 });
 
 test("Buttons function properly", (done) => {
   SERVER.pushComponentUpdate(0);
   const reqSpy = jest.spyOn(ServerEndpoint.prototype, "sendRequest");
-  // @ts-ignore
-  detailHeader.findButton("[data-testid=\"start-button\"]").click();
-  // @ts-ignore
-  detailHeader.findButton("[data-testid=\"stop-button\"]").click();
-  // @ts-ignore
-  detailHeader.findButton("[data-testid=\"reinstall-button\"]").click();
+  detailHeader.findButton("[data-testid=\"start-button\"]")!.click();
+  detailHeader.findButton("[data-testid=\"stop-button\"]")!.click();
+  detailHeader.findButton("[data-testid=\"reinstall-button\"]")!.click();
   setTimeout(() => {
     expect(reqSpy).toHaveBeenNthCalledWith(1, {
       call: APICall.startComponent,

src/main/js/dashboard-frontend/src/components/details/ConfigEditor.tsx

@@ -19,6 +19,7 @@ import {
   Header,
   Spinner,
 } from "@cloudscape-design/components";
+import generateUniqueId from "../../util/generateUniqueId";
 
 interface ConfigEditorProps {
   dark: boolean;
@@ -29,7 +30,6 @@ interface ConfigEditorState {
   saving: boolean;
   value: string;
   flashItems: FlashbarProps.MessageDefinition[];
-  flashCnt: number;
 }
 export class ConfigEditor extends React.Component<
   ConfigEditorProps,
@@ -40,7 +40,6 @@ export class ConfigEditor extends React.Component<
     saving: false,
     value: "",
     flashItems: [] as FlashbarProps.MessageDefinition[],
-    flashCnt: 0,
   };
 
   onChange(newValue: string) {
@@ -66,24 +65,22 @@ export class ConfigEditor extends React.Component<
         this.updateFlashbar(false, reason);
       });
   };
-  removeItem = (id: number) => {
+  removeItem = (id: string) => {
     this.setState(prevState => ({
       flashItems: prevState.flashItems.filter((item) => {
-        //@ts-ignore
-        return item.num !== id;
+        return item.id !== id;
       })
     }));
   };
 
   updateFlashbar = (success: boolean, errorMsg?: string) => {
-    const itemID = this.state.flashCnt;
+    const itemID = generateUniqueId();
     if (success) {
       this.setState(prevState => ({
         flashItems:
           prevState.flashItems.concat([
             {
-              // @ts-ignore
-              num: itemID,
+              id: itemID,
               type: "success",
               content: "Config updated successfully.",
               dismissible: true,
@@ -96,8 +93,7 @@ export class ConfigEditor extends React.Component<
         flashItems:
           prevState.flashItems.concat([
             {
-              // @ts-ignore
-              num: itemID,
+              id: itemID,
               type: "error",
               content: `Unable to update config. ${errorMsg}`,
               dismissible: true,
@@ -106,7 +102,6 @@ export class ConfigEditor extends React.Component<
           ]),
       }));
     }
-    this.setState(prevState => ({ flashCnt: prevState.flashCnt + 1 }));
   };
 
   async componentDidUpdate(

src/main/js/dashboard-frontend/src/navigation/NavSideBar.tsx

@@ -53,5 +53,4 @@ function NavSideBar() {
   );
 }
 
-// @ts-ignore
 export default withRouter(NavSideBar);

src/main/js/dashboard-frontend/src/util/generateUniqueId.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+let counter = 0;
+
+export default function generateUniqueId(prefix?: string): string {
+    return `${prefix ? prefix : ''}${counter++}-${Date.now()}-${Math.round(Math.random() * 10000)}`;
+}