Merge pull request #3487 from RedisInsight/fe/feature/RI-5211_add_promt_popup

#RI-5211 - add confirm leave the page popup

Author: AmirAllayarovSofteq

redisinsight/ui/src/mocks/data/rdi.ts

@@ -1,4 +1,4 @@
-import { PipelineStatus } from 'uiSrc/slices/interfaces'
+import { IPipelineStatus, PipelineStatus } from 'uiSrc/slices/interfaces'
 
 export const MOCK_RDI_PIPELINE_CONFIG = `connections:
   target:
@@ -52,10 +52,10 @@ export const MOCK_RDI_PIPELINE_JSON_DATA = {
   }
 }
 
-export const MOCK_RDI_PIPELINE_STATUS_DATA = {
+export const MOCK_RDI_PIPELINE_STATUS_DATA: IPipelineStatus = {
   components: { processor: 'ready' },
   pipelines: {
-    default: {
+    defaults: {
       status: PipelineStatus.Starting,
       state: 'some',
       tasks: 'none',

redisinsight/ui/src/pages/rdi/instance/InstancePage.spec.tsx

@@ -42,18 +42,16 @@ jest.mock('uiSrc/slices/app/context', () => ({
   }),
 }))
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: jest.fn,
-  }),
-}))
-
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
   store = cloneDeep(mockedStore)
   store.clearActions()
+
+  reactRouterDom.useHistory = jest.fn().mockReturnValue({
+    push: jest.fn(),
+    block: jest.fn(() => jest.fn())
+  })
 })
 
 /**
@@ -135,7 +133,10 @@ describe('InstancePage', () => {
 
   it('should redirect to rdi pipeline management page', async () => {
     const pushMock = jest.fn()
-    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({
+      push: pushMock,
+      block: jest.fn(() => jest.fn())
+    })
 
     reactRouterDom.useLocation = jest.fn().mockReturnValue({ pathname: Pages.rdiPipeline(RDI_INSTANCE_ID_MOCK) })
 
@@ -157,7 +158,10 @@ describe('InstancePage', () => {
     })
 
     const pushMock = jest.fn()
-    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({
+      push: pushMock,
+      block: jest.fn(() => jest.fn())
+    })
 
     reactRouterDom.useLocation = jest.fn().mockReturnValue({ pathname: Pages.rdiPipeline(RDI_INSTANCE_ID_MOCK) })
 

redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx

@@ -25,6 +25,8 @@ import { IPipeline } from 'uiSrc/slices/interfaces'
 import { Nullable, pipelineToJson } from 'uiSrc/utils'
 
 import InstancePageRouter from './InstancePageRouter'
+import { ConfirmLeavePagePopup } from './components'
+import { useUndeployedChangesPrompt } from './hooks'
 
 export interface Props {
   routes: IRoute[]
@@ -43,6 +45,7 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
   const { lastPage, contextRdiInstanceId } = useSelector(appContextSelector)
   const { data } = useSelector(rdiPipelineSelector)
+  const { showModal, handleCloseModal, handleConfirmLeave } = useUndeployedChangesPrompt()
 
   const [initialFormValues, setInitialFormValues] = useState<IPipeline>(getInitialValues(data))
   const formikRef = useRef<FormikProps<IPipeline>>(null)
@@ -96,7 +99,10 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
       onSubmit={onSubmit}
       innerRef={formikRef}
     >
-      <InstancePageRouter routes={routes} />
+      <>
+        <InstancePageRouter routes={routes} />
+        {showModal && <ConfirmLeavePagePopup onClose={handleCloseModal} onConfirm={handleConfirmLeave} />}
+      </>
     </Formik>
   )
 }

redisinsight/ui/src/pages/rdi/instance/components/confirm-leave-page-popup/ConfirmLeavePagePopup.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { useFormikContext } from 'formik'
+import { render, fireEvent, screen } from 'uiSrc/utils/test-utils'
+import { MOCK_RDI_PIPELINE_DATA } from 'uiSrc/mocks/data/rdi'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import ConfirmLeavePagePopup, { Props } from './ConfirmLeavePagePopup'
+
+const mockProps: Props = {
+  onClose: jest.fn(),
+  onConfirm: jest.fn()
+}
+
+jest.mock('formik')
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn()
+}))
+
+describe('ConfirmLeavePagePopup', () => {
+  beforeEach(() => {
+    const mockUseFormikContext = {
+      setFieldValue: jest.fn,
+      values: MOCK_RDI_PIPELINE_DATA,
+    };
+    (useFormikContext as jest.Mock).mockReturnValue(mockUseFormikContext)
+  })
+
+  it('should render', () => {
+    expect(render(<ConfirmLeavePagePopup {...mockProps} />)).toBeTruthy()
+  })
+
+  it('should call proper telemetry event', async () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<ConfirmLeavePagePopup {...mockProps} />)
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.RDI_UNSAVED_CHANGES_MESSAGE_DISPLAYED,
+      eventData: {
+        id: 'rdiInstanceId',
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+
+  it('should call onConfirm', async () => {
+    const onConfirmMock = jest.fn()
+    render(<ConfirmLeavePagePopup {...mockProps} onConfirm={onConfirmMock} />)
+
+    fireEvent.click(screen.getByTestId('confirm-leave-page'))
+
+    expect(onConfirmMock).toBeCalled()
+  })
+})

redisinsight/ui/src/pages/rdi/instance/components/confirm-leave-page-popup/ConfirmLeavePagePopup.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react'
+import {
+  EuiModal,
+  EuiModalBody,
+  EuiTitle, EuiText, EuiButton,
+} from '@elastic/eui'
+import { useParams } from 'react-router-dom'
+
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import Download from 'uiSrc/pages/rdi/pipeline-management/components/download/Download'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  onClose: () => void
+  onConfirm: () => void
+}
+
+const ConfirmLeavePagePopup = (props: Props) => {
+  const { onClose, onConfirm } = props
+
+  const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
+
+  useEffect(() => {
+    sendEventTelemetry({
+      event: TelemetryEvent.RDI_UNSAVED_CHANGES_MESSAGE_DISPLAYED,
+      eventData: {
+        id: rdiInstanceId,
+      }
+    })
+  }, [])
+
+  return (
+    <EuiModal className={styles.container} onClose={onClose} data-testid="oauth-select-account-dialog">
+      <EuiModalBody className={styles.modalBody}>
+        <section className={styles.content}>
+          <EuiTitle size="s">
+            <h3 className={styles.title}>Leaving pipeline?</h3>
+          </EuiTitle>
+          <EuiText className={styles.text}>
+            There are undeployed changes that could be lost if you navigate away.
+            Consider downloading the pipeline to save changes locally.
+          </EuiText>
+        </section>
+        <div className={styles.footer}>
+          <Download />
+          <EuiButton
+            fill
+            color="secondary"
+            size="s"
+            className={styles.button}
+            onClick={() => onConfirm()}
+            data-testid="confirm-leave-page"
+            aria-labelledby="confirm leave the page"
+          >
+            Proceed
+          </EuiButton>
+        </div>
+      </EuiModalBody>
+    </EuiModal>
+  )
+}
+
+export default ConfirmLeavePagePopup

redisinsight/ui/src/pages/rdi/instance/components/confirm-leave-page-popup/index.ts

@@ -0,0 +1,3 @@
+import ConfirmLeavePagePopup from './ConfirmLeavePagePopup'
+
+export default ConfirmLeavePagePopup

redisinsight/ui/src/pages/rdi/instance/components/confirm-leave-page-popup/styles.module.scss

@@ -0,0 +1,42 @@
+.container {
+  width: 612px !important;
+  min-width: 612px !important;
+  padding: 40px;
+  background-color: var(--euiColorEmptyShade);
+}
+
+.title {
+  font-size: 28px !important;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 34px;
+  padding: 16px 0;
+}
+
+.text {
+  font: normal normal normal 14px/17px Graphik, sans-serif !important;
+  color: var(--euiTextSubduedColor) !important;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 40px;
+  padding-bottom: 1px;
+}
+
+.button {
+  height: 36px !important;
+
+  :global(.euiButtonContent.euiButton__content) {
+    padding: 0 16px;
+  }
+}
+
+:global {
+  .euiModal__closeIcon {
+    right: 35px;
+    top: 35px;
+  }
+}

redisinsight/ui/src/pages/rdi/instance/components/index.ts

@@ -0,0 +1,5 @@
+import ConfirmLeavePagePopup from './confirm-leave-page-popup'
+
+export {
+  ConfirmLeavePagePopup
+}

redisinsight/ui/src/pages/rdi/instance/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useUndeployedChangesPrompt'

redisinsight/ui/src/pages/rdi/instance/hooks/useUndeployedChangesPrompt.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useHistory, useParams } from 'react-router-dom'
+import { Location } from 'history'
+import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
+import { Pages } from 'uiSrc/constants'
+import { Nullable } from 'uiSrc/utils'
+
+export const useUndeployedChangesPrompt = () => {
+  const { changes } = useSelector(rdiPipelineSelector)
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [nextLocation, setNextLocation] = useState<Nullable<Location<unknown>>>(null)
+  const [shouldBlockLeaving, setShouldBlockLeaving] = useState<boolean>(false)
+
+  const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
+  const history = useHistory()
+
+  useEffect(() => {
+    setShouldBlockLeaving(!!Object.keys(changes).length)
+  }, [changes])
+
+  useEffect(() => {
+    // @ts-ignore
+    const unlistenBlockChecker = history.block((location: Location<unknown>) => {
+      if (shouldBlockLeaving && !location?.pathname.startsWith(Pages.rdiPipeline(rdiInstanceId))) {
+        setNextLocation(location)
+        setShowModal(true)
+        return false
+      }
+      return true
+    })
+
+    return () => {
+      unlistenBlockChecker()
+    }
+  }, [shouldBlockLeaving])
+
+  const handleCloseModal = () => {
+    setShowModal(false)
+    setNextLocation(null)
+  }
+
+  const handleConfirmLeave = () => {
+    setShowModal(false)
+    setShouldBlockLeaving(false)
+  }
+
+  useEffect(() => {
+    if (!shouldBlockLeaving && nextLocation) {
+      history.push(nextLocation.pathname)
+    }
+  }, [shouldBlockLeaving, nextLocation, history])
+
+  return {
+    showModal,
+    handleCloseModal,
+    handleConfirmLeave
+  }
+}