Move project to React (#5)

* chore: init

* chore: refresh

* chore: refresh

* import stuff

* Update HTML and package dependencies

* cleanup

* chore: refactor routes, add logic for info tab

* chore: set mock host for UI testing

* chore: map ip devices

* Fix API data retrieval in about page

* Refactor NodeExample component in nodes route

* Update file size formatting in info route

* Refactor progressData function in info route

* reorg

* chore: fix anchor tabs

* Add @fontsource/inter package and update font imports

* Refactor NodeExample component in nodes route and add useNodePowerMutation hook

* Refactor NodeExample component in nodes route and add useSetNodeInfoMutation hook

* Refactor form elements and tabs layout styles

* Refactor form elements and tabs layout styles, and update USB mode and connected node options in USB route

* Refactor NodeExample component in nodes route and update form element values

* Add favicon to index.html

* Refactor power control and reset functionality in nodes route

* Refactor Info component and add network reset functionality

* Add network reset and BMC reboot functionality to Info component

* Add useReloadBMCMutation hook to Info component

* Refactor Info component and add backup functionality

* Refactor USB route and add USB mode mutation functionality

* Refactor firmware upgrade route and add basic firmware update functionality (not yet matching to API)

* Add axios library to leverage transfer progress

* Refactor firmware upgrade route and add file upload progress functionality

* Update file upload accept attribute in firmware and node upgrade routes

* Refactor firmware upgrade route and add file upload progress functionality

* Refactor firmware upgrade route and add dummy file upload progress functionality

* Refactor firmware upgrade route and fix file upload functionality

* Add eslint-plugin-simple-import-sort and fix eslint configuration

* simplify logo through svgomg

* Refactor app.tsx and add BasicInfoProvider context

* Update form elements and typography styles

* Refactor styles, add React Toastify

* chore: enable toasts mostly everywhere needed

* Add react-responsive-modal package and update modal styles

* Add reboot confirmation modal to Info route

* Fix loading state color in btn.scss and USB route

* Update node-upgrade route with reboot confirmation modal and file upload functionality

* Update dependencies to latest versions

* started to add skeletons, fix some console warnings

* improved typings, improved way to select default values

* Update axios host configuration to use environment variable in axios.ts

* simplify query/mutation response objects

* update flash node logic to match actual server-side logic

* Update firmware-related API queries and mutations

* Fix error handling and status messages in firmware-upgrade and node-upgrade routes

* Add AboutSkeleton component

* prefetch aboutTabData for header information, remove unneeded context

* Add queryClient.invalidateQueries call in useNetworkResetMutation onSuccess

* cleanup unused skeleton styles, fix skeleton for nodes tab

* add USBSkeleton component

* Add react-select package and update form elements styles

* Update dependencies and remove unused styles

* Add upload-icon.svg and update file upload functionality in firmware-upgrade and node-upgrade routes

* decouple FileInput

* decouple Modals

* Update form elements styles and file upload functionality

* decouple Select

* add javascript-time-ago library

* non-global tabLayout through React Router

* add login component

* chore: add jwt support

* Refactor authentication logic and add remember me functionality

* partially implement auth

* protect routes with tanstack router

* Update React and React DOM versions to 18.3.0

* Refactor authentication logic and add redirect functionality in login route

* Refactor CSS styles in _tabs-layout.scss and _login.scss files, add footer

* deauth if backend responses arrive as HTTP 401

* devtools to only be embedded in development runs

* fix text input style on hover/filled

* Refactor NodeRow component in nodes.lazy.tsx to use useRef for form handling

* Cleanup unused gulpfile, update React to v18.3.1

* Match route with tab name

* chore: cleanup dist

* chore: restore ignore

* feat: add quality & release pipelines

* feat: add bundle size reporting

* Fix switch input style on disabled state

* Add fan control

* Add file URL support for firmware upgrade and flash node

* fix: name file according to makefile expectations

* Update README, cleanup pipelines

* chore: friendlier wrong credentials message

* fix: sha labels

* refactor: use params for better dx

* chore: validate params so we don't send empty query params

* chore: add 404 page

* fix: usb tab data response

* chore: update dependencies

* fix: setNodeInfoMutation to return void

* fix: explicitly evaluate array length for fan control

.eslintrc.cjs

@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  plugins: ['react-refresh', "@typescript-eslint", "simple-import-sort"],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+  },
+}

.github/workflows/quality.yml

@@ -0,0 +1,84 @@
+name: Quality
+
+on: pull_request
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: Linting rules
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Linting rules
+        run: npm run lint
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Calculate /dist folder size in KB
+        run: echo "DIST_SIZE=$(du -sk dist | awk '{print $1 " KB"}')" >> $GITHUB_ENV
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v3
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: The current size
+
+      - name: Create or update comment
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: The current size of the `/dist` folder for this pull request is `${{ env.DIST_SIZE }}`.
+          edit-mode: replace
+
+  test:
+    name: Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run test suite
+        run: npm test

