chore(utils): decomission mock server from juno apps

.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

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"] }`.

apps/doop/appProps.template.json

@@ -4,6 +4,5 @@
   "displayName": "MyApp",
   "apiEndpoint": "https://api.example.com/v1",
   "embedded": false,
-  "isMock": true,
   "showDebugSeverities": false
 }

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,42 +13,25 @@ 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,
         },
       },
     },
   })
 
   // 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 (
     <MessagesProvider>

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 }) => {
       {/* <UrlStateManager consumerId={id || "doop"} /> */}
       <Header />
       <Messages className="mb-4" />
-      {dataRequest?.isLoading && !isMock ? <HintLoading className="tw-mt-4" /> : <Violations />}
+      {dataRequest?.isLoading ? <HintLoading className="tw-mt-4" /> : <Violations />}
       <Highlighter />
     </Container>
   )

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)
 

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"),
     },
   },
 })

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",

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 (
     <MessagesProvider>

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)
   }

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)

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 (
         <div>
           <div data-testid="endpoint">{endpoint}</div>
-          <div data-testid="isMock">{String(isMock)}</div>
           <div data-testid="namespace">{namespace}</div>
           <div data-testid="currentTeam">{currentTeam}</div>
           <div data-testid="defaultTeam">{defaultTeam}</div>
@@ -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()

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 }),
     },
   }))

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)
-  })
 })