Création d’un Formulaire de Jira Management

Jira est une plateforme de gestion de projets développée par Atlassian. Il aide les équipes à planifier, suivre et gérer les tâches et les projets de manière efficace. Jira est souvent utilisé pour la gestion de projets de développement de logiciels, mais peut également être utilisé pour la gestion de projets dans d’autres domaines tels que la gestion de produits, les projets marketing et les projets d’équipe.

Pour créer un formulaire dans la console de développement de Jira, vous devez suivre les étapes suivantes :

Voici le lien pour vous enregistrer dans la console de développement d’Atlassian :

Atlassian

Après l’installation, vous devez créer une organisation à partir de ce lien :

Administration

Après cela, vous allez à la page :

Collaboration software for software, IT and business teams

Cliquez en haut dans le menu “Produits” et choisissez “Jira Software”.

Après cela, cliquez sur “get it free”.

Après avoir choisi Jira Service Management, cliquez sur “Suivant” pour accéder à la page suivante.

Vous devez changer “Your site” et cliquer sur “Agree and start now”. Cela vous enverra vers une page où vous devrez remplir vos informations d’expérience et vous dirigera directement vers votre domaine. Vous devrez ensuite entrer votre nom et créer votre premier projet en cliquant sur le bouton “Gestion de projet” puis sur “Créer”. Vous pouvez également connecter votre compte avec GitHub et d’autres sites de code source. Une autre page vous permettra d’inviter des membres de votre équipe en saisissant trois adresses e-mail. Notez que vous pouvez entrer la même adresse e-mail plusieurs fois. Enfin, cliquez sur “Terminer”. La page locale ressemblera à ce qui suit :

Pour créer un formulaire, vous devez cliquer sur “Formulaires” dans le menu existant en dessous de votre nom, dans ce cas “Eoulaf Brahim”. Vous trouverez alors le bouton “Créer un formulaire” et vous pourrez ainsi créer un formulaire comme dans cette image.

Ceci est un moyen de créer un formulaire sans utiliser de code. Pour l’afficher, vous devez créer un ticket. Il existe 4 types de billets par défaut, mais vous pouvez en ajouter d’autres si vous le souhaitez. La création du billet se fait en cliquant sur le bouton bleu “Créer” en haut. Ensuite, vous devez ajouter un résumé à ce billet et une notification apparaîtra en dessous. Vous trouverez alors deux boutons, le premier permet d’afficher le billet en cliquant dessus. De cette façon, vous verrez votre formulaire écrit à l’étape précédente. Pour ajouter d’autres composants à ce formulaire, vous devez cliquer sur les trois points à droite, comme l’image ci-dessus le montre.

Ensuite, vous choisissez en cliquant sur “Configurer” et une page de modification du formulaire s’affichera. À droite de cette page, vous trouverez les champs ou les composants que vous pouvez ajouter et au gauche, vous trouverez votre formulaire. Notez que pour ajouter un champ, il suffit de le faire glisser vers l’intérieur du formulaire et de choisir l’emplacement souhaité. Après cela, vous devez donner un nom, une description et un contenu par défaut apres cliquer sur “Enregistrer les modifications”.

Et ainsi, vous pouvez ajouter, modifier ou supprimer un champ.

Pour créer un formulaire en utilisant un outil de développement, vous devez d’abord installer Forge en utilisant node.js. La commande pour l’installation est :

npm i -g @forge/cli@latest

Après, créez ou utilisez un jeton d’API Atlassian existant pour vous connecter à la ligne de commande. La ligne de commande utilise votre jeton lors de l’exécution de commandes. Pour ce faire, cliquez sur ce lien.

Atlassian account

Après avoir cliqué sur la button “Créer un jeton d’API” en bas de la page, vous devrez entrer une étiquette puis cliquer sur le bouton “Créer”. Un nouveau jeton sera affiché, copiez-le et retournez à la ligne de commande (CMD) pour exécuter d’autres commandes pour vous connecter à Forge en utilisant ce jeton. Tapper la commande suivante dans la ligne de commande pour s’identifier:

forge login

Dans cette étape, vous devez entrer l’adresse e-mail associée à votre compte Atlassian et entrer votre jeton d’API Atlassian que vous avez copié dans le presse-papiers. Ensuite, dans la ligne de commande, accédez au répertoire où vous souhaitez créer l’application. Un nouveau répertoire avec le nom de l’application sera créé dans ce répertoire et tapper la commande suivante:

forge create

• Entrez un nom pour votre application.
• Sélectionnez la catégorie UI kit.
• Sélectionnez le modèle jira-issue-panel.
• Accédez au sous-répertoire de l’application pour voir les fichiers de l’application.

Dans ce répertoire, vous trouverez le fichier manifest.yml

Vous devez changer le titre pour voir les changements appliqués sur votre page, comme l’exemple montré dans ce fichier:

modules:
  jira:issuePanel:
    - key: hamid-app-hello-world-panel
      function: main
      title: Forge app for Hamid Hajaje
      icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
  function:
    - key: main
      handler: index.run
app:
  id: ari:cloud:ecosystem::app/42c3f96a-2f7b-4acf-9d6f-1ba2e602134d
  name: hamid-app

Enregistrez les modifications et lancez le déploiement et l’installation de votre application en exécutant les deux commandes dans la ligne de commande:

