https://github.com/cscfi/metadata-submitter-frontend
Frontend for Metadata Submission Interface.
https://github.com/cscfi/metadata-submitter-frontend
metadata-management react
Last synced: 12 months ago
JSON representation
Frontend for Metadata Submission Interface.
- Host: GitHub
- URL: https://github.com/cscfi/metadata-submitter-frontend
- Owner: CSCfi
- License: mit
- Created: 2020-06-08T13:44:23.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-06-24T08:11:27.000Z (12 months ago)
- Last Synced: 2025-06-24T09:27:06.405Z (12 months ago)
- Topics: metadata-management, react
- Language: TypeScript
- Homepage: https://metadata-submitter.rtfd.io
- Size: 27.7 MB
- Stars: 5
- Watchers: 4
- Forks: 2
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# SD Submit UI
[](https://github.com/CSCfi/metadata-submitter-frontend/actions/workflows/unittests.yml)
[](https://github.com/CSCfi/metadata-submitter-frontend/actions/workflows/typechecks.yml)
[](https://coveralls.io/github/CSCfi/metadata-submitter-frontend?branch=master)
SD Submit UI, also known as metadata submission frontend provides graphical user interface (GUI) for filling in and submitting metadata. This frontend repository is tightly coupled with backend repository called SD Submit API - link to repository in [Gitlab](https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter/) / [Github](https://github.com/CSCfi/metadata-submitter).
## 💻 Development
Click to expand
### Prerequisites
- Node 20+
- pnpm
- Backend
Install pnpm that suits your machine from [pnpm installation](https://pnpm.io/installation).
Install and run backend from SD Submit API repository [Gitlab](https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter/) / [Github](https://github.com/CSCfi/metadata-submitter).
> **Note:** If you run the backend with `docker compose`, you will then also need to set the `REDIRECT_URL` environment variable to the UI address (e.g. add `REDIRECT_URL=http://localhost:3000` into the `.env` file).
### Running
After the backend is up and running, install and run frontend with:
```bash
pnpm install
pnpm start
```
If `pnpm install` leaves corrupted pnpm-lock.yaml, try to fix with `pnpm i --frozen-lockfile`.
After installing and running, frontend can be found from `http://localhost:3000`.
## 🛠️ Contributing
Click to expand
Development team members should check internal [contributing guidelines for Gitlab](https://gitlab.ci.csc.fi/groups/sds-dev/-/wikis/Guides/Contributing).
If you are not part of CSC and our development team, your help is nevertheless very welcome. Please see [contributing guidelines for Github](CONTRIBUTING.md).
## 🧪 Testing
Click to expand
### Code format check
You can find the rules for checking in `eslint.config.js` and `.prettierrc`. Linting, formatting and unit testing are also configured for you as a git pre-commit with Husky, which is recommended to use to avoid fails on CI pipeline. Please see [pre-commit hook](.husky/pre-commit).
- For checking code quality and fixing potential bugs:
```bash
# Only check code quality
pnpm run lint:check
# OR check and fix potential bugs
pnpm run lint
```
- For checking code format and fixing formatting errors in json/yaml/css/md -files:
```bash
# Ony check code format
pnpm run format:check
# OR check and fix formatting errors
pnpm run format
```
### Unit tests
Unit tests and components are run by Vitest and React Testing Library using these commands:
```bash
# For watching real-time code changes
pnpm test
# Without watching the code changes
pnpm test:no-watch
# For a summary of test coverage
pnpm test:coverage
# For running a single test file
pnpm test /relativePath/to/test/file
```
### End-to-end tests
1. Copy env variables from `.env.example` to your `.env` file, these variables are needed to run some of the tests.
```bash
cp .env.example .env
```
2. Make sure we have latest browser binaries and their dependencies which match the current playwright version
```bash
pnpm dlx playwright install --with-deps
# OR if you have issue with your PATH
pnpm exec playwright install --with-deps
```
3. Run the tests in CLI:
```bash
pnpm test:e2e
# For running a single test file
pnpm test:e2e /relativePath/to/test/file
# OR you can run the tests in UI mode
pnpm test:e2e:ui
```
> **Note**
>
> e2e tests running in UI mode could have different result from the CLI. So if you are running the tests in UI mode, it may worth checking how they run in CLI as well, since the tests in Gitlab will be running in CLI.
## Deployment
Click to expand
To build the frontend for deployment, run:
```
pnpm run build
```
The static files are put in the `build` folder.
## 📜 Repository' structure
Click to expand
To have an overview of this repository, see [STRUCTURE](STRUCTURE.md).
## 📜 License
Click to expand
Metadata submission UI is released under `MIT`, see [LICENSE](LICENSE).