feat: user documentation directly in the application

.husky/pre-commit

@@ -1,3 +1,4 @@
+npm run generate-doc && git add packages/*/*/generatedDoc.ts
 npm --prefix packages/diracx-web-components run lint-staged
 npm --prefix packages/diracx-web run lint-staged
 npm --prefix packages/extensions run lint-staged

.prettierignore

@@ -19,6 +19,7 @@ packages/*/tsup.config.ts
 packages/*/.next
 packages/*/.tsup
 packages/*/out
+packages/*/src/generatedDoc.ts
 
 **/release-please-config.json
 **/.release-please-manifest.json

docs/developer/create_application.md

@@ -22,4 +22,6 @@ The code of your app should be in `packages/diracx-web-components/src/components
 
 In order to be compatible with the share and import buttons, the application must write its state to the session storage at `<appId>_State`. This slot is read from and written to by the corresponding functions.
 
+You can create documentation for your new application. If you create documentation for the users (in `docs/user/`), you should follow the structure: each folder represents an application, and each file explains a section of that application. This folder is used to automatically build the documentation that will be available in the web application.
+
 💡You can look at `JobMonitor` as an example.

docs/developer/index.md

@@ -38,14 +38,14 @@ flowchart TD
 
 This repository is organized as a monorepo, with the following key packages:
 
-- [**DiracX-Web-Components**](packages/diracx-web-components): A library of reusable React components designed for integration within the `DiracX-Web` package and to facilitate the creation of custom DiracX web extensions.
+- [**DiracX-Web-Components**](../../packages/diracx-web-components): A library of reusable React components designed for integration within the `DiracX-Web` package and to facilitate the creation of custom DiracX web extensions.
 
-- [**DiracX-Web**](packages/diracx-web): Vanilla Dirac web interface based on Next.js. Leverages components from `DiracX-Web-Components` to provide core functionalities.
+- [**DiracX-Web**](../../packages/diracx-web): Vanilla Dirac web interface based on Next.js. Leverages components from `DiracX-Web-Components` to provide core functionalities.
 
-- [**Extensions**](packages/extensions): An illustrative example of a web extension, also based on Next.js, demonstrating how to extend the functionality of `DiracX-Web` using the components from the `DiracX-Web-Components` package.
+- [**Extensions**](../../packages/extensions): An illustrative example of a web extension, also based on Next.js, demonstrating how to extend the functionality of `DiracX-Web` using the components from the `DiracX-Web-Components` package.
 
 
-The monorepo structure is based on *npm workspaces* to ensure that related packages ([DiracX-Web-Components](packages/diracx-web-components)) are automatically used from their local versions instead of fetching them from the npm registry.
+The monorepo structure is based on *npm workspaces* to ensure that related packages ([DiracX-Web-Components](../../packages/diracx-web-components)) are automatically used from their local versions instead of fetching them from the npm registry.
 
 ## Ramping up
 

docs/developer/manage_extension.md

@@ -89,4 +89,4 @@ Follow the instructions from the [Gubbins extension README](https://github.com/D
 
 ## Creating a new extension
 
-More details available in the [**extensions** README](/packages/extensions/README.md)
+More details available in the [**extensions** README](../../packages/extensions/README.md)

docs/user/list_and_share_applications.md → docs/user/Dashboard/list_and_share_applications.md

@@ -25,6 +25,7 @@ By default, a few application instances are displayed (e.g., `My Jobs`, an insta
 2. Select **Rename**.
    - :bulb: The instance name will change to an input field.
 3. Enter a new name and press **Enter** to save it.
+   - :bulb: You can't use the same name for several intances
 
 ### Moving an Application Instance
 
@@ -42,13 +43,16 @@ By default, a few application instances are displayed (e.g., `My Jobs`, an insta
 
 ### Sharing Your Dashboard
 
-1. Copy the URL from your browser.
-   - :bulb: The URL encodes the current state of your dashboard.
-2. Share it with others.
-   - :warning: The recipient will see a similar dashboard layout but may not see identical content if:
-     - They belong to a different VO or group.
-     - Time-sensitive data has changed since sharing.
-   - :warning: Encoding too many application instances may create discrepancies as the URL has a theoretical limit of 8000 characters based on [RFC9110](https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5) 
+1. Click on the **Export** button at the top-right corner of the page.
+2. Select the instances you want to share.
+   - :bulb: You can select a group to select all instances within that group.
+   - :bulb: For each instance, the shared content will include the name you gave it and the settings you configured.
+3. Click on **Export N Selected**.
+   - :bulb: A menu will appear with a text box containing the exported JSON.
+4. Click on the **Copy to Clipboard** button.
+5. Send this text to the person you want to share it with.
+   - :bulb: If you're using **Mattermost**, you can wrap the text with triple backticks (```) to display it nicely.
+
 
 ## Advanced Features
 
