Memo main component, improve initial loader bg and bump version

connectors/connector-discord/def.ts

@@ -17,6 +17,7 @@ export const discordDef = {
   metadata: {
     displayName: 'Discord',
     stage: 'beta',
+    verticals: ['messaging'],
     logoUrl: '/_assets/logo-discord.svg',
     nangoProvider: 'discord',
   },

connectors/connector-github/def.ts

@@ -24,7 +24,7 @@ export const githubDef = {
   metadata: {
     displayName: 'GitHub',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['developer-tools'],
     logoUrl: '/_assets/logo-github.svg',
     nangoProvider: 'github',
   },

connectors/connector-gong/def.ts

@@ -24,7 +24,7 @@ export const gongDef = {
   metadata: {
     displayName: 'Gong',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['sales-enablement'],
     logoUrl: '/_assets/logo-gong.svg',
     nangoProvider: 'gong',
   },

connectors/connector-intercom/def.ts

@@ -24,7 +24,7 @@ export const intercomDef = {
   metadata: {
     displayName: 'Intercom',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['communication'],
     logoUrl: '/_assets/logo-intercom.svg',
     nangoProvider: 'intercom',
   },

connectors/connector-jira/def.ts

@@ -24,7 +24,7 @@ export const jiraDef = {
   metadata: {
     displayName: 'Jira',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['ticketing'],
     logoUrl: '/_assets/logo-jira.svg',
     nangoProvider: 'jira',
   },

connectors/connector-kustomer/def.ts

@@ -24,7 +24,7 @@ export const kustomerDef = {
   metadata: {
     displayName: 'Kustomer',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['communication'],
     logoUrl: '/_assets/logo-kustomer.svg',
     // TODO: Update opensdks NangoProvider type to include kustomer
     // @ts-expect-error

connectors/connector-linear/def.ts

@@ -24,7 +24,7 @@ export const linearDef = {
   metadata: {
     displayName: 'Linear',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['ticketing'],
     logoUrl: '/_assets/logo-linear.svg',
     nangoProvider: 'linear',
   },

kits/cdk/verticals.ts

@@ -12,26 +12,7 @@ interface VerticalInfo {
 // Also maybe should be distributed in a metadata file associated with each unified api
 // impl.
 const _VERTICAL_BY_KEY = {
-  banking: {},
   accounting: {},
-  crm: {
-    name: 'CRM',
-    objects: ['account', 'contact', 'opportunity', 'lead', 'user'],
-  },
-  'sales-engagement': {},
-  engagement: {}, // TODO: merge me
-  commerce: {},
-  'expense-management': {},
-  enrichment: {},
-  database: {},
-  'flat-files-and-spreadsheets': {},
-  'file-storage': {},
-  streaming: {},
-  'personal-finance': {},
-  other: {},
-  hris: {},
-  payroll: {},
-  calendar: {},
   ats: {
     name: 'ATS',
     description: `Our secure API identifies employees and compensation by
@@ -40,9 +21,31 @@ const _VERTICAL_BY_KEY = {
                 one-way with no impact on original data.`,
     objects: ['job', 'offer', 'candidate', 'opening'],
   },
+  banking: {},
+  calendar: {},
+  commerce: {},
+  communication: {},
+  crm: {
+    name: 'CRM',
+    objects: ['account', 'contact', 'opportunity', 'lead', 'user'],
+  },
+  database: {},
+  'developer-tools': {},
   email: {},
+  engagement: {}, // TODO: merge me
+  enrichment: {},
+  'expense-management': {},
+  'file-storage': {},
+  'flat-files-and-spreadsheets': {},
+  hris: {},
   messaging: {},
-  communication: {},
+  other: {},
+  payroll: {},
+  'personal-finance': {},
+  'sales-enablement': {},
+  'sales-engagement': {},
+  streaming: {},
+  ticketing: {},
   wiki: {},
 } satisfies Record<string, VerticalInfo>
 

kits/connect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openint/connect",
-  "version": "0.2.19",
+  "version": "0.2.22",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

kits/connect/src/embed-react.tsx

@@ -10,72 +10,82 @@ export interface OpenIntConnectEmbedProps
 
 const DEFAULT_HEIGHT = 500
 const DEFAULT_WIDTH = 350
-export const OpenIntConnectEmbed = React.forwardRef(
-  (
-    {baseUrl, params, onReady, ...iframeProps}: OpenIntConnectEmbedProps,
-    forwardedRef: React.ForwardedRef<HTMLIFrameElement>,
-  ) => {
-    const url = getIFrameUrl({baseUrl, params})
-    const [loading, setLoading] = React.useState(true)
+export const OpenIntConnectEmbed = React.memo(
+  React.forwardRef(
+    (
+      props: OpenIntConnectEmbedProps,
+      forwardedRef: React.ForwardedRef<HTMLIFrameElement>,
+    ) => {
+      const {baseUrl, params, onReady, ...iframeProps} = props
 
-    React.useEffect(() => {
-      if (
-        typeof iframeProps.height === 'number' &&
-        iframeProps.height < DEFAULT_HEIGHT
-      ) {
-        console.warn(
-          'Optimal height for Connect is 500px. Using 500px instead.',
-        )
-      }
-      if (typeof iframeProps.width === 'number' && iframeProps.width < 350) {
-        console.warn('Minimum width for Connect is 350px. Using 350px instead.')
-      }
-    }, [iframeProps.height, iframeProps.width])
+      const url = React.useMemo(
+        () => getIFrameUrl({baseUrl, params}),
+        [baseUrl, params],
+      )
 
-    const height =
-      typeof iframeProps.height === 'number'
-        ? iframeProps.height > DEFAULT_HEIGHT
-          ? iframeProps.height
-          : DEFAULT_HEIGHT
-        : iframeProps.height
+      const [loading, setLoading] = React.useState(true)
 
-    const width =
-      typeof iframeProps.width === 'number'
-        ? iframeProps.width > DEFAULT_WIDTH
-          ? iframeProps.width
-          : DEFAULT_WIDTH
-        : iframeProps.width || DEFAULT_WIDTH
+      React.useEffect(() => {
+        if (
+          typeof iframeProps.height === 'number' &&
+          iframeProps.height < DEFAULT_HEIGHT
+        ) {
+          console.warn(
+            'Optimal height for Connect is 500px. Using 500px instead.',
+          )
+        }
+        if (typeof iframeProps.width === 'number' && iframeProps.width < 350) {
+          console.warn(
+            'Minimum width for Connect is 350px. Using 350px instead.',
+          )
+        }
+      }, [iframeProps.height, iframeProps.width])
 
-    // Add a more reliable way to know iframe has fully finished loading
-    // by sending message from iframe to parent when ready
-    return (
-      <div className="connect-embed-wrapper">
-        <div className={`spinner-container ${loading ? 'loading' : 'loaded'}`}>
-          <svg className="spinner" viewBox="0 0 50 50">
-            <circle
-              className="path"
-              cx="25"
-              cy="25"
-              r="20"
-              fill="none"
-              strokeWidth="5"></circle>
-          </svg>
-        </div>
-        <iframe
-          name="openint-connect-frame"
-          id="openint-connect-frame"
-          {...iframeProps}
-          ref={forwardedRef}
-          onLoad={() => {
-            setLoading(false)
-            onReady?.()
-          }}
-          src={url}
-          width={width}
-          height={height}
-        />
+      const height =
+        typeof iframeProps.height === 'number'
+          ? iframeProps.height > DEFAULT_HEIGHT
+            ? iframeProps.height
+            : DEFAULT_HEIGHT
+          : iframeProps.height
+
+      const width =
+        typeof iframeProps.width === 'number'
+          ? iframeProps.width > DEFAULT_WIDTH
+            ? iframeProps.width
+            : DEFAULT_WIDTH
+          : iframeProps.width || DEFAULT_WIDTH
 
-        <style>{`
+      // Add a more reliable way to know iframe has fully finished loading
+      // by sending message from iframe to parent when ready
+      return (
+        <div className="connect-embed-wrapper">
+          <div
+            className={`spinner-container ${loading ? 'loading' : 'loaded'}`}>
+            <svg className="spinner" viewBox="0 0 50 50">
+              <circle
+                className="path"
+                cx="25"
+                cy="25"
+                r="20"
+                fill="none"
+                strokeWidth="5"></circle>
+            </svg>
+          </div>
+          <iframe
+            name="openint-connect-frame"
+            id="openint-connect-frame"
+            {...iframeProps}
+            ref={forwardedRef}
+            onLoad={() => {
+              setLoading(false)
+              onReady?.()
+            }}
+            src={url}
+            width={width}
+            height={height}
+          />
+
+          <style>{`
         .connect-embed-wrapper {
           display: flex;
           height: ${height}px;
@@ -91,7 +101,7 @@ export const OpenIntConnectEmbed = React.forwardRef(
           justify-content: center;
           align-items: center;
           height: 100%;
-          background: white;
+          background: ${params?.theme === 'dark' ? '#1C1C1C' : 'white'};
           transition: opacity 0.3s ease;
           max-width: ${width}px;
           max-height: ${height}px;
@@ -130,8 +140,10 @@ export const OpenIntConnectEmbed = React.forwardRef(
           }
         }
       `}</style>
-      </div>
-    )
-  },
+        </div>
+      )
+    },
+  ),
 )
+
 OpenIntConnectEmbed.displayName = 'OpenIntConnectEmbed'

packages/engine-frontend/components/ConnectionsTabContent.tsx

@@ -102,10 +102,10 @@ export function ConnectionsTabContent({
       {connectionCount === 0 ? (
         <div className="flex flex-col p-4 pt-0">
           <div>
-            <p className="font-semibold text-foreground">
+            <p className="pt-4 font-semibold text-foreground">
               You have no connections yet
             </p>
-            <p className="text-sm text-foreground">
+            <p className="pt-2 text-sm text-foreground">
               Add a connection to start integrating and streamlining your
               workflow!
             </p>