From b1503eda7273f1bf9fe78ea2b3d08ac1e5a52ab6 Mon Sep 17 00:00:00 2001 From: Wowa Barsukov Date: Mon, 25 Nov 2024 11:28:32 +0100 Subject: [PATCH] chore(utils): decomission mock server from juno apps (#629) * chore(doop): clean up dooop mock * chore(example): remove mock exampleApp * chore(greenhouse): delete mock * chore(doop): add db back * chore(npm): add changeset * chore(example): rollback example app --- .changeset/cold-humans-shake.md | 7 ++++ apps/doop/README.md | 1 - apps/doop/appProps.template.json | 1 - apps/doop/src/App.jsx | 25 ++---------- apps/doop/src/components/AppContent.jsx | 32 +--------------- apps/doop/src/components/StoreProvider.jsx | 1 - .../doop/src/lib/store/createGlobalsSlice.jsx | 2 - apps/example/package.json | 2 +- .../org-admin/components/teams/App.jsx | 17 +-------- .../org-admin/components/teams/AppContent.jsx | 38 ++----------------- .../teams/components/StoreProvider.jsx | 1 - .../teams/components/StoreProvider.test.jsx | 4 -- .../org-admin/components/teams/lib/store.js | 2 - .../components/teams/lib/store.test.js | 7 ---- package-lock.json | 2 +- 15 files changed, 20 insertions(+), 122 deletions(-) create mode 100644 .changeset/cold-humans-shake.md diff --git a/.changeset/cold-humans-shake.md b/.changeset/cold-humans-shake.md new file mode 100644 index 000000000..c5de8d734 --- /dev/null +++ b/.changeset/cold-humans-shake.md @@ -0,0 +1,7 @@ +--- +"@cloudoperators/juno-app-greenhouse": patch +"@cloudoperators/juno-app-example": patch +"@cloudoperators/juno-app-doop": patch +--- + +Decouple juno-utils mocking logic diff --git a/apps/doop/README.md b/apps/doop/README.md index b32c079f3..9e13dbf08 100644 --- a/apps/doop/README.md +++ b/apps/doop/README.md @@ -69,6 +69,5 @@ These are the customizable application properties (appProps) that you can define - **displayName** (optional): The name to be displayed in the app's header. - **apiEndpoint** (required): The URL of the API endpoint the app will interact with. - **embedded** (optional): Set to `true` if the app will be embedded within another app or page. When `true`, the app will not display the header or footer, rendering only the content. Default is `false`. -- **isMock** (optional): Use mocked data for development purposes. Default is `false`. - **showDebugSeverities** (optional): Display debug severity levels in the log. Default is `false`. - **initialFilters** (optional): The initialFilters set default filters using an object that contains a key (the filter field) and a value (an array of filter criteria). For example, `{ "support_group": ["containers"] }`. diff --git a/apps/doop/appProps.template.json b/apps/doop/appProps.template.json index f92daaf12..cf6365691 100644 --- a/apps/doop/appProps.template.json +++ b/apps/doop/appProps.template.json @@ -4,6 +4,5 @@ "displayName": "MyApp", "apiEndpoint": "https://api.example.com/v1", "embedded": false, - "isMock": true, "showDebugSeverities": false } diff --git a/apps/doop/src/App.jsx b/apps/doop/src/App.jsx index cae59a50a..0b914547c 100644 --- a/apps/doop/src/App.jsx +++ b/apps/doop/src/App.jsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useMemo, useLayoutEffect } from "react" +import React, { useLayoutEffect } from "react" import { AppShellProvider, ContentHeading } from "@cloudoperators/juno-ui-components" import AppContent from "./components/AppContent" @@ -13,33 +13,16 @@ import StoreProvider from "./components/StoreProvider" import AsyncWorker from "./components/AsyncWorker" import { AppShell } from "@cloudoperators/juno-ui-components" import { QueryClientProvider, QueryClient } from "@tanstack/react-query" -import { fetchProxyInitDB } from "@cloudoperators/juno-utils" -import db from "./db.json" import { useGlobalsActions } from "./components/StoreProvider" const App = (props = {}) => { - const { setEndpoint, setMock } = useGlobalsActions() - const isMock = useMemo(() => props.isMock === true || props.isMock === "true", [props.isMock]) - // setup the mock db.json - useEffect(() => { - if (isMock) { - setMock(true) - - fetchProxyInitDB(db, { - debug: true, - rewriteRoutes: { - "/(?:doop-api\\.sap/v2/violations/(.*))": "/$1", - }, - }) - } - }, []) + const { setEndpoint } = useGlobalsActions() const queryClient = new QueryClient({ defaultOptions: { queries: { meta: { endpoint: props.apiEndpoint, - mock: props.isMock, }, }, }, @@ -47,8 +30,8 @@ const App = (props = {}) => { // on load application save the props to be used in oder components useLayoutEffect(() => { - setEndpoint(isMock ? window.location.origin : props?.apiEndpoint) - }, [props?.apiEndpoint, isMock]) + setEndpoint(window.location.origin) + }, []) return ( diff --git a/apps/doop/src/components/AppContent.jsx b/apps/doop/src/components/AppContent.jsx index 9ffbecf98..c3718573c 100644 --- a/apps/doop/src/components/AppContent.jsx +++ b/apps/doop/src/components/AppContent.jsx @@ -16,45 +16,15 @@ import { fetchData } from "../lib/apiClient" import { parseError } from "../lib/helpers" import Highlighter from "./Highlighter" import Violations from "./violations/violations" -import { fetchProxy } from "@cloudoperators/juno-utils" -import { useGlobalsMock, useGlobalsEndpoint } from "./StoreProvider" const AppContent = ({ showDebugSeverities }) => { const { setData, setShowDebugSeverities } = useDataActions() const { addMessage } = useActions() - const isMock = useGlobalsMock() - const endpoint = useGlobalsEndpoint() - - useEffect(() => { - if (isMock) { - fetchProxy(`${endpoint}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Accept: "application/json", - }, - ...{ mock: true }, - }) - .then((response) => { - if (!response.ok) { - addMessage({ - variant: "error", - text: parseError(e.message), - }) - } - return response.json() - }) - .then((result) => { - setData(result) - }) - } - }, [isMock]) // LOAD DATA const dataRequest = useQuery({ queryKey: ["violations"], queryFn: fetchData, - enabled: !isMock, refetchInterval: 5 * 60 * 1000, // 5 minutes }) @@ -82,7 +52,7 @@ const AppContent = ({ showDebugSeverities }) => { {/* */}
- {dataRequest?.isLoading && !isMock ? : } + {dataRequest?.isLoading ? : } ) diff --git a/apps/doop/src/components/StoreProvider.jsx b/apps/doop/src/components/StoreProvider.jsx index 5e8f9b812..f1b8c0daf 100644 --- a/apps/doop/src/components/StoreProvider.jsx +++ b/apps/doop/src/components/StoreProvider.jsx @@ -15,7 +15,6 @@ const StoreProvider = ({ options, children }) => ( const useStore = (selector) => create(useContext(StoreContext), selector) // globals -export const useGlobalsMock = () => useStore((s) => s.globals.isMock) export const useGlobalsEndpoint = () => useStore((s) => s.globals.endpoint) export const useGlobalsActions = () => useStore((s) => s.globals.actions) diff --git a/apps/doop/src/lib/store/createGlobalsSlice.jsx b/apps/doop/src/lib/store/createGlobalsSlice.jsx index f4aa3053f..4d1d664e3 100644 --- a/apps/doop/src/lib/store/createGlobalsSlice.jsx +++ b/apps/doop/src/lib/store/createGlobalsSlice.jsx @@ -6,12 +6,10 @@ const createGlobalsSlice = (set) => ({ globals: { endpoint: "", - isMock: false, actions: { setEndpoint: (endpoint) => set((state) => ({ globals: { ...state.globals, endpoint: endpoint } }), false, "globals/setEndpoint"), - setMock: (isMock) => set((state) => ({ globals: { ...state.globals, isMock } }), false, "globals/setMock"), }, }, }) diff --git a/apps/example/package.json b/apps/example/package.json index 00d421875..05d5a0812 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -35,7 +35,7 @@ "@cloudoperators/juno-oauth": "*", "@cloudoperators/juno-ui-components": "*", "@cloudoperators/juno-url-state-provider": "*", - "@cloudoperators/juno-utils": "*", + "@cloudoperators/juno-utils": "1.1.14", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/App.jsx b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/App.jsx index b33748011..3e5f5c36e 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/App.jsx +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/App.jsx @@ -10,24 +10,11 @@ import styles from "./styles.scss?inline" import AsyncWorker from "./components/AsyncWorker" import { MessagesProvider } from "@cloudoperators/juno-messages-provider" import StoreProvider, { useStoreActions } from "./components/StoreProvider" -import { fetchProxyInitDB } from "@cloudoperators/juno-utils" -import db from "./db.json" const App = (props = {}) => { - const { initialize: initializeStore, setMock } = useStoreActions() + const { initialize: initializeStore } = useStoreActions() - if (props.isMock === true || props.isMock === "true") { - setMock(true) - fetchProxyInitDB(db, { - debug: true, - rewriteRoutes: { - "/(?:apis/greenhouse\\.sap/v1alpha1/namespaces/[^/]+/teammemberships/(.*))": "/$1", - }, - }) - initializeStore(window.location.origin, null, null, null) - } else { - initializeStore(props.apiEndpoint, props.token, props.namespace, props.userGroup) - } + initializeStore(props.apiEndpoint, props.token, props.namespace, props.userGroup) return ( diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/AppContent.jsx b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/AppContent.jsx index 8896fc94b..80c575865 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/AppContent.jsx +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/AppContent.jsx @@ -8,50 +8,20 @@ import { Container } from "@cloudoperators/juno-ui-components" import { useAPI } from "./hooks/useAPI" import TeamList from "./components/team/TeamList" import Filter from "./components/filter/Filter" -import { useTeamMemberships, useIsMock, useEndpoint, useStoreActions } from "./components/StoreProvider" -import { Messages, useActions } from "@cloudoperators/juno-messages-provider" -import { fetchProxy } from "@cloudoperators/juno-utils" -import { parseError } from "./lib/helpers" +import { useTeamMemberships, useStoreActions } from "./components/StoreProvider" +import { Messages } from "@cloudoperators/juno-messages-provider" const AppContent = () => { const teamMemberships = useTeamMemberships() - const isMock = useIsMock() - const endpoint = useEndpoint() const { watchTeamMembers } = useAPI() - const { setCurrentTeam, setTeamMemberships } = useStoreActions() - const { addMessage } = useActions() + const { setCurrentTeam } = useStoreActions() useEffect(() => { - if (!watchTeamMembers || isMock) return + if (!watchTeamMembers) return const unwatch = watchTeamMembers() return unwatch }, [watchTeamMembers]) - useEffect(() => { - if (isMock) { - fetchProxy(`${endpoint}/teammemberships`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Accept: "application/json", - }, - ...{ mock: true }, - }) - .then((response) => { - if (!response.ok) { - addMessage({ - variant: "error", - text: parseError(e.message), - }) - } - return response.json() - }) - .then((result) => { - setTeamMemberships(result) - }) - } - }, [isMock]) - function onTeamChange(value) { setCurrentTeam(value) } diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.jsx b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.jsx index e82ca8c33..cbc5caf4a 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.jsx +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.jsx @@ -16,7 +16,6 @@ const useStore = (selector) => create(useContext(StoreContext), selector) export const useEndpoint = () => useStore((s) => s.endpoint) export const useNamespace = () => useStore((s) => s.namespace) export const useToken = () => useStore((s) => s.token) -export const useIsMock = () => useStore((s) => s.isMock) export const useCurrentTeam = () => useStore((s) => s.currentTeam) export const useDefaultTeam = () => useStore((s) => s.defaultTeam) export const useTeamMemberships = () => useStore((s) => s.teamMemberships) diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.test.jsx b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.test.jsx index 83b086616..865b37ce8 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.test.jsx +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/components/StoreProvider.test.jsx @@ -7,7 +7,6 @@ import React from "react" import { render } from "@testing-library/react" import StoreProvider, { useEndpoint, - useIsMock, useNamespace, useCurrentTeam, useDefaultTeam, @@ -19,7 +18,6 @@ describe("StoreProvider", () => { test("provides store values correctly", () => { const TestComponent = () => { const endpoint = useEndpoint() - const isMock = useIsMock() const namespace = useNamespace() const currentTeam = useCurrentTeam() const defaultTeam = useDefaultTeam() @@ -29,7 +27,6 @@ describe("StoreProvider", () => { return (
{endpoint}
-
{String(isMock)}
{namespace}
{currentTeam}
{defaultTeam}
@@ -47,7 +44,6 @@ describe("StoreProvider", () => { // Assert on the rendered values expect(getByTestId("endpoint")).toBeInTheDocument() - expect(getByTestId("isMock")).toBeInTheDocument() expect(getByTestId("namespace")).toBeInTheDocument() expect(getByTestId("currentTeam")).toBeInTheDocument() expect(getByTestId("defaultTeam")).toBeInTheDocument() diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.js b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.js index b97092e46..bed1bb0fa 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.js +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.js @@ -15,7 +15,6 @@ export default () => defaultTeam: "", teamMemberships: [], namespace: "", - isMock: false, actions: { initialize: (endpoint, token, namespace, userGroup) => set({ endpoint, namespace, token, currentTeam: userGroup }), @@ -27,6 +26,5 @@ export default () => } set({ teamMemberships: teamMemberships, currentTeam }) }, - setMock: (isMock) => set({ isMock: isMock }), }, })) diff --git a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.test.js b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.test.js index 7a44a473a..2b09ece7a 100644 --- a/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.test.js +++ b/apps/greenhouse/src/components/core-apps/org-admin/components/teams/lib/store.test.js @@ -20,7 +20,6 @@ describe("Zustand Store", () => { expect(useStore.getState().defaultTeam).toEqual("") expect(useStore.getState().teamMemberships).toEqual([]) expect(useStore.getState().namespace).toEqual("") - expect(useStore.getState().isMock).toEqual(false) }) test("initialize store", () => { @@ -44,10 +43,4 @@ describe("Zustand Store", () => { expect(useStore.getState().teamMemberships).toEqual(teamMemberships) }) - - test("setMock action", () => { - useStore.getState().actions.setMock(true) - - expect(useStore.getState().isMock).toEqual(true) - }) }) diff --git a/package-lock.json b/package-lock.json index 2cf8f5704..918a64730 100644 --- a/package-lock.json +++ b/package-lock.json @@ -471,7 +471,7 @@ "@cloudoperators/juno-oauth": "*", "@cloudoperators/juno-ui-components": "*", "@cloudoperators/juno-url-state-provider": "*", - "@cloudoperators/juno-utils": "*", + "@cloudoperators/juno-utils": "1.1.14", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0",