Skip to content

Commit

Permalink
feat(doc): Add user/dev/admin documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
aldbr committed Dec 17, 2024
1 parent dc93692 commit 8043524
Show file tree
Hide file tree
Showing 28 changed files with 840 additions and 7,174 deletions.
45 changes: 0 additions & 45 deletions .github/DISCUSSION_TEMPLATE/design-ideas.yaml

This file was deleted.

29 changes: 23 additions & 6 deletions .github/DISCUSSION_TEMPLATE/user-personas-and-stories.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ body:
attributes:
value: >
Develop a user persona and a story to capture the goals and tasks your users want to accomplish with diracx-web.
We are interested in understanding your needs and goals. Please focus on what you want to achieve rather than how you think it should be achieved.
We are interested in understanding your needs and goals. Please, first focus on what you want to achieve rather than how you think it should be achieved first.
All ideas are welcome, and there are no wrong answers. We appreciate your honest feedback as it helps us improve the system to better meet your needs.
- type: textarea
Expand Down Expand Up @@ -43,10 +43,27 @@ body:
validations:
required: true

- type: markdown
attributes:
value: |
From this point, you can optionally propose ideas of how it should be conceived, even if you technically do not know whether it is achievable.
- type: textarea
id: additional-comments
id: design-solution
attributes:
label: Additional Comments or Suggestions
description: "Share any other feedback, ideas, or suggestions that can help us understand your needs better."
validations:
required: false
label: Proposed Design Solution
description: |
Design proposal(s) can be submitted here.
Explain how your design solves the problem. Describe the design changes in details.
placeholder: "Describe your design solution..."

- type: markdown
attributes:
value: |
If possible, please attach an image representing a mockup or sketch of your design idea. Visual representations can help communicate your idea more clearly.
- type: markdown
attributes:
value: |
Once again, thank you for your contribution. Our team will review your design proposal(s) and provide feedback.
2 changes: 1 addition & 1 deletion .github/workflows/deployment.yml
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ jobs:
cache: 'npm'

- name: Build documentation
run: npm ci && npm --prefix packages/diracx-web-components run build-storybook
run: npm ci && npm --prefix packages/diracx-web-components run build-doc

- name: Upload artifact
uses: actions/upload-pages-artifact@v3
Expand Down
118 changes: 95 additions & 23 deletions .github/workflows/gubbins-test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,59 @@ jobs:
run: npm --prefix packages/extensions run ts-lint

