@wix/auto-patterns 1.33.0 → 1.35.0
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/docs/GETTING_STARTED.md +98 -0
- package/docs/OVERVIEW.md +54 -0
- package/docs/documentation.yaml +11 -0
- package/{dist/docs → mcp-docs}/action_cell.md +50 -2
- package/{dist/docs → mcp-docs}/auto-patterns-guide.md +610 -39
- package/{dist/docs → mcp-docs}/bulk_actions.md +78 -22
- package/{dist/docs → mcp-docs}/collection_page_actions.md +56 -2
- package/{dist/docs → mcp-docs}/custom_overrides.md +1 -0
- package/{dist/docs → mcp-docs}/entity_page_actions.md +78 -1
- package/{dist/docs → mcp-docs}/entity_page_view_actions.md +2 -0
- package/mcp-docs/error_handling.md +470 -0
- package/package.json +14 -15
- package/dist/docs/error_handling.md +0 -135
- /package/{dist/docs → mcp-docs}/app_config_structure.md +0 -0
- /package/{dist/docs → mcp-docs}/app_context.md +0 -0
- /package/{dist/docs → mcp-docs}/collection_page.md +0 -0
- /package/{dist/docs → mcp-docs}/entity_page.md +0 -0
- /package/{dist/docs → mcp-docs}/index.md +0 -0
- /package/{dist/docs → mcp-docs}/installation.md +0 -0
- /package/{dist/docs → mcp-docs}/introduction.md +0 -0
- /package/{dist/docs → mcp-docs}/pages_configuration.md +0 -0
- /package/{dist/docs → mcp-docs}/resolved_action.md +0 -0
- /package/{dist/docs → mcp-docs}/schema_config.md +0 -0
- /package/{dist/docs → mcp-docs}/sdk_utilities.md +0 -0
- /package/{dist/docs → mcp-docs}/wix_fqdn_custom_data_source.md +0 -0
|
@@ -64,7 +64,12 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
|
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
2. Create your bulk action handler in `bulkExportPets.tsx`:
|
|
67
|
+
|
|
68
|
+
**⚠️ CRITICAL: Before implementing, read the "Error Handling for HTTP Requests" section to understand when to use `errorHandler.withErrorHandler`.**
|
|
69
|
+
|
|
70
|
+
**Example 1: Bulk action with Wix API call (REQUIRES errorHandler)**
|
|
67
71
|
```typescript
|
|
72
|
+
import { errorHandler } from '@wix/essentials';
|
|
68
73
|
import { CustomBulkActionsActionResolver } from '@wix/auto-patterns';
|
|
69
74
|
import { Download } from '@wix/wix-ui-icons-common';
|
|
70
75
|
import React from 'react';
|
|
@@ -78,43 +83,92 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
|
|
|
78
83
|
label: 'Export Selected',
|
|
79
84
|
icon: <Download />,
|
|
80
85
|
onClick: () => {
|
|
81
|
-
//
|
|
86
|
+
// ✅ CORRECT: Wix API call wrapped with errorHandler
|
|
87
|
+
errorHandler.withErrorHandler(
|
|
88
|
+
async () => {
|
|
89
|
+
const response = await httpClient.request(
|
|
90
|
+
bulkExportPetsData({
|
|
91
|
+
petIds: selectedValues.map(pet => pet.id),
|
|
92
|
+
totalCount: total
|
|
93
|
+
})
|
|
94
|
+
);
|
|
95
|
+
return response.data;
|
|
96
|
+
},
|
|
97
|
+
{}
|
|
98
|
+
);
|
|
99
|
+
},
|
|
100
|
+
biName: 'bulk-export-pets-action' // MANDATORY: For analytics tracking
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
**Example 2: Bulk action with External API call (NO errorHandler needed)**
|
|
106
|
+
```typescript
|
|
107
|
+
import { CustomBulkActionsActionResolver } from '@wix/auto-patterns';
|
|
108
|
+
import { Download } from '@wix/wix-ui-icons-common';
|
|
109
|
+
import React from 'react';
|
|
110
|
+
|
|
111
|
+
export const bulkExportPets: CustomBulkActionsActionResolver = (params) => {
|
|
112
|
+
const { actionParams, sdk } = params;
|
|
113
|
+
const { selectedValues, total } = actionParams;
|
|
114
|
+
|
|
115
|
+
return {
|
|
116
|
+
label: 'Export Selected',
|
|
117
|
+
icon: <Download />,
|
|
118
|
+
onClick: () => {
|
|
119
|
+
// ✅ CORRECT: External API call - NO errorHandler needed
|
|
120
|
+
const exportData = selectedValues.map(pet => ({
|
|
121
|
+
name: pet.name,
|
|
122
|
+
age: pet.age,
|
|
123
|
+
owner: pet.owner
|
|
124
|
+
}));
|
|
125
|
+
|
|
126
|
+
// Create and download CSV
|
|
127
|
+
const csv = exportData.map(row => Object.values(row).join(',')).join('\n');
|
|
128
|
+
const blob = new Blob([csv], { type: 'text/csv' });
|
|
129
|
+
const url = URL.createObjectURL(blob);
|
|
130
|
+
const a = document.createElement('a');
|
|
131
|
+
a.href = url;
|
|
132
|
+
a.download = 'pets-export.csv';
|
|
133
|
+
a.click();
|
|
134
|
+
},
|
|
135
|
+
biName: 'bulk-export-pets-action' // MANDATORY: For analytics tracking
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
**Example 3: Bulk action using SDK methods (NO errorHandler needed)**
|
|
141
|
+
```typescript
|
|
142
|
+
import { CustomBulkActionsActionResolver } from '@wix/auto-patterns';
|
|
143
|
+
import { Download } from '@wix/wix-ui-icons-common';
|
|
144
|
+
import React from 'react';
|
|
145
|
+
|
|
146
|
+
export const bulkExportPets: CustomBulkActionsActionResolver = (params) => {
|
|
147
|
+
const { actionParams, sdk } = params;
|
|
148
|
+
const { selectedValues, total } = actionParams;
|
|
149
|
+
|
|
150
|
+
return {
|
|
151
|
+
label: 'Export Selected',
|
|
152
|
+
icon: <Download />,
|
|
153
|
+
onClick: () => {
|
|
154
|
+
// ✅ CORRECT: SDK methods - NO errorHandler needed
|
|
82
155
|
const optimisticActions = sdk.getOptimisticActions(sdk.collectionId);
|
|
83
156
|
const schema = sdk.getSchema(sdk.collectionId);
|
|
84
157
|
|
|
85
|
-
// Example: Mark pets as exported
|
|
86
158
|
const updatedItems = selectedValues.map(item => ({
|
|
87
159
|
...item,
|
|
88
160
|
lastExported: new Date()
|
|
89
161
|
}));
|
|
90
162
|
optimisticActions.updateMany(updatedItems, {
|
|
91
163
|
submit: async (items) => {
|
|
92
|
-
// Your export logic here + update server
|
|
93
|
-
const exportData = items.map(pet => ({
|
|
94
|
-
name: pet.name,
|
|
95
|
-
age: pet.age,
|
|
96
|
-
owner: pet.owner
|
|
97
|
-
}));
|
|
98
|
-
|
|
99
|
-
// Create and download CSV
|
|
100
|
-
const csv = exportData.map(row => Object.values(row).join(',')).join('\n');
|
|
101
|
-
const blob = new Blob([csv], { type: 'text/csv' });
|
|
102
|
-
const url = URL.createObjectURL(blob);
|
|
103
|
-
const a = document.createElement('a');
|
|
104
|
-
a.href = url;
|
|
105
|
-
a.download = 'pets-export.csv';
|
|
106
|
-
a.click();
|
|
107
|
-
|
|
108
|
-
// Update server with export timestamp
|
|
109
|
-
// Handle potential undefined schema
|
|
110
164
|
if (schema) {
|
|
111
165
|
return await schema.actions.update(items);
|
|
112
166
|
}
|
|
113
|
-
return items;
|
|
167
|
+
return items;
|
|
114
168
|
},
|
|
115
169
|
successToast: `${selectedValues.length} pets exported`,
|
|
116
170
|
errorToast: (err, {retry}) => ({
|
|
117
|
-
|
|
171
|
+
text: 'Export failed',
|
|
118
172
|
action: { text: 'Retry', onClick: retry }
|
|
119
173
|
})
|
|
120
174
|
});
|
|
@@ -124,6 +178,8 @@ Custom bulk actions execute JavaScript code that you define for bulk operations.
|
|
|
124
178
|
};
|
|
125
179
|
```
|
|
126
180
|
|
|
181
|
+
**Read the "Error Handling for HTTP Requests" section for complete guidance.**
|
|
182
|
+
|
|
127
183
|
3. Export your action in `actions/index.tsx`:
|
|
128
184
|
```typescript
|
|
129
185
|
import { bulkExportPets } from './bulkExportPets';
|
|
@@ -95,7 +95,7 @@ Custom collection page actions execute JavaScript code that you define for colle
|
|
|
95
95
|
},
|
|
96
96
|
successToast: 'Collection exported successfully',
|
|
97
97
|
errorToast: (err, {retry}) => ({
|
|
98
|
-
|
|
98
|
+
text: 'Export failed',
|
|
99
99
|
action: { text: 'Retry', onClick: retry }
|
|
100
100
|
})
|
|
101
101
|
}
|
|
@@ -105,6 +105,60 @@ Custom collection page actions execute JavaScript code that you define for colle
|
|
|
105
105
|
};
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
+
**⚠️ CRITICAL: Error Handling for HTTP Requests**
|
|
109
|
+
|
|
110
|
+
The example above uses SDK methods which don't require error handling. However, if your custom collection action makes HTTP requests, you MUST follow the error handling patterns:
|
|
111
|
+
|
|
112
|
+
**For Wix HTTP requests (httpClient, wix/data, wix/stores):**
|
|
113
|
+
```typescript
|
|
114
|
+
import { errorHandler } from '@wix/essentials';
|
|
115
|
+
|
|
116
|
+
export const myCollectionAction: CustomActionCollectionPageActionResolver = (params) => {
|
|
117
|
+
const { actionParams, sdk } = params;
|
|
118
|
+
const { collectionId } = actionParams;
|
|
119
|
+
|
|
120
|
+
return {
|
|
121
|
+
label: 'My Collection Action',
|
|
122
|
+
icon: <MyIcon />,
|
|
123
|
+
onClick: () => {
|
|
124
|
+
// ✅ CORRECT: Wix API call wrapped with errorHandler
|
|
125
|
+
errorHandler.withErrorHandler(
|
|
126
|
+
async () => {
|
|
127
|
+
const response = await httpClient.request(
|
|
128
|
+
myWixApiCall({ collectionId })
|
|
129
|
+
);
|
|
130
|
+
return response.data;
|
|
131
|
+
},
|
|
132
|
+
{}
|
|
133
|
+
);
|
|
134
|
+
},
|
|
135
|
+
biName: 'my-collection-action'
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
**For External API requests (fetch, axios, third-party):**
|
|
141
|
+
```typescript
|
|
142
|
+
export const myCollectionAction: CustomActionCollectionPageActionResolver = (params) => {
|
|
143
|
+
const { actionParams, sdk } = params;
|
|
144
|
+
const { collectionId } = actionParams;
|
|
145
|
+
|
|
146
|
+
return {
|
|
147
|
+
label: 'My Collection Action',
|
|
148
|
+
icon: <MyIcon />,
|
|
149
|
+
onClick: () => {
|
|
150
|
+
// ✅ CORRECT: External API call - NO errorHandler needed
|
|
151
|
+
fetch(`https://api.external-service.com/endpoint/${collectionId}`)
|
|
152
|
+
.then(response => response.json())
|
|
153
|
+
.then(data => console.log('External API response:', data));
|
|
154
|
+
},
|
|
155
|
+
biName: 'my-collection-action'
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
**Read the "Error Handling for HTTP Requests" section for complete guidance.**
|
|
161
|
+
|
|
108
162
|
3. Export your action in `actions/index.tsx`:
|
|
109
163
|
```typescript
|
|
110
164
|
import { exportCollection } from './exportCollection';
|
|
@@ -321,7 +375,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
|
|
|
321
375
|
},
|
|
322
376
|
successToast: `${item.name} toggled successfully`,
|
|
323
377
|
errorToast: (err, {retry}) => ({
|
|
324
|
-
|
|
378
|
+
text: 'Toggle failed',
|
|
325
379
|
action: { text: 'Retry', onClick: retry }
|
|
326
380
|
})
|
|
327
381
|
});
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
- **Custom overrides are restricted to the defined areas only** - attempting to override or modify any other aspect of `AutoPatternsApp` is prohibited and can cause unexpected behavior
|
|
6
6
|
- **Always verify override implementation** - when implementing custom overrides, you MUST ensure they are correctly imported and passed to the `AutoPatternsOverridesProvider`
|
|
7
|
+
- **⚠️ CRITICAL: READ ERROR HANDLING DOCUMENTATION FIRST** - Before implementing ANY custom action (ActionCell, BulkActions, CollectionPage actions, EntityPage actions, or Custom Data Sources), you MUST read the "Error Handling for HTTP Requests" section and apply the correct error handling patterns. This is mandatory for all AI agents.
|
|
7
8
|
- **CRITICAL: Error handling for custom actions** - Custom actions that make external API calls (using `fetch()`, `axios`, etc.) should NOT use `errorHandler.withErrorHandler`. Only Wix HTTP requests (httpClient from @wix/essentials, Wix APIs like wix/data and wix/stores, and httpClient.fetchWithAuth()) require errorHandler wrapping. See the "Error Handling for HTTP Requests" section for details.
|
|
8
9
|
|
|
9
10
|
The `AutoPatternsOverridesProvider` allows you to inject custom code to override default behaviors or add additional functionality. Below are the areas where overrides can be applied:
|
|
@@ -50,6 +50,64 @@ The `CustomEntityPageActionResolver` type is used to implement custom actions fo
|
|
|
50
50
|
|
|
51
51
|
#### Function Signature
|
|
52
52
|
|
|
53
|
+
**⚠️ CRITICAL: Before implementing, read the "Error Handling for HTTP Requests" section to understand when to use `errorHandler.withErrorHandler`.**
|
|
54
|
+
|
|
55
|
+
**Example 1: EntityPage action with Wix API call (REQUIRES errorHandler)**
|
|
56
|
+
```typescript
|
|
57
|
+
import { errorHandler } from '@wix/essentials';
|
|
58
|
+
import { CustomEntityPageActionResolver } from '@wix/auto-patterns/types';
|
|
59
|
+
|
|
60
|
+
export const sendEmail: CustomEntityPageActionResolver = (params) => {
|
|
61
|
+
const { actionParams: { entity, form } , sdk } = params;
|
|
62
|
+
|
|
63
|
+
return {
|
|
64
|
+
label: 'Send Email',
|
|
65
|
+
icon: <EmailIcon />, // required
|
|
66
|
+
onClick: () => {
|
|
67
|
+
// ✅ CORRECT: Wix API call wrapped with errorHandler
|
|
68
|
+
errorHandler.withErrorHandler(
|
|
69
|
+
async () => {
|
|
70
|
+
const response = await httpClient.request(
|
|
71
|
+
sendEmailToEntity({ entityId: entity.id, email: entity.email })
|
|
72
|
+
);
|
|
73
|
+
return response.data;
|
|
74
|
+
},
|
|
75
|
+
{}
|
|
76
|
+
);
|
|
77
|
+
},
|
|
78
|
+
biName: 'send-email-action' // MANDATORY: For analytics tracking
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**Example 2: EntityPage action with External API call (NO errorHandler needed)**
|
|
84
|
+
```typescript
|
|
85
|
+
import { CustomEntityPageActionResolver } from '@wix/auto-patterns/types';
|
|
86
|
+
|
|
87
|
+
export const exportData: CustomEntityPageActionResolver = (params) => {
|
|
88
|
+
const { actionParams: { entity, form } , sdk } = params;
|
|
89
|
+
|
|
90
|
+
return {
|
|
91
|
+
label: 'Export Data',
|
|
92
|
+
icon: <ExportIcon />, // required
|
|
93
|
+
onClick: () => {
|
|
94
|
+
// ✅ CORRECT: External API call - NO errorHandler needed
|
|
95
|
+
fetch(`https://api.external-service.com/export/${entity.id}`)
|
|
96
|
+
.then(response => response.blob())
|
|
97
|
+
.then(blob => {
|
|
98
|
+
const url = URL.createObjectURL(blob);
|
|
99
|
+
const a = document.createElement('a');
|
|
100
|
+
a.href = url;
|
|
101
|
+
a.download = `entity-${entity.id}.pdf`;
|
|
102
|
+
a.click();
|
|
103
|
+
});
|
|
104
|
+
},
|
|
105
|
+
biName: 'export-data-action' // MANDATORY: For analytics tracking
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
**Example 3: EntityPage action using SDK methods (NO errorHandler needed)**
|
|
53
111
|
```typescript
|
|
54
112
|
import { CustomEntityPageActionResolver } from '@wix/auto-patterns/types';
|
|
55
113
|
|
|
@@ -60,13 +118,32 @@ export const myMoreAction: CustomEntityPageActionResolver = (params) => {
|
|
|
60
118
|
label: 'My More Action',
|
|
61
119
|
icon: <MyIcon />, // required
|
|
62
120
|
onClick: () => {
|
|
63
|
-
//
|
|
121
|
+
// ✅ CORRECT: SDK methods - NO errorHandler needed
|
|
122
|
+
const optimisticActions = sdk.getOptimisticActions(sdk.collectionId);
|
|
123
|
+
const schema = sdk.getSchema(sdk.collectionId);
|
|
124
|
+
|
|
125
|
+
const updatedEntity = { ...entity, lastAction: new Date() };
|
|
126
|
+
optimisticActions.updateOne(updatedEntity, {
|
|
127
|
+
submit: async (items) => {
|
|
128
|
+
if (schema) {
|
|
129
|
+
return await schema.actions.update(items[0]);
|
|
130
|
+
}
|
|
131
|
+
return items[0];
|
|
132
|
+
},
|
|
133
|
+
successToast: 'Action completed successfully',
|
|
134
|
+
errorToast: (err, {retry}) => ({
|
|
135
|
+
text: 'Action failed',
|
|
136
|
+
action: { text: 'Retry', onClick: retry }
|
|
137
|
+
})
|
|
138
|
+
});
|
|
64
139
|
},
|
|
65
140
|
biName: 'my-more-action' // MANDATORY: For analytics tracking
|
|
66
141
|
};
|
|
67
142
|
};
|
|
68
143
|
```
|
|
69
144
|
|
|
145
|
+
**Read the "Error Handling for HTTP Requests" section for complete guidance.**
|
|
146
|
+
|
|
70
147
|
- **entity**: The current entity data (all field values). In actionParams.
|
|
71
148
|
- **form**: The react-hook-form instance for the entity page. In actionParams.
|
|
72
149
|
- **sdk**: The AutoPatterns SDK (see SDK Utilities section).
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
View mode supports the complete collection-style actions API, providing maximum flexibility for entity operations.
|
|
4
4
|
|
|
5
|
+
**⚠️ CRITICAL: Error Handling for Custom Actions** - When implementing custom actions (type: "custom") in view mode, you MUST read the "Error Handling for HTTP Requests" section and apply the correct error handling patterns. Wix HTTP requests require `errorHandler.withErrorHandler`, while external API calls should NOT use errorHandler.
|
|
6
|
+
|
|
5
7
|
## Supported Action Types
|
|
6
8
|
|
|
7
9
|
### Primary Actions
|