@@ -91,11 +95,4 @@ When managing multiple instances of the same application, grouping can help you
 2. Select **Delete**.
    - :bulb: The group and all its application instances will disappear from the sidebar.
 
-
-### Share and import the settings of an application
-
-1. **Share**: You can export the status of an app by clicking on the share button in the top-right corner of the screen. After clicking, you can select which group and app you want to share and then copy a text corresponding to the states of the selected applications.
-
-2. **Import**: Next to the export button you can find the import button. You can paste into the window opened by the button the text corresponding to one or multiple shared apps. This will create a new group named *Imported App* with the imported applications and their settings. 
-
 **Good to know:** When switching to a new version, the settings you are trying to import may no longer be valid. In this case, a new window will appear, offering to resolve the issue by updating the state copied to your clipboard. This updated version preserves your imported rules as much as possible. 

docs/user/Job_Monitor/manage_job.md

@@ -0,0 +1,19 @@
+# Manage Your Jobs
+
+## Status transitions
+
+You can select one or more jobs by clicking on the checkboxes next to each job. Once jobs are selected, you can perform actions on them using the buttons at the top of the table. The available actions include:
+
+- **Reschedule**: Reschedules the selected jobs.
+- **Kill**: Marks the selected jobs to be killed.
+- **Delete**: Marks the selected jobs for deletion.
+
+**Note**:  
+- You can only delete jobs that are already killed.  
+- A job cannot typically be rescheduled more than three times.
+
+## View a Job's History
+
+You can right-click on a job to open its **Job History**.  
+The history shows the different statuses the job has gone through, along with the corresponding dates and the authors of the changes.
+

docs/user/Job_Monitor/use_searchbar.md

@@ -0,0 +1,19 @@
+# The Search Bar
+
+The search bar allows you to filter jobs based on various criteria. Filters are represented as equations, where each equation consists of a job attribute, an operator, and a value. The search bar analyzes these equations to evaluate their consistency. A green equation is valid, a yellow equation is incomplete, and a red equation is invalid.
+
+A search is automatically performed when all equations in the search bar are valid.
+
+## Create a Filter
+
+To create a filter, click on the search bar and start typing. Suggestions will appear based on the available job attributes. You can select a suggestion to choose the criterion. After that, you can either type or select an operator and a value to filter by.  
+The search bar only suggests attributes, operators, and values that are available in your current set of jobs.
+
+## Edit a Filter
+
+To edit a filter, click on it in the search bar. You can change the operator or value by clicking on them. You can also use the arrow keys to navigate through the equations and edit them. Press `ESCAPE` to return to the end of the search bar.
+
+## Remove a Filter
+
+To remove a filter, press the `Backspace` key to remove the last token, or right-click on the equation to remove the entire equation.  
+You can also clear the entire search bar by clicking on the trash can button at the end of the search bar.

docs/user/Job_Monitor/use_table.md

@@ -0,0 +1,15 @@
+# The Table
+
+The table displays the jobs that match the criteria specified in the search bar. Each row represents a job, and the columns show various attributes of the job, such as its ID, status, type, and submission date.
+
+## Table display settings
+You can click on the eye icon to select additional columns to display in the table. Some columns are hidden by default.
+
+You can sort the table by clicking on the column headers. Clicking once will sort the table in ascending order; clicking again will sort it in descending order.
+
+You can set the page size by using the `Rows per page` dropdown at the bottom of the table. This allows you to control how many jobs are displayed per page.
+
+## Select a Job
+
+You can select one or multiple jobs using the checkboxes on the left side of the table.  
+Once you have selected at least one job, you can perform actions on it. You can manage the selected jobs or copy their IDs to your clipboard.

docs/user/generalUsage.md

@@ -0,0 +1,24 @@
+# General Usage
+
+## Navigate Between Applications
+
+You can click on the `Add application` button to create a new instance of an application.  
+The list of open instances appears in the sidebar on the left. Clicking on one of these instances will display it in the center of the dashboard.
+
+## Share Applications
+
+To share applications, click the `Export` button at the top right of the screen.
+Then, select the applications you want to share and copy them to the clipboard.
+
+## Import Applications
+
+To import applications, click the `Import` button at the top right of the screen.
+Paste the copied applications into the input field and click `Import`. The imported applications will appear in the sidebar.
+If the states are outdated, you can copy the updated version of them by clicking the `Copy all updated states` button.
+
+## Save Your Dashboard
+
+To save your dashboard, click the `Export` button at the top right of the screen. 
+Then, select the applications you want to save and click the `Save in the browser` button. The saved applications will be stored in your browser's local storage.
+When you want to load the saved applications, click the `Import` button at the top right of the screen and select the `Load from the browser` option.  
+The saved applications will be loaded into the sidebar.