Improve persisting and fetching issues

ls1intum · Dec 13, 2023 · ba0e551 · ba0e551
1 parent 1611b07
commit ba0e551
Show file tree

Hide file tree

Showing 24 changed files with 674 additions and 364 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ mongo-data
 
 # Misc
 .DS_Store
+.idea
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/src/controllers/messageController.ts b/packages/app/src/controllers/messageController.ts
@@ -1,11 +1,11 @@
 import { Request, Response } from 'express';
-import { Issue } from "@ls1intum/uicompanion-shared/models/Issue";
 import { commentPrototypesOnGithub } from '../services/githubService';
+import IssueMetadata from '@ls1intum/uicompanion-shared/models/IssueMetadata';
 
 export class MessageController {
 
     public async handlePrototypeMessage(req: Request, res: Response): Promise<void> {
-        const issue: Issue = req.body;
+        const issue: IssueMetadata = req.body;
 
         try {
             await commentPrototypesOnGithub(issue).then(() => {

diff --git a/packages/app/src/services/githubService.ts b/packages/app/src/services/githubService.ts
@@ -1,7 +1,8 @@
+import IssueMetadata from "@ls1intum/uicompanion-shared/models/IssueMetadata";
 import axios from "axios";
-import { Issue } from "@ls1intum/uicompanion-shared/models/Issue";
 
-export async function commentPrototypesOnGithub(issue: Issue): Promise<void> {
+
+export async function commentPrototypesOnGithub(issue: IssueMetadata): Promise<void> {
     const url = `${issue.repository_url}/issues/${issue.number}/comments`;
     const comment = issue.prototypeUrls.map(url => `![Bild](${url})`).join('\n');
 

diff --git a/packages/app/src/services/issueService.ts b/packages/app/src/services/issueService.ts
@@ -1,20 +1,18 @@
 import axios from 'axios';
-import { Probot } from 'probot';
-import { Issue as GitHubIssue } from "@octokit/webhooks-types"
-import { Issue } from "@ls1intum/uicompanion-shared/models/Issue";
-import { IssueStatus } from "@ls1intum/uicompanion-shared/models/IssueStatus";
+import {Probot} from 'probot';
+import {Issue as GitHubIssue} from "@octokit/webhooks-types"
+import IssueMetadata from '@ls1intum/uicompanion-shared/models/IssueMetadata';
+import MockupProgress from "@ls1intum/uicompanion-shared/enums/MockupProgress";
 
 
 export async function persistIssue(
     app: Probot,
     issue: GitHubIssue
 ): Promise<void> {
-  let data: Issue = {
+  let data: IssueMetadata = {
     repository_url: issue.repository_url,
     number: issue.number,
-    title: issue.title,
-    description: issue.body || '',
-    status: IssueStatus.OPEN,
+    progress: MockupProgress.OPEN,
     frames: [],
     prototypeUrls: [],
   };

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -13,6 +13,8 @@
     "@ls1intum/uicompanion-shared": "^1.0.0",
     "@mui/joy": "^5.0.0-beta.4",
     "@mui/material": "^5.14.5",
+    "@octokit/core": "^5.0.2",
+    "@octokit/types": "^12.4.0",
     "axios": "^1.4.0",
     "file-system": "^2.2.2",
     "form-data": "^4.0.0",

diff --git a/packages/plugin/src/app/services/@github/githubIssueService.ts b/packages/plugin/src/app/services/@github/githubIssueService.ts
@@ -0,0 +1,71 @@
+import {Octokit} from "@octokit/core";
+import {Endpoints} from "@octokit/types";
+
+export type getIssuesResponseType = Endpoints['GET /repos/{owner}/{repo}/issues']["response"];
+export type getIssueByNumberResponseType = Endpoints['GET /repos/{owner}/{repo}/issues/{issue_number}']["response"];
+export type updateIssueResponseType = Endpoints['PATCH /repos/{owner}/{repo}/issues/{issue_number}']["response"];
+
+const octokit = new Octokit({ auth: process.env.GITHUB_PERSONAL_ACCESS_TOKEN });
+
+export async function getIssues(): Promise<getIssuesResponseType['data']> {
+    try {
+        const response = await octokit.request('GET /repos/{owner}/{repo}/issues', {
+            owner: 'OWNER',
+            repo: 'REPO',
+            headers: {
+                'X-GitHub-Api-Version': '2022-11-28'
+            }
+        });
+
+        return response.data;
+    } catch (error) {
+        throw new Error(error);
+    }
+}
+
+export async function getIssueByNumber(issueNumber: number): Promise<getIssueByNumberResponseType['data']> {
+    try {
+        const response = await octokit.request('GET /repos/{owner}/{repo}/issues/{issue_number}', {
+            owner: process.env.GITHUB_OWNER,
+            repo: process.env.GITHUB_REPO,
+            issue_number: issueNumber,
+            headers: {
+                'X-GitHub-Api-Version': '2022-11-28'
+            }
+        });
+
+        return response.data;
+    } catch (error) {
+        throw new Error(error);
+    }
+}
+
+interface UpdateIssueOptions {
+    title?: string;
+    body?: string;
+    assignees?: string[];
+    milestone?: number;
+    state?: 'open' | 'closed';
+    labels?: string[];
+}
+
+export async function updateIssue(
+    issueNumber: number,
+    options: UpdateIssueOptions
+): Promise<updateIssueResponseType["data"]> {
+    try {
+        const response = await octokit.request('PATCH /repos/{owner}/{repo}/issues/{issue_number}', {
+            owner: process.env.GITHUB_OWNER,
+            repo: process.env.GITHUB_REPO,
+            issue_number: issueNumber,
+            ...options,
+            headers: {
+                'X-GitHub-Api-Version': '2022-11-28'
+            }
+        });
+
+        return response.data;
+    } catch (error) {
+        throw new Error(error);
+    }
+}
diff --git a/...s/plugin/src/app/services/issueService.ts → ...vices/@uicompanion-server/issueService.ts b/...s/plugin/src/app/services/issueService.ts → ...vices/@uicompanion-server/issueService.ts
@@ -1,9 +1,9 @@
+import IssueMetadata from '@ls1intum/uicompanion-shared/models/IssueMetadata';
 import axios from 'axios';
-import { Issue } from '@ls1intum/uicompanion-shared/models/Issue';
 
 const baseUrl = process.env.NODE_ENV == 'production' ? 'https://uicompanion.ase.cit.tum.de' : 'http://localhost:3001';
 
-export async function getIssues(): Promise<Issue[]> {
+export async function getIssueMetadata(): Promise<IssueMetadata[]> {
   try {
     const response = await axios.get(`${baseUrl}/api/issues`);
     return response.data.issues;
@@ -12,9 +12,9 @@ export async function getIssues(): Promise<Issue[]> {
   }
 } 
 
-export async function updateIssue(issue: Issue): Promise<Issue> {
+export async function updateIssueMetadata(issueMetadata: IssueMetadata): Promise<IssueMetadata> {
   try {
-    const response = await axios.patch(`${baseUrl}/api/issues/${issue.number}`, issue);
+    const response = await axios.patch(`${baseUrl}/api/issues/${issueMetadata.number}`, issueMetadata);
     return response.data;
   } catch (error) {
     throw new Error(error);

diff --git a/...plugin/src/app/services/messageService.ts → ...ces/@uicompanion-server/messageService.ts b/...plugin/src/app/services/messageService.ts → ...ces/@uicompanion-server/messageService.ts
@@ -1,9 +1,9 @@
+import IssueMetadata from '@ls1intum/uicompanion-shared/models/IssueMetadata';
 import axios from 'axios';
-import { Issue } from '@ls1intum/uicompanion-shared/models/Issue';
 
 const baseUrl = process.env.NODE_ENV == 'production' ? 'https://uicompanion.ase.cit.tum.de' : 'https://smee.io/pw84GLld8PTLGAok';
 
-export async function confirmPrototypes(issue: Issue): Promise<Issue> {
+export async function confirmPrototypes(issue: IssueMetadata): Promise<IssueMetadata> {
     try {
         const response = await axios.post(`${baseUrl}/message/prototype/`, issue);
         return response.data;

diff --git a/...ugin/src/app/services/prototypeService.ts → ...s/@uicompanion-server/prototypeService.ts b/...ugin/src/app/services/prototypeService.ts → ...s/@uicompanion-server/prototypeService.ts
diff --git a/packages/plugin/src/app/ui/App.tsx b/packages/plugin/src/app/ui/App.tsx
@@ -2,37 +2,49 @@ import React, { useState } from 'react';
 import IssueOverviewPage from './pages/IssueOverviewPage';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import IssueDetailPage from './pages/IssueDetailPage';
-import { Issue } from '@ls1intum/uicompanion-shared/models/Issue';
-import { getIssues } from '../services/issueService';
+import { getIssueMetadata } from '../services/@uicompanion-server/issueService';
+import {getIssues, getIssuesResponseType} from "../services/@github/githubIssueService";
+import GithubIssue from "@ls1intum/uicompanion-shared/models/GithubIssue";
+import IssueMetadata from "@ls1intum/uicompanion-shared/models/IssueMetadata";
 
 function App() {
 
-  const [issues, setIssues] = useState([] as Issue[]); 
+  const [issues, setIssues] = useState([] as GithubIssue[]);
+  const [issueMetadata, setIssueMetadata] = useState([] as IssueMetadata[]);
 
   React.useEffect(() => {
     // This is how we read messages sent from the plugin controller
-    window.onmessage = (event) => {
+    window.onmessage = (event: { data: { pluginMessage: { type: any; message: any; }; }; }) => {
       const { type, message } = event.data.pluginMessage;
       if (type === 'create-frame') {
         console.log(`Figma Says: ${message}`);
       }
     };
 
-
-    getIssues().then((issues: Issue[]) => {
-      setIssues(issues);
+
+    getIssues().then((response: getIssuesResponseType['data']) => {
+      setIssues(response.map((issue): GithubIssue => {
+        return {
+          id: issue.id,
+          url: issue.url,
+          number: issue.number,
+          state: issue.state,
+          title: issue.title,
+          body: issue.body,
+        }
+      }));
     });
-  }, []);
 
-  const updateIssuesState = (newIssues: Issue[]) => {
-    setIssues(newIssues);
-  }
+    getIssueMetadata().then((issueMetadata: IssueMetadata[]) => {
+      setIssueMetadata(issueMetadata);
+    });
+  }, []);
 
   return (
     <MemoryRouter initialEntries={["/overview"]}>
       <Routes>
-        <Route path="/overview" element={<IssueOverviewPage issues={issues} />} />
-        <Route path="/detail/:number" element={<IssueDetailPage issues={issues} updateIssuesState={updateIssuesState} />} /> 
+        <Route path="/overview" element={<IssueOverviewPage issues={issues} issueMetadata={issueMetadata} />} />
+        <Route path="/detail/:number" element={<IssueDetailPage issues={issues} issueMetadata={issueMetadata} />} />
       </Routes>
     </MemoryRouter>
   );

diff --git a/packages/plugin/src/app/ui/modules/IssueListItem.tsx b/packages/plugin/src/app/ui/modules/IssueListItem.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Type } from 'react-figma-ui';
 import { Link } from 'react-router-dom';
-import { Issue } from '@ls1intum/uicompanion-shared/models/Issue';
+import GithubIssue from "@ls1intum/uicompanion-shared/models/GithubIssue";
 
 type IssueListItemProps = {
-  issue: Issue;
+  issue: GithubIssue;
 };
 
 const IssueListItem = (props: IssueListItemProps) => {

diff --git a/packages/plugin/src/app/ui/modules/VerticalStepper.tsx b/packages/plugin/src/app/ui/modules/VerticalStepper.tsx
@@ -7,9 +7,10 @@ import StepContent from '@mui/material/StepContent';
 import Paper from '@mui/material/Paper';
 import { Button, Type } from 'react-figma-ui';
 import { Stack, StepConnector, stepConnectorClasses, styled } from '@mui/material';
-import { issueStatusToIndex } from '@ls1intum/uicompanion-shared/models/IssueStatus';
-import { Issue } from '@ls1intum/uicompanion-shared/models/Issue';
 import { Chip, ChipDelete } from '@mui/joy';
+import GithubIssue from "@ls1intum/uicompanion-shared/models/GithubIssue";
+import IssueMetadata from "@ls1intum/uicompanion-shared/models/IssueMetadata";
+import {mockupProgressToIndex} from "@ls1intum/uicompanion-shared/enums/MockupProgress";
 
 const steps = [
     {
@@ -57,30 +58,31 @@ const CustomConnector = styled(StepConnector)(() => ({
 }));
 
 interface VerticalStepperProps {
-    currentIssue: Issue;
+    issue: GithubIssue;
+    issueMetadata: IssueMetadata;
 }
 
-export const VerticalStepper = ({ currentIssue }: VerticalStepperProps) => {
-    const [activeStep, setActiveStep] = React.useState(issueStatusToIndex[currentIssue.status]);
+export const VerticalStepper = ({ issue, issueMetadata }: VerticalStepperProps) => {
+    const [activeStep, setActiveStep] = React.useState(mockupProgressToIndex[issueMetadata.progress]);
 
     const handleCreate = () => {
-        parent.postMessage({ pluginMessage: { type: 'create-frame', currentIssue } }, '*');  
+        parent.postMessage({ pluginMessage: { type: 'create-frame', issue: issue } }, '*');
 
         handleNext();
     }
 
     const handleSubmit = () => {
-        parent.postMessage({ pluginMessage: { type: 'export-prototype', currentIssue } }, '*');
+        parent.postMessage({ pluginMessage: { type: 'export-prototype', issue: issue } }, '*');
 
         handleNext();
     }
 
     const handleNext = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setActiveStep((prevActiveStep: number) => prevActiveStep + 1);
     };
 
     const handleBack = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+        setActiveStep((prevActiveStep: number) => prevActiveStep - 1);
     };
 
     const renderActionButtons = React.useCallback((index: Number) => {
@@ -146,9 +148,9 @@ export const VerticalStepper = ({ currentIssue }: VerticalStepperProps) => {
                 return null;
 
         }
-    }, [status]);
+    }, []);
 
-    function AvailableFrames(props) {
+    function AvailableFrames(props: { index: any; }) {
         const index = props.index;
 
         if (index === 1) {
@@ -157,7 +159,7 @@ export const VerticalStepper = ({ currentIssue }: VerticalStepperProps) => {
                     direction="row"
                     spacing={1}
                 >
-                    {currentIssue.frames
+                    {issueMetadata.frames
                         .map((frame: string) => (
                             <Chip
                                 key={frame}