forge deploy
forge install

Après avoir sélectionné votre produit Atlassian en utilisant les touches fléchées, appuyez sur Entrée et entrez l’URL de votre site de développement, par exemple https://hamid-hajaje.atlassian.net.

Pour voir votre formulaire, vous devez configurer des tickets. Allez sur votre site web, par exemple https://hamid-hajaje.atlassian.net, et cliquez sur le bouton + qui se trouve à gauche à côté de Label Projects:

Après avoir sélectionné “More templates” depuis le menu, vous serez dirigé vers une nouvelle page. À gauche de la page, vous trouverez un menu de sélection. Choisissez la première catégorie “Software Development” et choisissez “Scrum”, puis cliquez sur “Use Template”. Cliquez ensuite sur le bouton “Select a team-managed project”, entrez un nom et cliquez sur “Create Project”.

La fenêtre que vous recevez ressemblera à cela.

Maintenant, cliquez sur le bouton bleu situé en haut pour créer un nouveau ticket et l’afficher comme vous l’avez fait auparavant. La page ressemblera à ceci :

Cliquez sur le bouton en haut avec l’étiquette “Forge app for Hamid Hajaje”. Cela devrait afficher un message:

Forge app for Hamid Hajaje Dev
Hello world!

Maintenant, nous allons changer le code Node.js dans notre disque dur pour afficher un champ texte et d’autres composants. Pour ce faire, nous allons d’abord retourner au fichier manifest.yml et le remplacer par :

modules:
  jira:issuePanel:
    - key: hamid-app-hello-world-panel
      function: main
      title: Hello Hamid!
      icon: https://developer.atlassian.com/platform/forge/images/icons/issue-panel-icon.svg
  function:
    - key: main
      handler: index.run
app:
  id: ari:cloud:ecosystem::app/42c3f96a-2f7b-4acf-9d6f-1ba2e602134d
  name: hamid-app
permissions:
  scopes:
    - read:jira-work
    - write:jira-work

D’autre part on va changer le contenu du fichier strc/index.jsx, vous devez éditer le code pour inclure des composants supplémentaires et remplacer le message actuel:

import ForgeUI, {
  render,
  Button,
  Form,
  Fragment,
  TextField,
  CheckboxGroup,
  Checkbox,
  Macro,
  useState,
  Text,
  IssuePanel
} from "@forge/ui";
const App = () => {
   const [formState, setFormState] = useState(undefined);

  // Handles form submission, which is a good place to call APIs, or to set component state...
  const onSubmit = async (formData) => {
    /**
     * formData:
     * {
     *    username: 'Username',
     *    products: ['jira']
     * }
     */
    setFormState(formData);
  };

  const goBack = () => {};
  const cancel = () => {};

  // The array of additional buttons.
  // These buttons align to the right of the submit button.
  const actionButtons = [
    <Button text="Go back" onClick={goBack} />,
    <Button text="Cancel" onClick={cancel} />,
  ];
  return (
    <Fragment>
      <Text>Hello Hamid!</Text>
   <Form onSubmit={onSubmit} actionButtons={actionButtons}>
        <TextField name="username" label="Username" />
        <CheckboxGroup name="sexe" label="G/F">
          <Checkbox defaultChecked value="Mr" label="Mr" />
          <Checkbox value="Mme" label="Mme" />
        </CheckboxGroup>
      </Form>
      {formState && <Text>{JSON.stringify(formState)}</Text>}
    </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);

Notez qu’on peut ajouter d’autre components a ce code.

Maintenant, pour terminer, il ne reste plus qu’à installer le package @forge/ui. Vous avez deux options pour cela, soit en utilisant la commande “npm install -g @forge/ui”, soit en modifiant le fichier package.json situé dans le répertoire principal de l’application en ajoutant :

{
  "name": "jira-issue-panel-ui-kit",
  "version": "1.0.9",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/* || npm run --silent hook-errors",
    "hook-errors": "echo '\\x1b[31mThe build failed because a Forge UI hook is being used incorrectly. Forge UI hooks follow the same rules as React Hooks but have their own API definitions. See the Forge documentation for details on how to use Forge UI hooks.\n' && exit 1"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.2.0"
  },
  "dependencies": {
    "@forge/ui": "1.6.0"
  }
}

On va ensuite redeploy notre application par la commande:

forge deploy

et le reinstaller par la commande:

forge install --upgrade

Remarque: si on a docker deja installer on fait la commande

forge tunnel

Cette commande créera un tunnel entre votre application et le site de développement Atlassian, et les changements seront automatiquement mis à jour. Après mise à jour de votre ticket sur votre site web https://hamid-hajaje.atlassian.net et autorisation de l’accès, vous verrez que le formulaire a été correctement ajouté avec un champ de texte, un groupe de cases à cocher avec deux cases à cocher et les boutons de soumission, comme indiqué dans la prochaine image.

Notez que dans ce tutoriel, nous avons utilisé Jira. De plus, vous pouvez créer des pages plutôt que des tikects en utilisant une file d’attente à la place d’un ticket et en remplaçant jira-issue-panel par jira-project-page dans la partie de la creation de notre application. Il est possible de faire la même chose pour Confluence, à l’exception que vous utiliserez confluence-space-page.