### Noibu Vue SDK Installation Source: https://help.noibu.com/hc/en-us/articles/9565275187341 Instructions for installing the Noibu Vue SDK using NPM or Yarn. ```APIDOC ## Installation ### NPM ``` npm install noibu-vue ``` ### Yarn ``` yarn install noibu-vue ``` ``` -------------------------------- ### Install Noibu React SDK using NPM Source: https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK This command installs the Noibu React SDK using the Node Package Manager (NPM). Ensure you have Node.js and NPM installed on your system. ```bash npm install noibu-react ``` -------------------------------- ### Install Noibu React SDK using Yarn Source: https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK This command installs the Noibu React SDK using the Yarn package manager. Yarn is an alternative to NPM for managing JavaScript dependencies. ```bash yarn install noibu-react ``` -------------------------------- ### Noibu Vue SDK Usage Source: https://help.noibu.com/hc/en-us/articles/9565275187341 Guides on importing and initializing the Noibu Vue SDK, including basic usage and error handler integration. ```APIDOC ## Usage ### Import ```javascript import * as Noibu from 'noibu-vue'; ``` ### Basic Usage This example demonstrates how to import the Noibu Vue SDK and set up the error listener. ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import * as Noibu from 'noibu-vue'; import './assets/main.css'; const app = createApp(App); app.use(router); app.mount('#app'); // existing handler app.config.errorHandler = (_err) => { console.log('existing error handler'); }; // The Noibu handler gets initialized and will // call the original handler as well. Noibu.initNoibuSDK({ apps: [app] }); ``` ### Notes * The Noibu SDK throws an error when trying to initialize the SDK without either the `vue` param or the `apps` param. * If you have already created an `errorhandler` in your Vue application, make sure to initialize the Noibu SDK after the declaration of the `errorHandler` function. ``` -------------------------------- ### Install Noibu Vue SDK using NPM Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK Installs the Noibu Vue SDK package using the Node Package Manager (NPM). This is the first step to integrating the SDK into your Vue.js application. ```bash npm install noibu-vue ``` -------------------------------- ### Generate Help Code on Button Click (HTML & JavaScript) Source: https://help.noibu.com/hc/en-us/articles/25222130557709-Programmatic-Methods-for-Generating-Help-Codes This example shows how to generate a Help Code when a user clicks a button. It requires a button element and a div to display the result. The `requestHelpCode` function is called within the button's click event listener, and the `alertUser` parameter is set to false. ```html

