[Feat] Update app to use global proxy service (SC-167944, SC-180543)

README.md

@@ -1,7 +1,7 @@
 <img align="right" alt="Deskpro" src="https://raw.githubusercontent.com/DeskproApps/salesforce/master/docs/assets/deskpro-logo.svg" />
 
 # Salesforce App
-
+ 
 View and manage associated Salesforce Contacts, Leads, Accounts and Opportunities
 
 ![Salesforce App - Deskpro](https://raw.githubusercontent.com/DeskproApps/salesforce/master/docs/assets/salesforce_screenshot_01.png)

manifest.json

@@ -8,29 +8,46 @@
   "isSingleInstall": true,
   "hasDevMode": true,
   "serveUrl": "https://apps-cdn.deskpro-service.com/__name__/__version__",
+  "secrets": "NwvkQ+dBHVYVbJvqGxDmQ+EtdPKHnCNvVW1YTthncp2AdfXnZvCT4nU4V64BHK0Qr4tpZuktZksT1b0DzWycS6DfiuQXcXTXkcGr6zLLajBTUMd0jDExUXQ88kmlYnh20OzZFtSvf1KKIUTGZYo64E4YwKR/T1o4RwexzBkp0VcM8VCw/pNw0H/2bQgWyaruFZFmiKjz1Bc9zzRM21mbo5pR2s/hSr94070RYwUDHGSWDuCJi88weuM2b9T7X3kwWOS5gD/tdUK1IeZQ7OVoqpjmZsDnIJ3cp4enpF0gF19rs/eR15p1woNWStEqWZL9cxAM2QdigcFdtLvXqN15cnzG2Y4pkpbUJ+IUfBjlwaPh5ylzZGWoFpiIiRfd/MteGk6urcarSHK9U59XrJ/1aEY9643HaoQbWBJ12GeuUyRgnNAuPBsEs1iUDOAVgIlLHuG8FMmaZmSeY4SrHJEZN5BjAbbY3DjgyPFG2Zyvzp5cmo4F36dlZM6s/esKsiO0IdQdCt5rbXoKzOSwl134M1Aw8C3jC/rWuBhXMeMHgUWDbwuoV7Ut6ZJUg9GpoeZyq45VY98H4gjudK4ZvrVB4oB6DowHOTltEPKw8nK8hqVL5dBx3Dy1ptyzzWbeA44OBAeThsiHfsAtqKdZKefbMxYR80ZiqqlIECnqCvZEQdl8c9tPlpE9kEANjb9qhAYuJPX7vPNtDrX9pLWw0lSbEOQ2UE2EPfzzsX/4gwlmy0OhKSVntddHdtC0iHZAqe77BOs5fH+p9uJxJkz9NCLgUUhUv/OApLr5KY79blJN/sxUpj3rUbv+Xygghf0Lrm++WZL2kUVVobOWgE7eB9KTy0xHLQbgTVyreOGjn9OYaNonriwlwJ66Ylb8V9MdXlR41CbY04FpftymC5uNPkS1Oj7qw/oUEn5jsc8uNNXcs0mcDcnP2ch0sbz0c5NHlWQ8xMlT4JARL+6bh9R2JlCcnrFpuGpe9ym4ywbJakv9lGzMIJGDCt+5Nu1U9It+u6Idx4sO97NAM4Hov0MDgDBDtw+ZrM53onvwxPrIGwEDAlr17N+oIToyCIdRFMz40loLI++IgyA5qKgNxkBw29przslDGaVD9lxCO4IvG78DwW0Nk9F0mbrNS2fmNrHcOSf8JKpHS2jPyMscHtwq5ugUyk/C1TBvT4HI14KUt+tMhS8Fr9hWKujhPo+uovrE9b72ncG5Hn4vNSuwJVHbDly/Zz3i4XM0+JPqeuBlVDqubTk8DpEOC1wVp/M83kH9JR9H",
   "repository": {
     "type": "github",
     "url": "https://github.com/DeskproApps/salesforce"
   },
   "targets": [
-    { "target": "user_sidebar", "entrypoint": "#/user" },
-    { "target": "organisation_sidebar", "entrypoint": "#/organization" }
+    {
+      "target": "user_sidebar",
+      "entrypoint": "#/user"
+    },
+    {
+      "target": "organisation_sidebar",
+      "entrypoint": "#/organization"
+    }
   ],
   "settings": {
+    "use_deskpro_saas": {
+      "title": "One-Click Installation",
+      "type": "boolean",
+      "default": true,
+      "isRequired": false,
+      "isBackendOnly": false,
+      "order": 5
+    },
     "client_key": {
       "title": "Client Key",
       "description": "Client key can be obtained by following our setup guide",
       "type": "string",
-      "isRequired": true,
+      "isRequired": false,
       "isBackendOnly": false,
+      "condition": "settings.use_deskpro_saas != true",
       "order": 10
     },
     "client_secret": {
       "title": "Client Secret",
       "description": "Client secret can be obtained by following our setup guide",
       "type": "string",
-      "isRequired": true,
+      "isRequired": false,
       "isBackendOnly": true,
+      "condition": "settings.use_deskpro_saas != true",
       "order": 20
     },
     "salesforce_instance_url": {
@@ -41,13 +58,28 @@
       "isBackendOnly": false,
       "order": 30
     },
+    "callback_url": {
+      "title": "Callback URL",
+      "type": "app_embedded",
+      "options": {
+        "entrypoint": "#/admin/callback",
+        "height": "50px"
+      },
+      "isRequired": false,
+      "isBackendOnly": true,
+      "condition": "settings.use_deskpro_saas != true",
+      "order": 40
+    },
     "global_access_token": {
       "title": "",
       "type": "app_embedded",
-      "options": { "entrypoint": "#/admin/global-sign-in" },
+      "options": {
+        "entrypoint": "#/admin/global-sign-in",
+        "height": "120px"
+      },
       "isRequired": true,
       "isBackendOnly": true,
-      "order": 40
+      "order": 50
     },
     "mapping_contact": {
       "title": "Contact Field Mapping",
@@ -60,7 +92,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 50
+      "order": 60
     },
     "mapping_lead": {
       "title": "Lead Field Mapping",
@@ -73,7 +105,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 60
+      "order": 70
     },
     "mapping_account": {
       "title": "Account Field Mapping",
@@ -86,7 +118,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 70
+      "order": 80
     },
     "mapping_note": {
       "title": "Note Field Mapping",
@@ -99,7 +131,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 80
+      "order": 90
     },
     "mapping_opportunity": {
       "title": "Opportunity Field Mapping",
@@ -112,7 +144,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 90
+      "order": 100
     },
     "mapping_task": {
       "title": "Task Field Mapping",
@@ -125,7 +157,7 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 100
+      "order": 110
     },
     "mapping_event": {
       "title": "Event Field Mapping",
@@ -138,16 +170,22 @@
       },
       "isRequired": false,
       "isBackendOnly": false,
-      "order": 110
+      "order": 120
     }
   },
   "proxy": {
     "whitelist": [
       {
         "url": "https://(.*).salesforce.com/services/.*",
-        "methods": ["GET", "POST", "PUT", "DELETE", "PATCH"],
+        "methods": [
+          "GET",
+          "POST",
+          "PUT",
+          "DELETE",
+          "PATCH"
+        ],
         "timeout": 30
       }
     ]
   }
