Hubspot improvements [] (#10040)

joaquincasal · web-flow · commit fa0885ef02b0 · 2025-07-31T13:49:46.000-03:00
* Refactor on config screen validation

* Use sdk.cma instead of createClient

* Remove unnecessary try catch

* Add deploy script
diff --git a/apps/hubspot/package.json b/apps/hubspot/package.json
@@ -27,7 +27,8 @@
     "test": "vitest",
     "create-app-definition": "contentful-app-scripts create-app-definition",
     "add-locations": "contentful-app-scripts add-locations",
-    "deploy:staging": "contentful-app-scripts upload --ci --bundle-dir ./dist --organization-id ${TEST_ORG_ID} --definition-id 1p60PoDynErXJmD8UYlvM8 --token ${TEST_CMA_TOKEN}",
+    "deploy": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEFINITIONS_ORG_ID} --definition-id 4u975fs1eUfiPsdaxpbQFO --token ${CONTENTFUL_CMA_TOKEN}",
+    "deploy:staging": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${TEST_ORG_ID} --definition-id 1p60PoDynErXJmD8UYlvM8 --token ${TEST_CMA_TOKEN}",
     "upload": "contentful-app-scripts upload --bundle-dir ./build",
     "upload-ci": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id $CONTENTFUL_ORG_ID --definition-id $CONTENTFUL_APP_DEF_ID --token $CONTENTFUL_ACCESS_TOKEN",
     "upsert-actions": "contentful-app-scripts upsert-actions --ci --organization-id $CONTENTFUL_ORG_ID --definition-id $CONTENTFUL_APP_DEF_ID --token $CONTENTFUL_ACCESS_TOKEN",
diff --git a/apps/hubspot/src/components/ContentTypeMultiSelect.tsx b/apps/hubspot/src/components/ContentTypeMultiSelect.tsx
@@ -2,21 +2,19 @@ import React, { useEffect, useState } from 'react';
 import { Box, Stack, Pill } from '@contentful/f36-components';
 import { Multiselect } from '@contentful/f36-multiselect';
 import { CONFIG_CONTENT_TYPE_ID, ContentType } from '../utils/utils';
