fix(ui): Unscrollable error message when saving YAML (argoproj#4152) (a…

…rgoproj#4195) Co-authored-by: Michael Crenshaw <[email protected]>
tkasuz · Apr 29, 2022 · 40a4061 · 40a4061
1 parent 1533698
commit 40a4061
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/ui/src/app/shared/components/yaml-editor/yaml-editor.scss b/ui/src/app/shared/components/yaml-editor/yaml-editor.scss
@@ -1,6 +1,14 @@
 .yaml-editor {
     position: relative;
 
+    &__error {
+        display: block;
+        word-wrap: break-word;
+        width: 290px;
+        overflow-y: scroll;
+        max-height: 500px;
+    }
+
     &__buttons {
         position: absolute;
         right: 1em;

diff --git a/ui/src/app/shared/components/yaml-editor/yaml-editor.tsx b/ui/src/app/shared/components/yaml-editor/yaml-editor.tsx
@@ -46,13 +46,24 @@ export class YamlEditor<T> extends React.Component<
                                                 try {
                                                     const updated = jsYaml.load(this.model.getLinesContent().join('\n'));
                                                     const patch = jsonMergePatch.generate(props.input, updated);
-                                                    const unmounted = await this.props.onSave(JSON.stringify(patch || {}), 'application/merge-patch+json');
-                                                    if (unmounted !== true) {
-                                                        this.setState({editing: false});
+                                                    try {
+                                                        const unmounted = await this.props.onSave(JSON.stringify(patch || {}), 'application/merge-patch+json');
+                                                        if (unmounted !== true) {
+                                                            this.setState({editing: false});
+                                                        }
+                                                    } catch (e) {
+                                                        ctx.notifications.show({
+                                                            content: (
+                                                                <div className='yaml-editor__error'>
+                                                                    <ErrorNotification title='Unable to save changes' e={e} />
+                                                                </div>
+                                                            ),
+                                                            type: NotificationType.Error
+                                                        });
                                                     }
                                                 } catch (e) {
                                                     ctx.notifications.show({
-                                                        content: <ErrorNotification title='Unable to save changes' e={e} />,
+                                                        content: <ErrorNotification title='Unable to validate changes' e={e} />,
                                                         type: NotificationType.Error
                                                     });
                                                 }