-}
+}

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@adobe/css-tools": "4.3.2",
     "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@deskpro/app-sdk": "^5.1.1",
+    "@deskpro/app-sdk": "^6.0.3",
     "@deskpro/deskpro-ui": "^8.2.1",
     "@hookform/resolvers": "^2.9.11",
     "@swc/core": "^1.10.12",

src/App.tsx

@@ -1,45 +1,39 @@
-import {
-  LoadingSpinner,
-  useDeskproAppEvents,
-  useDeskproLatestAppContext,
-} from "@deskpro/app-sdk";
-import { Button, Stack, AnyIcon } from "@deskpro/deskpro-ui";
-import { faRefresh } from "@fortawesome/free-solid-svg-icons";
-import { Suspense } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { ErrorBoundary } from "react-error-boundary";
-import { QueryClientProvider, QueryErrorResetBoundary } from "react-query";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
-import { Organization } from "./pages/Organization";
-import { Ticket } from "./pages/Ticket";
-import { User } from "./pages/User";
-import { GlobalSignIn } from "./pages/admin/GlobalSignIn";
-import { Account } from "./pages/admin/mapping/Account";
-import { Contact } from "./pages/admin/mapping/Contact";
-import { Event } from "./pages/admin/mapping/Event";
-import { Lead } from "./pages/admin/mapping/Lead";
-import { Note } from "./pages/admin/mapping/Note";
-import { Opportunity } from "./pages/admin/mapping/Opportunity";
-import { Task } from "./pages/admin/mapping/Task";
-import { List } from "./pages/list/List";
-import { View } from "./pages/view/View";
-import { query } from "./query";
-
 import "./App.css";
