Merge pull request finos#961 from jescalada/layout-auth-decoupling

fix: decouple UI layout from admin routes

Author: JamieSlome

config.schema.json

@@ -124,6 +124,19 @@
           "description": "Configuration source"
         }
       }
+    },
+    "uiRouteAuth": {
+      "description": "UI routes that require authentication (logged in or admin)",
+      "type": "object",
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "rules": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/routeAuthRule"
+          }
+        }
+      }
     }
   },
   "definitions": {
@@ -155,6 +168,14 @@
         "options": { "type": "object" }
       },
       "required": ["type", "enabled"]
+    },
+    "routeAuthRule": {
+      "type": "object",
+      "properties": {
+        "pattern": { "type": "string" },
+        "adminOnly": { "type": "boolean" },
+        "loginRequired": { "type": "boolean" }
+      }
     }
   },
   "additionalProperties": false

cypress/e2e/autoApproved.cy.js

@@ -2,6 +2,8 @@ import moment from 'moment';
 
 describe('Auto-Approved Push Test', () => {
   beforeEach(() => {
+    cy.login('admin', 'admin');
+
     cy.intercept('GET', '/api/v1/push/123', {
       statusCode: 200,
       body: {
@@ -45,7 +47,7 @@ describe('Auto-Approved Push Test', () => {
   });
 
   it('should display auto-approved message and verify tooltip contains the expected timestamp', () => {
-    cy.visit('/admin/push/123');
+    cy.visit('/dashboard/push/123');
 
     cy.wait('@getPush');
 

cypress/e2e/login.cy.js

@@ -19,6 +19,18 @@ describe('Login page', () => {
     cy.get('[data-test="login"]').should('exist');
   });
 
+  it('should redirect to repo list on valid login', () => {
+    cy.intercept('GET', '**/api/auth/me').as('getUser');
+
+    cy.get('[data-test="username"]').type('admin');
+    cy.get('[data-test="password"]').type('admin');
+    cy.get('[data-test="login"]').click();
+
+    cy.wait('@getUser');
+
+    cy.url().should('include', '/dashboard/repo');
+  })
+
   describe('OIDC login button', () => {
     it('should exist', () => {
       cy.get('[data-test="oidc-login"]').should('exist');

cypress/e2e/repo.cy.js

@@ -1,6 +1,8 @@
 describe('Repo', () => {
   beforeEach(() => {
-    cy.visit('/admin/repo');
+    cy.login('admin', 'admin');
+
+    cy.visit('/dashboard/repo');
 
     // prevent failures on 404 request and uncaught promises
     cy.on('uncaught:exception', () => false);
@@ -18,7 +20,7 @@ describe('Repo', () => {
 
       cy
         // find the entry for finos/test-repo
-        .get('a[href="/admin/repo/test-repo"]')
+        .get('a[href="/dashboard/repo/test-repo"]')
         // take it's parent row
         .closest('tr')
         // find the nearby span containing Code we can click to open the tooltip

cypress/support/commands.js

@@ -29,9 +29,13 @@
 Cypress.Commands.add('login', (username, password) => {
   cy.session([username, password], () => {
     cy.visit('/login');
+    cy.intercept('GET', '**/api/auth/me').as('getUser');
+
     cy.get('[data-test=username]').type(username);
     cy.get('[data-test=password]').type(password);
     cy.get('[data-test=login]').click();
-    cy.url().should('contain', '/admin/profile');
+
+    cy.wait('@getUser');
+    cy.url().should('include', '/dashboard/repo');
   });
 });

proxy.config.json

@@ -139,5 +139,20 @@
     "enabled": false,
     "key": "certs/key.pem",
     "cert": "certs/cert.pem"
+  },
+  "uiRouteAuth": {
+    "enabled": false,
+    "rules": [
+      {
+        "pattern": "/dashboard/*",
+        "adminOnly": false,
+        "loginRequired": true
+      },
+      {
+        "pattern": "/admin/*",
+        "adminOnly": true,
+        "loginRequired": true
+      }
+    ]
   }
 }

src/config/index.ts

@@ -38,6 +38,7 @@ let _rateLimit: RateLimitConfig = defaultSettings.rateLimit;
 let _tlsEnabled = defaultSettings.tls.enabled;
 let _tlsKeyPemPath = defaultSettings.tls.key;
 let _tlsCertPemPath = defaultSettings.tls.cert;
+let _uiRouteAuth: Record<string, unknown> = defaultSettings.uiRouteAuth;
 
 // Initialize configuration with defaults and user settings
 let _config = { ...defaultSettings, ...(_userSettings || {}) } as Configuration;
@@ -229,6 +230,13 @@ export const getDomains = () => {
   return _domains;
 };
 
+export const getUIRouteAuth = () => {
+  if (_userSettings && _userSettings.uiRouteAuth) {
+    _uiRouteAuth = _userSettings.uiRouteAuth;
+  }
+  return _uiRouteAuth;
+};
+
 export const getRateLimit = () => {
   if (_userSettings && _userSettings.rateLimit) {
     _rateLimit = _userSettings.rateLimit;

src/index.jsx

@@ -2,21 +2,28 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { createBrowserHistory } from 'history';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { AuthProvider } from './ui/auth/AuthProvider';
 
 // core components
-import Admin from './ui/layouts/Admin';
+import Dashboard from './ui/layouts/Dashboard';
 import Login from './ui/views/Login/Login';
 import './ui/assets/css/material-dashboard-react.css';
+import NotAuthorized from './ui/views/Extras/NotAuthorized';
+import NotFound from './ui/views/Extras/NotFound';
 
 const hist = createBrowserHistory();
 
 ReactDOM.render(
-  <Router history={hist}>
-    <Routes>
-      <Route exact path='/admin/*' element={<Admin />} />
-      <Route exact path='/login' element={<Login />} />
-      <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
-    </Routes>
-  </Router>,
+  <AuthProvider>
+    <Router history={hist}>
+      <Routes>
+        <Route exact path='/dashboard/*' element={<Dashboard />} />
+        <Route exact path='/login' element={<Login />} />
+        <Route exact path='/not-authorized' element={<NotAuthorized />} />
+        <Route exact path='/' element={<Navigate from='/' to='/dashboard/repo' />} />
+        <Route path='*' element={<NotFound />} />
+      </Routes>
+    </Router>
+  </AuthProvider>,
   document.getElementById('root'),
 );

src/proxy/processors/push-action/blockForAuth.ts

@@ -9,7 +9,7 @@ const exec = async (req: any, action: Action) => {
     '\n\n\n' +
     `\x1B[32mGitProxy has received your push ✅\x1B[0m\n\n` +
     '🔗 Shareable Link\n\n' +
-    `\x1B[34m${url}/admin/push/${action.id}\x1B[0m` +
+    `\x1B[34m${url}/dashboard/push/${action.id}\x1B[0m` +
     '\n\n\n';
   step.setAsyncBlock(message);
 

src/routes.jsx

@@ -16,6 +16,8 @@
 
 */
 
+import React from 'react';
+import RouteGuard from './ui/components/RouteGuard/RouteGuard';
 import Person from '@material-ui/icons/Person';
 import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests';
 import PushDetails from './ui/views/PushDetails/PushDetails';
@@ -33,58 +35,86 @@ const dashboardRoutes = [
     path: '/repo',
     name: 'Repositories',
     icon: RepoIcon,
-    component: RepoList,
-    layout: '/admin',
+    component: (props) => 
+      <RouteGuard
+        component={RepoList}
+        fullRoutePath={`/dashboard/repo`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
+  {
+    path: '/repo/:id',
+    name: 'Repo Details',
+    icon: Person,
+    component: (props) => 
+      <RouteGuard
+        component={RepoDetails}
+        fullRoutePath={`/dashboard/repo/:id`}
+      />,
+    layout: '/dashboard',
+    visible: false,
+  },
   {
     path: '/push',
     name: 'Dashboard',
     icon: Dashboard,
-    component: OpenPushRequests,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={OpenPushRequests}
+        fullRoutePath={`/dashboard/push`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
   {
     path: '/push/:id',
     name: 'Open Push Requests',
     icon: Person,
-    component: PushDetails,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={PushDetails}
+        fullRoutePath={`/dashboard/push/:id`}
+      />,
+    layout: '/dashboard',
     visible: false,
   },
   {
     path: '/profile',
     name: 'My Account',
     icon: AccountCircle,
-    component: User,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={User}
+        fullRoutePath={`/dashboard/profile`}
+      />,
+    layout: '/dashboard',
     visible: true,
   },
   {
-    path: '/user/:id',
-    name: 'User',
-    icon: Person,
-    component: User,
-    layout: '/admin',
-    visible: false,
+    path: '/admin/user',
+    name: 'Users',
+    icon: Group,
+    component: (props) =>
+      <RouteGuard
+        component={UserList}
+        fullRoutePath={`/dashboard/admin/user`}
+      />,
+    layout: '/dashboard',
+    visible: true,
   },
   {
-    path: '/repo/:id',
-    name: 'Repo Details',
+    path: '/admin/user/:id',
+    name: 'User',
     icon: Person,
-    component: RepoDetails,
-    layout: '/admin',
+    component: (props) =>
+      <RouteGuard
+        component={User}
+        fullRoutePath={`/dashboard/admin/user/:id`}
+      />,
+    layout: '/dashboard',
     visible: false,
   },
-  {
-    path: '/user',
-    name: 'Users',
-    icon: Group,
-    component: UserList,
-    layout: '/admin',
-    visible: true,
-  },
 ];
 
 export default dashboardRoutes;