# ============================================================================#
# WARNING: In your CI/CD pipeline, you should remove the following job #
# WARNING: In your CI/CD pipeline, you should remove the following jobs #
# ----------------------------------------------------------------------------#
prepare-gubbins-as-a-standalone:
# By default, the gubbins extension is part of a monorepo and uses a local #
# version of `diracx-web-components`. This default setup is not #
# representative of a standalone extension configuration. Here we want to #
# closely mimic a standalone extension. To do so, we: #
# - Isolate the packages/extensions directory: Move its content to a new #
# repository or directory outside the monorepo. #
# - Update Configuration: Adjust relevant variables to align with a #
# standalone setup. #
prepare-gubbins-backend:
runs-on: ubuntu-latest
if: ${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
steps:
- name: Clone source
run: |
cd ..
git clone https://github.com/DIRACGrid/diracx.git
- name: Where the magic happens (Move extensions to a temporary directory)
run: |
# We have to copy the code to another directory
# and make it a git repository by itself because otherwise the
# root in the pyproject to do not make sense once mounted
# in the containers.
cp -r ../diracx/extensions/gubbins /tmp/
sed -i 's@../..@.@g' /tmp/gubbins/pyproject.toml
sed -i 's@../../@@g' /tmp/gubbins/gubbins-*/pyproject.toml
git init /tmp/gubbins/
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: gubbins
path: /tmp/gubbins

- name: Build and export service
uses: docker/build-push-action@v6
with:
context: ../diracx/extensions/containers/services
tags: gubbins/services:dev
outputs: type=docker,dest=/tmp/gubbins_services_image.tar
build-args: |
EXTRA_PACKAGES_TO_INSTALL=git+https://github.com/DIRACGrid/DIRAC.git@integration
EXTENSION_CUSTOM_SOURCES_TO_INSTALL=/bindmount/gubbins_db*.whl,/bindmount/gubbins_routers*.whl,/bindmount/gubbins_client*.whl
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: gubbins-services-img
path: /tmp/gubbins_services_image.tar

prepare-gubbins-frontend-as-a-standalone:
runs-on: ubuntu-latest
if: ${{ github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web' }}
steps:
Expand All @@ -64,30 +114,32 @@ jobs:
- name: Where the magic happens (Move extensions to a temporary directory)
run: |
# Move the library package to the extensions directory
mv packages/diracx-web-components/*.tgz packages/extensions/diracx-web-components.tgz
# Move the extensions to the temporary directory
mv packages/extensions /tmp/extensions
cp -r packages/extensions /tmp/gubbins-web
# Move the library package to the extensions directory
mv packages/diracx-web-components/*.tgz /tmp/gubbins-web/diracx-web-components.tgz
# Update the package.json to point to the local diracx-web-components
jq '.dependencies["@dirac-grid/diracx-web-components"] = "file:./diracx-web-components.tgz"' /tmp/extensions/package.json > /tmp/extensions/package.temp.json
mv /tmp/extensions/package.temp.json /tmp/extensions/package.json
jq '.dependencies["@dirac-grid/diracx-web-components"] = "file:./diracx-web-components.tgz"' /tmp/gubbins-web/package.json > /tmp/gubbins-web/package.temp.json
mv /tmp/gubbins-web/package.temp.json /tmp/gubbins-web/package.json
# Update the package.json to point to the correct postinstall script
jq '.scripts.postinstall = "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public"' /tmp/extensions/package.json > /tmp/extensions/package.temp.json
mv /tmp/extensions/package.temp.json /tmp/extensions/package.json
jq '.scripts.postinstall = "node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public"' /tmp/gubbins-web/package.json > /tmp/gubbins-web/package.temp.json
mv /tmp/gubbins-web/package.temp.json /tmp/gubbins-web/package.json
# Update the next.config.js to prevent the standalone extension from searching a local version of diracx-web-components that does not exist
echo 'const nextConfig = { output: "export", images: { unoptimized: true }}; export default nextConfig;" > /tmp/gubbins-web/next.config.js
- name: Install extensions dependencies
working-directory: /tmp/extensions
working-directory: /tmp/gubbins-web
run: npm install

- name: Upload the extensions directory
uses: actions/upload-artifact@v4
with:
name: gubbins
path: /tmp/extensions
name: gubbins-web
path: /tmp/gubbins-web
retention-days: 1
# ----------------------------------------------------------------------------#
# In the following jobs, you should: #
# - Replace /tmp/extensions with the path to your extension source code #
# - Replace /tmp/gubbins-web with the path to your extension source code #
# - Remove the `needs: prepare-gubbins-as-a-standalone` line #
# ============================================================================#

Expand All @@ -114,52 +166,72 @@ jobs:
# ========================================================================#
# WARNING: In your CI/CD pipeline, you should remove the following steps #
# ------------------------------------------------------------------------#
- name: Download the extensions directory
- name: Download gubbins-web
uses: actions/download-artifact@v4
with:
name: gubbins
path: /tmp/extensions
name: gubbins-web
path: /tmp/gubbins-web
# ------------------------------------------------------------------------#
# ========================================================================#

# In your extension, you have to push the image to the registry (check deployment.yml)
- name: Build Docker image (extension example)
uses: docker/build-push-action@v6
with:
context: /tmp/extensions
context: /tmp/gubbins-web
push: false
tags: ghcr.io/diracgrid/diracx-web/gubbins:dev
platforms: linux/amd64,linux/arm64

# Run the demo with the extension source code
# Run the demo with the extension source code (frontend and backend)
run-demo:
runs-on: ubuntu-latest
needs: prepare-gubbins-as-a-standalone
if: github.event_name != 'push' || github.repository == 'DIRACGrid/diracx-web'
steps:
- uses: actions/checkout@v4

- name: Clone source
- name: Clone source
run: |
cd ..
git clone https://github.com/DIRACGrid/diracx-charts.git
# ========================================================================#
# WARNING: In your CI/CD pipeline, you should remove the following steps #
# ------------------------------------------------------------------------#
- name: Download the extensions directory
- name: Download gubbins
uses: actions/download-artifact@v4
with:
name: gubbins
path: /tmp/extensions
path: /tmp/gubbins

- name: Clone diracx source
run: |
cd ..
git clone https://github.com/DIRACGrid/diracx.git
- name: Download gubbins:services image
uses: actions/download-artifact@v4
with:
name: gubbins-services-img
path: /tmp/gubbins_services_image.tar

- name: Load docker image
run: docker load --input /tmp/gubbins_services_image.tar

- name: Download gubbins-web
uses: actions/download-artifact@v4
with:
name: gubbins-web
path: /tmp/gubbins-web
# ------------------------------------------------------------------------#
# ========================================================================#

# Runs the demo with the extension source code
- name: Start demo
run: |
cd ..
diracx-charts/run_demo.sh --exit-when-done /tmp/extensions/
diracx-charts/run_demo.sh --exit-when-done --set-value developer.autoReload=false --ci-values ./diracx/extensions/gubbins_values.yaml --load-docker-image "gubbins/services:dev" diracx/ /tmp/gubbins/ /tmp/gubbins-web/
- name: Debugging information
run: |
Expand Down Expand Up @@ -194,4 +266,4 @@ jobs:
with:
browser: chrome
config: baseUrl=${{ env.DIRACX_URL }}
project: /tmp/extensions
project: /tmp/gubbins-web
4 changes: 3 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
node_modules
build
CONTRIBUTING.md
dist
docs
public
.github
jest.config.mjs
Expand All @@ -19,4 +21,4 @@ packages/*/out

**/release-please-config.json
**/.release-please-manifest.json
**/CHANGELOG.md
**/CHANGELOG.md
72 changes: 11 additions & 61 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,17 @@
# Contributing to This Project
# Contributing to DiracX-Web

Thank you for your interest in contributing to our project! We appreciate all contributions, big and small. Below are some guidelines to help you get started.

## Bug reporting and discussions
- **Found a :bug: bug?**
- First if someone has already reported a similar [Issue](https://github.com/DIRACGrid/diracx-web/issues).
- If not, feel free to open a new one.

- Want to report a bug?
Open an [Issue](https://github.com/DIRACGrid/diracx-web/issues).
- Need technical support to configure `diracx-web`?
Start a [Support discussion](https://github.com/DIRACGrid/diracx-web/discussions/categories/support).
- **Need :hammer_and_wrench: technical support to configure DiracX-Web?**
- Start by reading the [:book: Admin Guide](docs/admin/index.md).
- Still stuck? Start a [:pray: Support discussion](https://github.com/DIRACGrid/diracx-web/discussions/categories/support).

- Want to make a general feedback about the [DIRAC web application](https://github.com/DIRACGrid/WebAppDIRAC)?
Answer to the [Survey](https://github.com/DIRACGrid/diracx-web/discussions/categories/surveys) by creating a new discussion.
- Want to request a feature?
Create a [User Story](https://github.com/DIRACGrid/diracx-web/discussions/categories/user-personas-and-stories) to describe your need.
- Want to discuss about UX/UI design?
Share your [Design idea](https://github.com/DIRACGrid/diracx-web/discussions/categories/design-ideas).
- **Have a :bulb: feature proposal?**
- Create a [:bust_in_silhouette: User Story](https://github.com/DIRACGrid/diracx-web/discussions/categories/user-personas-and-stories) to describe your need and share your design ideas if any.

## How to Contribute

### 1. Opening an Issue

- **Discuss Before Implementing:** Before making a pull request (PR), especially for non-trivial changes, please [open an issue](https://github.com/DIRACGrid/diracx-web/issues) to discuss your idea. This ensures that everyone is aligned on the proposed change.
- **Check for Existing Issues:** Before opening a new issue, please check if a similar issue already exists. If a similar issue exists, consider contributing to the discussion there instead.

### 2. Making Changes

- **Code Documentation:** Ensure that any code you write is well-documented. This includes:
- Inline comments where necessary to explain complex logic.
- Updating or creating Storybook documentation if you are contributing to the `diracx-web-components` library.
- **Writing/Updating Tests:** When you change or add new code, make sure to write or update tests accordingly. This helps maintain the reliability and stability of the codebase.
- **Helping with Existing Issues:** If you want to start contributing right away, check out the issues labeled with ["good first issue"](https://github.com/DIRACGrid/diracx-web/labels/good%20first%20issue). These are issues that are well-suited for newcomers to the project.

### 3. Commit Messages

- **Conventional Commits:** All commits must follow the [Conventional Commits](https://www.conventionalcommits.org/) specification. This ensures that commit messages are structured and consistent, which is important for automation and versioning.
- **Examples:**
- `feat(ui): add new button component`
- `fix(api): handle null values in response`
- `docs(readme): update contributing guidelines`
- **Why?** If your commit messages do not follow this convention, the Continuous Integration (CI) process will fail, and your PR will not be merged. Please ensure your commit messages are properly formatted before pushing.

### 4. How to Make a Pull Request (PR)

- **Fork the Repository:** Start by forking the repository and creating a new branch for your work. Use a descriptive name for your branch that reflects the work you're doing.
- **Make Your Changes:** Commit your changes with clear and concise commit messages following the Conventional Commits format.
- **Update Documentation and Tests:** As mentioned, ensure all relevant documentation and tests are updated to reflect your changes.
- **Submit Your PR:** When you’re ready, submit your pull request. Please include a clear description of what your PR does and reference the issue number it addresses (if applicable).
- **Review Process:** Your PR will be reviewed by project maintainers. Please be patient and responsive to any feedback you receive.

### 5. Updating Storybook Stories

If your changes affect the `diracx-web-components` library, you may need to update or add new Storybook stories to ensure components are well-documented and tested visually.

- **Add New Stories:** If you’ve created a new component, add a corresponding Storybook story in the appropriate directory. This story should be placed inside a `*.stories.tsx` file alongside your new component.
- **Update Existing Stories:** If your changes modify the behavior or appearance of an existing component, make sure to update its Storybook story accordingly.
- **Run Storybook Locally:** Before submitting your PR, run Storybook locally to ensure that your changes are reflected correctly. You can do this by running `npm run storybook` in the `packages/diracx-web-components` directory.

You can check the existing stories and the [Storybook documentation](https://storybook.js.org/docs) for more details on how to use Storybook.

### 6. Additional Notes

- **Trivial Changes:** For minor changes like fixing typos, feel free to skip the issue creation step and go straight to making a PR.
- **Stay Up-to-Date:** Make sure your branch is up-to-date with the latest changes in the main branch before submitting your PR. Use `git rebase` if necessary.
- **Project Setup:** See the README for instructions on how to set up the project and run tests locally.

Thank you again for your contributions! We look forward to working with you.
- **Want to contribute to the :computer: codebase?**
- Read the [:book: Developer Guide](docs/developer/index.md) to set up your environment and get started.
Loading

0 comments on commit 8043524

Please sign in to comment.