[ui] add an ENV var to identify kfp deployment

dashboard/origin-mlx/README.md

@@ -140,6 +140,7 @@ export REACT_APP_API="localhost:8080"
 export REACT_APP_RUN="false"
 export REACT_APP_UPLOAD="true"
 export REACT_APP_DISABLE_LOGIN="true"
+export REACT_APP_KFP_STANDALONE="true"  # KFP is standalone deployment or not
 export REACT_APP_TTL="0"                # Disable the cache
 export REACT_APP_CACHE_INTERVAL="0"     # Ignore checking cache
 ```
@@ -173,6 +174,7 @@ There are a few environment variables that can be defined that dictate how MLX i
   http://<ip_address>:<port>/<basepath>)
 * `REACT_APP_BRAND` - The brand name to use on the website
 * `REACT_APP_DISABLE_LOGIN` - A switch to turn off login mechanism
+* `REACT_APP_KFP_STANDALONE` - The KFP is standalone deployment or not
 * `REACT_APP_TTL` - The amount of seconds a cached entry remains valid for (24 hours by default)
 * `REACT_APP_CACHE_INTERVAL` - The minimum amount of time in seconds between two checks on the validity of the cache's contents (24 hours by default)
 

dashboard/origin-mlx/src/App.tsx

@@ -53,6 +53,7 @@ const isAdmin = hasRole(getUserInfo(), 'admin');
 function App() {
 
   var prefix = process.env.REACT_APP_BASE_PATH || ""
+  var kfpStandalone = process.env.REACT_APP_KFP_STANDALONE === 'true'
 
   // Removes the stored path if the user navigated away from the /experiments page
   if (!window.location.pathname.substring(0, prefix.length+12).includes(prefix + "/experiments"))
@@ -63,13 +64,15 @@ function App() {
     const { data, origin } = event;
     switch (data.type) {
     case 'iframe-connected':
-      ['iframe', 'iframe-run'].forEach((id) => {
-        const element = document.getElementById(id) as HTMLIFrameElement;
-        if (element) {
-          // TODO: get namespace from user info, use fixed value: mlx for now
-          element.contentWindow.postMessage({type: 'namespace-selected', value: 'mlx'}, origin);
-        }
-      })
+      if (!kfpStandalone) {
+        ['iframe', 'iframe-run'].forEach((id) => {
+          const element = document.getElementById(id) as HTMLIFrameElement;
+          if (element) {
+            // TODO: get namespace from user info, use fixed value: mlx for now
+            element.contentWindow.postMessage({type: 'namespace-selected', value: 'mlx'}, origin);
+          }
+        })
+      }
       break;
     }
   });