Add confirm modal on accept/reject selected changes (#21540)

* Add showGenericConfirmModal in ModalsContext

* Add confirm modal on accept/reject selected changes

* plural in translations

* change tooltip to include selected changes

* add _plural to all translated languages

* lowercase title/tooltip

* count replacements as single change

* use new translation key

GitOrigin-RevId: afadbe1eeb2a290688b96f2b5388485f40c958d0

services/web/frontend/js/features/ide-react/context/modals-context.tsx

@@ -12,9 +12,13 @@ import GenericMessageModal, {
 import OutOfSyncModal, {
   OutOfSyncModalProps,
 } from '@/features/ide-react/components/modals/out-of-sync-modal'
+import GenericConfirmModal, {
+  GenericConfirmModalOwnProps,
+} from '../components/modals/generic-confirm-modal'
 
 type ModalsContextValue = {
   genericModalVisible: boolean
+  showGenericConfirmModal: (data: GenericConfirmModalOwnProps) => void
   showGenericMessageModal: (
     title: GenericMessageModalOwnProps['title'],
     message: GenericMessageModalOwnProps['message']
@@ -28,8 +32,15 @@ const ModalsContext = createContext<ModalsContextValue | undefined>(undefined)
 
 export const ModalsContextProvider: FC = ({ children }) => {
   const [showGenericModal, setShowGenericModal] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
   const [genericMessageModalData, setGenericMessageModalData] =
     useState<GenericMessageModalOwnProps>({ title: '', message: '' })
+  const [genericConfirmModalData, setGenericConfirmModalData] =
+    useState<GenericConfirmModalOwnProps>({
+      title: '',
+      message: '',
+      onConfirm: () => {},
+    })
 
   const [shouldShowOutOfSyncModal, setShouldShowOutOfSyncModal] =
     useState(false)
@@ -41,6 +52,15 @@ export const ModalsContextProvider: FC = ({ children }) => {
     setShowGenericModal(false)
   }, [])
 
+  const handleHideGenericConfirmModal = useCallback(() => {
+    setShowConfirmModal(false)
+  }, [])
+
+  const handleConfirmGenericConfirmModal = useCallback(() => {
+    genericConfirmModalData.onConfirm()
+    setShowConfirmModal(false)
+  }, [genericConfirmModalData])
+
   const showGenericMessageModal = useCallback(
     (
       title: GenericMessageModalOwnProps['title'],
@@ -52,6 +72,14 @@ export const ModalsContextProvider: FC = ({ children }) => {
     []
   )
 
+  const showGenericConfirmModal = useCallback(
+    (data: GenericConfirmModalOwnProps) => {
+      setGenericConfirmModalData(data)
+      setShowConfirmModal(true)
+    },
+    []
+  )
+
   const handleHideOutOfSyncModal = useCallback(() => {
     setShouldShowOutOfSyncModal(false)
   }, [])
@@ -64,10 +92,16 @@ export const ModalsContextProvider: FC = ({ children }) => {
   const value = useMemo<ModalsContextValue>(
     () => ({
       showGenericMessageModal,
+      showGenericConfirmModal,
       genericModalVisible: showGenericModal,
       showOutOfSyncModal,
     }),
-    [showGenericMessageModal, showGenericModal, showOutOfSyncModal]
+    [
+      showGenericMessageModal,
+      showGenericConfirmModal,
+      showGenericModal,
+      showOutOfSyncModal,
+    ]
   )
 
   return (
@@ -78,6 +112,12 @@ export const ModalsContextProvider: FC = ({ children }) => {
         onHide={handleHideGenericModal}
         {...genericMessageModalData}
       />
+      <GenericConfirmModal
+        show={showConfirmModal}
+        onHide={handleHideGenericConfirmModal}
+        {...genericConfirmModalData}
+        onConfirm={handleConfirmGenericConfirmModal}
+      />
       <OutOfSyncModal
         {...outOfSyncModalData}
         show={shouldShowOutOfSyncModal}