Merge branch 'main' into guoda-ui-component-types-2

Author: guoda-puidokaite

.changeset/pretty-buses-accept.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-supernova": patch
+---
+
+Transfer supernova to TypeScript

apps/supernova/eslint.config.mjs

@@ -3,19 +3,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import junoConfigs from "@cloudoperators/juno-config/eslint/juno.mjs"
+import junoConfigs from "@cloudoperators/juno-config/eslint/juno-typescript.mjs"
 
 export default [
   ...junoConfigs,
   {
-    files: ["**/*.js", "**/*.mjs", "**/*.jsx"],
-    languageOptions: { sourceType: "module" },
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.json"], // Ensure this points to your tsconfig.json
+      },
+    },
+    // TODO: We need to make all of this checks on again, step by step
     rules: {
-      // disable for now, till we switch to TypeScript
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/restrict-plus-operands": "off",
+      "react/no-unescaped-entities": "off",
+      "@typescript-eslint/await-thenable": "off",
       "react/prop-types": "off",
+      "prefer-const": "off",
+      "react/jsx-no-comment-textnodes": "off",
     },
-  },
-  {
-    ignores: ["setupTests.js"],
+    ignores: ["vitest.config.ts", "vite.config.ts", "tailwind.config.ts"],
   },
 ]

apps/supernova/package.json

@@ -39,6 +39,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:static": "vite build --mode static",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
     "serve": "vite preview",
     "lint": "eslint",
     "clean": "rm -rf build && rm -rf node_modules && rm -rf .turbo",

apps/supernova/src/App.test.jsx renamed to apps/supernova/src/App.test.tsx

@@ -36,7 +36,7 @@ function App(props = {}) {
     w-full
     `
 
-  const fallbackRender = ({ error }) => {
+  const fallbackRender = ({ error }: any) => {
     return (
       <div className="w-1/2">
         <CodeBlock className={preErrorClasses} copy={false}>
@@ -51,6 +51,7 @@ function App(props = {}) {
       <MessagesProvider>
         <CustomAppShell>
           <QueryClientProvider client={queryClient}>
+            {/* @ts-expect-error TS(2322) FIXME: Type '{ props: {}; }' is not assignable to type 'I... Remove this comment to see the full error message */}
             <AppContent props={props} />
           </QueryClientProvider>
         </CustomAppShell>
@@ -59,15 +60,15 @@ function App(props = {}) {
   )
 }
 
-const AppWithOldUrlStructure = (props) => {
+const AppWithOldUrlStructure = (props: any) => {
   // syncs navigation relevant states with the url for deep links
   // gets the state from the URL in the beginning
   // sets the URL from state information
   useUrlState()
   return <App {...props} />
 }
 
-const AppWithNewUrlStructure = (props) => {
+const AppWithNewUrlStructure = (props: any) => {
   /**
    * [TODO]
    * move the URL state changes closer to the origins of the change
@@ -77,8 +78,9 @@ const AppWithNewUrlStructure = (props) => {
   return <App {...props} />
 }
 
-const StyledApp = (props) => {
+const StyledApp = (props: any) => {
   return (
+    // @ts-ignore
     <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
       {/* load appstyles inside the shadow dom */}
       <style>{styles.toString()}</style>

apps/supernova/src/App.jsx renamed to apps/supernova/src/App.tsx

@@ -4,9 +4,9 @@
  */
 
 import { sortAlerts, countAlerts } from "../lib/utils"
-let compareAlertString
+let compareAlertString: any
 
-export const fetchAlerts = async (endpoint) => {
+export const fetchAlerts = async (endpoint: any) => {
   try {
     const response = await fetch(`${endpoint}/alerts`)
 
@@ -26,7 +26,7 @@ export const fetchAlerts = async (endpoint) => {
 
     // copy additional filter options to labels for easier filter selection
     // because the alert object is nested this makes it a lot easier to filter, since we only use what is present in alert.labels
-    alerts.forEach((alert) => {
+    alerts.forEach((alert: any) => {
       if (alert.labels) {
         alert.labels.status = alert.status?.state
       }

apps/supernova/src/AppContent.jsx renamed to apps/supernova/src/AppContent.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const fetchSilences = async (endpoint) => {
+export const fetchSilences = async (endpoint: any) => {
   try {
     const response = await fetch(`${endpoint}/silences`)
 
@@ -29,7 +29,7 @@ export const fetchSilences = async (endpoint) => {
   }
 }
 
-export const deleteSilences = async (variables) => {
+export const deleteSilences = async (variables: any) => {
   try {
     const response = await fetch(`${variables.endpoint}/silence/${variables.id}`, {
       method: "DELETE",
@@ -51,7 +51,7 @@ export const deleteSilences = async (variables) => {
   }
 }
 
-export const createSilences = async (variables) => {
+export const createSilences = async (variables: any) => {
   try {
     const response = await fetch(`${variables.endpoint}/silences`, {
       method: "POST",