Made confirm modal generic and added tests

Author: katieperry4

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -564,6 +564,18 @@ class ModelServingRow extends TableRow {
   findInternalServicePopover() {
     return cy.findByTestId('internal-service-popover');
   }
+
+  findConfirmStopModal() {
+    return cy.findByTestId('stop-model-modal');
+  }
+
+  findConfirmStopModalButton() {
+    return this.findConfirmStopModal().findByTestId('stop-model-button');
+  }
+
+  findConfirmStopModalCheckbox() {
+    return this.findConfirmStopModal().findByTestId('dont-show-again-checkbox');
+  }
 }
 
 class ModelMeshRow extends ModelServingRow {

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

@@ -1340,6 +1340,10 @@ describe('Serving Runtime List', () => {
           }),
         ],
       });
+      cy.clearLocalStorage('odh.dashboard.modelServing.stop.modal.preference');
+      cy.window().then((win) =>
+        win.localStorage.setItem('odh.dashboard.modelServing.stop.modal.preference', 'false'),
+      );
       projectDetails.visitSection('test-project', 'model-server');
 
       const kserveRow = modelServingSection.getKServeRow('test-model');
@@ -1373,8 +1377,20 @@ describe('Serving Runtime List', () => {
       );
 
       kserveRow.findStateActionToggle().should('have.text', 'Stop').click();
+      kserveRow.findConfirmStopModal().should('exist');
+      kserveRow.findConfirmStopModalCheckbox().should('exist');
+      kserveRow.findConfirmStopModalCheckbox().should('not.be.checked');
+      kserveRow.findConfirmStopModalCheckbox().click();
+      kserveRow.findConfirmStopModalCheckbox().should('be.checked');
+      kserveRow.findConfirmStopModalButton().click();
       cy.wait(['@stopModelPatch', '@getStoppedModel']);
       kserveRow.findStateActionToggle().should('have.text', 'Start');
+      cy.window().then((win) => {
+        const preference = win.localStorage.getItem(
+          'odh.dashboard.modelServing.stop.modal.preference',
+        );
+        expect(preference).to.equal('true');
+      });
 
       const runningInferenceService = mockInferenceServiceK8sResource({
         name: 'test-model',

frontend/src/pages/modelServing/ModelServingStopModal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import ConfirmStopModal from '#~/pages/projects/components/ConfirmStopModal';
+import useStopModelModalAvailability from './useStopModelModalAvailability';
+
+type ModelServingStopModalProps = {
+  modelName: string;
+  title: string;
+  onClose: (confirmStatus: boolean) => void;
+};
+
+const ModelServingStopModal: React.FC<ModelServingStopModalProps> = ({
+  modelName,
+  title,
+  onClose,
+}) => {
+  const [dontShowModalValue, setDontShowModalValue] = useStopModelModalAvailability();
+
+  const onBeforeClose = (confirmStatus: boolean) => {
+    if (!confirmStatus) {
+      setDontShowModalValue(false);
+    }
+    onClose(confirmStatus);
+  };
+  const modalActions = [
+    <Button
+      key="confirm"
+      variant="primary"
+      onClick={() => onBeforeClose(true)}
+      data-testid="stop-model-button"
+    >
+      Stop
+    </Button>,
+    <Button
+      key="cancel"
+      variant="secondary"
+      onClick={() => onBeforeClose(false)}
+      data-testid="cancel-stop-model-button"
+    >
+      Cancel
+    </Button>,
+  ];
+  return (
+    <ConfirmStopModal
+      message={
+        <>
+          Are you sure you want to stop <strong>{modelName}</strong>?
+        </>
+      }
+      modalActions={modalActions}
+      onBeforeClose={onBeforeClose}
+      title={title}
+      dataTestId="stop-model-modal"
+      dontShowModalValue={dontShowModalValue}
+      setDontShowModalValue={setDontShowModalValue}
+    />
+  );
+};
+
+export default ModelServingStopModal;

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

@@ -14,6 +14,8 @@ import { isProjectNIMSupported } from '#~/pages/modelServing/screens/projects/ni
 import useServingPlatformStatuses from '#~/pages/modelServing/useServingPlatformStatuses';
 import StateActionToggle from '#~/components/StateActionToggle';
 import { patchInferenceServiceStoppedStatus } from '#~/api/k8s/inferenceServices';
+import useStopModelModalAvailability from '#~/pages/modelServing/useStopModelModalAvailability';
+import ModelServingStopModal from '#~/pages/modelServing/ModelServingStopModal';
 import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
 import InferenceServiceStatus from './InferenceServiceStatus';
@@ -40,6 +42,8 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   isGlobal,
   columnNames,
 }) => {
+  const [dontShowModalValue] = useStopModelModalAvailability();
+  const [isOpenConfirm, setOpenConfirm] = React.useState(false);
   const { projects } = React.useContext(ProjectsContext);
   const project = projects.find(byName(inferenceService.metadata.namespace)) ?? null;
   const isKServeNIMEnabled = project ? isProjectNIMSupported(project) : false;
@@ -62,8 +66,12 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   }, [inferenceService, refresh]);
 
   const onStop = React.useCallback(() => {
-    patchInferenceServiceStoppedStatus(inferenceService, 'true').then(refresh);
-  }, [inferenceService, refresh]);
+    if (dontShowModalValue) {
+      patchInferenceServiceStoppedStatus(inferenceService, 'true').then(refresh);
+    } else {
+      setOpenConfirm(true);
+    }
+  }, [dontShowModalValue, inferenceService, refresh]);
 
   return (
     <>
@@ -148,6 +156,18 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
           />
         </Td>
       )}