-
+import "@deskpro/deskpro-ui/dist/deskpro-custom-icons.css";
+import "@deskpro/deskpro-ui/dist/deskpro-ui.css";
 import "flatpickr/dist/themes/light.css";
 import "simplebar/dist/simplebar.min.css";
 import "tippy.js/dist/tippy.css";
-
-import "@deskpro/deskpro-ui/dist/deskpro-custom-icons.css";
-import "@deskpro/deskpro-ui/dist/deskpro-ui.css";
-import { ScrollTop } from "./components/ScrollTop";
+import { Account } from "./pages/admin/mapping/Account";
+import { AdminCallbackPage } from "./pages/admin/callback/AdminCallbackPage";
+import { Button, Stack, AnyIcon } from "@deskpro/deskpro-ui";
+import { Contact } from "./pages/admin/mapping/Contact";
 import { CreateActivity } from "./pages/createEdit/Activity";
 import { CreateNote } from "./pages/createEdit/Note";
 import { CreateOpportunity } from "./pages/createEdit/Opportunity";
+import { DndProvider } from "react-dnd";
 import { EditProfile } from "./pages/createEdit/Profile";
+import { ErrorBoundary } from "react-error-boundary";
+import { Event } from "./pages/admin/mapping/Event";
+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { GlobalSignIn } from "./pages/admin/GlobalSignIn";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Lead } from "./pages/admin/mapping/Lead";
+import { List } from "./pages/list/List";
+import { Note } from "./pages/admin/mapping/Note";
+import { Opportunity } from "./pages/admin/mapping/Opportunity";
+import { Organization } from "./pages/Organization";
 import { parseJsonErrorMessage } from "./utils";
