@hubspot/ui-extensions 0.8.53 → 0.8.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.js +30 -5
- package/dist/__tests__/experimental/hooks/useCrmProperties.spec.js +24 -0
- package/dist/coreComponents.d.ts +2 -2
- package/dist/coreComponents.js +2 -2
- package/dist/experimental/crm/fetchCrmProperties.d.ts +1 -1
- package/dist/experimental/crm/fetchCrmProperties.js +2 -2
- package/dist/experimental/hooks/useCrmProperties.js +4 -1
- package/dist/types.d.ts +18 -2
- package/package.json +2 -2
|
@@ -24,8 +24,8 @@ describe('fetchCrmProperties', () => {
|
|
|
24
24
|
};
|
|
25
25
|
mockFetchCrmProperties.mockResolvedValue(mockResponse);
|
|
26
26
|
const propertyNames = ['firstname', 'lastname'];
|
|
27
|
-
const result = await fetchCrmProperties(propertyNames);
|
|
28
|
-
expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames);
|
|
27
|
+
const result = await fetchCrmProperties(propertyNames, jest.fn());
|
|
28
|
+
expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function));
|
|
29
29
|
expect(result).toEqual({
|
|
30
30
|
firstname: 'Test value for firstname',
|
|
31
31
|
lastname: 'Test value for lastname',
|
|
@@ -38,12 +38,12 @@ describe('fetchCrmProperties', () => {
|
|
|
38
38
|
};
|
|
39
39
|
mockFetchCrmProperties.mockResolvedValue(mockResponse);
|
|
40
40
|
const propertyNames = ['firstname'];
|
|
41
|
-
await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Failed to fetch CRM properties: Not Found');
|
|
41
|
+
await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Failed to fetch CRM properties: Not Found');
|
|
42
42
|
});
|
|
43
43
|
it('throws an error when fetch fails', async () => {
|
|
44
44
|
mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
|
|
45
45
|
const propertyNames = ['firstname'];
|
|
46
|
-
await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Network error');
|
|
46
|
+
await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Network error');
|
|
47
47
|
});
|
|
48
48
|
it('throws an error if the response is not an object', async () => {
|
|
49
49
|
const mockApiResponse = 'Invalid response';
|
|
@@ -53,6 +53,31 @@ describe('fetchCrmProperties', () => {
|
|
|
53
53
|
};
|
|
54
54
|
mockFetchCrmProperties.mockResolvedValue(mockResponse);
|
|
55
55
|
const propertyNames = ['firstname'];
|
|
56
|
-
await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Invalid response format');
|
|
56
|
+
await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Invalid response format');
|
|
57
|
+
});
|
|
58
|
+
it('passes the propertiesUpdatedCallback and allows it to be called', async () => {
|
|
59
|
+
let capturedCallback;
|
|
60
|
+
const mockApiResponse = {
|
|
61
|
+
firstname: 'Initial',
|
|
62
|
+
lastname: 'Initial',
|
|
63
|
+
};
|
|
64
|
+
const mockResponse = {
|
|
65
|
+
ok: true,
|
|
66
|
+
json: jest.fn().mockResolvedValue(mockApiResponse),
|
|
67
|
+
};
|
|
68
|
+
mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
|
|
69
|
+
capturedCallback = callback;
|
|
70
|
+
return Promise.resolve(mockResponse);
|
|
71
|
+
});
|
|
72
|
+
const propertyNames = ['firstname', 'lastname'];
|
|
73
|
+
const mockCallback = jest.fn();
|
|
74
|
+
await fetchCrmProperties(propertyNames, mockCallback);
|
|
75
|
+
expect(typeof capturedCallback).toBe('function');
|
|
76
|
+
// Simulate the callback being called with new properties
|
|
77
|
+
const updatedProps = { firstname: 'Updated', lastname: 'Updated' };
|
|
78
|
+
if (capturedCallback) {
|
|
79
|
+
capturedCallback(updatedProps);
|
|
80
|
+
}
|
|
81
|
+
expect(mockCallback).toHaveBeenCalledWith(updatedProps);
|
|
57
82
|
});
|
|
58
83
|
});
|
|
@@ -68,4 +68,28 @@ describe('useCrmProperties', () => {
|
|
|
68
68
|
expect(result.current.isLoading).toBe(false);
|
|
69
69
|
});
|
|
70
70
|
});
|
|
71
|
+
it('should update properties when propertiesUpdatedCallback is called', async () => {
|
|
72
|
+
// Capture the callback so we can simulate an external update to CRM properties
|
|
73
|
+
let capturedCallback;
|
|
74
|
+
mockFetchCrmProperties.mockImplementation((_propertyNames, propertiesUpdatedCallback) => {
|
|
75
|
+
capturedCallback = propertiesUpdatedCallback;
|
|
76
|
+
return { firstname: 'Initial', lastname: 'Initial' };
|
|
77
|
+
});
|
|
78
|
+
const propertyNames = ['firstname', 'lastname'];
|
|
79
|
+
const { result } = renderHook(() => useCrmProperties(propertyNames));
|
|
80
|
+
await waitFor(() => {
|
|
81
|
+
expect(result.current.properties).toEqual({
|
|
82
|
+
firstname: 'Initial',
|
|
83
|
+
lastname: 'Initial',
|
|
84
|
+
});
|
|
85
|
+
expect(result.current.isLoading).toBe(false);
|
|
86
|
+
});
|
|
87
|
+
const updatedProperties = { firstname: 'Updated', lastname: 'Updated' };
|
|
88
|
+
await waitFor(() => {
|
|
89
|
+
if (capturedCallback) {
|
|
90
|
+
capturedCallback(updatedProperties);
|
|
91
|
+
expect(result.current.properties).toEqual(updatedProperties);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
});
|
|
71
95
|
});
|
package/dist/coreComponents.d.ts
CHANGED
|
@@ -733,7 +733,7 @@ export declare const LineChart: "LineChart" & {
|
|
|
733
733
|
*
|
|
734
734
|
* **Links:**
|
|
735
735
|
* - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
|
|
736
|
-
* - {@link https://github.com/
|
|
736
|
+
* - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
|
|
737
737
|
*/
|
|
738
738
|
export declare const Tabs: "Tabs" & {
|
|
739
739
|
readonly type?: "Tabs" | undefined;
|
|
@@ -752,7 +752,7 @@ export declare const Tabs: "Tabs" & {
|
|
|
752
752
|
*
|
|
753
753
|
* **Links:**
|
|
754
754
|
* - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
|
|
755
|
-
* - {@link https://github.com/
|
|
755
|
+
* - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
|
|
756
756
|
*/
|
|
757
757
|
export declare const Tab: "Tab" & {
|
|
758
758
|
readonly type?: "Tab" | undefined;
|
package/dist/coreComponents.js
CHANGED
|
@@ -493,7 +493,7 @@ export const LineChart = createRemoteReactComponent('LineChart');
|
|
|
493
493
|
*
|
|
494
494
|
* **Links:**
|
|
495
495
|
* - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
|
|
496
|
-
* - {@link https://github.com/
|
|
496
|
+
* - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
|
|
497
497
|
*/
|
|
498
498
|
export const Tabs = createRemoteReactComponent('Tabs');
|
|
499
499
|
/**
|
|
@@ -508,7 +508,7 @@ export const Tabs = createRemoteReactComponent('Tabs');
|
|
|
508
508
|
*
|
|
509
509
|
* **Links:**
|
|
510
510
|
* - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
|
|
511
|
-
* - {@link https://github.com/
|
|
511
|
+
* - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
|
|
512
512
|
*/
|
|
513
513
|
export const Tab = createRemoteReactComponent('Tab');
|
|
514
514
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export type CrmPropertiesResponse = {
|
|
2
2
|
[key: string]: string;
|
|
3
3
|
};
|
|
4
|
-
export declare const fetchCrmProperties: (propertyNames: string[]) => Promise<Record<string, string>>;
|
|
4
|
+
export declare const fetchCrmProperties: (propertyNames: string[], propertiesUpdatedCallback: (properties: Record<string, string>) => void) => Promise<Record<string, string>>;
|
|
@@ -10,10 +10,10 @@ function isCrmPropertiesResponse(data) {
|
|
|
10
10
|
}
|
|
11
11
|
return true;
|
|
12
12
|
}
|
|
13
|
-
export const fetchCrmProperties = async (propertyNames) => {
|
|
13
|
+
export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback) => {
|
|
14
14
|
try {
|
|
15
15
|
// eslint-disable-next-line hubspot-dev/no-confusing-browser-globals
|
|
16
|
-
const response = await self.fetchCrmProperties(propertyNames);
|
|
16
|
+
const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
|
|
17
17
|
if (!response.ok) {
|
|
18
18
|
throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
|
|
19
19
|
}
|
|
@@ -14,11 +14,14 @@ export function useCrmProperties(propertyNames) {
|
|
|
14
14
|
useEffect(() => {
|
|
15
15
|
logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
|
|
16
16
|
}, []);
|
|
17
|
+
const propertiesUpdatedCallback = (newProperties) => {
|
|
18
|
+
setProperties(newProperties);
|
|
19
|
+
};
|
|
17
20
|
// Fetch the properties
|
|
18
21
|
useEffect(() => {
|
|
19
22
|
(async () => {
|
|
20
23
|
try {
|
|
21
|
-
const propertyData = await fetchCrmProperties(propertyNames);
|
|
24
|
+
const propertyData = await fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
|
|
22
25
|
setProperties(propertyData);
|
|
23
26
|
setError(null);
|
|
24
27
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -227,6 +227,10 @@ export interface CrmHostActions {
|
|
|
227
227
|
onCrmPropertiesUpdate: onCrmPropertiesUpdateAction;
|
|
228
228
|
}
|
|
229
229
|
/** @ignore */
|
|
230
|
+
export interface SettingsActions {
|
|
231
|
+
addAlert: AddAlertAction;
|
|
232
|
+
}
|
|
233
|
+
/** @ignore */
|
|
230
234
|
export interface UiePlatformActions {
|
|
231
235
|
copyTextToClipboard: Clipboard['writeText'];
|
|
232
236
|
closeOverlay: CloseOverlayAction;
|
|
@@ -1345,7 +1349,7 @@ export interface ListProps {
|
|
|
1345
1349
|
*/
|
|
1346
1350
|
export interface LoadingSpinnerProps {
|
|
1347
1351
|
/**
|
|
1348
|
-
* The text that displays next to the spinner.
|
|
1352
|
+
* The text that displays next to the spinner. Note: the label is not shown by default, you must set `showLabel` to `true` to display the label.
|
|
1349
1353
|
*
|
|
1350
1354
|
*/
|
|
1351
1355
|
label: string;
|
|
@@ -2045,6 +2049,18 @@ export interface TextFormatOptions {
|
|
|
2045
2049
|
* @defaultValue `"none"`
|
|
2046
2050
|
*/
|
|
2047
2051
|
lineDecoration?: 'none' | 'underline' | 'strikethrough';
|
|
2052
|
+
/**
|
|
2053
|
+
* Controls the capitalization of text.
|
|
2054
|
+
*
|
|
2055
|
+
* - `none`: No capitalization changes (default)
|
|
2056
|
+
* - `uppercase`: Transforms all characters to uppercase
|
|
2057
|
+
* - `lowercase`: Transforms all characters to lowercase
|
|
2058
|
+
* - `capitalize`: Capitalizes the first letter of each word
|
|
2059
|
+
* - `sentenceCase`: Capitalizes the first letter of the text and makes the rest lowercase
|
|
2060
|
+
*
|
|
2061
|
+
* @defaultValue `"none"`
|
|
2062
|
+
*/
|
|
2063
|
+
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'sentenceCase';
|
|
2048
2064
|
}
|
|
2049
2065
|
export interface TruncateOptions {
|
|
2050
2066
|
maxWidth?: number;
|
|
@@ -2750,7 +2766,7 @@ export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
|
|
|
2750
2766
|
}
|
|
2751
2767
|
/** @ignore */
|
|
2752
2768
|
export interface SettingsExtensionPoint extends ExtensionPointContract {
|
|
2753
|
-
actions: UiePlatformActions;
|
|
2769
|
+
actions: SettingsActions & UiePlatformActions;
|
|
2754
2770
|
context: SettingsContext;
|
|
2755
2771
|
}
|
|
2756
2772
|
export interface ExampleCrmComponentProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hubspot/ui-extensions",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.54",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"ts-jest": "^29.1.1",
|
|
67
67
|
"typescript": "5.0.4"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "d9ff369b4ca03d353dfea5ef566a8d88bdcbeadb"
|
|
70
70
|
}
|