Open File Picker (#238)

* router tweaks

* fetching ccfg as org

* adding client id to ms settings

* making optional

* fixing file-picker ts build

* importing svgs as urls

* adding file picker to connect

* lint

* lints

* lint

* lint

* upgrading connect'

* renaming apis

* lint

* lint

* lint

* lint

* fixing messaging

* adding container embedd

* adding listener function

* renaming function

* style tweaks

* lints

apps/web/__tests__/end-to-end.spec.ts

@@ -28,10 +28,12 @@ beforeAll(async () => {
   fixture = await setupTestOrg()
   sdk = initOpenIntSDK({
     headers: {'x-apikey': fixture.apiKey},
+    // TODO: also test with end user authentication token
     baseUrl: 'http://localhost:4000/api/v0',
   })
   trpc = createAppTrpcClient({
     apiUrl: 'http://localhost:4000/api/trpc',
+    // TODO: also test with end user authentication token
     headers: {'x-apikey': fixture.apiKey},
   })
 })

apps/web/app/connect/file-picker/client.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import {useCallback, useEffect, useState} from 'react'
+import {UnifiedFilePicker} from '@openint/open-file-picker'
+
+export function FilePickerClient() {
+  const [magicLink, setMagicLink] = useState<string>('')
+
+  useEffect(() => {
+    setMagicLink(window.location.href)
+  }, [])
+
+  const onSelect = useCallback((files: any[]) => {
+    window.parent.postMessage({type: 'onFilePickerSelect', files}, '*')
+  }, [])
+
+  const onClose = useCallback(() => {
+    window.parent.postMessage({type: 'onFilePickerClose'}, '*')
+  }, [])
+
+  if (!magicLink) {
+    return null
+  }
+
+  return (
+    <UnifiedFilePicker
+      auth={{
+        openIntFilePickerMagicLink: magicLink,
+      }}
+      options={{
+        // do we need this in the magic link renderer?
+        // isOpen: true,
+        onClose,
+        onSelect,
+      }}
+    />
+  )
+}

apps/web/app/connect/file-picker/page.tsx

@@ -7,6 +7,7 @@ import {zConnectPageParams} from '@openint/engine-backend/router/customerRouter'
 import {ClientRoot} from '@/components/ClientRoot'
 import {SuperHydrate} from '@/components/SuperHydrate'
 import {createServerComponentHelpers} from '@/lib-server/server-component-helpers'
+import {FilePickerClient} from './client'
 
 export const metadata = {
   title: 'OpenInt Connection Management Portal',
@@ -56,7 +57,7 @@ export default async function PortalPage({
     <ClientRoot accessToken={viewer.accessToken} authStatus="success">
       <SuperHydrate dehydratedState={getDehydratedState()}>
         {/* <ColorConfig orgId={viewer.orgId} /> */}
-        <div>File picker WIP</div>
+        <FilePickerClient />
       </SuperHydrate>
     </ClientRoot>
   )

apps/web/package.json

@@ -23,6 +23,7 @@
     "@openint/engine-frontend": "workspace:*",
     "@openint/env": "workspace:*",
     "@openint/events": "workspace:*",
+    "@openint/open-file-picker": "workspace:*",
     "@openint/ui": "workspace:*",
     "@openint/util": "workspace:*",
     "@opensdks/fetch-links": "^0.0.19",

connectors/connector-microsoft/def.ts

@@ -7,6 +7,7 @@ export const zConfig = oauthBaseSchema.connectorConfig
 const oReso = oauthBaseSchema.connectionSettings
 export const zSettings = oReso.extend({
   oauth: oReso.shape.oauth,
+  client_id: z.string().optional(),
 })
 
 export const microsoftSchemas = {

connectors/connector-microsoft/server.ts

@@ -1,6 +1,11 @@
 import type {MsgraphSDK} from '@opensdks/sdk-msgraph'
 import {initMsgraphSDK} from '@opensdks/sdk-msgraph'
-import {extractId, initNangoSDK, nangoProxyLink, type ConnectorServer} from '@openint/cdk'
+import {
+  extractId,
+  initNangoSDK,
+  nangoProxyLink,
+  type ConnectorServer,
+} from '@openint/cdk'
 import type {microsoftSchemas} from './def'
 
 function mergeScopes(
@@ -31,7 +36,7 @@ const integrations = [
     verticals: ['email'],
     updated_at: new Date().toISOString(),
     logo_url: '/_assets/logo-outlook.svg',
-  }
+  },
 ]
 
 export const microsoftServer = {
@@ -51,7 +56,7 @@ export const microsoftServer = {
           return next(req)
         },
         ...fetchLinks,
-        ...defaultLinks
+        ...defaultLinks,
       ],
     })
     return msGraph
@@ -86,7 +91,7 @@ export const microsoftServer = {
           ),
         },
         // note: doesn't seem to be working
-        auth_mode: "OAUTH2_CC"
+        auth_mode: 'OAUTH2_CC',
       }
       return authParams
     }
