Persist enable modal status while in progress (opendatahub-io#84)

Author: jeff-phillips-18

Diff for: frontend/src/__tests__/ExploreApplications.spec.tsx

@@ -65,8 +65,13 @@ describe('ExploreApplications', () => {
   });
 
   it('should display available applications', () => {
-    const wrapper = mount(<ExploreApplications />);
-
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router>
+          <ExploreApplications />
+        </Router>
+      </Provider>,
+    );
     expect(wrapper.find('.odh-explore-apps__body').exists()).toBe(true);
     const cards = wrapper.find('.pf-m-selectable.odh-card');
     expect(cards.length).toBe(2);
@@ -76,7 +81,13 @@ describe('ExploreApplications', () => {
   });
 
   it('should show the getting started panel on card click', () => {
-    const wrapper = mount(<ExploreApplications />);
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router>
+          <ExploreApplications />
+        </Router>
+      </Provider>,
+    );
     expect(wrapper.find('.m-side-panel-open').exists()).toBe(false);
 
     act(() => {

Diff for: frontend/src/components/OdhExploreCard.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { Card, CardHeader, CardBody } from '@patternfly/react-core';
 import { OdhApplication } from '../types';
+import { makeCardVisible } from '../utilities/utils';
+import EnableModal from '../pages/exploreApplication/EnableModal';
 import BrandImage from './BrandImage';
 import SupportedAppTitle from './SupportedAppTitle';
-import { makeCardVisible } from '../utilities/utils';
 
 import './OdhCard.scss';
 
@@ -13,13 +14,17 @@ type OdhExploreCardProps = {
   isSelected: boolean;
   onSelect: () => void;
   disableInfo?: boolean;
+  enableOpen: boolean;
+  onEnableClose: () => void;
 };
 
 const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
   odhApp,
   isSelected,
   onSelect,
   disableInfo = false,
+  enableOpen,
+  onEnableClose,
 }) => {
   const disabled = odhApp.spec.comingSoon || disableInfo;
   const cardClasses = classNames('odh-card', { 'm-disabled': disabled });
@@ -49,6 +54,7 @@ const OdhExploreCard: React.FC<OdhExploreCardProps> = ({
       </CardHeader>
       <SupportedAppTitle odhApp={odhApp} showProvider />
       <CardBody>{odhApp.spec.description}</CardBody>
+      <EnableModal shown={enableOpen} onClose={onEnableClose} selectedApp={odhApp} />
     </Card>
   );
 };

Diff for: frontend/src/pages/exploreApplication/EnableModal.tsx

@@ -21,10 +21,11 @@ import './EnableModal.scss';
 
 type EnableModalProps = {
   selectedApp: OdhApplication;
-  onClose: (success?: boolean) => void;
+  shown: boolean;
+  onClose: () => void;
 };
 
-const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
+const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, shown, onClose }) => {
   const [postError, setPostError] = React.useState<string>('');
   const [validationInProgress, setValidationInProgress] = React.useState<boolean>(false);
   const [enableValues, setEnableValues] = React.useState<{ [key: string]: string }>({});
@@ -56,15 +57,33 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
   React.useEffect(() => {
     if (validationInProgress && validationStatus === EnableApplicationStatus.SUCCESS) {
       setValidationInProgress(false);
-      onClose(true);
+      selectedApp.spec.isEnabled = true;
+      onClose();
     }
     if (validationInProgress && validationStatus === EnableApplicationStatus.FAILED) {
       setValidationInProgress(false);
       setPostError(validationErrorMessage);
     }
-  }, [onClose, validationErrorMessage, validationInProgress, validationStatus]);
+  }, [onClose, selectedApp.spec, validationErrorMessage, validationInProgress, validationStatus]);
 
-  if (!selectedApp?.spec?.enable) {
+  React.useEffect(() => {
+    if (shown) {
+      if (!validationInProgress) {
+        setPostError('');
+      }
+    }
+    // Only update when shown is updated to true
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shown]);
+
+  const handleClose = () => {
+    if (!validationInProgress) {
+      setEnableValues({});
+    }
+    onClose();
+  };
+
+  if (!selectedApp?.spec?.enable || !shown) {
     return null;
   }
   const { enable } = selectedApp.spec;
@@ -76,7 +95,7 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
       variant={ModalVariant.small}
       title={enable.title}
       isOpen
-      onClose={() => onClose(false)}
+      onClose={handleClose}
       actions={[
         <Button
           key="confirm"
@@ -86,7 +105,7 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
         >
           {enable.actionLabel}
         </Button>,
-        <Button key="cancel" variant="link" onClick={() => onClose()}>
+        <Button key="cancel" variant="link" onClick={handleClose}>
           {validationInProgress ? 'Close' : 'Cancel'}
         </Button>,
       ]}
@@ -113,10 +132,12 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
               <Alert
                 variantLabel="error"
                 variant="danger"
-                title={postError}
+                title="Validation failed"
                 aria-live="polite"
                 isInline
-              />
+              >
+                {postError}
+              </Alert>
             </FormAlert>
           ) : null}
           {validationInProgress ? (
@@ -143,6 +164,7 @@ const EnableModal: React.FC<EnableModalProps> = ({ selectedApp, onClose }) => {
               inputType={enable.variables?.[key] as TextInputTypes}
               helperText={enable.variableHelpText?.[key] ?? ''}
               validationInProgress={validationInProgress}
+              value={enableValues[key]}
               updateValue={(value: string) => updateEnableValue(key, value)}
             />
           ))}

