SC-180513 feature: 1-click install

manifest.json

@@ -31,54 +31,89 @@
     }
   },
   "settings": {
+    "use_api_key": {
+      "title": "Use Access Token",
+      "type": "boolean",
+      "isRequired": false,
+      "isBackendOnly": false,
+      "default": false,
+      "order": 1
+    },
     "instance_url": {
       "title": "Jira Data Center Instance URL",
       "description": "Enter the URL of your Jira Data Centre instance, e.g. https://my-jira-instance.com",
       "validationPattern": "^https?:\\/\\/.+\\..+\\w$",
       "type": "string",
       "isRequired": true,
       "isBackendOnly": false,
-      "order": 10
+      "order": 2
+    },
+    "client_id": {
+      "title": "Client ID",
+      "type": "string",
+      "isRequired": false,
+      "isBackendOnly": false,
+      "condition": "settings.use_api_key != true",
+      "order": 3
+    },
+    "client_secret": {
+      "title": "Client Secret",
+      "type": "string",
+      "isRequired": false,
+      "isBackendOnly": true,
+      "condition": "settings.use_api_key != true",
+      "order": 4
+    },
+    "callback_url": {
+      "title": "Callback URL",
+      "type": "app_embedded",
+      "options": { "entrypoint": "#/admin/callback", "height": "100px" },
+      "isRequired": false,
+      "isBackendOnly": true,
+      "condition": "settings.use_api_key != true",
+      "order": 5
     },
     "api_key": {
       "title": "Access Token",
       "description": "JIRA Data Centre user's access token, please follow the app setup guide to get this",
       "type": "string",
-      "isRequired": true,
+      "isRequired": false,
       "isBackendOnly": true,
-      "order": 30
+      "condition": "settings.use_api_key != false",
+      "order": 6
     },
     "verify_settings": {
       "title": "",
       "type": "app_embedded",
       "options": { "entrypoint": "#/admin/verify_settings", "height": "30px" },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 40
+      "condition": "settings.use_api_key != false",
+      "order": 7
     },
     "default_comment_on_ticket_reply": {
       "title": "Ticket reply as Jira comment?",
       "description": "When a Jira issue is linked to a Deskpro ticket, would you like to automatically add Deskpro replies as Jira comments?",
       "type": "boolean",
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 50
+      "order": 8
     },
     "default_comment_on_ticket_note": {
       "title": "Ticket note as Jira comment?",
       "description": "When a Jira issue is linked to a Deskpro ticket, would you like to automatically add Deskpro notes as Jira comments?",
       "type": "boolean",
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 60
+      "order": 9
     },
     "ticket_subject_as_issue_summary": {
       "title": "Use ticket ID and subject as summary",
       "description": "Pre-fill the Jira summary field with the ticket ID and subject when creating new Jira issues from Deskpro",
       "type": "boolean",
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 70
+      "order": 10
     }
   },
   "proxy": {
@@ -90,4 +125,4 @@
       }
     ]
   }
-}
+}

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-utils": "14.4.0",
-    "@deskpro/app-sdk": "^5.1.1",
+    "@deskpro/app-sdk": "^6.0.3",
     "@deskpro/deskpro-ui": "^8.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

src/App.tsx

@@ -19,6 +19,7 @@ import {
   VerifySettingsPage,
   ViewPermissionsPage,
   CreateIssueCommentPage,
+  AdminCallbackPage
 } from "./pages";
 import type { ElementEventPayload } from "./types";
 
@@ -55,6 +56,7 @@ const App = () => {
   return (
     <Routes>
       <Route path="/admin/verify_settings" element={<VerifySettingsPage />}/>
+      <Route path='/admin/callback' element={<AdminCallbackPage />}/>
       <Route path="/home" element={<HomePage />}/>
       <Route path="/link" element={<LinkPage />}/>
       <Route path="/view/:issueKey" element={<ViewPage />}/>

src/pages/AdminCallbackPage/AdminCallbackPage.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { createSearchParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { CopyToClipboardInput, LoadingSpinner, useInitialisedDeskproAppClient } from '@deskpro/app-sdk';
+import { P1 } from '@deskpro/deskpro-ui';
+
+const Description = styled(P1)`
+    margin-top: 8px;
+    color: ${({ theme }) => theme.colors.grey80};
+`;
+
+export function AdminCallbackPage() {
+    const [callbackURL, setCallbackURL] = useState<string | null>(null);
+
+    useInitialisedDeskproAppClient(client => {
+        client.startOauth2Local(
+            ({ callbackUrl, state }) => {
+                setCallbackURL(callbackUrl);
+
+                return `https://auth.atlassian.com/authorize?${createSearchParams([
+                    ['client_id', 'clientID'],
+                    ['state', state],
+                    ['audience', 'api.atlassian.com'],
+                    ['scope', ''],
+                    ['prompt', 'consent'],
+                    ['response_type', 'code'],
+                    ['redirect_uri', callbackUrl]
+                ])}`;
+            },
+            /^$/,
+            async () => ({data: {access_token: ''}}),
+            {
+                pollInterval: 10000,
+                timeout: 600
+            }
+        );
+    }, []);
+
+    if (!callbackURL) {
+        return <LoadingSpinner />
+    };
+
+    return (
+        <>
+            <CopyToClipboardInput value={callbackURL || ''} />
+            <Description>The callback URL will be required during Jira Data Center setup</Description>
+        </>
+    );
+};

src/pages/AdminCallbackPage/index.ts

@@ -0,0 +1 @@
+export { AdminCallbackPage } from './AdminCallbackPage';

src/pages/index.ts

@@ -7,3 +7,4 @@ export { LoadingAppPage } from "./LoadingAppPage";
 export { VerifySettingsPage } from "./VerifySettingsPage";
 export { ViewPage } from "./ViewPage";
 export { ViewPermissionsPage } from "./ViewPermissionsPage";
+export { AdminCallbackPage } from './AdminCallbackPage';

vite.config.ts

@@ -7,7 +7,8 @@ export default defineConfig({
   base: "",
   plugins: [react()],
   server: {
-    allowedHosts: true
+    allowedHosts: true,
+    port: 3003
   },
   build: {
     rollupOptions: {