``` ```javascript window.addEventListener("noibuSDKReady", () => { let button = document.getElementById("request-help-code"); let label = document.getElementById("help-code-result"); button.addEventListener("click", async () => { let helpCode = await window.NOIBUJS.requestHelpCode(false); // do not present an alert with a help code label.innerText = helpCode; }); }); ``` -------------------------------- ### Debugging Jira Integration - Get Projects API Call Source: https://help.noibu.com/hc/en-us/articles/360059765671 Steps to debug Jira integration issues, specifically by verifying credentials using a cURL request to the Jira API to get projects. ```APIDOC ## Debugging Jira Integration If your credentials are not working in Noibu, verify them manually using the following steps: 1. **Generate Basic Auth Header:** Encode your Jira email and API token in Base64 format. ```bash echo -n "(user email):(api token)" | base64 ``` 2. **Attempt to Get Projects:** Use cURL to make a GET request to the Jira API for projects, including the generated Basic Auth header. ```bash curl -X GET "https://(jira domain)/rest/api/3/project" -H "Authorization: Basic (base64 encoded value from step 1)" ``` **Example (Linux/macOS):** ```bash echo -n "jira@noibu.com:EcWu2xxxxxxxx" | base64 # Output: amlyYUBub2lidS5jb206RWNXdTJ4eHh4eHh4eA== curl -X GET "https://noibu.atlassian.net/rest/api/3/project" -H "Authorization: Basic amlyYUBub2lidS5jb206RWNXdTJ4eHh4eHh4eA==" ``` **Example (Windows PowerShell):** ```powershell # >>> REPLACE THESE <<< $email = "you@example.com" $apiToken = "YOUR_API_TOKEN_HERE" # Build basic auth header: base64("email:apitoken") $pair = "$email`:$apiToken" $bytes = [Text.Encoding]::UTF8.GetBytes($pair) $auth = [Convert]::ToBase64String($bytes) $headers = @{ Authorization = "Basic $auth" Accept = "application/json" } Invoke-RestMethod -Uri "https://(jira domain)/rest/api/3/project" -Method Get -Headers $headers ``` If this request is successful, it returns a list of projects, confirming your credentials and API access are valid. ``` -------------------------------- ### Install Noibu Vue SDK using Yarn Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK Installs the Noibu Vue SDK package using the Yarn package manager. This is an alternative to NPM for integrating the SDK into your Vue.js application. ```bash yarn install noibu-vue ``` -------------------------------- ### Basic Usage of Noibu Vue SDK Source: https://help.noibu.com/hc/en-us/articles/9565275187341-Noibu-Vue-SDK Demonstrates the basic integration of the Noibu Vue SDK into a Vue 3 application. It initializes the SDK after setting up the Vue app and its error handler, ensuring that errors are captured by Noibu. ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import * as Noibu from 'noibu-vue'; import './assets/main.css'; const app = createApp(App); app.use(router); app.mount('#app'); // existing handler app.config.errorHandler = (_err) => { console.log('existing error handler'); }; // The Noibu handler gets initialized and will // call the original handler as well. Noibu.initNoibuSDK({ apps: [app] }); ``` -------------------------------- ### GET /rest/api/3/project/search Source: https://help.noibu.com/hc/en-us/articles/360059765671 This endpoint allows you to search for Jira projects. It returns a list of projects visible to the authenticated user. ```APIDOC ## GET /rest/api/3/project/search ### Description Searches for Jira projects accessible by the current user. The response includes project details such as ID, key, and name. ### Method GET ### Endpoint https://your-jira-domain.atlassian.net/rest/api/3/project/search ### Parameters #### Query Parameters - **startAt** (integer) - Optional - The index of the first project to return in the response. - **maxResults** (integer) - Optional - The maximum number of projects to return per page. - **query** (string) - Optional - A free-text search query for the project name or key. - **typeKey** (string) - Optional - Filters projects by project type. - **level** (string) - Optional - Filters projects by project category. ### Request Example ```powershell $uri = "https://your-jira-domain.atlassian.net/rest/api/3/project/search" $headers = @{ "Authorization" = "Basic YOUR_BASE64_ENCODED_CREDENTIALS" } $response = Invoke-RestMethod -Uri $uri -Headers $headers -Method Get $response.values | Select-Object id, key, name | Format-Table ``` ### Response #### Success Response (200) - **isLast** (boolean) - Indicates if this is the last page of results. - **maxResults** (integer) - The maximum number of results to return. - **startAt** (integer) - The starting index of the current page. - **total** (integer) - The total number of projects matching the search criteria. - **values** (array) - An array of project objects, each containing: - **id** (string) - The unique identifier for the project. - **key** (string) - The project key. - **name** (string) - The name of the project. #### Response Example ```json { "isLast": false, "maxResults": 50, "startAt": 0, "total": 100, "values": [ { "id": "10001", "key": "PROJ", "name": "Example Project" } ] } ``` #### Error Response (401) - **errorMessages** (array) - A list of error messages. - **errors** (object) - A map of field errors. #### Error Response Example (401) ```json { "errorMessages": [ "Authentication failed." ], "errors": {} } ``` ``` -------------------------------- ### initNoibuSDK Function Source: https://help.noibu.com/hc/en-us/articles/9565275187341 Documentation for the `initNoibuSDK` function, which initializes the Noibu Vue SDK with specified options. ```APIDOC ## Exported Functions ### initNoibuSDK ```typescript /** Option passed when initializing the vue sdk * */ export interface SDKOptions { /** Vue constructor to be used inside the integration * (as imported by `import Vue from 'vue'` in Vue2) */ Vue?: Vue; /** Vue app instances to be used inside the integration * (as generated by `createApp` in Vue3 ) */ apps?: Vue[]; } /** * Inits the Noibu Vue SDK * @param {SDKOptions} sdkOptions * @returns void */ function initNoibuSDK(sdkOptions: SDKOptions): void { //... } ``` **Parameters:** * **sdkOptions** (SDKOptions) - Required - Options for initializing the SDK, including `Vue` or `apps`. ``` -------------------------------- ### GET /rest/api/3/project/search Source: https://help.noibu.com/hc/en-us/articles/360059765671-Jira-Integration-for-Noibu Retrieves a list of projects visible to the authenticated user. The response includes project details such as ID, key, and name. ```APIDOC ## GET /rest/api/3/project/search ### Description Retrieves a list of projects visible to the authenticated user. The response includes project details such as ID, key, and name. ### Method GET ### Endpoint https://your-jira-domain.atlassian.net/rest/api/3/project/search ### Parameters #### Query Parameters - **startAt** (integer) - Optional - The index of the first project to return in the response. - **maxResults** (integer) - Optional - The maximum number of projects to return per page. - **query** (string) - Optional - A string to search projects by name or key. - **includeUnavailable** (boolean) - Optional - Whether to include unavailable projects. ### Request Example ```powershell $uri = "https://your-jira-domain.atlassian.net/rest/api/3/project/search" $headers = @{ "Authorization" = "Basic YOUR_BASE64_ENCODED_CREDENTIALS" } $response = Invoke-RestMethod -Uri $uri -Headers $headers -Method Get $response.values | Select-Object id, key, name | Format-Table ``` ### Response #### Success Response (200) - **isLast** (boolean) - Indicates if this is the last page of results. - **maxResults** (integer) - The maximum number of results to return. - **startAt** (integer) - The starting index of the results. - **total** (integer) - The total number of projects available. - **values** (array) - An array of project objects. - **id** (string) - The unique identifier of the project. - **key** (string) - The project key. - **name** (string) - The name of the project. #### Response Example ```json { "isLast": false, "maxResults": 10, "startAt": 0, "total": 50, "values": [ { "id": "10001", "key": "PROJ", "name": "Sample Project" } ] } ``` #### Error Response (401) - **errorMessages** (array) - A list of error messages. - **errors** (object) - An object containing specific error details. #### Error Response Example ```json { "errorMessages": [], "errors": { "project": "Project is required" } } ``` ```