Nc fix(nc-gui): add more integrations in ticketing category (#9355)

* fix(nc-gui): add more integrations in ticketing category * fix(nc-gui): review changes * fix(nc-gui): show loader integrations tab * fix(nc-gui): typo error
3 months ago · 162a726efd
6 changed files with 52 additions and 5 deletions
--- a/packages/nc-gui/assets/nc-icons/freshdesk.svg
+++ b/packages/nc-gui/assets/nc-icons/freshdesk.svg
@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <g clip-path="url(#clip0_840_16415)">
+    <path d="M15.95 0.000129358H27.968C28.4991 -0.00414152 29.0257 0.0973827 29.5171 0.29878C30.0085 0.500176 30.4549 0.797413 30.8302 1.17315C31.2055 1.54889 31.5022 1.9956 31.7031 2.48724C31.9039 2.97887 32.0049 3.50557 32 4.03663V16.0501C32 24.8611 24.861 32.0001 16.05 32.0001H15.959C13.8639 32.002 11.7889 31.5909 9.8527 30.7904C7.91651 29.9898 6.15707 28.8156 4.67495 27.3347C3.19283 25.8539 2.01709 24.0954 1.21494 22.1599C0.412778 20.2244 -6.64988e-05 18.1498 8.0341e-09 16.0546C8.0341e-09 7.21863 7.127 0.0911294 15.95 0.000129358Z" fill="#25C16F"/>
+    <path d="M15.95 7.12695C11.9035 7.12695 8.62305 10.407 8.62305 14.454V19.436C8.65205 20.7695 9.72605 21.8435 11.0595 21.8725H13.132V16.1495H10.332V14.5495C10.502 11.5365 12.9955 9.17945 16.014 9.17945C19.0325 9.17945 21.52 11.532 21.69 14.5495V16.1495H18.85V21.8765H20.7225V21.9675C20.7025 23.2045 19.705 24.2025 18.4725 24.2175H16.236C16.054 24.2175 15.854 24.3085 15.854 24.49C15.8584 24.5898 15.9001 24.6845 15.9708 24.7552C16.0415 24.8259 16.1361 24.8675 16.236 24.872H18.486C20.0885 24.862 21.385 23.5655 21.395 21.963V21.781C21.9303 21.6604 22.4081 21.36 22.7488 20.93C23.0895 20.4999 23.2726 19.9661 23.2675 19.4175V14.5495C23.3585 10.4225 20.0855 7.13145 15.9405 7.13145L15.95 7.12695Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_840_16415">
+      <rect width="32" height="32" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
--- a/packages/nc-gui/components/workspace/integrations/IntegrationsTab.vue
+++ b/packages/nc-gui/components/workspace/integrations/IntegrationsTab.vue
@ -77,6 +77,7 @@ const integrationsMapByCategory = computed(() => {
      (acc, curr) => {
        acc[curr.value] = {
          title: curr.title,
+          subtitle: curr.subtitle,
          list: getIntegrationsByCategory(curr.value, searchQuery.value),
          isAvailable: curr.isAvailable,
          teleEventName: curr.teleEventName,
@ -88,6 +89,7 @@ const integrationsMapByCategory = computed(() => {
        string,
        {
          title: string
+          subtitle?: string
          list: IntegrationItemType[]
          isAvailable?: boolean
          teleEventName?: IntegrationCategoryType
@ -173,7 +175,7 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In
            'h-full': !isModal,
          }"
        >
-          <div class="px-6 pt-6">
+          <div v-if="integrationListContainerWidth" class="px-6 pt-6">
            <div
              class="flex items-end justify-end flex-wrap gap-3 m-auto"
              :style="{
@ -212,6 +214,7 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In
            class="flex-1 px-6 pb-6 flex flex-col nc-workspace-settings-integrations-list overflow-y-auto nc-scrollbar-thin"
          >
            <div
+              v-if="integrationListContainerWidth"
              class="w-full flex justify-center"
              :class="{
                'flex-1': isEmptyList,
@ -245,7 +248,7 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In

                        <div
                          :tabindex="0"
-                          class="source-card focus-visible:outline-none"
+                          class="source-card focus-visible:outline-none h-full"
                          :class="{
                            'is-available': integration?.isAvailable,
                          }"
@ -254,7 +257,10 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In
                          <div class="integration-icon-wrapper">
                            <component :is="integration.icon" class="integration-icon" :style="integration.iconStyle" />
                          </div>
-                          <div class="name flex-1">{{ $t(integration.title) }}</div>
+                          <div class="flex-1">
+                            <div class="name">{{ $t(integration.title) }}</div>
+                            <div v-if="integration.subtitle" class="subtitle flex-1">{{ $t(integration.subtitle) }}</div>
+                          </div>
                          <div v-if="integration?.isAvailable" class="action-btn">+</div>
                          <div v-else class="">
                            <NcButton
@ -281,6 +287,7 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In
                </div>
              </div>
            </div>
+            <div v-else class="h-full flex items-center justify-center"><GeneralLoader size="xlarge" /></div>
          </div>
        </div>
        <NcModal
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@ -362,6 +362,7 @@
      "googleDrive": "Google Drive",
      "googleSheets": "Google Sheets",
      "hubspot": "Hubspot",
+      "serviceHub": "Service Hub",
      "jira": "Jira",
      "mailchimp": "Mailchimp",
      "microsoftAccess": "Microsoft Access",
@ -369,6 +370,7 @@
      "microsoftOutlook": "Microsoft Outlook",
      "miro": "Miro",
      "salesforce": "Salesforce",
+      "serviceCloud": "Service Cloud",
      "snowflake": "Snowflake",
      "stripe": "Stripe",
      "surveyMonkey": "SurveyMonkey",
@ -398,7 +400,8 @@
      "openai": "OpenAI",
      "claude": "Claude",
      "ollama": "Ollama",
-      "groq": "Groq"
+      "groq": "Groq",
+      "freshdesk": "FreshDesk"
    },
    "integrationCategories": {
      "allIntegrations": "All Integrations",
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@ -242,6 +242,7 @@ import NcTrello from '~icons/nc-icons/trello'
 import NcTypeform from '~icons/nc-icons/typeform'
 import NcWorkday from '~icons/nc-icons/workday'
 import NcZendesk from '~icons/nc-icons/zendesk'
+import NcFreshdesk from '~icons/nc-icons/freshdesk'

 import NcBookOpen from '~icons/nc-icons/book-open'
 import NcCircleCheckSolid from '~icons/nc-icons/check-circle-solid'
@ -1029,6 +1030,7 @@ export const iconMap = {
  typeform: NcTypeform,
  workday: NcWorkday,
  zendesk: NcZendesk,
+  freshdesk: NcFreshdesk,
  bookOpen: NcBookOpen,
  circleCheckSolid: NcCircleCheckSolid,
  alertTriangleSolid: NcAlertTriangleSolid,
--- a/packages/nc-gui/utils/syncDataUtils.ts
+++ b/packages/nc-gui/utils/syncDataUtils.ts
@ -9,6 +9,7 @@ export interface IntegrationItemType {
  isAvailable?: boolean
  iconStyle?: CSSProperties
  isOssOnly?: boolean
+  subtitle?: string
 }

 export interface IntegrationCategoryItemType {
@ -250,7 +251,7 @@ export const allIntegrations: IntegrationItemType[] = [
    title: 'objects.syncData.jira',
    value: SyncDataType.JIRA,
    icon: iconMap.jira,
-    categories: [IntegrationCategoryType.PROJECT_MANAGEMENT, IntegrationCategoryType.TICKETING],
+    categories: [IntegrationCategoryType.PROJECT_MANAGEMENT],
  },
  {
    title: 'objects.syncData.miro',
@ -379,6 +380,12 @@ export const allIntegrations: IntegrationItemType[] = [
  },

  // Ticketing
+  {
+    title: 'objects.syncData.freshdesk',
+    value: SyncDataType.FRESHDESK,
+    icon: iconMap.freshdesk,
+    categories: [IntegrationCategoryType.TICKETING],
+  },
  {
    title: 'objects.syncData.intercom',
    value: SyncDataType.INTERCOM,
@ -391,6 +398,20 @@ export const allIntegrations: IntegrationItemType[] = [
    icon: iconMap.zendesk,
    categories: [IntegrationCategoryType.TICKETING],
  },
+  {
+    title: 'objects.syncData.salesforce',
+    subtitle: 'objects.syncData.serviceCloud',
+    value: SyncDataType.SALESFORCE_SERVICE_CLOUD,
+    icon: iconMap.salesforce,
+    categories: [IntegrationCategoryType.TICKETING],
+  },
+  {
+    title: 'objects.syncData.hubspot',
+    subtitle: 'objects.syncData.serviceHub',
+    value: SyncDataType.HUBSPOT_SERVICE_HUB,
+    icon: iconMap.hubspot,
+    categories: [IntegrationCategoryType.TICKETING],
+  },

  // Storage
  { title: 'objects.syncData.box', value: SyncDataType.BOX, icon: iconMap.box, categories: [IntegrationCategoryType.STORAGE] },
--- a/packages/nocodb-sdk/src/lib/enums.ts
+++ b/packages/nocodb-sdk/src/lib/enums.ts
@ -401,8 +401,11 @@ export enum SyncDataType {
  STRIPE = 'stripe',
  QUICKBOOKS = 'quickbooks',
  // Ticketing
+  FRESHDESK = 'freshdesk',
  INTERCOM = 'intercom',
  ZENDESK = 'zendesk',
+  HUBSPOT_SERVICE_HUB = 'hubspot-service-hub',
+  SALESFORCE_SERVICE_CLOUD = 'salesforce-service-cloud',
  // Storage
  BOX = 'box',
  GOOGLE_DRIVE = 'google-drive',