Test API component

package.json

@@ -21,8 +21,8 @@
     "@types/react": "^18.2.17",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/parser": "^6.2.0",
-    "@uxpin/merge-cli": "3.3.0-atlas-dev.147",
     "@uxpin/merge-cli": "^3.2.0",
+    "axios": "^1.4.0",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "eslint": "^8.46.0",

src/components/JiraIssuesComponent/ApiComponent.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const ApiComponent = () => {
+  const [issues, setIssues] = useState([{key: 0, fields: {summary: ''}}]);
+
+  useEffect(() => {
+    const uxpinProxy = 'https://api.uxpin.com/jira';
+    // Your Jira instance URL
+    const jiraBaseUrl = 'https://jack-uxpin.atlassian.net';
+    // Your Jira project key
+    const projectKey = 'TODO';
+    // Replace 'YOUR_USERNAME' and 'YOUR_API_TOKEN' with your Jira credentials
+    const username = '[email protected]';
+    const apiToken = 'ATATT3xFfGF07dsD3LlO-8R1dhublRxXgx8UMrgWDrsd1-RFhygDjUbGKagKR1RKSgNh5_UKt7JOhzreOw7aoLk5UjRvm6hvqIYUUNhWJ6-FRkBpKLYRjlLDW6jTh5ZWiiPSHytzGW0DBjLQYYdgpIQPJNOUekRFiFJA6apli6gku1rCKKdkSEM=581E44D7';
+    const auth = btoa(`${username}:${apiToken}`);
+
+    const fetchIssues = async () => {
+      try {
+        const response = await axios.get(
+          `${uxpinProxy}/${jiraBaseUrl}/rest/api/2/search?jql=project=${projectKey}`,
+          {
+            headers: {
+              Authorization: `Basic ${auth}`,
+            },
+          }
+        );
+
+        setIssues(response.data.issues);
+      } catch (error) {
+        console.error('Error fetching Jira issues:', error);
+      }
+    };
+
+    fetchIssues();
+  }, []);
+
+  return (
+    <div>
+      <h1>Jira Issues</h1>
+      <ul>
+        {issues.map((issue) => (
+          <li key={issue.key}>{issue.fields.summary}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ApiComponent;

src/components/JiraIssuesComponent/JiraIssuesComponent.tsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+interface JiraIssue {
+  key: string;
+  fields: {
+    summary: string;
+  };
+}
+
+interface ApiComponentProps {
+  username:string;
+  apiToken: string;
+  jiraBaseUrl :string;
+  projectKey: string;
+}
+
+
+const JiraIssuesComponent = (props:ApiComponentProps) => {
+
+  const [issues, setIssues] = useState<JiraIssue[]>([]);
+  const [summary, setSummary] = useState('');
+  const [description, setDescription] = useState('');
+
+  const uxpinProxy = 'https://api.uxpin.com/jira';
+  // const jiraBaseUrl = 'https://jack-uxpin.atlassian.net';
+  // const projectKey = 'TODO';
+  // const username = '[email protected]';
+  // const apiToken = 'ATATT3xFfGF07dsD3LlO-8R1dhublRxXgx8UMrgWDrsd1-RFhygDjUbGKagKR1RKSgNh5_UKt7JOhzreOw7aoLk5UjRvm6hvqIYUUNhWJ6-FRkBpKLYRjlLDW6jTh5ZWiiPSHytzGW0DBjLQYYdgpIQPJNOUekRFiFJA6apli6gku1rCKKdkSEM=581E44D7';
+
+  const jiraBaseUrl = props.jiraBaseUrl;
+  const projectKey = props.projectKey;
+  const username = props.username;
+  const apiToken = props.apiToken;
+
+
+  const auth = btoa(`${username}:${apiToken}`);
+
+  const fetchIssues = async () => {
+    try {
+      const response = await axios.get(
+        `${uxpinProxy}/${jiraBaseUrl}/rest/api/2/search?jql=project=${projectKey}`,
+        {
+          headers: {
+            Authorization: `Basic ${auth}`,
+          },
+        }
+      );
+
+      setIssues(response.data.issues);
+    } catch (error) {
+      console.error('Error fetching Jira issues:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchIssues();
+  }, [props]);
+
+  const handlePostIssue = async () => {
+    const newIssue = {
+      fields: {
+        project: { key: 'TODO' }, // Replace with your actual project key
+        summary: summary,
+        description: description,
+        issuetype: { name: 'Task' },
+      },
+    };
+
+    try {
+      await axios.post(
+        `${uxpinProxy}/${jiraBaseUrl}/rest/api/2/issue`, // Replace with your Jira instance URL
+        newIssue,
+        {
+          headers: {
+            Authorization: `Basic ${auth}`,
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+
+      setSummary('');
+      setDescription('');
+      fetchIssues();
+    } catch (error) {
+      console.error('Error creating Jira issue:', error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Jira Issues</h1>
+      <ul>
+        {issues.map((issue) => (
+          <li key={issue.key}>{issue.fields.summary}</li>
+        ))}
+      </ul>
+      <h2>Create a New Issue</h2>
+      <div>
+        <label>Summary:</label>
+        <input
+          type="text"
+          value={summary}
+          onChange={(e) => setSummary(e.target.value)}
+        />
+      </div>
+      <div>
+        <label>Description:</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </div>
+      <button onClick={handlePostIssue}>Create Issue</button>
+    </div>
+  );
+};
+
+export default JiraIssuesComponent;

src/components/JiraIssuesComponent/presets/0-default.jsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import JiraIssuesComponent from "../JiraIssuesComponent";
+
+export default (
+  <JiraIssuesComponent
+    uxpId="jira-issues-component"
+    projectKey="TODO"
+    jiraBaseUrl = 'https://jack-uxpin.atlassian.net'
+    username = '[email protected]'
+    apiToken ='YOUR API TOKEN'
+    />
+);

uxpin.config.js

@@ -4,23 +4,25 @@ module.exports = {
       {
         name: 'General',
         include: [
-          'src/components/Button/Button.tsx',
-          'src/components/Calendar/Calendar.tsx',
-          'src/components/DynamicTable/DynamicTable.tsx',
-          'src/components/Select/Select.tsx',
-          'src/components/Checkbox/Checkbox.tsx',
-          'src/components/Toggle/Toggle.tsx',
-          'src/components/TextArea/TextArea.tsx',
-          'src/components/Radio/Radio.tsx',
-          'src/components/PageLayout/PageLayout.tsx',
-          'src/components/Navigation/Navigation.tsx',
-          'src/components/PrimaryButton/PrimaryButton.tsx'
+          // 'src/components/Button/Button.tsx',
+          // 'src/components/Calendar/Calendar.tsx',
+          // 'src/components/DynamicTable/DynamicTable.tsx',
+          // 'src/components/Select/Select.tsx',
+          // 'src/components/Checkbox/Checkbox.tsx',
+          // 'src/components/Toggle/Toggle.tsx',
+          // 'src/components/TextArea/TextArea.tsx',
+          // 'src/components/Radio/Radio.tsx',
+          // 'src/components/PageLayout/PageLayout.tsx',
+          // 'src/components/Navigation/Navigation.tsx',
+          // 'src/components/PrimaryButton/PrimaryButton.tsx',
+          // 'src/components/ApiiComponent/ApiComponent.tsx',
+          'src/components/JiraIssuesComponent/JiraIssuesComponent.tsx'
         ],
       },
       {
         name: 'Icons',
         include: [
-          'src/components/AddCircleIcon/AddCircleIcon.tsx'
+          // 'src/components/AddCircleIcon/AddCircleIcon.tsx'
         ],
       },
     ],