From 76976a8d28adfd9e23bc26da90d7e2afcadf25a4 Mon Sep 17 00:00:00 2001
From: Andrew-Butler <Andrew.Butler@ibm.com>
Date: Wed, 9 Jun 2021 10:46:37 -0700
Subject: [PATCH 1/4] Cleanup react routing and update upload page wording

Signed-off-by: Andrew-Butler <Andrew.Butler@ibm.com>
---
 dashboard/origin-mlx/src/App.tsx              | 736 ++++++++----------
 .../src/pages/KFServingUploadPage.tsx         |   6 +-
 dashboard/origin-mlx/src/pages/UploadPage.tsx |   2 +-
 3 files changed, 342 insertions(+), 402 deletions(-)

diff --git a/dashboard/origin-mlx/src/App.tsx b/dashboard/origin-mlx/src/App.tsx
index 8f429f41..f6ec0f5e 100644
--- a/dashboard/origin-mlx/src/App.tsx
+++ b/dashboard/origin-mlx/src/App.tsx
@@ -14,12 +14,12 @@
 *  limitations under the License.
 */
 import React, { Dispatch } from 'react';
-import reducer, { initial } from './lib/stores/reducer'
-import StoreContext, { Store } from './lib/stores/context'
-import { Action, State } from './lib/stores/types'
+import reducer, { initial } from './lib/stores/reducer';
+import StoreContext, { Store } from './lib/stores/context';
+import { Action, State } from './lib/stores/types';
 import { GET_SETTINGS } from './lib/stores/settings';
 import { getSettings } from './lib/api/settings';
-import { getUserInfo, hasRole } from './lib/util'
+import { getUserInfo, hasRole } from './lib/util';
 
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Sidebar from './components/Sidebar';
@@ -27,7 +27,6 @@ import PipelineDetail from './components/Detail/PipelineDetail';
 import DatasetDetail from './components/Detail/DatasetDetail';
 import ComponentDetail from './components/Detail/ComponentDetail';
 import ModelDetail from './components/Detail/ModelDetail';
-import OperatorDetail from './components/Detail/OperatorDetail';
 import NotebookDetail from './components/Detail/NotebookDetail';
 import KFServingDetail from './components/Detail/KFServingDetail';
 import './App.css';
@@ -41,9 +40,9 @@ import KFServingAllPage from './pages/KFServingAllPage';
 import KFServingDetailPage from './pages/KFServingDetailPage';
 import KFServingUploadPage from './pages/KFServingUploadPage';
 import MetaAllPage from './pages/MetaAllPage';
-import UploadPage from './pages/UploadPage'
+import UploadPage from './pages/UploadPage';
 import MetaDetailPage from './pages/MetaDetailPage';
-import IframePage from './pages/IframePage'
+import IframePage from './pages/IframePage';
 
 const isAdmin = hasRole(getUserInfo(), 'admin');
 
