refactor(tsx): Migrate React components to TSX

.github/workflows/unused-dependencies.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: '20.x'
       - name: 'Run depcheck'
         run: |
-          npx depcheck --skip-missing --ignores="tsx,@babel/*,@commitlint/*,eslint,eslint-*,husky,mocha,ts-mocha,ts-node,concurrently,nyc,prettier,typescript,tsconfig-paths,vite-tsconfig-paths"
+          npx depcheck --skip-missing --ignores="tsx,@babel/*,@commitlint/*,eslint,eslint-*,husky,mocha,ts-mocha,ts-node,concurrently,nyc,prettier,typescript,tsconfig-paths,vite-tsconfig-paths,history"
           echo $?
           if [[ $? == 1 ]]; then
             echo "Unused dependencies or devDependencies found"

index.html

@@ -79,5 +79,5 @@
           To create a production bundle, use `npm run build` or `yarn build`.
         -->
   </body>
-  <script type="module" src="/src/index.jsx"></script>
+  <script type="module" src="/src/index.tsx"></script>
 </html>

package.json

@@ -4,7 +4,7 @@
   "description": "Deploy custom push protections and policies on top of Git.",
   "scripts": {
     "cli": "node ./packages/git-proxy-cli/index.js",
-    "client": "vite --config vite.config.js",
+    "client": "vite --config vite.config.ts",
     "clientinstall": "npm install --prefix client",
     "server": "tsx index.ts",
     "start": "concurrently \"npm run server\" \"npm run client\"",
@@ -90,6 +90,7 @@
     "@types/lodash": "^4.17.15",
     "@types/mocha": "^10.0.10",
     "@types/node": "^22.13.5",
+    "@types/react-html-parser": "^2.0.7",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",

src/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { UserContextType } from './ui/views/RepoDetails/RepoDetails';
+
+export const UserContext = createContext<UserContextType>({
+  user: {
+    admin: false,
+  },
+});

src/index.jsx → src/index.tsx

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

src/routes.jsx → src/routes.tsx

@@ -16,6 +16,7 @@
 
 */
 
+import React from 'react';
 import Person from '@material-ui/icons/Person';
 import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests';
 import PushDetails from './ui/views/PushDetails/PushDetails';
@@ -25,10 +26,18 @@ import RepoDetails from './ui/views/RepoDetails/RepoDetails';
 import RepoList from './ui/views/RepoList/RepoList';
 
 import { RepoIcon } from '@primer/octicons-react';
-
 import { Group, AccountCircle, Dashboard } from '@material-ui/icons';
 
-const dashboardRoutes = [
+interface RouteType {
+  path: string;
+  name: string;
+  icon: React.ComponentType<any>;
+  component: React.ComponentType<any>;
+  layout: string;
+  visible: boolean;
+}
+
+const dashboardRoutes: RouteType[] = [
   {
     path: '/repo',
     name: 'Repositories',

src/ui/assets/jss/material-dashboard-react.js

@@ -60,7 +60,7 @@ const container = {
 
 const defaultFont = {
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
-  fontWeight: '300',
+  fontWeight: 300,
   lineHeight: '1.5em',
 };