+      {isOpenConfirm && (
+        <ModelServingStopModal
+          modelName={displayName}
+          title="Stop model?"
+          onClose={(confirmStatus) => {
+            if (confirmStatus) {
+              patchInferenceServiceStoppedStatus(inferenceService, 'true').then(refresh);
+            }
+            setOpenConfirm(false);
+          }}
+        />
+      )}
     </>
   );
 };

frontend/src/pages/modelServing/useStopModelModalAvailability.tsx

@@ -0,0 +1,6 @@
+import { useBrowserStorage } from '#~/components/browserStorage/BrowserStorageContext';
+
+const useStopModelModalAvailability = (): [boolean, (v: boolean) => void] =>
+  useBrowserStorage<boolean>('odh.dashboard.modelServing.stop.modal.preference', false);
+
+export default useStopModelModalAvailability;

frontend/src/pages/notebookController/screens/server/StopServerModal.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { Notebook } from '#~/types';
-import StopWorkbenchModal from '#~/pages/projects/notebook/StopWorkbenchModal';
 import useStopNotebookModalAvailability from '#~/pages/projects/notebook/useStopNotebookModalAvailability';
+import ConfirmStopModal from '#~/pages/projects/components/ConfirmStopModal.tsx';
 
 type StopServerModalProps = {
   notebooksToStop: Notebook[];
@@ -17,7 +17,7 @@ const StopServerModal: React.FC<StopServerModalProps> = ({
   isDeleting,
   onNotebooksStop,
 }) => {
-  const [, setDontShowModalValue] = useStopNotebookModalAvailability();
+  const [dontShowModalValue, setDontShowModalValue] = useStopNotebookModalAvailability();
 
   if (!notebooksToStop.length) {
     return null;
@@ -94,13 +94,21 @@ const StopServerModal: React.FC<StopServerModalProps> = ({
   ];
 
   return (
-    <StopWorkbenchModal
-      workbenchName={getWorkbenchName()}
+    <ConfirmStopModal
+      message={
+        <>
+          Any unsaved changes to the <strong>{getWorkbenchName()}</strong> will be lost.
+        </>
+      }
       isRunning
       modalActions={modalActions}
       link={displayLink()}
       onBeforeClose={onBeforeClose}
       title={getWorkbenchModalTitle()}
+      dontShowModalValue={dontShowModalValue}
+      setDontShowModalValue={setDontShowModalValue}
+      saveChanges
+      dataTestId="stop-server-modal"
     />
   );
 };

frontend/src/pages/projects/components/ConfirmStopModal.tsx

@@ -0,0 +1,68 @@
+import {
+  ModalBody,
+  Modal,
+  StackItem,
+  ModalHeader,
+  Stack,
+  ModalFooter,
+  Checkbox,
+  FlexItem,
+  Flex,
+} from '@patternfly/react-core';
+import React from 'react';
+
+type ConfirmStopModalProps = {
+  modalActions: React.ReactNode[];
+  onBeforeClose: (confirmStatus: boolean) => void;
+  title: string;
+  dataTestId: string;
+  message: React.ReactNode;
+  dontShowModalValue: boolean;
+  setDontShowModalValue: (value: boolean) => void;
+  isRunning?: boolean;
+  link?: React.ReactNode;
+  saveChanges?: boolean;
+};
+
+const ConfirmStopModal: React.FC<ConfirmStopModalProps> = ({
+  modalActions,
+  onBeforeClose,
+  title = 'Stop?',
+  dataTestId = 'confirm-stop-modal',
+  message,
+  dontShowModalValue,
+  setDontShowModalValue,
+  isRunning = false,
+  link,
+  saveChanges = false,
+}) => (
+  <Modal variant="small" data-testid={dataTestId} isOpen onClose={() => onBeforeClose(false)}>
+    <ModalHeader title={title} />
+    <ModalBody>
+      <Stack hasGutter>
+        <StackItem>{message}</StackItem>
+        {saveChanges && isRunning && link && (
+          <StackItem>
+            <Flex>
+              <FlexItem spacer={{ default: 'spacerXs' }}>To save changes, </FlexItem>
+              <FlexItem spacer={{ default: 'spacerNone' }}>{link}</FlexItem>
+              <FlexItem spacer={{ default: 'spacerNone' }}>.</FlexItem>
+            </Flex>
+          </StackItem>
+        )}
+        <StackItem>
+          <Checkbox
+            id="dont-show-again"
+            data-testid="dont-show-again-checkbox"
+            label="Don't show again"
+            isChecked={dontShowModalValue}
+            onChange={(e, checked) => setDontShowModalValue(checked)}
+          />
+        </StackItem>
+      </Stack>
+    </ModalBody>
+    <ModalFooter>{modalActions}</ModalFooter>
+  </Modal>
+);
+
+export default ConfirmStopModal;

frontend/src/pages/projects/notebook/StopNotebookConfirmModal.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import { getDisplayNameFromK8sResource } from '#~/concepts/k8s/utils';
+import ConfirmStopModal from '#~/pages/projects/components/ConfirmStopModal.tsx';
 import NotebookRouteLink from './NotebookRouteLink';
 import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
 import { NotebookState } from './types';
-import StopWorkbenchModal from './StopWorkbenchModal';
 
 type StopNotebookConfirmProps = {
   notebookState: NotebookState;
@@ -16,7 +16,7 @@ const StopNotebookConfirmModal: React.FC<StopNotebookConfirmProps> = ({
   onClose,
 }) => {
   const { notebook, isRunning } = notebookState;
-  const [, setDontShowModalValue] = useStopNotebookModalAvailability();
+  const [dontShowModalValue, setDontShowModalValue] = useStopNotebookModalAvailability();
   const onBeforeClose = (confirmStatus: boolean) => {
     if (!confirmStatus) {
       // Disable the choice -- we were in this modal and they checked and then cancelled -- so undo it
@@ -41,12 +41,22 @@ const StopNotebookConfirmModal: React.FC<StopNotebookConfirmProps> = ({
   ];
 
   return (
-    <StopWorkbenchModal
-      workbenchName={<strong>{getDisplayNameFromK8sResource(notebook)}</strong>}
+    <ConfirmStopModal
+      message={
+        <>
+          Any unsaved changes to the <strong>{getDisplayNameFromK8sResource(notebook)}</strong> will
+          be lost.
+        </>
+      }
       isRunning={isRunning}
       modalActions={modalActions}
       link={<NotebookRouteLink label="open the workbench" notebook={notebook} isRunning />}
       onBeforeClose={onBeforeClose}
+      dataTestId="stop-notebook-modal"
+      title="Stop workbench?"
+      saveChanges
+      dontShowModalValue={dontShowModalValue}
+      setDontShowModalValue={setDontShowModalValue}
     />
   );
 };