@@ -121,7 +126,7 @@ export const microsoftServer = {
 
     const defaultResource = {
       connectionExternalId: extractId(connectOutput.connectionId)[2],
-      settings: {oauth: nangoConnection},
+      settings: {oauth: nangoConnection, client_id: config.oauth.client_id},
     }
     if (!context.integrationId) {
       return defaultResource

docs/unified-apis/file-storage/download-file.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/files/{id}/download
+openapi: get /unified/file-storage/file/{id}/download
 ---

docs/unified-apis/file-storage/export-file.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/files/{id}/export
+openapi: get /unified/file-storage/file/{id}/export
 ---

docs/unified-apis/file-storage/get-file.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/files/{id}
+openapi: get /unified/file-storage/file/{id}
 ---

docs/unified-apis/file-storage/list-drive-groups.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/drive-groups
+openapi: get /unified/file-storage/drive-group
 ---

docs/unified-apis/file-storage/list-drives.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/drives
+openapi: get /unified/file-storage/drive
 ---

docs/unified-apis/file-storage/list-files.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/files
+openapi: get /unified/file-storage/file
 ---

docs/unified-apis/file-storage/list-folders.mdx

@@ -1,3 +1,3 @@
 ---
-openapi: get /unified/file-storage/folders
+openapi: get /unified/file-storage/folder
 ---

jest.config.js

@@ -31,3 +31,11 @@ module.exports = {
     'jest-watch-typeahead/testname',
   ],
 }
+
+// NOTE maybe required for kits/file-picker
+// import '@testing-library/jest-dom';
+
+// If you are using @jest/globals with injectGlobals: false, you will need to use a different import in your tests setup file:
+
+// // In your own jest-setup.js (or any other name)
+// import '@testing-library/jest-dom/jest-globals'

kits/connect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openint/connect",
-  "version": "0.2.8",
+  "version": "0.2.17",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,6 +13,7 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@openint/open-file-picker": "workspace:*",
     "@types/react": "*",
     "typescript": "*"
   },

kits/connect/src/popup.ts

@@ -1,8 +1,17 @@
 import {zFrameMessage, type FrameMessage} from './common'
 
+// TODO: import {SelectedFile} from '@openint/open-file-picker'
+export type SelectedFile = {
+  id: string
+  name: string
+  type: 'file' | 'folder'
+  driveId: string | null
+  driveGroupId: string | null
+}
+
 export const OpenIntFrontend = {
   // TODO: import {Event as OpenIntEvent, zEvent} from '@openint/events'
-  listen: (callback: (event: any) => void) => {
+  listenConnectEvents: (callback: (event: any) => void) => {
     // Try to find specific iframe first
     const targetFrame =
       (window.frames as unknown as Record<string, Window>)[
@@ -66,6 +75,88 @@ export const OpenIntFrontend = {
       },
     )
   },
+  openFilePicker: async ({
+    url,
+    onSelect,
+    onClose,
+    container,
+  }: {
+    url: string
+    onSelect?: (files: SelectedFile[]) => void
+    onClose?: () => void
+    container?: HTMLElement
+  }) => {
+    let popup: Window | null = null
+    let iframe: HTMLIFrameElement | null = null
+
+    if (container) {
+      // Create and insert iframe if container is provided
+      iframe = document.createElement('iframe')
+      iframe.src = url
+      iframe.style.width = '100%'
+      iframe.style.height = '100%'
+      iframe.style.border = 'none'
+      container.appendChild(iframe)
+    } else {
+      // Use popup if no container provided
+      const features = {
+        ...popupLayout(500, 600),
+        scrollbars: 'yes',
+        resizable: 'yes',
+        status: 'no',
+        toolbar: 'no',
+        location: 'no',
+        copyhistory: 'no',
+        menubar: 'no',
+        directories: 'no',
+        popup: 'true',
+      }
+      popup = window.open(url, '_blank', featuresToString(features))
+    }
+
+    return new Promise<void>((resolve) => {
+      const listener: Parameters<
+        typeof window.addEventListener<'message'>
+      >[1] = (event) => {
+        if (event.data.type === 'onFilePickerSelect') {
+          if (onSelect) {
+            onSelect(event.data.files)
+          }
+          return
+        }
+
+        if (event.data.type === 'onFilePickerClose') {
+          if (onClose) {
+            onClose()
+            popup?.close()
+            if (iframe) {
+              iframe.remove()
+            }
+            window.removeEventListener('message', listener)
+            resolve()
+          }
+          return
+        }
+      }
+      window.addEventListener('message', listener)
+    })
+  },
+  listenFilePicker: ({
+    onSelect,
+    onClose,
+  }: {
+    onSelect?: (files: SelectedFile[]) => void
+    onClose?: () => void
+  }) => {
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'onFilePickerSelect') {
+        onSelect?.(event.data.files)
+      }
+      if (event.data.type === 'onFilePickerClose') {
+        onClose?.()
+      }
+    })
+  },
 }
 
 function popupLayout(expectedWidth: number, expectedHeight: number) {

kits/file-picker/README.md

@@ -0,0 +1,5 @@
+# Open File Picker
+
+A unified file picker component for SharePoint and Google Drive.
+
+Powered by [OpenInt](https://openint.dev)

kits/file-picker/app/client.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import {UnifiedFilePicker} from '../src/UnifiedFilePicker'
+
+interface FilePickerProps {
+  magicLink: string
+}
+
+export function Client({magicLink}: FilePickerProps) {
+  return (
+    <UnifiedFilePicker
+      auth={{
+        openIntFilePickerMagicLink: magicLink,
+      }}
+      options={{
+        isOpen: true,
+        onClose: () => console.log('File picker closed'),
+        onSelect: (files) => console.log('Selected files:', files),
+        theme: 'light',
+        multiselect: true,
+        folderSelect: false,
+      }}
+    />
+  )
+}