chore(example): improve example app types (1st iteration) (#734)

* chore(ui): convert components to typescript syntax

* chore(ui): improve types

* chore(ui): improve types changeset

* chore(ui): disable errors

* chore(ui): fix lint errors

* chore(ui): fix lint errors

* chore(ui): delete MonorepoChecker

* chore(ui): disable lint errors

* chore(ui): PR comment improvements

Author: guoda-puidokaite

.changeset/fair-ears-shave.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-example": minor
+---
+
+Improve example app types

apps/example/src/App.test.tsx

@@ -6,20 +6,19 @@
 import React from "react"
 import { render } from "@testing-library/react"
 import App from "./App"
-import { describe } from "node:test"
+import { describe, it, expect, vi } from "vitest"
 import { screen } from "shadow-dom-testing-library"
 
 // Mock the styles
 vi.mock("./styles.module.scss", () => ({
-  default: new Proxy(new Object(), {
-    // @ts-ignore
-    toString() {
-      return "/*TEST STYLES*/"
-    },
-  }),
+  default: new Proxy(
+    {},
+    {
+      get: () => "/*TEST STYLES*/",
+    }
+  ),
 }))
 
-// eslint-disable-next-line @typescript-eslint/no-floating-promises
 describe("App", () => {
   it("should render the App component", () => {
     render(<App id="123" />)

apps/example/src/App.tsx

@@ -2,18 +2,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from "react"
-import PropTypes from "prop-types"
+import React, { useEffect, useMemo } from "react"
+
 // @ts-ignore
 import styles from "./styles.scss?inline"
 
-import MonorepoChecker from "./components/MonorepoChecker"
-
 import {
   AppShellProvider,
   AppShell,
@@ -24,87 +23,74 @@ import {
 } from "@cloudoperators/juno-ui-components"
 import { mockedSession } from "@cloudoperators/juno-oauth"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
+
 import AppContent from "./components/AppContent"
 import HeaderUser from "./components/auth/HeaderUser"
 import AsyncWorker from "./components/AsyncWorker"
 import StoreProvider, { useGlobalsActions, useAuthActions } from "./components/StoreProvider"
-import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 
-const App = (props = {}) => {
+interface AppProps {
+  endpoint?: string
+  embedded?: boolean
+  id?: string
+  theme?: string
+}
+
+const App: React.FC<AppProps> = ({ endpoint, embedded, id }) => {
   // @ts-ignore
   const { setEndpoint } = useGlobalsActions()
   // @ts-ignore
   const { setData } = useAuthActions()
 
-  // Create query client which it can be used from overall in the app
   const queryClient = new QueryClient()
 
-  // on app initial load save Endpoint and URL_STATE_KEY so it can be
-  // used from overall in the application
   useEffect(() => {
-    // set default endpoint so the useQueryClientFn can be used
-    // @ts-ignore
-    setEndpoint(props.endpoint)
-  }, [])
+    setEndpoint(endpoint || "")
+  }, [endpoint, setEndpoint])
 
-  // fetch the mocked auth object and save it globally
-  const oidc = React.useMemo(() => {
-    // force fetch mocked session
-    return mockedSession({
-      initialLogin: true,
-      onUpdate: (data: any) => {
-        setData(data)
-      },
-    })
-  }, [])
+  const oidc = useMemo(
+    () =>
+      mockedSession({
+        initialLogin: true,
+        onUpdate: setData,
+      }),
+    [setData]
+  )
 
-  // @ts-ignore
-  console.debug("[exampleapp] embedded mode:", props.embedded)
+  console.debug("[exampleapp] embedded mode:", embedded)
 
   return (
     <QueryClientProvider client={queryClient}>
-      <MonorepoChecker></MonorepoChecker>
-      {/* @ts-ignore */}
-      <AsyncWorker consumerId={props.id} />
       {/* @ts-ignore */}
+      <AsyncWorker consumerId={id} />
       <AppShell
-        //@ts-ignore
-        embedded={props.embedded === "true" || props.embedded === true}
+        // @ts-ignore
+        embedded={embedded === "true" || embedded === true}
         pageHeader={
-          //@ts-ignore
           <PageHeader heading="Converged Cloud | Example App">
-            {/* @ts-ignore */}
             <HeaderUser login={oidc.login} logout={oidc.logout} />
           </PageHeader>
         }
         topNavigation={
-          //@ts-ignore
           <TopNavigation>
-            {/* @ts-ignore */}
             <TopNavigationItem icon="home" label="Home" />
-            {/* @ts-ignore */}
             <TopNavigationItem active label="Navigation Item" />
           </TopNavigation>
         }
       >
         <Container py>
-          {/* @ts-ignore */}
-          <AppContent props={props} />
+          <AppContent />
         </Container>
       </AppShell>
     </QueryClientProvider>
   )
 }
 
-App.propTypes = {
-  endpoint: PropTypes.string,
-  embedded: PropTypes.bool,
-  id: PropTypes.string,
-}
-
-const StyledApp = (props: any) => {
+const StyledApp: React.FC<AppProps> = (props) => {
   return (
-    <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
+    // @ts-ignore
+    <AppShellProvider theme={props.theme || "theme-dark"}>
       {/* load styles inside the shadow dom */}
       <style>{styles.toString()}</style>
       <MessagesProvider>
@@ -116,10 +102,4 @@ const StyledApp = (props: any) => {
   )
 }
 
-StyledApp.propTypes = {
-  theme: PropTypes.string,
-  embedded: PropTypes.bool,
-  endpoint: PropTypes.string,
-  id: PropTypes.string,
-}
 export default StyledApp

apps/example/src/components/AppContent.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -22,14 +22,14 @@ import {
 } from "@cloudoperators/juno-ui-components"
 import { useGlobalsActions, useGlobalsTabIndex, useAuthLoggedIn, useAuthError } from "./StoreProvider"
 import { useActions, Messages } from "@cloudoperators/juno-messages-provider"
+
 import ModalManager from "./ModalManager"
 import PanelManager from "./PanelManager"
 import Peaks from "./peaks/Peaks"
 import WelcomeView from "./WelcomeView"
 import PositionArea from "./PositionArea"
 
-const AppContent = () => {
-  // @ts-ignore
+const AppContent: React.FC = () => {
   const { setTabIndex, setCurrentModal } = useGlobalsActions()
   const loggedIn = useAuthLoggedIn()
   const authError = useAuthError()
@@ -44,9 +44,9 @@ const AppContent = () => {
         text: JSON.stringify(authError),
       })
     }
-  }, [authError])
+  }, [authError, addMessage])
 
-  const onTabSelected = (index: any) => {
+  const onTabSelected = (index: number) => {
     setTabIndex(index)
   }
 
@@ -55,23 +55,17 @@ const AppContent = () => {
       {loggedIn && !authError ? (
         <>
           <Breadcrumb>
-            {/* @ts-ignore */}
             <BreadcrumbItem icon="home" label="Example App Home" />
           </Breadcrumb>
 
           <Container py>
-            {/* @ts-ignore */}
             <MainTabs selectedIndex={tabIndex} onSelect={onTabSelected}>
-              {/* @ts-ignore */}
               <TabList>
-                {/* @ts-ignore */}
                 <Tab>Peaks</Tab>
-                {/* @ts-ignore */}
                 <Tab>Tab Two</Tab>
               </TabList>
 
               <TabPanel>
-                {/* @ts-ignore */}
                 <Container py px={false}>
                   {/* Set the background graphic using tailwind background image syntax as below. The image must exist at the specified location in your app */}
                   {/*<IntroBox variant="hero" heroImage="bg-[url('img/app_bg_example.svg')]">
@@ -84,28 +78,20 @@ const AppContent = () => {
                 </Container>
               </TabPanel>
               <TabPanel>
-                {/* @ts-ignore */}
                 <Container py px={false}>
                   <p>Test a panel pressing the Button</p>
-                  {/* @ts-ignore */}
-                  <Button label="Button" onClick={() => setCurrentModal("TestModal")} />
+                  <Button label="Button" onClick={() => setCurrentModal({ type: "TestModal" })} />
                   <p>Test a select</p>
-                  {/* @ts-ignore */}
                   <Select
                     name="filter"
                     className="filter-label-select w-64 mb-0"
                     label="Filter"
-                    onChange={(e: any) => console.debug(e)}
+                    onChange={(e) => console.debug(e)}
                   >
-                    {/* @ts-ignore */}
                     <SelectOption value="0" label="Option 0" />
-                    {/* @ts-ignore */}
                     <SelectOption value="1" label="Option 1" />
-                    {/* @ts-ignore */}
                     <SelectOption value="2" label="Option 2" />
-                    {/* @ts-ignore */}
                     <SelectOption value="3" label="Option 3" />
-                    {/* @ts-ignore */}
                     <SelectOption value="4" label="Option 4" />
                   </Select>
                 </Container>

apps/example/src/components/AsyncWorker.tsx

@@ -3,18 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import PropTypes from "prop-types"
+import React from "react"
+
 import useQueryClientFn from "../hooks/useQueryClientFn"
 import useUrlState from "../hooks/useUrlState"
 
-const AsyncWorker = ({ consumerId }: any) => {
+interface AsyncWorkerProps {
+  consumerId: string
+}
+
+const AsyncWorker: React.FC<AsyncWorkerProps> = ({ consumerId }) => {
   useQueryClientFn()
   useUrlState(consumerId)
   return null
 }
 
-AsyncWorker.propTypes = {
-  consumerId: PropTypes.string.isRequired,
-}
-
 export default AsyncWorker

apps/example/src/components/ModalManager.tsx

@@ -4,10 +4,11 @@
  */
 
 import React from "react"
+
 import { useGlobalsCurrentModal } from "./StoreProvider"
 import TestModal from "./TestModal"
 
-const ModalManager = () => {
+const ModalManager: React.FC = () => {
   const currentModal = useGlobalsCurrentModal()
 
   switch (currentModal) {