made StateActionToggle generic and import fixes

Author: katieperry4

frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/runtime/servingRuntimeList.cy.ts

@@ -1350,7 +1350,10 @@ describe('Serving Runtime List', () => {
         isModelMesh: false,
         activeModelState: 'Unknown',
       });
-      stoppedInferenceService.metadata.annotations = { 'serving.kserve.io/stop': 'true' };
+      stoppedInferenceService.metadata.annotations = {
+        ...stoppedInferenceService.metadata.annotations,
+        'serving.kserve.io/stop': 'true',
+      };
 
       cy.intercept(
         'PATCH',

frontend/src/components/StateActionToggle.tsx

@@ -1,16 +1,28 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
-import { NotebookState } from '#~/pages/projects/notebook/types';
-import { ModelServingState } from '#~/pages/modelServing/screens/types.ts';
 
-type Props = {
-  currentState: NotebookState | ModelServingState;
+// Define a minimal interface for the required state fields
+export interface ToggleState {
+  isStarting: boolean;
+  isStopping: boolean;
+  isRunning: boolean;
+  isStopped: boolean;
+}
+
+// Make the component generic, constrained to ToggleState
+export type StateActionToggleProps<T extends ToggleState> = {
+  currentState: T;
   onStart: () => void;
   onStop: () => void;
   isDisabled?: boolean;
 };
 
-const StateActionToggle: React.FC<Props> = ({ currentState, onStart, onStop, isDisabled }) => {
+const StateActionToggle = <T extends ToggleState>({
+  currentState,
+  onStart,
+  onStop,
+  isDisabled,
+}: StateActionToggleProps<T>): React.ReactElement => {
   const { isStarting, isRunning, isStopping } = currentState;
   const actionDisabled = isDisabled || isStopping || isStarting;
 

frontend/src/pages/modelServing/__tests__/utils.spec.ts

@@ -322,9 +322,8 @@ describe('getModelServingStatus', () => {
 
   it('should return correct status when model is stopped', () => {
     const inferenceService = mockInferenceServiceK8sResource({});
-    if (inferenceService.metadata.annotations) {
-      inferenceService.metadata.annotations['serving.kserve.io/stop'] = 'true';
-    }
+    inferenceService.metadata.annotations ??= {};
+    inferenceService.metadata.annotations['serving.kserve.io/stop'] = 'true';
     expect(getModelServingStatus(inferenceService)).toEqual({
       inferenceService,
       isStopped: true,

frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx

@@ -12,8 +12,8 @@ import { getDisplayNameFromK8sResource } from '#~/concepts/k8s/utils';
 import { byName, ProjectsContext } from '#~/concepts/projects/ProjectsContext';
 import { isProjectNIMSupported } from '#~/pages/modelServing/screens/projects/nimUtils';
 import useServingPlatformStatuses from '#~/pages/modelServing/useServingPlatformStatuses';
-import StateActionToggle from '#~/components/StateActionToggle.tsx';
-import { patchInferenceServiceStatus } from '#~/api/k8s/inferenceServices.ts';
+import StateActionToggle from '#~/components/StateActionToggle';
+import { patchInferenceServiceStatus } from '#~/api/k8s/inferenceServices';
 import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
 import InferenceServiceStatus from './InferenceServiceStatus';