+import { query } from "./query";
+import { QueryClientProvider, QueryErrorResetBoundary } from "react-query";
+import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { ScrollTop } from "./components/ScrollTop";
+import { Suspense } from "react";
+import { Task } from "./pages/admin/mapping/Task";
+import { Ticket } from "./pages/Ticket";
+import { User } from "./pages/User";
+import { View } from "./pages/view/View";
+import {LoadingSpinner,useDeskproAppEvents,useDeskproLatestAppContext} from "@deskpro/app-sdk";
 
 function App() {
   const { context } = useDeskproLatestAppContext();
@@ -94,33 +88,34 @@ function App() {
                     <Route path="ticket">
                       <Route index element={<Ticket />} />
                       <Route path="objects">
-                        <Route path=":object/:field/:id/list" element={<List />}/>
+                        <Route path=":object/:field/:id/list" element={<List />} />
                         <Route path=":object/:id/view" element={<View />} />
                       </Route>
                     </Route>
                     <Route path="addoredit">
                       <Route path="note/:object/:id/" element={<CreateNote />} />
-                      <Route path="Task/:object/:id/" element={<CreateActivity />}/>
-                      <Route path="Call/:object/:id/" element={<CreateActivity />}/>
-                      <Route path="Event/:object/:id/" element={<CreateActivity />}/>
-                      <Route path="Opportunity/:object/:id/" element={<CreateOpportunity />}/>
-                      <Route path="profile/:object/:id/" element={<EditProfile />}/>
+                      <Route path="Task/:object/:id/" element={<CreateActivity />} />
+                      <Route path="Call/:object/:id/" element={<CreateActivity />} />
+                      <Route path="Event/:object/:id/" element={<CreateActivity />} />
+                      <Route path="Opportunity/:object/:id/" element={<CreateOpportunity />} />
+                      <Route path="profile/:object/:id/" element={<EditProfile />} />
                     </Route>
                     <Route path="user">
                       <Route index element={<User />} />
                       <Route path="objects">
-                        <Route path=":object/:field/:id/list" element={<List />}/>
+                        <Route path=":object/:field/:id/list" element={<List />} />
                         <Route path=":object/:id/view" element={<View />} />
                       </Route>
                     </Route>
                     <Route path="organization">
                       <Route index element={<Organization />} />
                       <Route path="objects">
-                        <Route path=":object/:field/:id/list" element={<List />}/>
+                        <Route path=":object/:field/:id/list" element={<List />} />
                         <Route path=":object/:id/view" element={<View />} />
                       </Route>
                     </Route>
                     <Route path="admin">
+                      <Route path="callback" element={<AdminCallbackPage />} />
                       <Route path="global-sign-in" element={<GlobalSignIn />} />
                       <Route path="mapping">
                         <Route path="contact" element={<Contact />} />

src/api/getAccessAndRefreshTokens.ts

@@ -0,0 +1,31 @@
+import { adminGenericProxyFetch, IDeskproClient, OAuth2Result } from "@deskpro/app-sdk";
+import { Settings } from "../types";
+
+interface GetAccessAndRefreshTokensParams {
+  settings: Settings,
+  accessCode: string,
+  callbackUrl: string,
+  client: IDeskproClient
+}
+
+export default async function getAccessAndRefreshTokens(props: GetAccessAndRefreshTokensParams): Promise<OAuth2Result["data"]> {
+  const { settings, accessCode, callbackUrl, client } = props
+
+  const fetch = await adminGenericProxyFetch(client);
+
+  const requestOptions: RequestInit = {
+    method: "POST",
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code: accessCode,
+      client_id: settings.client_key ?? "",
+      client_secret: settings?.client_secret ?? "",
+      redirect_uri: callbackUrl ?? "",
+    }),
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+  };
+
+  return await fetch(`${settings?.salesforce_instance_url}/services/oauth2/token`, requestOptions).then((res) => res.json());
+}

src/api/preInstallationApi.ts

@@ -1,8 +1,8 @@
 import { adminGenericProxyFetch, IDeskproClient } from "@deskpro/app-sdk";
-import { Settings } from "../types";
 import { AuthTokens, ObjectMeta, RequestMethod } from "./types";
 import { every, trimEnd } from "lodash";
 import { isResponseError } from "./api";
+import { Settings } from "../types";
 
 /**
  * Get current user details (whilst app is not installed)
@@ -96,14 +96,12 @@ const preInstalledRequest = async (
   );
 
   // If our access token has expired, attempt to get a new one using the refresh token
-  if ([400, 401].includes(response.status)) {
+  const mode = settings.use_deskpro_saas ? "global" : "local";
+
+  if ([400, 401].includes(response.status) && mode === "local") {
     const refreshRequestOptions: RequestInit = {
       method: "POST",
-      body: `grant_type=refresh_token&client_id=${
-        settings?.client_key as string
-      }&client_secret=${settings?.client_secret as string}&refresh_token=${
-        tokens.refreshToken as string
-      }`,
+      body: `grant_type=refresh_token&client_id=${settings?.client_key}&client_secret=${settings?.client_secret}&refresh_token=${tokens.refreshToken}`,
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },

src/api/types.ts

@@ -3,7 +3,7 @@ export type RequestMethod = "GET" | "POST" | "PATCH" | "DELETE";
 export type AuthTokens = {
   accessToken: string;
   refreshToken: string;
-};
+}
 
 export type ObjectType =
   | "Contact"