Diff for: frontend/src/pages/exploreApplication/EnableVariable.tsx

@@ -13,11 +13,12 @@ type EnableVariableProps = {
   inputType: TextInputTypes;
   helperText?: string;
   validationInProgress: boolean;
+  value: string;
   updateValue: (value: string) => void;
 };
 
 const EnableVariable = React.forwardRef<HTMLInputElement, EnableVariableProps>(
-  ({ label, inputType, helperText, validationInProgress, updateValue }, ref) => {
+  ({ label, inputType, helperText, validationInProgress, value, updateValue }, ref) => {
     const [showPassword, setShowPassword] = React.useState<boolean>(false);
 
     return (
@@ -30,7 +31,8 @@ const EnableVariable = React.forwardRef<HTMLInputElement, EnableVariableProps>(
           type={
             inputType === TextInputTypes.password && showPassword ? TextInputTypes.text : inputType
           }
-          onChange={(value) => updateValue(value)}
+          value={value || ''}
+          onChange={(newValue) => updateValue(newValue)}
         />
         {inputType === TextInputTypes.password ? (
           <Button

Diff for: frontend/src/pages/exploreApplication/ExploreApplications.tsx

@@ -38,11 +38,17 @@ const ExploreApplicationsInner: React.FC<ExploreApplicationsInnerProps> = React.
     const bodyClasses = classNames('odh-explore-apps__body', {
       'm-side-panel-open': !!selectedComponent,
     });
+    const [enableApp, setEnableApp] = React.useState<OdhApplication>();
+
     return (
       <Drawer isExpanded={!dashboardConfig.disableInfo && !!selectedComponent} isInline>
         <DrawerContent
           panelContent={
-            <GetStartedPanel onClose={() => updateSelection()} selectedApp={selectedComponent} />
+            <GetStartedPanel
+              onClose={() => updateSelection()}
+              selectedApp={selectedComponent}
+              onEnable={() => setEnableApp(selectedComponent)}
+            />
           }
         >
           <DrawerContentBody className={bodyClasses}>
@@ -64,6 +70,8 @@ const ExploreApplicationsInner: React.FC<ExploreApplicationsInnerProps> = React.
                           isSelected={selectedComponent === c}
                           onSelect={() => updateSelection(c.metadata.name)}
                           disableInfo={dashboardConfig.disableInfo}
+                          enableOpen={c.metadata.name === enableApp?.metadata.name}
+                          onEnableClose={() => setEnableApp(undefined)}
                         />
                       ))}
                     </Gallery>

Diff for: frontend/src/pages/exploreApplication/GetStartedPanel.tsx

@@ -20,17 +20,16 @@ import { OdhApplication } from '../../types';
 import { useWatchDashboardConfig } from '../../utilities/useWatchDashboardConfig';
 import { useGettingStarted } from '../../utilities/useGettingStarted';
 import MarkdownView from '../../components/MarkdownView';
-import EnableModal from './EnableModal';
 
 import './GetStartedPanel.scss';
 
 type GetStartedPanelProps = {
   selectedApp?: OdhApplication;
   onClose: () => void;
+  onEnable: () => void;
 };
 
-const GetStartedPanel: React.FC<GetStartedPanelProps> = ({ selectedApp, onClose }) => {
-  const [enableOpen, setEnableOpen] = React.useState<boolean>(false);
+const GetStartedPanel: React.FC<GetStartedPanelProps> = ({ selectedApp, onClose, onEnable }) => {
   const appName = selectedApp?.metadata.name;
   const { odhGettingStarted, loaded, loadError } = useGettingStarted(appName);
   const { dashboardConfig } = useWatchDashboardConfig();
@@ -69,17 +68,6 @@ const GetStartedPanel: React.FC<GetStartedPanelProps> = ({ selectedApp, onClose
     return <MarkdownView markdown={odhGettingStarted?.markdown} />;
   };
 
-  const onEnableClose = (success?: boolean) => {
-    if (success) {
-      selectedApp.spec.isEnabled = true;
-    }
-    setEnableOpen(false);
-  };
-
-  const onEnable = () => {
-    setEnableOpen(true);
-  };
-
   const renderEnableButton = () => {
     if (!selectedApp.spec.enable || selectedApp.spec.isEnabled) {
       return null;
@@ -141,7 +129,6 @@ const GetStartedPanel: React.FC<GetStartedPanelProps> = ({ selectedApp, onClose
           {renderMarkdownContents()}
         </DrawerPanelBody>
       </DrawerPanelContent>
-      {enableOpen ? <EnableModal onClose={onEnableClose} selectedApp={selectedApp} /> : null}
     </>
   );
 };