@@ -79,398 +78,14 @@ function App() {
             const { execute } = settings.capabilities
             const canRun = execute.value !== undefined ? execute.value : execute.default
 
+            const switchProps : AppRouterSwitchProps = {
+              API, KFP, canRun
+            }
+
             return (
               <Router basename={process.env.REACT_APP_BASE_PATH}>
                 <Sidebar>
-                  <Route exact path="/" component={LandingPage} />
-                  <Route exact path="/pipelines"
-                    render={routeProps =>
-                      <MetaFeaturedPage
-                        assetType="pipelines"
-                        description="Pipelines for your machine learning workloads."
-                        hasAssets
-                        alternateBG
-                        leftBtn="View all Pipelines"
-                        leftLink="/pipelines/all"
-                        leftAdmin={true}
-                        rightBtn="Register a Pipeline"
-                        rightLink="/upload/pipelines"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                    { isAdmin &&
-                    <Route path="/pipelines/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="pipelines"
-                          description="Pipelines for your machine learning workloads."
-                          tagName="Category"
-                          getTag={(asset: any) => 'OpenSource'}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/pipelines"
-                          leftIcon="arrow_back"
-                          rightBtn="Register a Pipeline"
-                          rightLink="/upload/pipelines"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/pipelines/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="pipelines"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <PipelineDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route exact path="/datasets"
-                    render={routeProps =>
-                      <MetaFeaturedPage
-                        assetType="datasets"
-                        description="Datasets for your machine learning workloads."
-                        hasAssets
-                        alternateBG
-                        leftBtn="View all Datasets"
-                        leftLink="/datasets/all"
-                        leftAdmin={true}
-                        rightBtn="Register a Dataset"
-                        rightLink="/upload/datasets"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                    { isAdmin &&
-                    <Route path="/datasets/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="datasets"
-                          description="Datasets for your machine learning workloads."
-                          tagName="Category"
-                          getTag={(asset: any) => 'OpenSource'}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/datasets"
-                          leftIcon="arrow_back"
-                          rightBtn="Register a Dataset"
-                          rightLink="/upload/datasets"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/datasets/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="datasets"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <DatasetDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route exact path="/components"
-                    render={ routeProps =>
-                      <MetaFeaturedPage
-                        { ...routeProps }
-                        assetType="components"
-                        description="Components that can be used to build your pipelines."
-                        hasAssets
-                        leftBtn="View all Components"
-                        leftLink="/components/all"
-                        leftAdmin={true}
-                        rightBtn="Register a Component"
-                        rightLink="/upload/components"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                  { isAdmin &&
-                    <Route path="/components/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="components"
-                          description="Components that can be used to build your pipelines."
-                          tagName="Platform"
-                          getTag={(asset: any) =>
-                            asset.metadata?.annotations?.platform
-                            || 'OpenSource'}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/components"
-                          leftIcon="arrow_back"
-                          rightBtn="Register a Component"
-                          rightLink="/upload/components"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/components/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="components"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <ComponentDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route exact path="/models"
-                    render={ routeProps =>
-                      <MetaFeaturedPage
-                        { ...routeProps }
-                        assetType="models"
-                        description="Machine learning models that can be used in your pipelines."
-                        runningStatus=""
-                        statusIcon=""
-                        alternateBG
-                        hasAssets
-                        leftBtn="View all Models"
-                        leftLink="/models/all"
-                        leftAdmin={true}
-                        rightBtn="Register a Model"
-                        rightLink="/upload/models"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                  { isAdmin &&
-                    <Route path="/models/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="models"
-                          description="Machine learning models that can be used in your pipelines."
-                          tagName="Domain"
-                          getTag={(asset: any) => asset.domain}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/models"
-                          leftIcon="arrow_back"
-                          rightBtn="Register a Model"
-                          rightLink="/upload/models"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/models/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="models"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <ModelDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route exact path="/inferenceservices"
-                    render={ routeProps =>
-                      <KFServingFeaturedPage
-                        { ...routeProps }
-                        assetType="inferenceservices"
-                        description="KFServing inference services."
-                        alternateBG
-                        hasAssets
-                        leftBtn="View all Services"
-                        leftLink="/inferenceservices/all"
-                        leftAdmin={true}
-                        rightBtn="Deploy a Service"
-                        rightLink="/upload/inferenceservices"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                    <Route path="/inferenceservices/all"
-                      render={ routeProps =>
-                        <KFServingAllPage
-                          type="inferenceservices"
-                          description="KFServing inference services."
-                          runningStatus=""
-                          statusIcon=""
-                          tagName="Domain"
-                          getTag={(asset: any) => asset.domain}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/inferenceservices"
-                          leftIcon="arrow_back"
-                          rightBtn="Deploy a Service"
-                          rightLink="/upload/inferenceservices"
-                          rightAdmin={true}
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    <Route path="/inferenceservices/:id"
-                      render={({ match, location })=> (
-                        <KFServingDetailPage
-                          type="inferenceservices"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <KFServingDetail />
-                        </KFServingDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route path="/workspace"
-                    render={(routeProps) => {
-                      window.open(`${KFP}/hub/login`, '_blank')
-                      routeProps.history.goBack()
-                      return null
-                    }}
-                  />
-                  <Route exact path="/notebooks"
-                    render={routeProps =>
-                      <MetaFeaturedPage
-                        { ...routeProps }
-                        assetType="notebooks"
-                        description="Notebooks for your data science tasks."
-                        leftBtn="View all Notebooks"
-                        leftLink="/notebooks/all"
-                        leftAdmin={true}
-                        rightBtn="Register a Notebook"
-                        rightLink="upload/notebooks"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                  { isAdmin &&
-                    <Route path="/notebooks/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="notebooks"
-                          description="Notebooks for your data science tasks."
-                          tagName="Platform"
-                          getTag={(asset: any) => asset.metadata?.annotations?.platform || 'OpenSource'}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/notebooks"
-                          leftIcon="arrow_back"
-                          rightBtn="Register a Notebook"
-                          rightLink="/upload/notebooks"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/notebooks/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="notebooks"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <NotebookDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  <Route exact path="/operators"
-                    render={ routeProps =>
-                      <MetaFeaturedPage
-                        { ...routeProps }
-                        hasAssets
-                        assetType="operators"
-                        description="Operators for your machine learning stack."
-                        leftBtn="View all Operators"
-                        leftLink="/operators/all"
-                        leftAdmin={true}
-                        rightBtn="Register an Operator"
-                        rightLink="/upload/operators"
-                        rightAdmin={true}
-                      />
-                    }
-                  />
-                  <Switch>
-                    { isAdmin &&
-                    <Route path="/operators/all"
-                      render={ routeProps =>
-                        <MetaAllPage
-                          type="operators"
-                          description="Operators for your machine learning stack."
-                          tagName="Categories"
-                          getTag={(asset: any) => asset.metadata?.annotations?.categories || 'AI/Machine Learning'}
-                          alternateBG
-                          leftBtn="Featured"
-                          leftLink="/operators"
-                          leftIcon="arrow_back"
-                          rightBtn="Register an Operator"
-                          rightLink="/upload/operators"
-                          canEdit={true}
-                        />
-                      }
-                    />
-                    }
-                    <Route path="/operators/:id"
-                      render={({ match, location })=> (
-                        <MetaDetailPage
-                          type="operators"
-                          id={match.params.id}
-                          asset={location}
-                        >
-                          <OperatorDetail />
-                        </MetaDetailPage>
-                      )}
-                    />
-                  </Switch>
-                  { isAdmin &&
-                  <Route
-                    path="/experiments"
-                    render={({match, location}) =>
-                      <IframePage
-                        title="KFP Experiments"
-                        path={KFP + "/_/pipeline/?ns=mlx#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
-                        storageKey="experiments-iframe"
-                      />
-                    }
-                  />
-                  }
-                  { isAdmin &&
-                  <Switch>
-                    <Route
-                      exact path="/upload/inferenceservices"
-                      render={routeProps => <KFServingUploadPage {...routeProps} /> }
-                    />
-                    <Route
-                      path="/upload/:type"
-                      render={routeProps => <UploadPage {...routeProps} /> }
-                    />
-                  </Switch>
-                  }
-                  { isAdmin &&
-                  <Route path="/delete/:type"
-                  render={routeProps =>
-                    <MetaDeletePage
-                    { ...routeProps }
-                    API={ API }
-                    canRun={ canRun }
-                    alternateBG>
-                      </MetaDeletePage>
-                    }
-                    />
-                  }
-                  { isAdmin &&
-                  <Route path="/settings" render={routeProps => <SettingsPage alternateBG />} />
-                  }
+                  {AppRouterSwitch(switchProps)}
                 </Sidebar>
               </Router>
             )
@@ -481,4 +96,333 @@ function App() {
   )
 }
 
+interface AppRouterSwitchProps {
+  API: string,
+  KFP: string,
+  canRun: boolean
+}
+
+function AppRouterSwitch(props: AppRouterSwitchProps) {
+  const {API, KFP, canRun} = props
+
+  return (
+    <Switch>
+      <Route exact path="/" component={LandingPage} />
+      <Route exact path="/pipelines"
+        render={routeProps =>
+          <MetaFeaturedPage
+            assetType="pipelines"
+            description="Pipelines for your machine learning workloads."
+            hasAssets
+            alternateBG
+            leftBtn="View all Pipelines"
+            leftLink="/pipelines/all"
+            leftAdmin={true}
+            rightBtn="Register a Pipeline"
+            rightLink="/upload/pipelines"
+            rightAdmin={true}
+          />
+        }
+      />
+      <Route exact path="/datasets"
+        render={routeProps =>
+          <MetaFeaturedPage
+            assetType="datasets"
+            description="Datasets for your machine learning workloads."
+            hasAssets
+            alternateBG
+            leftBtn="View all Datasets"
+            leftLink="/datasets/all"
+            leftAdmin={true}
+            rightBtn="Register a Dataset"
+            rightLink="/upload/datasets"
+            rightAdmin={true}
+          />
+        }
+      />
+      <Route exact path="/components"
+        render={ routeProps =>
+          <MetaFeaturedPage
+            { ...routeProps }
+            assetType="components"
+            description="Components that can be used to build your pipelines."
+            hasAssets
+            leftBtn="View all Components"
+            leftLink="/components/all"
+            leftAdmin={true}
+            rightBtn="Register a Component"
+            rightLink="/upload/components"
+            rightAdmin={true}
+          />
+        }
+      />
+      <Route exact path="/models"
+        render={ routeProps =>
+          <MetaFeaturedPage
+            { ...routeProps }
+            assetType="models"
+            description="Machine learning models that can be used in your pipelines."
+            runningStatus=""
+            statusIcon=""
+            alternateBG
+            hasAssets
+            leftBtn="View all Models"
+            leftLink="/models/all"
+            leftAdmin={true}
+            rightBtn="Register a Model"
+            rightLink="/upload/models"
+            rightAdmin={true}
+          />
+        }
+      />
+      <Route exact path="/inferenceservices"
+        render={ routeProps =>
+          <KFServingFeaturedPage
+            { ...routeProps }
+            assetType="inferenceservices"
+            description="KFServing inference services."
+            alternateBG
+            hasAssets
+            leftBtn="View all Services"
+            leftLink="/inferenceservices/all"
+            leftAdmin={true}
+            rightBtn="Deploy a Service"
+            rightLink="/upload/inferenceservices"
+            rightAdmin={true}
+          />
+        }
+      />
+      <Route path="/workspace"
+        render={(routeProps) => {
+          window.open(`${KFP}/hub/login`, '_blank')
+          routeProps.history.goBack()
+          return null
+        }}
+      />
+      <Route exact path="/notebooks"
+        render={routeProps =>
+          <MetaFeaturedPage
+            { ...routeProps }
+            assetType="notebooks"
+            description="Notebooks for your data science tasks."
+            leftBtn="View all Notebooks"
+            leftLink="/notebooks/all"
+            leftAdmin={true}
+            rightBtn="Register a Notebook"
+            rightLink="upload/notebooks"
+            rightAdmin={true}
+          />
+        }
+      />
+      { isAdmin &&
+        <>
+          <Route path="/pipelines/all"
+            render={ routeProps =>
+              <MetaAllPage
+                type="pipelines"
+                description="Pipelines for your machine learning workloads."
+                tagName="Category"
+                getTag={(asset: any) => 'OpenSource'}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/pipelines"
+                leftIcon="arrow_back"
+                rightBtn="Register a Pipeline"
+                rightLink="/upload/pipelines"
+                canEdit={true}
+              />
+            }
+          />
+          <Route path="/datasets/all"
+            render={ routeProps =>
+              <MetaAllPage
+                type="datasets"
+                description="Datasets for your machine learning workloads."
+                tagName="Category"
+                getTag={(asset: any) => 'OpenSource'}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/datasets"
+                leftIcon="arrow_back"
+                rightBtn="Register a Dataset"
+                rightLink="/upload/datasets"
+                canEdit={true}
+              />
+            }
+          />
+          <Route path="/components/all"
+            render={ routeProps =>
+              <MetaAllPage
+                type="components"
+                description="Components that can be used to build your pipelines."
+                tagName="Platform"
+                getTag={(asset: any) =>
+                  asset.metadata?.annotations?.platform
+                  || 'OpenSource'}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/components"
+                leftIcon="arrow_back"
+                rightBtn="Register a Component"
+                rightLink="/upload/components"
+                canEdit={true}
+              />
+            }
+          />
+          <Route path="/models/all"
+            render={ routeProps =>
+              <MetaAllPage
+                type="models"
+                description="Machine learning models that can be used in your pipelines."
+                tagName="Domain"
+                getTag={(asset: any) => asset.domain}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/models"
+                leftIcon="arrow_back"
+                rightBtn="Register a Model"
+                rightLink="/upload/models"
+                canEdit={true}
+              />
+            }
+          />
+          <Route path="/inferenceservices/all"
+            render={ routeProps =>
+              <KFServingAllPage
+                type="inferenceservices"
+                description="KFServing inference services."
+                runningStatus=""
+                statusIcon=""
+                tagName="Domain"
+                getTag={(asset: any) => asset.domain}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/inferenceservices"
+                leftIcon="arrow_back"
+                rightBtn="Deploy a Service"
+                rightLink="/upload/inferenceservices"
+                rightAdmin={true}
+                canEdit={true}
+              />
+            }
+          />
+          <Route path="/notebooks/all"
+            render={ routeProps =>
+              <MetaAllPage
+                type="notebooks"
+                description="Notebooks for your data science tasks."
+                tagName="Platform"
+                getTag={(asset: any) => asset.metadata?.annotations?.platform || 'OpenSource'}
+                alternateBG
+                leftBtn="Featured"
+                leftLink="/notebooks"
+                leftIcon="arrow_back"
+                rightBtn="Register a Notebook"
+                rightLink="/upload/notebooks"
+                canEdit={true}
+              />
+            }
+            />
+          <Route
+            path="/experiments"
+            render={({match, location}) =>
+              <IframePage
+                title="KFP Experiments"
+                path={KFP + "/pipeline/#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
+                storageKey="experiments-iframe"
+              />
+            }
+          />
+          <Route
+            exact path="/upload/inferenceservices"
+            render={routeProps => <KFServingUploadPage/> }
+          />
+          <Route
+            path="/upload/:type"
+            render={routeProps => <UploadPage {...routeProps} /> }
+          />
+          <Route path="/delete/:type"
+            render={routeProps =>
+              <MetaDeletePage
+                { ...routeProps }
+                API={ API }
+                canRun={ canRun }
+                alternateBG
+              >
+              </MetaDeletePage>
+            }
+          />
+          <Route path="/settings" render={routeProps => <SettingsPage alternateBG />} />
+        </>
+      }
+      <Route path="/pipelines/:id"
+        render={({ match, location })=> (
+          <MetaDetailPage
+            type="pipelines"
+            id={match.params.id}
+            asset={location}
+          >
+            <PipelineDetail />
+          </MetaDetailPage>
+        )}
+      />
+      <Route path="/datasets/:id"
+        render={({ match, location })=> (
+          <MetaDetailPage
+            type="datasets"
+            id={match.params.id}
+            asset={location}
+          >
+            <DatasetDetail />
+          </MetaDetailPage>
+        )}
+      />
+      <Route path="/components/:id"
+        render={({ match, location })=> (
+          <MetaDetailPage
+            type="components"
+            id={match.params.id}
+            asset={location}
+          >
+            <ComponentDetail />
+          </MetaDetailPage>
+        )}
+      />
+      <Route path="/models/:id"
+        render={({ match, location })=> (
+          <MetaDetailPage
+            type="models"
+            id={match.params.id}
+            asset={location}
+          >
+            <ModelDetail />
+          </MetaDetailPage>
+        )}
+      />
+      <Route path="/inferenceservices/:id"
+        render={({ match, location })=> (
+          <KFServingDetailPage
+            type="inferenceservices"
+            id={match.params.id}
+            asset={location}
+          >
+            <KFServingDetail />
+          </KFServingDetailPage>
+        )}
+      />
+      <Route path="/notebooks/:id"
+        render={({ match, location })=> (
+          <MetaDetailPage
+            type="notebooks"
+            id={match.params.id}
+            asset={location}
+          >
+            <NotebookDetail />
+          </MetaDetailPage>
+        )}
+      />
+    </Switch>
+  )
+}
+
 export default App;
diff --git a/dashboard/origin-mlx/src/pages/KFServingUploadPage.tsx b/dashboard/origin-mlx/src/pages/KFServingUploadPage.tsx
index a0a7d178..d80bafa3 100644
--- a/dashboard/origin-mlx/src/pages/KFServingUploadPage.tsx
+++ b/dashboard/origin-mlx/src/pages/KFServingUploadPage.tsx
@@ -16,7 +16,6 @@
 import React, { useContext, useState, ChangeEvent, FormEvent } from 'react'
 import StoreContext from '../lib/stores/context'
 import { Link } from 'react-router-dom'
-import { RouteComponentProps } from 'react-router';
 import { upload } from '../lib/api/upload'
 import Button from '../components/Button'
 import Icon from '@material-ui/core/Icon'
@@ -26,11 +25,8 @@ import Typography from '@material-ui/core/Typography'
 import indicatorGif from '../images/indicator-gif.gif'
 import yaml from 'js-yaml';
 
-interface MatchProps {
-  type: string
-}
   
-function UploadPage(props: RouteComponentProps<MatchProps>) {
+function UploadPage() {
   const type = 'inferenceservices'
   const [ uploadStatus, setUploadStatus] = useState({fullStatus: '', link: ''})
   const [ file, setFile ] = useState(null)
diff --git a/dashboard/origin-mlx/src/pages/UploadPage.tsx b/dashboard/origin-mlx/src/pages/UploadPage.tsx
index 655cd546..3e9dab44 100644
--- a/dashboard/origin-mlx/src/pages/UploadPage.tsx
+++ b/dashboard/origin-mlx/src/pages/UploadPage.tsx
@@ -141,7 +141,7 @@ function UploadPage(props: RouteComponentProps<MatchProps>) {
               margin="dense"
               variant="outlined"
               autoCorrect="false"
-              label={`${capitalize(type)} Name`}
+              label={`${capitalize(type.substring(0, type.length - 1))} Name`}
               helperText="If no value is entered, a default will be chosen from the source YAML file."
               InputLabelProps={{ shrink: true }}
             />

From 3cfccc0581fc6c55a3a9864f65db7998c3c8bc79 Mon Sep 17 00:00:00 2001
From: Andrew-Butler <Andrew.Butler@ibm.com>
Date: Thu, 10 Jun 2021 10:02:18 -0700
Subject: [PATCH 2/4] Add back namespace

Signed-off-by: Andrew-Butler <Andrew.Butler@ibm.com>
---
 dashboard/origin-mlx/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/origin-mlx/src/App.tsx b/dashboard/origin-mlx/src/App.tsx
index f6ec0f5e..b6448d6f 100644
--- a/dashboard/origin-mlx/src/App.tsx
+++ b/dashboard/origin-mlx/src/App.tsx
@@ -328,7 +328,7 @@ function AppRouterSwitch(props: AppRouterSwitchProps) {
             render={({match, location}) =>
               <IframePage
                 title="KFP Experiments"
-                path={KFP + "/pipeline/#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
+                path={KFP + "/_/pipeline/?ns=mlx#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
                 storageKey="experiments-iframe"
               />
             }

From 758b36ad0dad3401de536cb2b8e9bd56459b2dcd Mon Sep 17 00:00:00 2001
From: Andrew-Butler <Andrew.Butler@ibm.com>
Date: Wed, 23 Jun 2021 13:11:33 -0700
Subject: [PATCH 3/4] Add protected route for admin users

---
 dashboard/origin-mlx/src/App.tsx | 285 ++++++++++++++++---------------
 1 file changed, 150 insertions(+), 135 deletions(-)

diff --git a/dashboard/origin-mlx/src/App.tsx b/dashboard/origin-mlx/src/App.tsx
index b6448d6f..cf6733f1 100644
--- a/dashboard/origin-mlx/src/App.tsx
+++ b/dashboard/origin-mlx/src/App.tsx
@@ -21,7 +21,7 @@ import { GET_SETTINGS } from './lib/stores/settings';
 import { getSettings } from './lib/api/settings';
 import { getUserInfo, hasRole } from './lib/util';
 
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import Sidebar from './components/Sidebar';
 import PipelineDetail from './components/Detail/PipelineDetail';
 import DatasetDetail from './components/Detail/DatasetDetail';
@@ -214,147 +214,144 @@ function AppRouterSwitch(props: AppRouterSwitchProps) {
           />
         }
       />
-      { isAdmin &&
-        <>
-          <Route path="/pipelines/all"
-            render={ routeProps =>
-              <MetaAllPage
-                type="pipelines"
-                description="Pipelines for your machine learning workloads."
-                tagName="Category"
-                getTag={(asset: any) => 'OpenSource'}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/pipelines"
-                leftIcon="arrow_back"
-                rightBtn="Register a Pipeline"
-                rightLink="/upload/pipelines"
-                canEdit={true}
-              />
-            }
-          />
-          <Route path="/datasets/all"
-            render={ routeProps =>
-              <MetaAllPage
-                type="datasets"
-                description="Datasets for your machine learning workloads."
-                tagName="Category"
-                getTag={(asset: any) => 'OpenSource'}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/datasets"
-                leftIcon="arrow_back"
-                rightBtn="Register a Dataset"
-                rightLink="/upload/datasets"
-                canEdit={true}
-              />
-            }
-          />
-          <Route path="/components/all"
-            render={ routeProps =>
-              <MetaAllPage
-                type="components"
-                description="Components that can be used to build your pipelines."
-                tagName="Platform"
-                getTag={(asset: any) =>
-                  asset.metadata?.annotations?.platform
-                  || 'OpenSource'}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/components"
-                leftIcon="arrow_back"
-                rightBtn="Register a Component"
-                rightLink="/upload/components"
-                canEdit={true}
-              />
-            }
+      <ProtectedRoute exact path="/pipelines/all"
+        render={ () =>
+          <MetaAllPage
+            type="pipelines"
+            description="Pipelines for your machine learning workloads."
+            tagName="Category"
+            getTag={(asset: any) => 'OpenSource'}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/pipelines"
+            leftIcon="arrow_back"
+            rightBtn="Register a Pipeline"
+            rightLink="/upload/pipelines"
+            canEdit={true}
           />
-          <Route path="/models/all"
-            render={ routeProps =>
-              <MetaAllPage
-                type="models"
-                description="Machine learning models that can be used in your pipelines."
-                tagName="Domain"
-                getTag={(asset: any) => asset.domain}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/models"
-                leftIcon="arrow_back"
-                rightBtn="Register a Model"
-                rightLink="/upload/models"
-                canEdit={true}
-              />
-            }
+        }
+      />
+      <ProtectedRoute exact path="/datasets/all"
+        render={ () =>
+          <MetaAllPage
+            type="datasets"
+            description="Datasets for your machine learning workloads."
+            tagName="Category"
+            getTag={(asset: any) => 'OpenSource'}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/datasets"
+            leftIcon="arrow_back"
+            rightBtn="Register a Dataset"
+            rightLink="/upload/datasets"
+            canEdit={true}
           />
-          <Route path="/inferenceservices/all"
-            render={ routeProps =>
-              <KFServingAllPage
-                type="inferenceservices"
-                description="KFServing inference services."
-                runningStatus=""
-                statusIcon=""
-                tagName="Domain"
-                getTag={(asset: any) => asset.domain}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/inferenceservices"
-                leftIcon="arrow_back"
-                rightBtn="Deploy a Service"
-                rightLink="/upload/inferenceservices"
-                rightAdmin={true}
-                canEdit={true}
-              />
-            }
+        }
+      />
+      <ProtectedRoute exact path="/components/all"
+        render={ () =>
+          <MetaAllPage
+            type="components"
+            description="Components that can be used to build your pipelines."
+            tagName="Platform"
+            getTag={(asset: any) =>
+              asset.metadata?.annotations?.platform
+              || 'OpenSource'}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/components"
+            leftIcon="arrow_back"
+            rightBtn="Register a Component"
+            rightLink="/upload/components"
+            canEdit={true}
           />
-          <Route path="/notebooks/all"
-            render={ routeProps =>
-              <MetaAllPage
-                type="notebooks"
-                description="Notebooks for your data science tasks."
-                tagName="Platform"
-                getTag={(asset: any) => asset.metadata?.annotations?.platform || 'OpenSource'}
-                alternateBG
-                leftBtn="Featured"
-                leftLink="/notebooks"
-                leftIcon="arrow_back"
-                rightBtn="Register a Notebook"
-                rightLink="/upload/notebooks"
-                canEdit={true}
-              />
-            }
-            />
-          <Route
-            path="/experiments"
-            render={({match, location}) =>
-              <IframePage
-                title="KFP Experiments"
-                path={KFP + "/_/pipeline/?ns=mlx#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
-                storageKey="experiments-iframe"
-              />
-            }
+        }
+      />
+      <ProtectedRoute exact path="/models/all"
+        render={ () =>
+          <MetaAllPage
+            type="models"
+            description="Machine learning models that can be used in your pipelines."
+            tagName="Domain"
+            getTag={(asset: any) => asset.domain}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/models"
+            leftIcon="arrow_back"
+            rightBtn="Register a Model"
+            rightLink="/upload/models"
+            canEdit={true}
           />
-          <Route
-            exact path="/upload/inferenceservices"
-            render={routeProps => <KFServingUploadPage/> }
+        }
+      />
+      <ProtectedRoute exact path="/inferenceservices/all"
+        render={ () =>
+          <KFServingAllPage
+            type="inferenceservices"
+            description="KFServing inference services."
+            runningStatus=""
+            statusIcon=""
+            tagName="Domain"
+            getTag={(asset: any) => asset.domain}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/inferenceservices"
+            leftIcon="arrow_back"
+            rightBtn="Deploy a Service"
+            rightLink="/upload/inferenceservices"
+            rightAdmin={true}
+            canEdit={true}
           />
-          <Route
-            path="/upload/:type"
-            render={routeProps => <UploadPage {...routeProps} /> }
+        }
+      />
+      <ProtectedRoute exact path="/notebooks/all"
+        render={ () =>
+          <MetaAllPage
+            type="notebooks"
+            description="Notebooks for your data science tasks."
+            tagName="Platform"
+            getTag={(asset: any) => asset.metadata?.annotations?.platform || 'OpenSource'}
+            alternateBG
+            leftBtn="Featured"
+            leftLink="/notebooks"
+            leftIcon="arrow_back"
+            rightBtn="Register a Notebook"
+            rightLink="/upload/notebooks"
+            canEdit={true}
           />
-          <Route path="/delete/:type"
-            render={routeProps =>
-              <MetaDeletePage
-                { ...routeProps }
-                API={ API }
-                canRun={ canRun }
-                alternateBG
-              >
-              </MetaDeletePage>
-            }
+        }
+        />
+      <ProtectedRoute
+        exact
+        path="/experiments"
+        render={() =>
+          <IframePage
+            title="KFP Experiments"
+            path={KFP + "/_/pipeline/?ns=mlx#/experiments" + window.location.pathname.substring(window.location.pathname.indexOf("/experiments")+12)}
+            storageKey="experiments-iframe"
           />
-          <Route path="/settings" render={routeProps => <SettingsPage alternateBG />} />
-        </>
-      }
+        }
+      />
+      <ProtectedRoute
+        exact path="/upload/inferenceservices"
+        render={() => <KFServingUploadPage/> }
+      />
+      <ProtectedRoute
+        path="/upload/:type"
+        render={(routeProps: any) => <UploadPage {...routeProps} /> }
+      />
+      <ProtectedRoute path="/delete/:type"
+        render={(routeProps: any) =>
+          <MetaDeletePage
+            { ...routeProps }
+            API={ API }
+            canRun={ canRun }
+            alternateBG
+          >
+          </MetaDeletePage>
+        }
+      />
+      <ProtectedRoute path="/settings" render={(routeProps: any) => <SettingsPage alternateBG />} />
       <Route path="/pipelines/:id"
         render={({ match, location })=> (
           <MetaDetailPage
@@ -425,4 +422,22 @@ function AppRouterSwitch(props: AppRouterSwitchProps) {
   )
 }
 
+interface ProtectedRouteProps {
+  exact?: boolean,
+  path: string,
+  render: any
+}
+function ProtectedRoute(props: ProtectedRouteProps) {
+
+  return (
+    <Route 
+      { ...props }
+      render={isAdmin 
+        ? props.render 
+        : () => <Redirect to='/login'></Redirect>
+      }
+    />
+  )
+}
+
 export default App;

From 484b7f2da7a07f701dfdd9fec7a850c0342c34a8 Mon Sep 17 00:00:00 2001
From: Andrew-Butler <Andrew.Butler@ibm.com>
Date: Wed, 23 Jun 2021 13:45:38 -0700
Subject: [PATCH 4/4] reset for conflict

---
 dashboard/origin-mlx/src/pages/UploadPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/origin-mlx/src/pages/UploadPage.tsx b/dashboard/origin-mlx/src/pages/UploadPage.tsx
index 297ef9ae..addd3704 100644
--- a/dashboard/origin-mlx/src/pages/UploadPage.tsx
+++ b/dashboard/origin-mlx/src/pages/UploadPage.tsx
@@ -141,7 +141,7 @@ function UploadPage(props: RouteComponentProps<MatchProps>) {
               margin="dense"
               variant="outlined"
               autoCorrect="false"
-              label={`${capitalize(type.substring(0, type.length - 1))} Name`}
+              label={`${capitalize(type)} Name`}
               helperText="If no value is entered, a default will be chosen from the source YAML file."
               InputLabelProps={{ shrink: true }}
             />