Show dialog errors at the top of the dialogs

This is a Patternfly design pattern.
cockpit-project · Mar 20, 2023 · f744093 · f744093
1 parent a6e1344
commit f744093
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/src/ContainerCommitModal.jsx b/src/ContainerCommitModal.jsx
@@ -85,6 +85,7 @@ const ContainerCommitModal = ({ container, localImages }) => {
 
     const commitContent = (
         <Form isHorizontal>
+            {dialogError && <ErrorNotification errorMessage={dialogError} errorDetail={dialogErrorDetail} onDismiss={() => setDialogError("")} />}
             <FormGroup fieldId="commit-dialog-image-name" label={_("New image name")}
                        validated={nameError ? "error" : "default"}
                        helperTextInvalid={nameError}>
@@ -135,7 +136,6 @@ const ContainerCommitModal = ({ container, localImages }) => {
                  title={_("Commit container")}
                  description={fmt_to_fragments(_("Create a new image based on the current state of the $0 container."), <b>{container.Names}</b>)}
                  footer={<>
-                     {dialogError && <ErrorNotification errorMessage={dialogError} errorDetail={dialogErrorDetail} onDismiss={() => setDialogError("")} />}
                      <Button variant="primary"
                              className="btn-ctr-commit"
                              isLoading={commitInProgress && !nameError}

diff --git a/src/ImageRunModal.jsx b/src/ImageRunModal.jsx
@@ -677,6 +677,7 @@ export class ImageRunModal extends React.Component {
 
         const defaultBody = (
             <Form>
+                {this.state.dialogError && <ErrorNotification errorMessage={this.state.dialogError} errorDetail={this.state.dialogErrorDetail} />}
                 <FormGroup fieldId='run-image-dialog-name' label={_("Name")} className="ct-m-horizontal">
                     <TextInput id='run-image-dialog-name'
                            className="image-name"
@@ -1030,7 +1031,6 @@ export class ImageRunModal extends React.Component {
                    }}
                    title={this.props.pod ? cockpit.format(_("Create container in $0"), this.props.pod.Name) : _("Create container")}
                    footer={<>
-                       {this.state.dialogError && <ErrorNotification errorMessage={this.state.dialogError} errorDetail={this.state.dialogErrorDetail} />}
                        <Button variant='primary' id="create-image-create-run-btn" onClick={() => this.onCreateClicked(true)} isDisabled={!image && selectedImage === ""}>
                            {_("Create and run")}
                        </Button>

diff --git a/src/ImageSearchModal.jsx b/src/ImageSearchModal.jsx
@@ -157,6 +157,7 @@ export class ImageSearchModal extends React.Component {
         const defaultBody = (
             <>
                 <Form isHorizontal>
+                    {this.state.dialogError && <ErrorNotification errorMessage={this.state.dialogError} errorDetail={this.state.dialogErrorDetail} />}
                     { this.props.userServiceAvailable && this.props.systemServiceAvailable &&
                     <FormGroup id="as-user" label={_("Owner")} isInline>
                         <Radio name="user" value="system" id="system" onChange={this.onToggleUser} isChecked={this.state.isSystem} label={_("system")} />
@@ -226,7 +227,6 @@ export class ImageSearchModal extends React.Component {
                    onClose={Dialogs.close}
                    title={_("Search for an image")}
                    footer={<>
-                       {this.state.dialogError && <ErrorNotification errorMessage={this.state.dialogError} errorDetail={this.state.dialogErrorDetail} />}
                        <Form isHorizontal className="image-search-tag-form">
                            <FormGroup fieldId="image-search-tag" label={_("Tag")}>
                                <TextInput className="image-tag-entry"

diff --git a/src/PodCreateModal.jsx b/src/PodCreateModal.jsx
@@ -91,6 +91,7 @@ export const PodCreateModal = ({ user, selinuxAvailable, systemServiceAvailable,
 
     const defaultBody = (
         <Form>
+            {dialogError && <ErrorNotification errorMessage={dialogError} errorDetail={dialogErrorDetail} />}
             <FormGroup fieldId='create-pod-dialog-name' label={_("Name")} className="ct-m-horizontal"
                     validated={nameError ? "error" : "default"}
                     helperTextInvalid={nameError}>
@@ -147,7 +148,6 @@ export const PodCreateModal = ({ user, selinuxAvailable, systemServiceAvailable,
                 onEscapePress={Dialogs.close}
                 title={_("Create pod")}
                 footer={<>
-                    {dialogError && <ErrorNotification errorMessage={dialogError} errorDetail={dialogErrorDetail} />}
                     <Button variant='primary' id="create-pod-create-btn" onClick={() => onCreateClicked()}
                             isDisabled={nameError}>
                         {_("Create")}