Changes made by OpsLevel coding agent

Author: opslevel-bot

.eslintrc.js

@@ -2,10 +2,19 @@ const cliConfig = require('@backstage/cli/config/eslint-factory')(__dirname);
 
 module.exports = {
   ...cliConfig,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
     "extends": [
       "airbnb",
       "airbnb/hooks",
       'eslint:recommended',
+      "plugin:@typescript-eslint/recommended",
       "plugin:eslint-comments/recommended",
       'plugin:import/recommended',
       "plugin:import/typescript",
@@ -20,7 +29,7 @@ module.exports = {
       'jsx-a11y',
       "react",
       "prettier",
-      '@typescript-eslint/eslint-plugin',
+      '@typescript-eslint',
     ],
   rules: {
     ...cliConfig.rules,

jest.config.js

@@ -3,7 +3,7 @@ const config = {
   rootDir: "../../../..",
   setupFiles: ["jest-canvas-mock"],
   setupFilesAfterEnv: [
-    "<rootDir>/test/textEncoder.js",
+    "<rootDir>/test/textEncoder.ts",
     "<rootDir>/test/jestImports.ts",
     "<rootDir>/test/resizeObservers.ts",
   ],

src/helpers/level_color_helper.js src/helpers/level_color_helper.tssrc/helpers/level_color_helper.js renamed to src/helpers/level_color_helper.ts

@@ -1,55 +1,69 @@
-// @ts-nocheck
+interface LevelColor {
+  text: string;
+  border: string;
+  primary: string;
+  secondary: string;
+}
 
-const beginner = {
+const beginner: LevelColor = {
   text: "#595959",
   border: "#D9D9D9",
   primary: "#F5F5F5",
   secondary: "#BFBFBF",
 };
 
-const bronze = {
+const bronze: LevelColor = {
   text: "#FA541C",
   border: "#FFBB96",
   primary: "#FFF2E8",
   secondary: "#FA541C",
 };
 
-const silver = {
+const silver: LevelColor = {
   text: "#1890FF",
   border: "#91D5FF",
   primary: "#E6F7FF",
   secondary: "#40A9FF",
 };
 
-const gold = {
+const gold: LevelColor = {
   text: "#FAAD14",
   border: "#FFE58F",
   primary: "#FFFBE6",
   secondary: "#FFC53D",
 };
 
-const platinum = {
+const platinum: LevelColor = {
   text: "#13C2C2",
   border: "#87E8DE",
   primary: "#E6FFFB",
   secondary: "#13C2C2",
 };
 
-const titanium = {
+const titanium: LevelColor = {
   text: "#722ED1",
   border: "#D3ADF7",
   primary: "#F9F0FF",
   secondary: "#722ED1",
 };
 
-const diamond = {
+const diamond: LevelColor = {
   text: "#2F54EB",
   border: "#ADC6FF",
   primary: "#F0F5FF",
   secondary: "#2F54EB",
 };
 
-const ColorMap = {
+type ColorName =
+  | "beginner"
+  | "bronze"
+  | "silver"
+  | "gold"
+  | "platinum"
+  | "titanium"
+  | "diamond";
+
+const ColorMap: Record<ColorName, LevelColor> = {
   beginner,
   bronze,
   silver,
@@ -59,8 +73,8 @@ const ColorMap = {
   diamond,
 };
 
-const availableColors = (totalLevels) => {
-  const levelColors = {
+const availableColors = (totalLevels: number): ColorName[] => {
+  const levelColors: Record<ColorName, boolean> = {
     beginner: true,
     bronze: totalLevels > 3,
     silver: totalLevels > 2,
@@ -70,17 +84,22 @@ const availableColors = (totalLevels) => {
     diamond: totalLevels > 6,
   };
 
-  return Object.keys(levelColors).filter((c) => levelColors[c]);
+  return Object.keys(levelColors).filter(
+    (c) => levelColors[c as ColorName]
+  ) as ColorName[];
 };
 
 // `levelPosition` refers to the level's position relative the other levels in the account. This is not always the
 //    level's index since it's possible for gaps in level indexes to exist. e.g. for an account
 //    with levels with indexes 0,1,2,4,5, the corresponding levelPositions would be 0,1,2,3,4
-export const levelColor = (totalLevels, levelPosition) => {
+export const levelColor = (
+  totalLevels: number,
+  levelPosition: number
+): LevelColor => {
   const filteredColors = availableColors(totalLevels);
   return ColorMap[filteredColors[levelPosition]];
 };
 
-export const levelColorPalette = (totalLevels) => {
+export const levelColorPalette = (totalLevels: number): LevelColor[] => {
   return availableColors(totalLevels).map((color) => ColorMap[color]);
 };

src/helpers/maturity_report_helper.js src/helpers/maturity_report_helper.tssrc/helpers/maturity_report_helper.js renamed to src/helpers/maturity_report_helper.ts

@@ -1,18 +1,42 @@
-// @ts-nocheck
-
 import { escape } from "lodash";
+import { Level } from "../types/OpsLevelData";
+
+interface LevelCounter {
+  [levelName: string]: number;
+}
+
+interface ServiceLevelCount {
+  level: {
+    name: string;
+  };
+  serviceCount: number;
+}
+
+interface CategoryLevelCount {
+  category: {
+    name: string;
+  } | null;
+  level: {
+    name: string;
+  };
+  serviceCount: number;
+}
+
+interface CategoryAggregate {
+  [categoryName: string]: LevelCounter[];
+}
 
-export const mountInitialLevelArray = (levels) => {
+export const mountInitialLevelArray = (levels: Level[]): LevelCounter[] => {
   return levels.map((level) => {
-    return { [escape(level.name)]: 0 };
+    return { [escape(level.name || "")]: 0 };
   });
 };
 
 export const updateCategoryAggregateWithLevelCounter = (
-  aggregate,
-  level,
-  serviceCounter,
-) => {
+  aggregate: LevelCounter[],
+  level: string,
+  serviceCounter: number
+): LevelCounter[] => {
   return aggregate.map((obj) => {
     const currentKey = Object.keys(obj)[0];
     if (level === currentKey) {
@@ -22,17 +46,23 @@ export const updateCategoryAggregateWithLevelCounter = (
   });
 };
 
-export const servicesByLevel = (levels, servicesLevelCount) => {
+export const servicesByLevel = (
+  levels: Level[],
+  servicesLevelCount: ServiceLevelCount[]
+): LevelCounter[] => {
   return levels.map((level) => {
     const serviceLevelCount = servicesLevelCount.find(
-      (entry) => entry.level.name === level.name,
+      (entry) => entry.level.name === level.name
     );
     // serviceLevelCount is undefined when no services exist at that level
-    return { [escape(level.name)]: serviceLevelCount?.serviceCount || 0 };
+    return { [escape(level.name || "")]: serviceLevelCount?.serviceCount || 0 };
   });
 };
 
-export const levelsByCategory = (levels, categoryLevelCounts) => {
+export const levelsByCategory = (
+  levels: Level[],
+  categoryLevelCounts: CategoryLevelCount[]
+): CategoryAggregate => {
   const initialLevelArray = mountInitialLevelArray(levels);
 
   return categoryLevelCounts.reduce((acc, categoryLevel) => {
@@ -45,17 +75,17 @@ export const levelsByCategory = (levels, categoryLevelCounts) => {
     const newCategoryAggregate = updateCategoryAggregateWithLevelCounter(
       categoryAggregate,
       levelName,
-      categoryLevel.serviceCount,
+      categoryLevel.serviceCount
     );
 
     return {
       ...acc,
       [currentCategory]: newCategoryAggregate,
     };
-  }, {});
+  }, {} as CategoryAggregate);
 };
 
-export const fontFamily = [
+export const fontFamily: string = [
   "-apple-system",
   "BlinkMacSystemFont",
   "Segoe U",

test/textEncoder.js test/textEncoder.tstest/textEncoder.js renamed to test/textEncoder.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-restricted-imports -- Test configuration overrides
-const { TextEncoder, TextDecoder } = require("util");
+import { TextEncoder, TextDecoder } from "util";
 
 // jsdom does not bundle TextEncoder out of the box despite all browsers doing so.
 // https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest

tsconfig.json

@@ -4,8 +4,9 @@
     "jsx": "react",
     "outDir": "dist-types",
     "rootDir": ".",
+    "allowJs": true,
     "checkJs": true,
   },
   "types": ["node", "jest", "@testing-library/jest-dom"],
-  "include": ["src", "test/jestImports.ts"],
+  "include": ["src", "test"],
 }