RI-7187 show deployed pipeline by default (#4752)

Author: ArtemHoruzhenko

redisinsight/ui/src/pages/rdi/pipeline-management/PipelineManagementPage.spec.tsx

@@ -12,6 +12,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { PageNames, Pages } from 'uiSrc/constants'
 import { MOCK_RDI_PIPELINE_DATA } from 'uiSrc/mocks/data/rdi'
+import { getPipeline } from 'uiSrc/slices/rdi/pipeline'
 import PipelineManagementPage, { Props } from './PipelineManagementPage'
 
 const mockedProps = mock<Props>()
@@ -99,6 +100,7 @@ describe('PipelineManagementPage', () => {
 
     unmount()
     const expectedActions = [
+      getPipeline(),
       setLastPageContext(PageNames.rdiPipelineManagement),
       setLastPipelineManagementPage(Pages.rdiPipelineConfig('rdiInstanceId')),
     ]

redisinsight/ui/src/pages/rdi/pipeline-management/PipelineManagementPage.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { IRoute, PageNames, Pages } from 'uiSrc/constants'
 import { connectedInstanceSelector } from 'uiSrc/slices/rdi/instances'
 import {
+  fetchRdiPipeline,
   fetchRdiPipelineJobFunctions,
   fetchRdiPipelineSchema,
 } from 'uiSrc/slices/rdi/pipeline'
@@ -43,6 +44,7 @@ const PipelineManagementPage = ({ routes = [] }: Props) => {
   setTitle(`${rdiInstanceName} - Pipeline Management`)
 
   useEffect(() => {
+    dispatch(fetchRdiPipeline(rdiInstanceId))
     dispatch(fetchRdiPipelineSchema(rdiInstanceId))
     dispatch(fetchRdiPipelineJobFunctions(rdiInstanceId))
   }, [])

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/Navigation.spec.tsx

@@ -1,7 +1,17 @@
 import React from 'react'
 import reactRouterDom from 'react-router-dom'
-import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { cloneDeep } from 'lodash'
+import {
+  render,
+  screen,
+  fireEvent,
+  mockedStore,
+  cleanup,
+  initialStateDefault,
+} from 'uiSrc/utils/test-utils'
 
+import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
+import { RdiPipelineTabs } from 'uiSrc/slices/interfaces'
 import Navigation from './Navigation'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -29,12 +39,53 @@ jest.mock('formik', () => ({
   }),
 }))
 
+jest.mock('uiSrc/slices/rdi/pipeline', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/pipeline'),
+  rdiPipelineSelector: jest.fn(),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+  ;(rdiPipelineSelector as jest.Mock).mockReturnValue(
+    initialStateDefault.rdi.pipeline,
+  )
+})
+
 describe('Navigation', () => {
   it('should render', () => {
     expect(render(<Navigation />)).toBeTruthy()
   })
 
+  it('should not show nav when pipeline is loading', () => {
+    render(<Navigation />)
+
+    expect(
+      screen.queryByTestId(`rdi-nav-btn-${RdiPipelineTabs.Config}`),
+    ).not.toBeInTheDocument()
+  })
+
+  it('should show nav when pipeline is not loading', () => {
+    ;(rdiPipelineSelector as jest.Mock).mockReturnValue({
+      ...initialStateDefault.rdi.pipeline,
+      loading: false,
+    })
+
+    render(<Navigation />)
+
+    expect(
+      screen.queryByTestId(`rdi-nav-btn-${RdiPipelineTabs.Config}`),
+    ).toBeInTheDocument()
+  })
+
   it('should call proper history push after click on tabs', () => {
+    ;(rdiPipelineSelector as jest.Mock).mockReturnValue({
+      ...initialStateDefault.rdi.pipeline,
+      loading: false,
+    })
+
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/navigation/Navigation.tsx

@@ -109,7 +109,7 @@ const Navigation = () => {
         <EuiTextColor component="div">Pipeline Management</EuiTextColor>
       </div>
       <div className={styles.tabs} data-testid="rdi-pipeline-tabs">
-        {renderTabs()}
+        {!loading && renderTabs()}
       </div>
     </div>
   )

redisinsight/ui/src/pages/rdi/pipeline-management/components/source-pipeline-dialog/SourcePipelineModal.spec.tsx

@@ -6,9 +6,11 @@ import {
   render,
   fireEvent,
   screen,
+  initialStateDefault,
 } from 'uiSrc/utils/test-utils'
 import {
   getPipeline,
+  rdiPipelineSelector,
   setChangedFile,
   setPipeline,
 } from 'uiSrc/slices/rdi/pipeline'
@@ -35,11 +37,21 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('uiSrc/slices/rdi/pipeline', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/pipeline'),
+  rdiPipelineSelector: jest.fn(),
+}))
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
   store = cloneDeep(mockedStore)
   store.clearActions()
+  ;(rdiPipelineSelector as jest.Mock).mockReturnValue({
+    ...initialStateDefault.rdi.pipeline,
+    loading: false,
+    config: '',
+  })
 })
 
 describe('SourcePipelineDialog', () => {
@@ -94,7 +106,7 @@ describe('SourcePipelineDialog', () => {
     })
   })
 
-  it('should call proper telemetry event after select empty pipeline  option', () => {
+  it('should call proper telemetry event after select empty pipeline option', () => {
     const sendEventTelemetryMock = jest.fn()
     ;(sendEventTelemetry as jest.Mock).mockImplementation(
       () => sendEventTelemetryMock,
@@ -111,4 +123,20 @@ describe('SourcePipelineDialog', () => {
       },
     })
   })
+
+  it('should not show dialog when there is deployed pipeline on a server', () => {
+    const sendEventTelemetryMock = jest.fn()
+    ;(sendEventTelemetry as jest.Mock).mockImplementation(
+      () => sendEventTelemetryMock,
+    )
+    ;(rdiPipelineSelector as jest.Mock).mockReturnValue({
+      ...initialStateDefault.rdi.pipeline,
+      loading: false,
+      config: 'deployed config',
+    })
+
+    render(<SourcePipelineDialog />)
+
+    expect(screen.queryByTestId('file-source-pipeline-dialog')).not.toBeInTheDocument()
+  })
 })

redisinsight/ui/src/pages/rdi/pipeline-management/components/source-pipeline-dialog/SourcePipelineModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   EuiIcon,
   EuiModal,
@@ -13,6 +13,7 @@ import { useParams } from 'react-router-dom'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import {
   fetchRdiPipeline,
+  rdiPipelineSelector,
   setChangedFile,
   setPipeline,
 } from 'uiSrc/slices/rdi/pipeline'
@@ -39,10 +40,20 @@ export enum PipelineSourceOptions {
 
 const SourcePipelineDialog = () => {
   const [isShowDownloadDialog, setIsShowDownloadDialog] = useState(false)
+  const [hasRdiPipelineDeployed, setHasRdiPipelineDeployed] =
+    useState(false)
+
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
 
   const { isOpenDialog } = useSelector(appContextPipelineManagement)
 
+  const { loading: pipelineLoading, config: pipelineConfig } =
+    useSelector(rdiPipelineSelector)
+
+  useEffect(() => {
+    setHasRdiPipelineDeployed(!pipelineLoading && pipelineConfig?.length > 0)
+  }, [pipelineConfig, pipelineLoading])
+
   const dispatch = useDispatch()
 
   const onSelect = (option: PipelineSourceOptions) => {
@@ -95,7 +106,7 @@ const SourcePipelineDialog = () => {
     )
   }
 
-  if (!isOpenDialog) {
+  if (!isOpenDialog || hasRdiPipelineDeployed) {
     return null
   }
 

redisinsight/ui/src/slices/rdi/pipeline.ts

@@ -34,7 +34,7 @@ import successMessages from 'uiSrc/components/notifications/success-messages'
 import { AppDispatch, RootState } from '../store'
 
 export const initialState: IStateRdiPipeline = {
-  loading: false,
+  loading: true,
   error: '',
   data: null,
   config: '',