diff --git a/.changeset/fair-ears-shave.md b/.changeset/fair-ears-shave.md new file mode 100644 index 000000000..a5c4eed36 --- /dev/null +++ b/.changeset/fair-ears-shave.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-app-example": minor +--- + +Improve example app types diff --git a/apps/example/src/App.test.tsx b/apps/example/src/App.test.tsx index a99dff1a6..b6f0365bc 100644 --- a/apps/example/src/App.test.tsx +++ b/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() diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index ae6f138ce..0cb75ce3d 100644 --- a/apps/example/src/App.tsx +++ b/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 = ({ 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 ( - - {/* @ts-ignore */} - {/* @ts-ignore */} + - {/* @ts-ignore */} } topNavigation={ - //@ts-ignore - {/* @ts-ignore */} - {/* @ts-ignore */} } > - {/* @ts-ignore */} - + ) } -App.propTypes = { - endpoint: PropTypes.string, - embedded: PropTypes.bool, - id: PropTypes.string, -} - -const StyledApp = (props: any) => { +const StyledApp: React.FC = (props) => { return ( - + // @ts-ignore + {/* load styles inside the shadow dom */} @@ -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 diff --git a/apps/example/src/components/AppContent.tsx b/apps/example/src/components/AppContent.tsx index bde93c521..2e507e3b4 100644 --- a/apps/example/src/components/AppContent.tsx +++ b/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 ? ( <> - {/* @ts-ignore */} - {/* @ts-ignore */} - {/* @ts-ignore */} - {/* @ts-ignore */} Peaks - {/* @ts-ignore */} Tab Two - {/* @ts-ignore */} {/* Set the background graphic using tailwind background image syntax as below. The image must exist at the specified location in your app */} {/* @@ -84,28 +78,20 @@ const AppContent = () => { - {/* @ts-ignore */}

Test a panel pressing the Button

- {/* @ts-ignore */} -