Contributing encompasses repository specific requirements.
To review the ODH requirements, please refer to the dev setup documentation.
Before beginning development on an issue, please refer to our Definition of Ready.
When reviewing pull requests, please refer to our comprehensive PR Review Guidelines to ensure code quality, functionality, and adherence to best practices.
For development standards and coding guidelines, please review our Best Practices documentation. This covers React coding standards, component architecture, performance considerations, and PatternFly usage guidelines.
Development for only "frontend" can target a backend service running on an OpenShift cluster. This method requires you to first log in to the OpenShift cluster, see Give your dev env access. It is recommended to use this method unless backend changes are being developed.
cd frontend
oc login ...
npm run start:dev:extDevelopment for both "frontend" and "backend" can be done while running:
npm run devBut the recommended flow for development would be have two sessions, one for the "frontend":
cd frontend
npm run start:devAnd one for the "backend":
cd backend
npm run start:devOnce you have either method running, you can open the dashboard locally at: http://localhost:4010. The dev server will reload automatically when you make changes.
If running a local backend, some requests from the frontend need to make their way to services running on the cluster for which there are no external routes exposed. This can be achieved using oc port-forward. Run the following command in a separate terminal to start the port forwarding processes. Note that this limits developers to working within a single namespace and must be restarted if switching to a new namespace.
NAMESPACE=my-example make port-forwardThis section walks through connecting your local dev environment to an ODH dev cluster.
Your dev env will typically point to either a shared cluster from SharedClustersConfluence (where you can also find test user credentials and cluster status) or some other cluster which you/your team created.
Before you login to a dev cluster, you will want to first ensure you've added a .env.local file (not committed) to your repo root (see the .env.local.example template file, it explains the variables you can set, some of which you'll want to change). As mentioned in below section Applied dotenv files, there are build processes in place that leverage these .env files.
Open the OpenShift console UI for your target cluster. The console URL should look like: https://console-openshift-console.apps.{cluster-name}.dev.datahub.redhat.com
Choose one of the following methods to authenticate:
-
On the cluster UI Overview screen, find the
Cluster API Addressin the Details panel- Format:
https://api.{cluster-name}.dev.datahub.redhat.com:6443
- Format:
-
Run the login command with your credentials:
oc login https://api.my-openshift-cluster.com:6443 -u <username> -p <password>
- Click your username dropdown (top right of cluster UI)
- Select
Copy login command - Enter credentials when prompted
- Copy and run the displayed
oc login...command
-
This approach makes use of your
.env.localfile to construct the login command from the variables you've set there (namelyOC_URL,OC_USER/OC_PASSWORD,OC_TOKEN). -
Run one of these commands:
make login # OR npm run make:login
⚠️ TLS Warning: You may see a security warning for development clusters behind VPN - this is normal, you can click Accept/Continue- Authentication Role: If given option on login to cluster console UI, use
customadminsrole and notkube:admin, which is deprecated - 🔐 Daily Re-auth: You'll need to reauthenticate and restart the backend each day
See frontend testing guidelines for more information.
Jest unit tests cover all utility and hook functions.
npm run test:unitCypress tests using a production instance of the dashboard frontend to test the full application.
cd ./frontend
# Build and start the server
npm run cypress:server:build
npm run cypress:server
# Run cypress in a separate terminal
npm run cypress:run:mockcd ./frontend && npm run test:lintYou can apply lint auto-fixes with
npm run test:fixThe CI will run the command npm run test which will run tests for both backend and frontend.
The current build leverages dotenv, or .env*, files to apply environment build configuration.
dotenv files applied to the root of this project...
.env, basic settings, utilized by both "frontend" and "backend".env.local, gitignored settings, utilized by both "frontend" and "backend".env.development, utilized by both "frontend" and "backend". Its use can be seen with the NPM script$ npm run dev.env.development.local, utilized by both "frontend" and "backend". Its use can be seen with the NPM script$ npm run dev.env.production, is primarily used by the "frontend", minimally used by the "backend". Its use can be seen with the NPM script$ npm run start.env.production.local, is primarily used by the "frontend", minimally used by the "backend". Its use can be seen with the NPM script$ npm run start.env.test, is primarily used by the "frontend", minimally used by the "backend" during testing.env.test.local, is primarily used by the "frontend", minimally used by the "backend" during testing
There are build processes in place that leverage the .env*.local files, these files are actively applied in our .gitignore in order to avoid build conflicts. They should continue to remain ignored, and not be added to the repository.
The dotenv files have access to default settings grouped by facet; frontend, backend, build
...
For testing purposes, we recommend deploying a new version of the dashboard in your cluster following the steps below.
- Make sure you have the
occommand line tool installed and configured to access your cluster. - Make sure you have the
Open Data Hub Operatorinstalled in your cluster. - Remove the
dashboardcomponent from yourKfDefCR if already deployed. - You can remove previous dashboard deployments by running
make undeployornpm run make:undeployin the root of this repository.
We use IMAGE_REPOSITORY as the environment variable to specify the image to use for the dashboard. You can set it in the .env.local file in the root of this repository.
This environment variable is used in the Makefile to build and deploy the dashboard image, and can be set to a new image tag to build or to a pre-built image to deploy.
To deploy a new image, you can either build it locally or use the one built by the CI.
You can build your image by running
make buildor
npm run make:buildin the root of this repository.
By default, we use podman as the default container tool, but you can change it by
- setting the
CONTAINER_BUILDERenvironment variable todocker - passing it as environment overrides when using
make build -e CONTAINER_BUILDER=docker
After building the image, you need to push it to a container registry accessible by your cluster. You can do that by running
make pushor
npm run make:pushin the root of this repository.
All pull requests will have an associated pr-<PULL REQUEST NUMBER> image built and pushed to quay.io for use in testing and verifying code changes as part of the PR code review. Any updates to the PR code will automatically trigger a new PR image build, replacing the previous hash that was referenced by pr-<PULL REQUEST NUMBER>.
To deploy your image, you just need to run the following command in the root of this repository
make deployor
npm run make:deployyou will deploy all the resources located in the manifests folder alongside the image you selected in the previous step.
Once the elements defined in the Definition of Done are complete, the feature, bug or story being developed will be considered ready for release.