.github/workflows/tag-and-build.yml

@@ -0,0 +1,75 @@
+name: Tag and Build
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  tag:
+    name: Tag
+    runs-on: ubuntu-latest
+    outputs:
+      new_tag: ${{ steps.tag.outputs.new_tag }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Get current version from package.json
+        id: version
+        run: echo "version=$(jq -r .version package.json)" >> $GITHUB_OUTPUT
+
+      - name: Check if tag already exists
+        id: check
+        run: |
+          if git rev-list -n 1 "v${{ steps.version.outputs.version }}"; then
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Tag new version
+        id: tag
+        if: ${{ steps.check.outputs.exists == 'false' }}
+        uses: mathieudutour/github-tag-action@v6.2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          custom_tag: ${{ steps.version.outputs.version }}
+
+  build:
+    name: Build project
+    runs-on: ubuntu-latest
+    needs: tag
+    if: ${{ needs.tag.outputs.new_tag }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Compress dist as tar.gz
+        run: tar -czf bmc-ui-${{ needs.tag.outputs.new_tag }}.tar.gz dist
+
+      - name: Release
+        uses: ncipollo/release-action@v1
+        with:
+          name: BMC-UI ${{ needs.tag.outputs.new_tag }}
+          tag: ${{ needs.tag.outputs.new_tag }}
+          artifacts: bmc-ui-${{ needs.tag.outputs.new_tag }}.tar.gz
+          body: |
+            This is an automated release build by GitHub Actions, intended to be used in the BMC-Firmware build process.
+
+            For more details, please see the logs [here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}).

.gitignore

@@ -1,4 +1,24 @@
-.sass-cache/
-node_modules/
-.idea/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.nvmrc

@@ -0,0 +1 @@
+v20

README.md

@@ -1,20 +1,69 @@
-### Install NPM dependencies
+# BMC-UI
 
-```js
-npm install | npm i
-```
+BMC-UI is a web-based user interface for managing and configuring the BMC of a Turing Pi cluster.
 
-### Run Server & Watcher
+## Technologies Used
 
-```bash
-npm run dev | gulp
-```
+- [React](https://reactjs.org/) - JavaScript library for building user interfaces
+- [TanStack Router](https://tanstack.com/router) - Routing library for React applications
+  - Handles route management and route protection
+- [TanStack Query](https://tanstack.com/query) - Data fetching and caching library for React
+- [Vite](https://vitejs.dev/) - Fast build tool and development server
+- [TypeScript](https://www.typescriptlang.org/) - Typed superset of JavaScript
 
-### Build Project
+## Getting Started
 
-```bash
-npm run build | gulp build
-```
+1. Set up `bmcd-api-mock` for development:
+   - Clone the [bmcd-api-mock](https://github.com/barrenechea/bmcd-api-mock) repository.
+   - Follow the instructions in the `bmcd-api-mock` repository to set up and run the mock server.
 
+2. Clone the repository:
 
-```src``` - folder with developer sources and ```dist``` - folder with build for production
+   ```bash
+   git clone https://github.com/turing-machines/BMC-UI.git
+   ```
+
+3. Install dependencies:
+
+   ```bash
+   cd BMC-UI
+   npm install
+   ```
+
+4. Start the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+5. Open your browser and visit `http://localhost:5173` to see the application running.
+
+## Deployment
+
+The deployment process for BMC-UI is automated using GitHub Actions. The version management is handled by the `version` field defined in the `package.json` file.
+
+Whenever a pull request targeting the `main` branch is created and the `package.json` file is modified with an updated version, a new build is triggered automatically. Once the pull request is merged into the `main` branch, the version change will be detected, and the built files will be packaged into a tarball and released as an artifact on GitHub.
+
+To deploy a new version:
+
+1. Create a new branch and update the `version` field in the `package.json` file following semantic versioning (e.g., `2.1.0`, `2.1.1`, `3.0.0`).
+
+2. Commit the changes and push the branch to the repository.
+
+3. Open a pull request from the branch targeting the `main` branch.
+
+4. Review and merge the pull request into the `main` branch.
+
+5. GitHub Actions will automatically detect the version change, trigger a new build, and create a release with the tarball artifact.
+
+6. The release artifact can be downloaded and deployed to the target environment.
+
+## Contributing
+
+Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
+
+Please note that due to memory restrictions on the BMC, the final bundle size of the application cannot exceed 4MB. To ensure this limit is maintained, every pull request will report its bundle size, allowing us to track the bundle size over time. When contributing, please be mindful of the bundle size impact of your changes.
+
+## License
+
+This project is licensed under the [GNU General Public License v2.0](LICENSE).