feat: modify behaviours for the enable button for NIM.

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

@@ -2,7 +2,15 @@ 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 { VariablesValidationStatus } from '../../../../types';
+import {
+  createNIMAccount,
+  manageNIMSecret,
+  getNIMAccount,
+  apiKeyValidationStatus,
+  apiKeyValidationTimestamp,
+  isAppEnabled,
+} from './nimUtils';
 
 module.exports = async (fastify: KubeFastifyInstance) => {
   const PAGE_NOT_FOUND_MESSAGE = '404 page not found';
@@ -15,11 +23,27 @@ 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);
+            const keyValidationTimestamp: string = apiKeyValidationTimestamp(response);
+            reply.send({
+              isInstalled: true,
+              isEnabled: isEnabled,
+              variablesValidationStatus: keyValidationStatus,
+              variablesValidationTimestamp: keyValidationTimestamp,
+              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: VariablesValidationStatus.UNKNOWN,
+              variablesValidationTimestamp: '',
+              canInstall: true,
+              error: '',
+            });
           }
         })
         .catch((e) => {
@@ -33,6 +57,8 @@ module.exports = async (fastify: KubeFastifyInstance) => {
               reply.send({
                 isInstalled: false,
                 isEnabled: false,
+                variablesValidationStatus: VariablesValidationStatus.UNKNOWN,
+                variablesValidationTimestamp: '',
                 canInstall: false,
                 error: 'NIM not installed',
               });
@@ -41,7 +67,9 @@ 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: VariablesValidationStatus.UNKNOWN,
+              variablesValidationTimestamp: '',
               canInstall: false,
               error: 'An unexpected error occurred. Please try again later.',
             });
@@ -66,24 +94,18 @@ module.exports = async (fastify: KubeFastifyInstance) => {
           // Ensure the account exists
           try {
             const account = await getNIMAccount(fastify);
-            if (!account) {
-              const response = await createNIMAccount(fastify);
-              const isEnabled = isAppEnabled(response);
-              reply.send({
-                isInstalled: true,
-                isEnabled: isEnabled,
-                canInstall: false,
-                error: '',
-              });
-            } else {
-              const isEnabled = isAppEnabled(account);
-              reply.send({
-                isInstalled: true,
-                isEnabled: isEnabled,
-                canInstall: false,
-                error: '',
-              });
-            }
+            const nimAccount = !account ? await createNIMAccount(fastify) : account;
+            const isEnabled = isAppEnabled(nimAccount);
+            const keyValidationStatus: string = apiKeyValidationStatus(nimAccount);
+            const keyValidationTimeStamp: string = apiKeyValidationTimestamp(nimAccount);
+            reply.send({
+              isInstalled: true,
+              isEnabled: isEnabled,
+              variablesValidationStatus: keyValidationStatus,
+              variablesValidationTimestamp: keyValidationTimeStamp,
+              canInstall: !isEnabled,
+              error: '',
+            });
           } catch (accountError: any) {
             const message = `Failed to create or retrieve NIM account: ${accountError.response?.body?.message}`;
             fastify.log.error(message);

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

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

backend/src/types.ts

@@ -1249,6 +1249,12 @@ export enum ServiceAddressAnnotation {
   EXTERNAL_GRPC = 'routing.opendatahub.io/external-address-grpc',
 }
 
+export enum VariablesValidationStatus {
+  UNKNOWN = 'Unknown',
+  FAILED = 'False',
+  SUCCESS = 'True',
+}
+
 export type NIMAccountKind = K8sResourceCommon & {
   metadata: {
     name: string;

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';
@@ -149,20 +150,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,12 @@
     setValidationInProgress(true);
   };
 
+  const handleClose = React.useCallback(() => {
+    setEnableValues({});
+    setPostError('');
+    onClose();
+  }, [onClose]);
+
   React.useEffect(() => {
     if (validationInProgress && validationStatus === EnableApplicationStatus.SUCCESS) {
       setValidationInProgress(false);
@@ -53,13 +64,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 +88,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 +107,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

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { IntegrationAppStatus, OdhApplication } from '~/types';
+import { IntegrationAppStatus, OdhApplication, VariablesValidationStatus } from '~/types';
 import useFetchState, { FetchState, NotReadyError } from '~/utilities/useFetchState';
 import { getIntegrationAppEnablementStatus } from '~/services/integrationAppService';
 import { isIntegrationApp } from '~/utilities/utils';
+import { useAppSelector } from '~/redux/hooks';
 
 export const useIntegratedAppStatus = (app?: OdhApplication): FetchState<IntegrationAppStatus> => {
+  const forceUpdate = useAppSelector((state) => state.forceComponentsUpdate);
+
   const callback = React.useCallback(() => {
     if (!app) {
       return Promise.reject(new NotReadyError('Need an app to check'));
@@ -15,21 +18,27 @@ export const useIntegratedAppStatus = (app?: OdhApplication): FetchState<Integra
         isInstalled: false,
         isEnabled: false,
         canInstall: true,
+        variablesValidationStatus: VariablesValidationStatus.UNKNOWN,
+        variablesValidationTimestamp: '',
         error: '',
       });
     }
 
     return getIntegrationAppEnablementStatus(app.spec.internalRoute);
-  }, [app]);
+  }, [app, forceUpdate]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return useFetchState(
     callback,
     {
       isInstalled: false,
       isEnabled: false,
       canInstall: false,
+      variablesValidationStatus: VariablesValidationStatus.UNKNOWN,
+      variablesValidationTimestamp: '',
       error: '',
     },
-    { initialPromisePurity: true },
+    {
+      initialPromisePurity: true,
+    },
   );
 };

frontend/src/types.ts

@@ -668,9 +668,17 @@ export type KeyValuePair = {
   value: string;
 };
 
+export enum VariablesValidationStatus {
+  UNKNOWN = 'Unknown',
+  FAILED = 'False',
+  SUCCESS = 'True',
+}
+
 export type IntegrationAppStatus = {
   isInstalled: boolean;
   isEnabled: boolean;
   canInstall: boolean;
+  variablesValidationStatus?: VariablesValidationStatus;
+  variablesValidationTimestamp?: string;
   error: string;
 };