Skip to content

Commit 9a9fb94

Browse files
kagora-akamaikagora-akamai
authored
change: [DPS-42071] - Improve errors handling in stream and destination form (#13552)
1 parent de5e148 commit 9a9fb94

8 files changed

Lines changed: 79 additions & 39 deletions

File tree

‎packages/manager/.changeset/pr-13552-changed-1775047281616.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Changed
3+
---
4+
5+
Use API error message in Stream and Destination Create and Edit forms snack bars ([#13552](https://github.com/linode/manager/pull/13552))

‎packages/manager/cypress/e2e/core/delivery/create-destination.spec.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
CREATE_DESTINATION_ERROR_MESSAGE,
23
mockAkamaiObjectStorageDestination,
34
mockAkamaiObjectStorageDestinationPayload,
45
mockCustomHttpsDestination,
@@ -78,13 +79,16 @@ describe('Create Destination', () => {
7879
);
7980

8081
// Submit the destination create form - failure
81-
mockCreateDestination({}, 400);
82+
mockCreateDestination(
83+
{ errors: [{ reason: CREATE_DESTINATION_ERROR_MESSAGE }] },
84+
500
85+
);
8286
cy.findByRole('button', { name: 'Create Destination' })
8387
.should('be.enabled')
8488
.should('have.attr', 'type', 'button')
8589
.click();
8690

87-
ui.toast.assertMessage(`There was an issue creating your destination`);
91+
ui.toast.assertMessage(CREATE_DESTINATION_ERROR_MESSAGE);
8892

8993
// Submit the destination create form - success
9094
mockCreateDestination(mockAkamaiObjectStorageDestination);
@@ -223,13 +227,16 @@ describe('Create Destination', () => {
223227
);
224228

225229
// Submit the destination create form - failure
226-
mockCreateDestination({}, 400);
230+
mockCreateDestination(
231+
{ errors: [{ reason: CREATE_DESTINATION_ERROR_MESSAGE }] },
232+
500
233+
);
227234
cy.findByRole('button', { name: 'Create Destination' })
228235
.should('be.enabled')
229236
.should('have.attr', 'type', 'button')
230237
.click();
231238

232-
ui.toast.assertMessage(`There was an issue creating your destination`);
239+
ui.toast.assertMessage(CREATE_DESTINATION_ERROR_MESSAGE);
233240

234241
// Submit the destination create form - success
235242
mockCreateDestination(mockCustomHttpsDestination);

‎packages/manager/cypress/e2e/core/delivery/create-stream.spec.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { streamType } from '@linode/api-v4';
22
import { regionFactory } from '@linode/utilities';
33
import {
4+
CREATE_DESTINATION_ERROR_MESSAGE,
5+
CREATE_STREAM_ERROR_MESSAGE,
46
mockAkamaiObjectStorageDestination,
57
mockCustomHttpsDestination,
68
} from 'support/constants/delivery';
@@ -19,6 +21,7 @@ import { logsDestinationForm } from 'support/ui/pages/logs-destination-form';
1921
import { logsStreamForm } from 'support/ui/pages/logs-stream-form';
2022
import { randomLabel } from 'support/util/random';
2123

24+
import { DEFAULT_ERROR_MESSAGE } from 'src/constants';
2225
import { accountFactory, kubernetesClusterFactory } from 'src/factories';
2326

2427
describe('Create Stream', () => {
@@ -107,7 +110,7 @@ describe('Create Stream', () => {
107110
.should('have.attr', 'type', 'button')
108111
.click();
109112

110-
ui.toast.assertMessage(`There was an issue creating your destination`);
113+
ui.toast.assertMessage(DEFAULT_ERROR_MESSAGE);
111114

112115
// Submit the stream create form - success
113116
mockCreateDestination(mockAkamaiObjectStorageDestination);
@@ -167,7 +170,7 @@ describe('Create Stream', () => {
167170

168171
cy.findByRole('button', { name: 'Create Stream' }).click();
169172
cy.wait('@createStreamFail');
170-
ui.toast.assertMessage('There was an issue creating your stream');
173+
ui.toast.assertMessage(DEFAULT_ERROR_MESSAGE);
171174

172175
// Submit the stream create form - success
173176
mockCreateStream({ label: streamName }).as('createStream');
@@ -248,13 +251,16 @@ describe('Create Stream', () => {
248251
.should('have.attr', 'type', 'button');
249252

250253
// Submit the stream create form - failure in creating destination
251-
mockCreateDestination({}, 400);
254+
mockCreateDestination(
255+
{ errors: [{ reason: CREATE_DESTINATION_ERROR_MESSAGE }] },
256+
500
257+
);
252258
cy.findByRole('button', { name: 'Create Stream' })
253259
.should('be.enabled')
254260
.should('have.attr', 'type', 'button')
255261
.click();
256262

257-
ui.toast.assertMessage(`There was an issue creating your destination`);
263+
ui.toast.assertMessage(CREATE_DESTINATION_ERROR_MESSAGE);
258264

259265
// Submit the stream create form - success
260266
mockCreateDestination(mockCustomHttpsDestination);
@@ -313,11 +319,14 @@ describe('Create Stream', () => {
313319
.should('have.attr', 'type', 'button');
314320

315321
// Submit the stream create form - failure
316-
mockCreateStream({}, 400).as('createStreamFail');
322+
mockCreateStream(
323+
{ errors: [{ reason: CREATE_STREAM_ERROR_MESSAGE }] },
324+
400
325+
).as('createStreamFail');
317326

318327
cy.findByRole('button', { name: 'Create Stream' }).click();
319328
cy.wait('@createStreamFail');
320-
ui.toast.assertMessage('There was an issue creating your stream');
329+
ui.toast.assertMessage(CREATE_STREAM_ERROR_MESSAGE);
321330

322331
// Submit the stream create form - success
323332
mockCreateStream({ label: streamName }).as('createStream');

‎packages/manager/cypress/e2e/core/delivery/edit-stream.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ui } from 'support/ui';
2121
import { logsStreamForm } from 'support/ui/pages/logs-stream-form';
2222
import { randomLabel } from 'support/util/random';
2323

24+
import { DEFAULT_ERROR_MESSAGE } from 'src/constants';
2425
import { kubernetesClusterFactory } from 'src/factories';
2526

2627
describe('Edit Stream', () => {
@@ -114,7 +115,7 @@ describe('Edit Stream', () => {
114115
mockCreateDestination({}, 400);
115116
ui.button.findByTitle(saveChangesButtonText).should('be.enabled').click();
116117

117-
ui.toast.assertMessage(`There was an issue creating your destination`);
118+
ui.toast.assertMessage(DEFAULT_ERROR_MESSAGE);
118119

119120
// Submit the stream edit form - success
120121
mockCreateDestination(mockAkamaiObjectStorageDestination);
@@ -309,7 +310,7 @@ describe('Edit Stream', () => {
309310

310311
ui.button.findByTitle(saveChangesButtonText).click();
311312
cy.wait('@updateStreamFail');
312-
ui.toast.assertMessage('There was an issue editing your stream');
313+
ui.toast.assertMessage(DEFAULT_ERROR_MESSAGE);
313314

314315
// Submit the stream edit form - success
315316
mockUpdateStream(

‎packages/manager/cypress/support/constants/delivery.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,9 @@ export const mockLKEAuditLogsStream: Stream = streamFactory.build({
114114
destinations: [mockAkamaiObjectStorageDestination],
115115
version: '1.0',
116116
});
117+
118+
export const CREATE_DESTINATION_ERROR_MESSAGE =
119+
'Cannot create destination at this time.';
120+
121+
export const CREATE_STREAM_ERROR_MESSAGE =
122+
'You\u2019ve reached the limit of streams you can create. If you have any questions, please contact support.';

‎packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationCreate.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,17 @@ export const DestinationCreate = () => {
6969
);
7070
})
7171
.catch((errors) => {
72+
let errorMessage = `There was an issue creating your destination`;
7273
for (const error of errors) {
7374
if (error.field) {
7475
form.setError(error.field, { message: error.reason });
7576
} else {
77+
errorMessage = error.reason;
7678
form.setError('root', { message: error.reason });
7779
}
7880
}
7981

80-
return enqueueSnackbar('There was an issue creating your destination', {
82+
return enqueueSnackbar(errorMessage, {
8183
variant: 'error',
8284
});
8385
});

‎packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationEdit.tsx‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -112,30 +112,39 @@ export const DestinationEdit = () => {
112112
});
113113
};
114114

115+
if (isLoading) {
116+
return (
117+
<Box display="flex" justifyContent="center">
118+
<CircleProgress size="md" />
119+
</Box>
120+
);
121+
}
122+
123+
if (error) {
124+
return (
125+
<ErrorState
126+
compact
127+
errorText={
128+
getAPIErrorOrDefault(
129+
error,
130+
'There was an error retrieving destination. Please reload and try again.'
131+
)[0].reason
132+
}
133+
/>
134+
);
135+
}
136+
115137
return (
116138
<>
117139
<DocumentTitleSegment segment="Edit Destination" />
118140
<LandingHeader {...landingHeaderProps} />
119-
{isLoading && (
120-
<Box display="flex" justifyContent="center">
121-
<CircleProgress size="md" />
122-
</Box>
123-
)}
124-
{error && (
125-
<ErrorState
126-
compact
127-
errorText="There was an error retrieving destination. Please reload and try again."
141+
<FormProvider {...form}>
142+
<DestinationForm
143+
isSubmitting={isUpdatingDestination}
144+
mode="edit"
145+
onSubmit={onSubmit}
128146
/>
129-
)}
130-
{!isLoading && !error && (
131-
<FormProvider {...form}>
132-
<DestinationForm
133-
isSubmitting={isUpdatingDestination}
134-
mode="edit"
135-
onSubmit={onSubmit}
136-
/>
137-
</FormProvider>
138-
)}
147+
</FormProvider>
139148
</>
140149
);
141150
};

‎packages/manager/src/features/Delivery/Streams/StreamForm/StreamForm.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -119,15 +119,17 @@ export const StreamForm = (props: StreamFormProps) => {
119119
);
120120
form.setValue('stream.destinations', [id]);
121121
} catch (errors) {
122+
let errorMessage = `There was an issue creating your destination`;
122123
for (const error of errors) {
123124
if (error.field) {
124125
form.setError(error.field, { message: error.reason });
125126
} else {
127+
errorMessage = error.reason;
126128
form.setError('root', { message: error.reason });
127129
}
128130
}
129131

130-
enqueueSnackbar('There was an issue creating your destination', {
132+
enqueueSnackbar(errorMessage, {
131133
variant: 'error',
132134
});
133135
return;
@@ -166,20 +168,19 @@ export const StreamForm = (props: StreamFormProps) => {
166168

167169
navigate({ to: '/logs/delivery/streams' });
168170
} catch (errors) {
171+
let errorMessage = `There was an issue ${mode === 'create' ? 'creating' : 'editing'} your stream`;
169172
for (const error of errors) {
170173
if (error.field) {
171174
form.setError(error.field, { message: error.reason });
172175
} else {
176+
errorMessage = error.reason;
173177
form.setError('root', { message: error.reason });
174178
}
175179
}
176180

177-
enqueueSnackbar(
178-
`There was an issue ${mode === 'create' ? 'creating' : 'editing'} your stream`,
179-
{
180-
variant: 'error',
181-
}
182-
);
181+
enqueueSnackbar(errorMessage, {
182+
variant: 'error',
183+
});
183184
}
184185
};
185186

0 commit comments

Comments
 (0)