diff --git a/frontend/.eslintrc b/frontend/.eslintrc index 8c3142923f..5120c919b5 100755 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -326,6 +326,10 @@ { "selector": "Literal[value=/\\bOpen Data Hub\\b/i],JSXText[value=/\\bOpen Data Hub\\b/i]", "message": "Do not hard code product name `Open Data Hub`. Use `~/utilities/const#ODH_PRODUCT_NAME` instead." + }, + { + "selector": "JSXElement[openingElement.name.name=/Modal/]:has(> JSXOpeningElement:has(> [name.name=/(isOpen|open)/][value]))", + "message": "Do not control modals visibility with 'isOpen|open', use conditional rendering instead." } ] } diff --git a/frontend/src/app/DevFeatureFlagsBanner.tsx b/frontend/src/app/DevFeatureFlagsBanner.tsx index 2a4ba5524a..7485c46d6a 100644 --- a/frontend/src/app/DevFeatureFlagsBanner.tsx +++ b/frontend/src/app/DevFeatureFlagsBanner.tsx @@ -102,28 +102,30 @@ const DevFeatureFlagsBanner: React.FC = ({ - { - setModalOpen(false); - setDevFeatureFlagQueryVisible(false); - }} - actions={[ - , - ]} - > - {renderDevFeatureFlags()} - + {isModalOpen ? ( + { + setModalOpen(false); + setDevFeatureFlagQueryVisible(false); + }} + actions={[ + , + ]} + > + {renderDevFeatureFlags()} + + ) : null} ); }; diff --git a/frontend/src/components/EditableLabelsDescriptionListGroup.tsx b/frontend/src/components/EditableLabelsDescriptionListGroup.tsx index c0e3958017..e405433a36 100644 --- a/frontend/src/components/EditableLabelsDescriptionListGroup.tsx +++ b/frontend/src/components/EditableLabelsDescriptionListGroup.tsx @@ -168,52 +168,54 @@ const EditableLabelsDescriptionListGroup: React.FC - - Save - , - , - ]} - > -
- - , value: string) => - setAddLabelInputValue(value) - } - ref={addLabelInputRef} - isRequired - validated={addLabelValidationError ? 'error' : 'default'} - /> - {addLabelValidationError && ( - - - } variant="error"> - {addLabelValidationError} - - - - )} - -
-
+ {isAddLabelModalOpen ? ( + + Save + , + , + ]} + > +
+ + , value: string) => + setAddLabelInputValue(value) + } + ref={addLabelInputRef} + isRequired + validated={addLabelValidationError ? 'error' : 'default'} + /> + {addLabelValidationError && ( + + + } variant="error"> + {addLabelValidationError} + + + + )} + +
+
+ ) : null} ); }; diff --git a/frontend/src/pages/BYONImages/BYONImageModal/ManageBYONImageModal.tsx b/frontend/src/pages/BYONImages/BYONImageModal/ManageBYONImageModal.tsx index 0b0cdf09df..c9723b4d6c 100644 --- a/frontend/src/pages/BYONImages/BYONImageModal/ManageBYONImageModal.tsx +++ b/frontend/src/pages/BYONImages/BYONImageModal/ManageBYONImageModal.tsx @@ -23,7 +23,6 @@ import DisplayedContentTabContent from './DisplayedContentTabContent'; export type ManageBYONImageModalProps = { existingImage?: BYONImage; - isOpen: boolean; onClose: (submitted: boolean) => void; }; @@ -32,11 +31,7 @@ export enum DisplayedContentTab { PACKAGES, } -const ManageBYONImageModal: React.FC = ({ - existingImage, - isOpen, - onClose, -}) => { +const ManageBYONImageModal: React.FC = ({ existingImage, onClose }) => { const [activeTabKey, setActiveTabKey] = React.useState( DisplayedContentTab.SOFTWARE, ); @@ -123,7 +118,7 @@ const ManageBYONImageModal: React.FC = ({ onEscapePress={(e) => e.preventDefault()} variant={ModalVariant.medium} title={`${existingImage ? 'Update' : 'Import'} notebook image`} - isOpen={isOpen} + isOpen onClose={() => onBeforeClose(false)} showClose={!isEditing} footer={ diff --git a/frontend/src/pages/BYONImages/BYONImagesTable.tsx b/frontend/src/pages/BYONImages/BYONImagesTable.tsx index d869ac342d..d92eb672a9 100644 --- a/frontend/src/pages/BYONImages/BYONImagesTable.tsx +++ b/frontend/src/pages/BYONImages/BYONImagesTable.tsx @@ -105,16 +105,17 @@ export const BYONImagesTable: React.FC = ({ images, refres }} /> ) : null} - { - if (updated) { - refresh(); - } - setEditImage(undefined); - }} - existingImage={editImage} - /> + {editImage ? ( + { + if (updated) { + refresh(); + } + setEditImage(undefined); + }} + existingImage={editImage} + /> + ) : null} ); }; diff --git a/frontend/src/pages/BYONImages/ImportBYONImageButton.tsx b/frontend/src/pages/BYONImages/ImportBYONImageButton.tsx index 1a90689119..55588980a1 100644 --- a/frontend/src/pages/BYONImages/ImportBYONImageButton.tsx +++ b/frontend/src/pages/BYONImages/ImportBYONImageButton.tsx @@ -18,15 +18,16 @@ const ImportBYONImageButton: React.FC = ({ refresh } > Import new image - { - if (imported) { - refresh(); - } - setOpen(false); - }} - /> + {isOpen ? ( + { + if (imported) { + refresh(); + } + setOpen(false); + }} + /> + ) : null} ); }; diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfileEnableToggle.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfileEnableToggle.tsx index 3d84f18989..e53c81308a 100644 --- a/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfileEnableToggle.tsx +++ b/frontend/src/pages/acceleratorProfiles/screens/list/AcceleratorProfileEnableToggle.tsx @@ -55,16 +55,17 @@ const AcceleratorProfileEnableToggle: React.FC - { - if (confirmStatus) { - handleChange(false); - } - setIsModalOpen(false); - }} - /> + {isModalOpen ? ( + { + if (confirmStatus) { + handleChange(false); + } + setIsModalOpen(false); + }} + /> + ) : null} ); }; diff --git a/frontend/src/pages/acceleratorProfiles/screens/list/DisableAcceleratorProfileModal.tsx b/frontend/src/pages/acceleratorProfiles/screens/list/DisableAcceleratorProfileModal.tsx index 2986990002..8c09a26e76 100644 --- a/frontend/src/pages/acceleratorProfiles/screens/list/DisableAcceleratorProfileModal.tsx +++ b/frontend/src/pages/acceleratorProfiles/screens/list/DisableAcceleratorProfileModal.tsx @@ -2,18 +2,16 @@ import * as React from 'react'; import { Button, Modal } from '@patternfly/react-core'; type DisableAcceleratorProfileModalType = { - isOpen: boolean; onClose: (confirmStatus: boolean) => void; }; const DisableAcceleratorProfileModal: React.FC = ({ - isOpen, onClose, }) => ( onClose(false)} actions={[