[greenhouse] prevent to rerender plugins. Add version to the appName …

…in the console

apps/greenhouse/package.json

@@ -1,6 +1,6 @@
 {
   "name": "greenhouse",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "managementVersion": "latest",
   "author": "Juno team (SAP)",
   "license": "MIT",
@@ -112,4 +112,4 @@
     }
   },
   "appPreview": true
-}
+}

apps/greenhouse/src/components/PluginContainer.jsx

@@ -14,6 +14,9 @@ const PluginContainer = () => {
   const isFetching = usePlugin().isFetching()
   const { addMessage } = useActions()
 
+  // prevent to load a plugin before the config is fetched to avoid rerendering do tue the default plugin greenhouse-mng
+  const [displayPlugin, setDisplayPlugin] = React.useState(false)
+
   const requestConfig = usePlugin().requestConfig
   const receiveConfig = usePlugin().receiveConfig
   const receiveError = usePlugin().receiveError
@@ -23,6 +26,7 @@ const PluginContainer = () => {
   useLayoutEffect(() => {
     if (!getPluginConfigs) return
     requestConfig()
+
     // fetch configs from kubernetes
     getPluginConfigs()
       .then((kubernetesConfig) => {
@@ -36,12 +40,15 @@ const PluginContainer = () => {
           text: parseError(error),
         })
       })
+      .finally(() => {
+        setDisplayPlugin(true)
+      })
   }, [getPluginConfigs, environment])
 
   return (
     <>
       {isFetching && <HintLoading text="Loading plugins..." />}
-      {availableAppIds.length > 0
+      {displayPlugin && availableAppIds.length > 0
         ? availableAppIds.map((id, i) => (
             <MessagesProvider key={i}>
               <Plugin id={id} />

apps/greenhouse/src/index.js

@@ -1,16 +1,19 @@
 import { createRoot } from "react-dom/client"
 import React from "react"
+import { version } from "../package.json"
 
-console.log(
-  `%c
+const logAppName = (version) => {
+  const appName = `%c
   ____ ____  _____ _____ _   _ _   _  ___  _   _ ____  _____ 
  / ___|  _ \\| ____| ____| \\ | | | | |/ _ \\| | | / ___|| ____|
 | |  _| |_) |  _| |  _| |  \\| | |_| | | | | | | \\___ \\|  _|  
 | |_| |  _ <| |___| |___| |\\  |  _  | |_| | |_| |___) | |___ 
- \\____|_| \\_\\_____|_____|_| \\_|_| |_|\\___/ \\___/|____/|_____|
-`,
-  "color:green"
-)
+ \\____|_| \\_\\_____|_____|_| \\_|_| |_|\\___/ \\___/|____/|_____| v${version}
+`
+  console.log(appName, "color:green")
+}
+
+logAppName(version)
 
 // export mount and unmount functions
 export const mount = (container, options = {}) => {