CONSOLE-4447: Additional modals switched to use ModalFooterWithAlerts for consistency

frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx

@@ -1,25 +1,17 @@
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
-import {
-  Alert,
-  AlertVariant,
-  Modal,
-  Button,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from '@patternfly/react-core';
+import { Alert, AlertVariant, Modal, Button, ModalBody, ModalHeader } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { ListInput } from '@console/internal/components/utils/list-input';
 import { GroupModel } from '@console/internal/models';
 import type { GroupKind } from '@console/internal/module/k8s';
-import type { ModalComponentProps } from '@console/shared/src/types/modal';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 type AddGroupUsersModalProps = {
   group: GroupKind;
-} & ModalComponentProps;
+};
 
 const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group, closeOverlay }) => {
   const { t } = useTranslation();
@@ -77,20 +69,10 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
               initialValues={values}
               onChange={setValues}
             />
-            {errorMessage && (
-              <Alert
-                isInline
-                className="pf-v6-u-mt-md"
-                variant={AlertVariant.danger}
-                title={t('public~Error occurred')}
-              >
-                {errorMessage}
-              </Alert>
-            )}
           </>
         )}
       </ModalBody>
-      <ModalFooter>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
         <Button
           type="submit"
           variant="primary"
@@ -103,7 +85,7 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         <Button variant="link" onClick={closeOverlay} type="button">
           {t('public~Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };

frontend/packages/console-shared/src/components/modals/TextInputModal.tsx

@@ -1,7 +1,6 @@
 import { useState, useCallback } from 'react';
 import {
   Button,
-  Alert,
   TextInput,
   FormGroup,
   FormHelperText,
@@ -10,12 +9,12 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter,
   Form,
 } from '@patternfly/react-core';
 import type { TextInputProps } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import { ModalFooterWithAlerts } from './ModalFooterWithAlerts';
 
 export interface TextInputModalProps {
   title: string;
@@ -97,20 +96,9 @@ export const TextInputModal: OverlayComponent<TextInputModalProps> = ({
               </FormHelperText>
             )}
           </FormGroup>
-          {errorMessage && (
-            <Alert
-              isInline
-              className="co-alert co-alert--scrollable"
-              variant="danger"
-              title={t('console-shared~An error occurred')}
-              data-test="alert-error"
-            >
-              <div className="co-pre-line">{errorMessage}</div>
-            </Alert>
-          )}
         </Form>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
         <Button
           key="confirm-action"
           type="submit"
@@ -125,13 +113,13 @@ export const TextInputModal: OverlayComponent<TextInputModalProps> = ({
         <Button
           key="cancel-action"
           type="button"
-          variant="secondary"
+          variant="link"
           onClick={closeOverlay}
           data-test-id="modal-cancel-action"
         >
           {cancelButtonText || t('console-shared~Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };

frontend/packages/operator-lifecycle-manager-v1/locales/en/olm-v1.json

@@ -47,7 +47,6 @@
   "Create a ClusterExtension to add functionality to your cluster. Operator Lifecycle Manager v1 manages ClusterExtensions.": "Create a ClusterExtension to add functionality to your cluster. Operator Lifecycle Manager v1 manages ClusterExtensions.",
   "An error occurred. Please try again.": "An error occurred. Please try again.",
   "Create ServiceAccount": "Create ServiceAccount",
-  "An error occurred": "An error occurred",
   "Operator Lifecycle Management version 1": "Operator Lifecycle Management version 1",
   "Learn more about OLMv1": "Learn more about OLMv1",
   "With OLMv1, you'll get a much simpler API that's easier to work with and understand. Plus, you have more direct control over updates. You can define update ranges and decide exactly how they are rolled out.": "With OLMv1, you'll get a much simpler API that's easier to work with and understand. Plus, you have more direct control over updates. You can define update ranges and decide exactly how they are rolled out.",

frontend/packages/operator-lifecycle-manager-v1/src/components/cluster-extension/CreateServiceAccountModal.tsx

@@ -1,21 +1,19 @@
 import { useState } from 'react';
 import {
   Button,
-  Alert,
   Form,
   FormGroup,
   TextInput,
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import type { K8sResourceCommon } from '@console/dynamic-plugin-sdk/src';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sCreateResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
-import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { ServiceAccountModel } from '@console/internal/models';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export interface CreateServiceAccountModalProps {
   namespace: string;
@@ -109,25 +107,15 @@ export const CreateServiceAccountModal: OverlayComponent<CreateServiceAccountMod
               type="text"
             />
           </FormGroup>
-          {errorMessage && (
-            <Alert
-              isInline
-              className="co-alert co-alert--scrollable"
-              variant="danger"
-              title={t('olm-v1~An error occurred')}
-              data-test="alert-error"
-            >
-              <div className="co-pre-line">{errorMessage}</div>
-            </Alert>
-          )}
         </Form>
       </ModalBody>
-      <ModalFooter>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
         <Button
           key="confirm-action"
           type="submit"
           variant="primary"
-          disabled={inProgress || !name}
+          isLoading={inProgress}
+          isDisabled={inProgress || !name}
           onClick={submit}
           data-test="confirm-action"
           id="confirm-action"
@@ -137,15 +125,14 @@ export const CreateServiceAccountModal: OverlayComponent<CreateServiceAccountMod
         <Button
           key="cancel-action"
           type="button"
-          variant="secondary"
-          disabled={inProgress}
+          variant="link"
+          isDisabled={inProgress}
           onClick={closeOverlay}
           data-test-id="modal-cancel-action"
         >
           {t('olm-v1~Cancel')}
         </Button>
-        {inProgress && <LoadingInline />}
-      </ModalFooter>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };

frontend/public/components/modals/delete-namespace-modal.tsx

@@ -20,12 +20,11 @@ import {
   ModalHeader,
   ModalVariant,
   ModalBody,
-  ModalFooter,
   Content,
   ContentVariants,
 } from '@patternfly/react-core';
 import { OverlayComponent, useOverlay } from '@console/dynamic-plugin-sdk/src/lib-core';
-import { ErrorMessage } from '../utils/button-bar';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export const DeleteNamespaceModal: OverlayComponent<DeleteNamespaceModalProps> = ({
   kind,
@@ -108,8 +107,7 @@ export const DeleteNamespaceModal: OverlayComponent<DeleteNamespaceModalProps> =
           />
         </span>
       </ModalBody>
-      <ModalFooter>
-        {errorMessage && <ErrorMessage message={errorMessage} />}
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
         <Button
           type="submit"
           variant="danger"
@@ -123,7 +121,7 @@ export const DeleteNamespaceModal: OverlayComponent<DeleteNamespaceModalProps> =
         <Button variant="link" onClick={closeOverlay} data-test-id="modal-cancel-action">
           {t('public~Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };