New frontend in React

CMakeLists.txt

@@ -33,6 +33,7 @@ add_subdirectory(service)
 add_subdirectory(util)
 add_subdirectory(plugins) # must precede webgui
 add_subdirectory(webgui)
+add_subdirectory(webgui-new)
 add_subdirectory(webserver)
 
 # Install java libraries

Config.cmake

@@ -26,6 +26,9 @@ set(INSTALL_AUTH_DIR "${INSTALL_LIB_DIR}/${INSTALL_AUTH_DIR_NAME}")
 # Installation directory of web GUI
 set(INSTALL_WEBROOT_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/webgui")
 
+# Installation directory of the new React-based web GUI
+set(INSTALL_WEBROOT_REACT_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/webgui-new")
+
 # Installation directory of SQL files
 set(INSTALL_SQL_DIR "${CMAKE_INSTALL_PREFIX}/share/codecompass/sql")
 

docker/dev/Dockerfile

@@ -11,6 +11,7 @@ RUN set -x && apt-get update -qq \
   cmake make \
   default-jdk \
   ctags \
+  curl \
   doxygen \
   gcc-9 gcc-9-plugin-dev g++-9 \
   libboost-filesystem-dev \
@@ -31,6 +32,9 @@ RUN set -x && apt-get update -qq \
   ln -s /usr/bin/gcc-9 /usr/bin/gcc && \
   ln -s /usr/bin/g++-9 /usr/bin/g++
 
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
 # Build GTest.
 RUN cd /usr/src/googletest && \
   mkdir build && \

docker/web/Dockerfile

@@ -32,10 +32,14 @@ RUN set -x && apt-get update -qq \
     # To switch user and exec command.
     gosu \
     tini \
+    curl \
   && apt-get clean \
   && rm -rf /var/lib/apt/lists/ \
   && set +x
 
+RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
 ARG CC_GID=960
 ARG CC_UID=960
 

webgui-new/.env

@@ -0,0 +1,3 @@
+PUBLIC_URL=
+BACKEND_URL=http://localhost:8080
+DEVSERVER_PORT=3000

webgui-new/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react-hooks"],
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "globals": {
+    "JSX": true
+  }
+}

webgui-new/.gitignore

@@ -0,0 +1,37 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# production
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# thrift generated files
+generated/

webgui-new/.nvmrc

@@ -0,0 +1 @@
+v18.13.0

webgui-new/CMakeLists.txt

@@ -0,0 +1,20 @@
+install(DIRECTORY
+        public src
+        DESTINATION ${INSTALL_WEBROOT_REACT_DIR}/app
+        USE_SOURCE_PERMISSIONS
+        FILES_MATCHING PATTERN "[^.]*")
+
+install(FILES
+        tsconfig.json
+        next.config.js
+        thrift-codegen.sh
+        .env
+        DESTINATION ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+# Install React application
+install(CODE "set(CC_PACKAGE \"${CMAKE_CURRENT_SOURCE_DIR}/package.json\")")
+install(CODE "set(INSTALL_WEBROOT_DIR ${INSTALL_WEBROOT_DIR})")
+install(CODE "set(INSTALL_WEBROOT_REACT_DIR ${INSTALL_WEBROOT_REACT_DIR})")
+install(CODE "set(CMAKE_BUILD_TYPE ${CMAKE_BUILD_TYPE})")
+install(CODE "set(CMAKE_SOURCE_DIR ${CMAKE_SOURCE_DIR})")
+install(SCRIPT InstallReact.cmake)

webgui-new/InstallReact.cmake

@@ -0,0 +1,45 @@
+# Utility functions
+include(${CMAKE_SOURCE_DIR}/Functions.cmake)
+
+message("Install npm packages...")
+
+if(${CC_PACKAGE} IS_NEWER_THAN ${INSTALL_WEBROOT_REACT_DIR}/app/package.json)
+  execute_process(
+    COMMAND ${CMAKE_COMMAND} -E copy ${CC_PACKAGE} ${INSTALL_WEBROOT_REACT_DIR}/app/package.json
+    WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR})
+
+  execute_process(
+    COMMAND npm install
+    WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+endif()
+
+message("Installation of npm packages are finished.")
+
+# Generate TypeScript from Thrift
+execute_process(
+  COMMAND bash -c "chmod +x thrift-codegen.sh"
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+execute_process(
+  COMMAND bash thrift-codegen.sh --thrift-source ${CMAKE_SOURCE_DIR}
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+message("Building React App...")
+
+execute_process(
+  COMMAND npm run build
+  WORKING_DIRECTORY ${INSTALL_WEBROOT_REACT_DIR}/app)
+
+# Move build directory out of application directory
+file(REMOVE_RECURSE ${INSTALL_WEBROOT_REACT_DIR}/out)
+file(RENAME ${INSTALL_WEBROOT_REACT_DIR}/app/out ${INSTALL_WEBROOT_REACT_DIR}/out)
+
+# Create symbolic link
+execute_process(COMMAND ${CMAKE_COMMAND} -E create_symlink ../webgui-new/out ${INSTALL_WEBROOT_DIR}/new)
+
+if (CMAKE_BUILD_TYPE STREQUAL "Release")
+  # Remove application source code in case of Release build
+  file(REMOVE ${INSTALL_WEBROOT_REACT_DIR}/app)
+endif()
+
+message("Building React App finished.")

webgui-new/README.md

@@ -0,0 +1,62 @@
+# New Web GUI development guide
+
+## Prerequisites
+
+Make sure you are using at least version 18 of [Node.js](https://nodejs.org/en/).\
+You can also download [nvm](https://github.com/nvm-sh/nvm), and run `nvm install` at the root of the project to use the specified Node version (18.13.0).
+
+## Development
+
+Run the webserver with:
+
+```bash
+cd <path-to-webserver-binary> && ./CodeCompass_webserver -w <path-to-workspace-folder> -p <port>
+```
+
+Install npm packages with:
+
+```bash
+npm install
+```
+
+Generate TypeScript files from Thrift by running the following command:
+
+```bash
+chmod +x thrift-codegen.sh && ./thrift-codegen.sh --thrift-source ../
+```
+
+You can set the URL of the webserver (`BACKEND_URL`) and the port of the development server (`DEVSERVER_PORT`) by creating a `.env.local` file at the root of the project. This will override the variables in the `.env` file.\
+The default value is `http://localhost:8080` for the webserver URL and `3000` for the port of the development server, as seen in the `.env` file.
+
+```py
+# .env.local
+BACKEND_URL=
+DEVSERVER_PORT=
+```
+
+After this, you can run the development server with:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.\
+(Make sure to open the URL with the correct port if you chose to override the port for the devserver.)
+
+## Learn More
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Build and Install
+
+For building and installing the application, or parsing projects, please refer to the [CodeCompass README](/README.md) documentations and development sections.\
+(Note: For development, use SQLite as a database for parsing projects.)
+
+After installing, the current webgui will still be available at the root URL of the webserver (`/`), but you can also reach the new webgui at (`/new`).

webgui-new/next.config.js

@@ -0,0 +1,18 @@
+require('dotenv').config();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
+  trailingSlash: true,
+  ...(process.env.NODE_ENV === 'production' && {
+    assetPrefix: `${process.env.PUBLIC_URL || ''}/new`,
+    basePath: `${process.env.PUBLIC_URL || ''}/new`,
+  }),
+};
+
+module.exports = nextConfig;