-import { ContentTypeProps, PlainClientAPI } from 'contentful-management';
+import { ContentTypeProps } from 'contentful-management';
 import { ConfigAppSDK } from '@contentful/app-sdk';
 
 interface ContentTypeMultiSelectProps {
   selectedContentTypes: ContentType[];
   setSelectedContentTypes: (contentTypes: ContentType[]) => void;
   sdk: ConfigAppSDK;
-  cma: PlainClientAPI;
 }
 
 const ContentTypeMultiSelect: React.FC<ContentTypeMultiSelectProps> = ({
   selectedContentTypes,
   setSelectedContentTypes,
   sdk,
-  cma,
 }) => {
   const [availableContentTypes, setAvailableContentTypes] = useState<ContentType[]>([]);
   const getPlaceholderText = () => {
@@ -41,7 +39,7 @@ const ContentTypeMultiSelect: React.FC<ContentTypeMultiSelectProps> = ({
     let areMoreContentTypes = true;
 
     while (areMoreContentTypes) {
-      const response = await cma.contentType.getMany({
+      const response = await sdk.cma.contentType.getMany({
         spaceId: sdk.ids.space,
         environmentId: sdk.ids.environment,
         query: { skip, limit },
diff --git a/apps/hubspot/src/locations/ConfigScreen.tsx b/apps/hubspot/src/locations/ConfigScreen.tsx
@@ -28,7 +28,6 @@ import {
   ContentType,
   HUBSPOT_PRIVATE_APPS_URL,
 } from '../utils/utils';
-import { createClient } from 'contentful-management';
 import ContentTypeMultiSelect from '../components/ContentTypeMultiSelect';
 import ConfigEntryService from '../utils/ConfigEntryService';
 import sidebarExample from '../assets/sidebar-example.png';
@@ -46,39 +45,21 @@ const ConfigScreen = () => {
   });
   const [selectedContentTypes, setSelectedContentTypes] = useState<ContentType[]>([]);
 
-  const cma = createClient(
-    { apiAdapter: sdk.cmaAdapter },
-    {
-      type: 'plain',
-      defaults: {
-        environmentId: sdk.ids.environmentAlias ?? sdk.ids.environment,
-        spaceId: sdk.ids.space,
-      },
-    }
-  );
-
-  function checkIfHasValue(
-    value: string,
-    setError: (error: string | null) => void,
-    errorMessage: string
-  ) {
-    const hasValue = !!value?.trim();
-    setError(hasValue ? null : errorMessage);
-    return hasValue;
+  function checkIfHasValue(value: string) {
+    return !!value?.trim();
   }
 
   const validateAccessToken = async () => {
     setHubspotTokenError(null);
 
-    const hubspotTokenHasValue = checkIfHasValue(
-      parameters.hubspotAccessToken,
-      setHubspotTokenError,
-      EMPTY_MESSAGE
-    );
+    const hubspotTokenHasValue = checkIfHasValue(parameters.hubspotAccessToken);
 
     if (!hubspotTokenHasValue) {
+      setHubspotTokenError(EMPTY_MESSAGE);
       sdk.notifier.error(EMPTY_MESSAGE);
       return false;
+    } else {
+      setHubspotTokenError(null);
     }
     return true;
   };
@@ -90,7 +71,7 @@ const ConfigScreen = () => {
     }
 
     try {
-      const configService = new ConfigEntryService(cma, sdk.locales.default);
+      const configService = new ConfigEntryService(sdk.cma, sdk.locales.default);
       await configService.createConfig();
     } catch (e) {
       sdk.notifier.error('The app configuration was not saved. Please try again.');
@@ -110,7 +91,7 @@ const ConfigScreen = () => {
       parameters,
       targetState: { EditorInterface: { ...editorInterface } },
     };
-  }, [parameters, sdk, cma, selectedContentTypes]);
+  }, [parameters, sdk, selectedContentTypes]);
 
   useEffect(() => {
     sdk.app.onConfigure(() => onConfigure());
@@ -217,7 +198,6 @@ const ConfigScreen = () => {
           selectedContentTypes={selectedContentTypes}
           setSelectedContentTypes={setSelectedContentTypes}
           sdk={sdk}
-          cma={cma}
         />
         <Subheading marginTop="spacing2Xl" marginBottom="spacingS">
           Getting started
diff --git a/apps/hubspot/src/locations/Dialog.tsx b/apps/hubspot/src/locations/Dialog.tsx
@@ -4,7 +4,6 @@ import { useAutoResizer, useSDK } from '@contentful/react-apps-toolkit';
 import { useMemo, useState, useEffect } from 'react';
 import FieldSelection from '../components/FieldSelection';
 import FieldModuleNameMapping from '../components/FieldModuleNameMapping';
-import { createClient } from 'contentful-management';
 import { SdkField, SelectedSdkField } from '../utils/fieldsProcessing';
 import { styles } from './Dialog.styles';
 import ConfigEntryService from '../utils/ConfigEntryService';
@@ -22,16 +21,6 @@ enum Step {
 
 const Dialog = () => {
   const sdk = useSDK<DialogAppSDK>();
-  const cma = createClient(
-    { apiAdapter: sdk.cmaAdapter },
-    {
-      type: 'plain',
-      defaults: {
-        environmentId: sdk.ids.environment,
-        spaceId: sdk.ids.space,
-      },
-    }
-  );
   useAutoResizer();
   const invocationParams = sdk.parameters.invocation as unknown as InvocationParams;
   const fields = invocationParams.fields;
@@ -45,7 +34,7 @@ const Dialog = () => {
 
   useEffect(() => {
     const fetchConnectedFields = async () => {
-      const configService = new ConfigEntryService(cma, sdk.locales.default);
+      const configService = new ConfigEntryService(sdk.cma, sdk.locales.default);
       const entryConnectedFields = await configService.getEntryConnectedFields(
         invocationParams.entryId
       );
@@ -92,7 +81,7 @@ const Dialog = () => {
     });
 
     try {
-      const response = await cma.appActionCall.createWithResponse(
+      const response = await sdk.cma.appActionCall.createWithResponse(
         {
           spaceId: sdk.ids.space,
           environmentId: sdk.ids.environmentAlias ?? sdk.ids.environment,
diff --git a/apps/hubspot/src/locations/Page.tsx b/apps/hubspot/src/locations/Page.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Box, Flex, Heading, Spinner, Text, Note, TextLink } from '@contentful/f36-components';
 import { useSDK } from '@contentful/react-apps-toolkit';
-import { createClient } from 'contentful-management';
 import ConfigEntryService from '../utils/ConfigEntryService';
 import { styles } from './Page.styles';
 import { ConnectedFields, EntryWithContentType, getUniqueFieldId } from '../utils/utils';
@@ -19,23 +18,12 @@ const Page: React.FC = () => {
   const [modalEntry, setModalEntry] = useState<EntryWithContentType | null>(null);
   const [modalOpen, setModalOpen] = useState<boolean>(false);
 
-  const cma = createClient(
-    { apiAdapter: sdk.cmaAdapter },
-    {
-      type: 'plain',
-      defaults: {
-        environmentId: sdk.ids.environment,
-        spaceId: sdk.ids.space,
-      },
-    }
-  );
-
   useEffect(() => {
     const fetchConnectedEntries = async () => {
       setLoading(true);
       setError(null);
       try {
-        const configService = new ConfigEntryService(cma, defaultLocale);
+        const configService = new ConfigEntryService(sdk.cma, defaultLocale);
         const connectedFields = await configService.getConnectedFields();
         setConnectedFields(connectedFields);
         const entryIds = Object.keys(connectedFields);
@@ -45,24 +33,17 @@ const Page: React.FC = () => {
           return;
         }
 
-        const entriesResponse = await cma.entry.getMany({ query: { 'sys.id[in]': entryIds } });
+        const entriesResponse = await sdk.cma.entry.getMany({ query: { 'sys.id[in]': entryIds } });
         const fetchEntriesWithContentType = await Promise.all(
           entriesResponse.items.map(async (entry) => {
-            try {
-              const contentType = await cma.contentType.get({
-                contentTypeId: entry.sys.contentType.sys.id,
-              });
-              return { entry, contentType };
-            } catch (err) {
-              return null;
-            }
+            const contentType = await sdk.cma.contentType.get({
+              contentTypeId: entry.sys.contentType.sys.id,
+            });
+            return { entry, contentType };
           })
         );
 
-        const filteredEntries: EntryWithContentType[] = fetchEntriesWithContentType.filter(
-          (e): e is EntryWithContentType => e !== null
-        );
-        setEntriesWithContentType(filteredEntries);
+        setEntriesWithContentType(fetchEntriesWithContentType);
       } catch (e) {
         setEntriesWithContentType([]);
         setError(
@@ -94,7 +75,7 @@ const Page: React.FC = () => {
   async function handleDisconnectFields(selectedFieldIds: string[]) {
     if (!modalEntry) return;
     const entryId = modalEntry.entry.sys.id;
-    const configService = new ConfigEntryService(cma, defaultLocale);
+    const configService = new ConfigEntryService(sdk.cma, defaultLocale);
 
     try {
       const currentFields = await configService.getEntryConnectedFields(entryId);
diff --git a/apps/hubspot/src/locations/Sidebar.tsx b/apps/hubspot/src/locations/Sidebar.tsx
@@ -2,24 +2,13 @@ import { Button, Flex, Text, RelativeDateTime, Note, TextLink } from '@contentfu
 import { SidebarAppSDK } from '@contentful/app-sdk';
 import { useAutoResizer, useSDK } from '@contentful/react-apps-toolkit';
 import { processFields } from '../utils/fieldsProcessing';
-import { createClient } from 'contentful-management';
 import { useEffect, useState } from 'react';
 import ConfigEntryService from '../utils/ConfigEntryService';
 import { EntryConnectedFields } from '../utils/utils';
 import { ErrorCircleOutlineIcon } from '@contentful/f36-icons';
 
 const Sidebar = () => {
   const sdk = useSDK<SidebarAppSDK>();
-  const cma = createClient(
-    { apiAdapter: sdk.cmaAdapter },
-    {
-      type: 'plain',
-      defaults: {
-        environmentId: sdk.ids.environment,
-        spaceId: sdk.ids.space,
-      },
-    }
-  );
   useAutoResizer();
 
   const [connectedFields, setConnectedFields] = useState<EntryConnectedFields | undefined>(
@@ -46,7 +35,7 @@ const Sidebar = () => {
         entryId: sdk.ids.entry,
         fields: JSON.parse(
           JSON.stringify(
-            await processFields(Object.values(sdk.entry.fields), cma, sdk.locales.default)
+            await processFields(Object.values(sdk.entry.fields), sdk.cma, sdk.locales.default)
           )
         ),
       },
@@ -63,7 +52,7 @@ const Sidebar = () => {
     const getConfig = async () => {
       try {
         const entryConnectedFields = await new ConfigEntryService(
-          cma,
+          sdk.cma,
           sdk.locales.default
         ).getEntryConnectedFields(sdk.ids.entry);
         setConnectedFields(entryConnectedFields);
diff --git a/apps/hubspot/src/utils/ConfigEntryService.ts b/apps/hubspot/src/utils/ConfigEntryService.ts
@@ -6,13 +6,14 @@ import {
   ConnectedFields,
   EntryConnectedFields,
 } from './utils';
+import { CMAClient } from '@contentful/app-sdk';
 
 class ConfigEntryService {
-  private cma: PlainClientAPI;
+  private cma: CMAClient;
   private configEntry?: EntryProps<KeyValueMap>;
   private defaultLocale: string | undefined;
 
-  constructor(cma: PlainClientAPI, defaultLocale?: string) {
+  constructor(cma: CMAClient | PlainClientAPI, defaultLocale?: string) {
     this.cma = cma;
     this.defaultLocale = defaultLocale;
   }
diff --git a/apps/hubspot/src/utils/fieldsProcessing.ts b/apps/hubspot/src/utils/fieldsProcessing.ts
@@ -1,4 +1,5 @@
 import { CMAClient, EntryFieldAPI, FieldLinkType, FieldType, Items } from '@contentful/app-sdk';
+import { PlainClientAPI } from 'contentful-management';
 
 export type SdkField = {
   type: FieldType;
@@ -30,7 +31,7 @@ const SUPPORTED_FIELD_TYPES = [
 
 export const processFields = async (
   fields: EntryFieldAPI[],
-  cma: CMAClient,
+  cma: CMAClient | PlainClientAPI,
   defaultLocale: string
 ) => {
   const processedFields: SdkField[] = [];
diff --git a/apps/hubspot/test/locations/Page.spec.tsx b/apps/hubspot/test/locations/Page.spec.tsx
@@ -1,37 +1,13 @@
 import { render, waitFor, screen, cleanup, fireEvent } from '@testing-library/react';
 import { vi, describe, beforeEach, it, expect, afterEach } from 'vitest';
 import Page from '../../src/locations/Page';
-
-const mockNavigator = { openEntry: vi.fn() };
-const mockSdk = {
-  cmaAdapter: {},
-  ids: { environment: 'env', space: 'space' },
-  locales: { default: 'en-US' },
-  navigator: mockNavigator,
-  notifier: {
-    success: vi.fn(),
-    error: vi.fn(),
-  },
-};
-
-const mockCma = {
-  entry: {
-    get: vi.fn(),
-    getMany: vi.fn(),
-  },
-  contentType: {
-    get: vi.fn(),
-  },
-};
+import { mockSdk } from '../mocks/mockSdk';
+import { mockCma } from '../mocks/mockCma';
 
 vi.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: () => mockSdk,
 }));
 
-vi.mock('contentful-management', () => ({
-  createClient: () => mockCma,
-}));
-
 const mockGetConnectedFields = vi.fn();
 const mockGetEntryConnectedFields = vi.fn();
 const mockUpdateEntryConnectedFields = vi.fn();
diff --git a/apps/hubspot/test/mocks/mockCma.ts b/apps/hubspot/test/mocks/mockCma.ts
@@ -11,6 +11,7 @@ const mockCma = {
   },
   entry: {
     get: vi.fn(),
+    getMany: vi.fn(),
     createWithId: vi.fn(),
   },
   editorInterface: {
diff --git a/apps/hubspot/test/mocks/mockSdk.ts b/apps/hubspot/test/mocks/mockSdk.ts
@@ -1,6 +1,8 @@
 import { vi } from 'vitest';
+import { mockCma } from './mockCma';
 
 const mockSdk: any = {
+  cma: mockCma,
   app: {
     onConfigure: vi.fn(),
     getParameters: vi.fn().mockReturnValueOnce({}),
@@ -26,6 +28,7 @@ const mockSdk: any = {
     openCurrentApp: vi.fn(),
   },
   navigator: {
+    openEntry: vi.fn(),
     openCurrentAppPage: vi.fn(),
   },
   contentType: {
