feat: modify behaviours for the enable button for NIM.

backend/src/routes/api/integrations/nim/index.ts

@@ -2,7 +2,13 @@ import { FastifyReply, FastifyRequest } from 'fastify';
 import { secureAdminRoute } from '../../../../utils/route-security';
 import { KubeFastifyInstance } from '../../../../types';
 import { isString } from 'lodash';
-import { createNIMAccount, getNIMAccount, isAppEnabled, manageNIMSecret } from './nimUtils';
+import {
+  createNIMAccount,
+  manageNIMSecret,
+  getNIMAccount,
+  apiKeyValidationStatus,
+  isAppEnabled,
+} from './nimUtils';
 
 module.exports = async (fastify: KubeFastifyInstance) => {
   const PAGE_NOT_FOUND_MESSAGE = '404 page not found';
@@ -15,11 +21,24 @@ module.exports = async (fastify: KubeFastifyInstance) => {
           if (response) {
             // Installed
             const isEnabled = isAppEnabled(response);
-            reply.send({ isInstalled: true, isEnabled: isEnabled, canInstall: false, error: '' });
+            const keyValidationStatus: string = apiKeyValidationStatus(response);
+            reply.send({
+              isInstalled: true,
+              isEnabled: isEnabled,
+              variablesValidationStatus: keyValidationStatus,
+              canInstall: !isEnabled,
+              error: '',
+            });
           } else {
             // Not installed
             fastify.log.info(`NIM account does not exist`);
-            reply.send({ isInstalled: false, isEnabled: false, canInstall: true, error: '' });
+            reply.send({
+              isInstalled: false,
+              isEnabled: false,
+              variablesValidationStatus: '',
+              canInstall: true,
+              error: '',
+            });
           }
         })
         .catch((e) => {
@@ -33,6 +52,7 @@ module.exports = async (fastify: KubeFastifyInstance) => {
               reply.send({
                 isInstalled: false,
                 isEnabled: false,
+                variablesValidationStatus: '',
                 canInstall: false,
                 error: 'NIM not installed',
               });
@@ -41,7 +61,8 @@ module.exports = async (fastify: KubeFastifyInstance) => {
             fastify.log.error(`An unexpected error occurred: ${e.response.body?.message}`);
             reply.send({
               isInstalled: false,
-              isAppEnabled: false,
+              isEnabled: false,
+              variablesValidationStatus: '',
               canInstall: false,
               error: 'An unexpected error occurred. Please try again later.',
             });
@@ -72,15 +93,17 @@ module.exports = async (fastify: KubeFastifyInstance) => {
               reply.send({
                 isInstalled: true,
                 isEnabled: isEnabled,
-                canInstall: false,
+                variablesValidationStatus: '',
+                canInstall: !isEnabled,
                 error: '',
               });
             } else {
               const isEnabled = isAppEnabled(account);
               reply.send({
                 isInstalled: true,
                 isEnabled: isEnabled,
-                canInstall: false,
+                variablesValidationStatus: '',
+                canInstall: !isEnabled,
                 error: '',
               });
             }

backend/src/routes/api/integrations/nim/nimUtils.ts

@@ -3,6 +3,12 @@ import { KubeFastifyInstance, NIMAccountKind, SecretKind } from '../../../../typ
 const NIM_SECRET_NAME = 'nvidia-nim-access';
 const NIM_ACCOUNT_NAME = 'odh-nim-account';
 
+export const apiKeyValidationStatus = (app: NIMAccountKind): string => {
+  const conditions = app?.status?.conditions || [];
+  const apiKeyCondition = conditions.find((condition) => condition.type === 'APIKeyValidation');
+  return apiKeyCondition?.status || '';
+};
+
 export const isAppEnabled = (app: NIMAccountKind): boolean => {
   const conditions = app?.status?.conditions || [];
   return (

frontend/src/components/OdhAppCard.tsx

@@ -25,6 +25,7 @@
 import { useAppContext } from '~/app/AppContext';
 import { useAppDispatch } from '~/redux/hooks';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
+import { isInternalRouteIntegrationsApp } from '~/utilities/utils';
 import { useQuickStartCardSelected } from './useQuickStartCardSelected';
 import SupportedAppTitle from './SupportedAppTitle';
 import BrandImage from './BrandImage';
@@ -154,20 +155,24 @@
           setEnableOpen(true);
         }}
       >
-        here
+        here.
       </Button>
-      . To remove card click&nbsp;
-      <Button
-        isInline
-        variant="link"
-        onClick={() => {
-          hide();
-          removeApplication();
-        }}
-      >
-        here
-      </Button>
-      .
+      {!isInternalRouteIntegrationsApp(odhApp.spec.internalRoute) ? (
+        <>
+          To remove card click&nbsp;
+          <Button
+            isInline
+            variant="link"
+            onClick={() => {
+              hide();
+              removeApplication();
+            }}
+          >
+            here
+          </Button>
+          .
+        </>
+      ) : null}
     </div>
   );
 

frontend/src/pages/exploreApplication/EnableModal.tsx

@@ -2,6 +2,7 @@
 import { Alert, Button, Form, FormAlert, Spinner, TextInputTypes } from '@patternfly/react-core';
 import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { isEmpty, values } from 'lodash-es';
 import { OdhApplication } from '~/types';
 import { EnableApplicationStatus, useEnableApplication } from '~/utilities/useEnableApplication';
 import { asEnumMember } from '~/utilities/utils';
@@ -18,6 +19,10 @@
   const [postError, setPostError] = React.useState('');
   const [validationInProgress, setValidationInProgress] = React.useState(false);
   const [enableValues, setEnableValues] = React.useState<{ [key: string]: string }>({});
+  const isEnableValuesHasEmptyValue = React.useMemo(
+    () => isEmpty(enableValues) || values(enableValues).some((val) => isEmpty(val)),
+    [enableValues],
+  );
   const [validationStatus, validationErrorMessage] = useEnableApplication(
     validationInProgress,
     selectedApp.metadata.name,
@@ -44,6 +49,14 @@
     setValidationInProgress(true);
   };
 
+  const handleClose = React.useCallback(() => {
+    if (!validationInProgress) {
+      setEnableValues({});
+      setPostError('');
+    }
+    onClose();
+  }, [validationInProgress, onClose]);
+
   React.useEffect(() => {
     if (validationInProgress && validationStatus === EnableApplicationStatus.SUCCESS) {
       setValidationInProgress(false);
@@ -53,13 +66,19 @@
       selectedApp.spec.shownOnEnabledPage = true;
       /* eslint-enable no-param-reassign */
 
-      onClose();
+      handleClose();
     }
     if (validationInProgress && validationStatus === EnableApplicationStatus.FAILED) {
       setValidationInProgress(false);
       setPostError(validationErrorMessage);
     }
-  }, [onClose, selectedApp.spec, validationErrorMessage, validationInProgress, validationStatus]);
+  }, [
+    handleClose,
+    selectedApp.spec,
+    validationErrorMessage,
+    validationInProgress,
+    validationStatus,
+  ]);
 
   React.useEffect(() => {
     if (shown) {
@@ -71,13 +90,6 @@
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shown]);
 
-  const handleClose = () => {
-    if (!validationInProgress) {
-      setEnableValues({});
-    }
-    onClose();
-  };
-
   if (!selectedApp.spec.enable || !shown) {
     return null;
   }
@@ -97,7 +109,7 @@
           key="confirm"
           variant="primary"
           onClick={onDoEnableApp}
-          isDisabled={validationInProgress}
+          isDisabled={validationInProgress || isEnableValuesHasEmptyValue}
         >
           {enable.actionLabel}
         </Button>,

frontend/src/pages/exploreApplication/GetStartedPanel.tsx

@@ -13,6 +13,7 @@
   DrawerPanelBody,
   DrawerPanelContent,
   Tooltip,
+  Skeleton,
   Content,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
@@ -38,35 +39,40 @@
 const GetStartedPanel: React.FC<GetStartedPanelProps> = ({ selectedApp, onClose, onEnable }) => {
   const { dashboardConfig } = useAppContext();
   const { enablement } = dashboardConfig.spec.dashboardConfig;
-  const [{ isInstalled, canInstall, error }, loaded] = useIntegratedAppStatus(selectedApp);
+  const [{ isEnabled, canInstall, error }, loaded] = useIntegratedAppStatus(selectedApp);
   const { isAdmin } = useUser();
 
   if (!selectedApp) {
     return null;
   }
 
   const renderEnableButton = () => {
-    if (!selectedApp.spec.enable || selectedApp.spec.isEnabled || isInstalled || !isAdmin) {
+    if (!selectedApp.spec.enable || selectedApp.spec.isEnabled || isEnabled || !isAdmin) {
       return null;
     }
+
+    if (!loaded && !error) {
+      return <Skeleton style={{ minWidth: 100 }} fontSize="3xl" />;
+    }
+
     const button = (
       <Button
         variant={ButtonVariant.secondary}
         onClick={onEnable}
         isDisabled={!enablement || !canInstall}
-        isLoading={!loaded && !error}
       >
         Enable
       </Button>
     );
-    if (enablement) {
-      return button;
+
+    if (!enablement || !canInstall) {
+      return (
+        <Tooltip content="This feature has been disabled by an administrator.">
+          <span>{button}</span>
+        </Tooltip>
+      );
     }
-    return (
-      <Tooltip content="This feature has been disabled by an administrator.">
-        <span>{button}</span>
-      </Tooltip>
-    );
+    return button;
   };
 
   return (

frontend/src/pages/exploreApplication/useIntegratedAppStatus.ts

@@ -15,6 +15,7 @@ export const useIntegratedAppStatus = (app?: OdhApplication): FetchState<Integra
         isInstalled: false,
         isEnabled: false,
         canInstall: true,
+        variablesValidationStatus: '',
         error: '',
       });
     }
@@ -28,8 +29,9 @@ export const useIntegratedAppStatus = (app?: OdhApplication): FetchState<Integra
       isInstalled: false,
       isEnabled: false,
       canInstall: false,
+      variablesValidationStatus: '',
       error: '',
     },
-    { initialPromisePurity: true },
+    { refreshRate: 5000, initialPromisePurity: true },
   );
 };

frontend/src/types.ts

@@ -666,5 +666,6 @@ export type IntegrationAppStatus = {
   isInstalled: boolean;
   isEnabled: boolean;
   canInstall: boolean;
+  variablesValidationStatus: string;
   error: string;
 };