Merge pull request #3981 from RedisInsight/fe/feature/RI-6220-remove-rdi-pipeline-template

RI-6220 removed rdi pipeline template

Author: vlad-dargel

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import { instance, mock } from 'ts-mockito'
+
+import { fireEvent, render, cleanup, mockedStore, screen } from 'uiSrc/utils/test-utils'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import { RdiPipelineTabs } from 'uiSrc/slices/interfaces'
+import { rdiPipelineStrategiesSelector } from 'uiSrc/slices/rdi/pipeline'
+import TemplateButton, { TemplateButtonProps } from './TemplateButton'
+
+const mockedProps = mock<TemplateButtonProps>()
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendPageViewTelemetry: jest.fn(),
+  sendEventTelemetry: jest.fn(),
+}))
+
+jest.mock('uiSrc/slices/rdi/pipeline', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/pipeline'),
+  rdiPipelineStrategiesSelector: jest.fn().mockReturnValue({
+    loading: false,
+    data: [{
+      strategy: 'test'
+    }],
+  }),
+}))
+
+describe('TemplateForm', () => {
+  it('should render', () => {
+    expect(
+      render(<TemplateButton {...instance(mockedProps)} />)
+    ).toBeTruthy()
+  })
+
+  it('should be disabled if no templateOption', () => {
+    (rdiPipelineStrategiesSelector as jest.Mock).mockImplementationOnce(() => ({
+      loading: false,
+      data: []
+    }))
+
+    render(<TemplateButton {...instance(mockedProps)} />)
+
+    expect(screen.getByTestId('template-btn')).toBeDisabled()
+  })
+
+  it('should send telemetry on Click', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<TemplateButton {...instance(mockedProps)} />)
+
+    expect(screen.getByTestId('template-btn')).toBeEnabled()
+
+    fireEvent.click(screen.getByTestId('template-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.RDI_TEMPLATE_CLICKED,
+      eventData: {
+        id: 'rdiInstanceId',
+        page: RdiPipelineTabs.Jobs,
+        mode: 'test',
+      }
+    })
+  })
+})

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { EuiButton, EuiToolTip } from '@elastic/eui'
+
+import { useParams } from 'react-router-dom'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { fetchJobTemplate, rdiPipelineStrategiesSelector } from 'uiSrc/slices/rdi/pipeline'
+import { RdiPipelineTabs } from 'uiSrc/slices/interfaces'
+import { getTooltipContent } from '../template-form/TemplateForm'
+import { INGEST_OPTION } from '../template-form/constants'
+import styles from './styles.module.scss'
+
+export interface TemplateButtonProps {
+  value: string
+  setFieldValue: (template: string) => void
+}
+
+const TemplateButton = ({ setFieldValue, value }: TemplateButtonProps) => {
+  const dispatch = useDispatch()
+  const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
+  const { loading, data } = useSelector(rdiPipelineStrategiesSelector)
+
+  const templateOption = data?.length
+    ? (data.find((strategy) => strategy.strategy === INGEST_OPTION)?.strategy || data[0].strategy)
+    : ''
+
+  const handleApply = () => {
+    dispatch(fetchJobTemplate(rdiInstanceId, templateOption, (template: string) => {
+      setFieldValue(template)
+    }))
+    sendEventTelemetry({
+      event: TelemetryEvent.RDI_TEMPLATE_CLICKED,
+      eventData: {
+        id: rdiInstanceId,
+        page: RdiPipelineTabs.Jobs,
+        mode: templateOption,
+      }
+    })
+  }
+
+  return (
+    <EuiToolTip
+      content={getTooltipContent(value, !templateOption)}
+      position="bottom"
+      display="inlineBlock"
+      anchorClassName="flex-row"
+    >
+      <EuiButton
+        fill
+        size="s"
+        color="secondary"
+        className={styles.btn}
+        aria-label="Insert template"
+        isLoading={loading}
+        isDisabled={!templateOption || !!value}
+        onClick={handleApply}
+        data-testid="template-btn"
+      >
+        Insert template
+      </EuiButton>
+    </EuiToolTip>
+  )
+}
+
+export default TemplateButton

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/index.ts

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

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/styles.module.scss

@@ -0,0 +1,12 @@
+.btn {
+  display: flex;
+  align-items: center;
+  color: var(--recommendationsCountBgColor) !important;
+  background-color: var(--tableRowSelectedColor) !important;
+  border-radius: 4px;
+  border-color: var(--tableRowSelectedColor) !important;
+
+  > span {
+    color: var(--recommendationsCountBgColor) !important;
+  }
+}

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.spec.tsx

@@ -79,15 +79,12 @@ describe('TemplateForm', () => {
   it('should display db type select when source is "config"', () => {
     render(<TemplateForm {...instance(mockedProps)} source={RdiPipelineTabs.Config} />)
 
-    expect(screen.getByTestId('pipeline-type-select')).toBeInTheDocument()
     expect(screen.getByTestId('db-type-select')).toBeInTheDocument()
   })
 
   it('should not render db type select when source is "jobs"', () => {
     render(<TemplateForm {...instance(mockedProps)} source={RdiPipelineTabs.Jobs} />)
 
-    expect(screen.getByTestId('pipeline-type-select')).toBeInTheDocument()
-
     const dbTypeSelect = screen.queryByTestId('db-type-select')
 
     expect(dbTypeSelect).toBeNull()
@@ -96,7 +93,6 @@ describe('TemplateForm', () => {
   it('should select "No template" value', () => {
     render(<TemplateForm {...instance(mockedProps)} source={RdiPipelineTabs.Config} />)
 
-    expect(screen.getByTestId('pipeline-type-select')).toHaveTextContent(NO_TEMPLATE_LABEL)
     expect(screen.getByTestId('db-type-select')).toHaveTextContent(NO_TEMPLATE_LABEL)
   })
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx

@@ -32,7 +32,7 @@ export interface Props {
   value: string
 }
 
-const getTooltipContent = (value: string, isNoTemplateOptions: boolean) => {
+export const getTooltipContent = (value: string, isNoTemplateOptions: boolean) => {
   if (isNoTemplateOptions) {
     return (
       <>
@@ -57,7 +57,7 @@ const TemplateForm = (props: Props) => {
 
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
 
-  const [pipelineTypeOptions, setPipelineTypeOptions] = useState<EuiSuperSelectOption<string>[]>(NO_OPTIONS)
+  const [pipelineTypeOptions, setPipelineTypeOptions] = useState<EuiSuperSelectOption<string>[]>([])
   const [dbTypeOptions, setDbTypeOptions] = useState<EuiSuperSelectOption<string>[]>(NO_OPTIONS)
   const [selectedDbType, setSelectedDbType] = useState<string>('')
   const [selectedPipelineType, setSelectedPipelineType] = useState<string>('')
@@ -144,6 +144,7 @@ const TemplateForm = (props: Props) => {
       <EuiSpacer size="s" />
       <EuiForm component="form">
         <EuiSpacer size="xs" />
+        {(pipelineTypeOptions?.length > 1) && (
         <EuiFormRow className={styles.formRow}>
           <>
             <div className={styles.rowLabel}>Pipeline type</div>
@@ -156,6 +157,7 @@ const TemplateForm = (props: Props) => {
             />
           </>
         </EuiFormRow>
+        )}
         {source === RdiPipelineTabs.Config && (
           <EuiFormRow className={styles.formRow}>
             <>

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx

@@ -8,18 +8,18 @@ import { monaco as monacoEditor } from 'react-monaco-editor'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
-import { deleteChangedFile, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
-import { FileChangeType, IPipeline, RdiPipelineTabs } from 'uiSrc/slices/interfaces'
+import { deleteChangedFile, fetchPipelineStrategies, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
+import { FileChangeType, IPipeline } from 'uiSrc/slices/interfaces'
 import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import DryRunJobPanel from 'uiSrc/pages/rdi/pipeline-management/components/jobs-panel'
 import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
 import { DSL, KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
-import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
 import { createAxiosError, isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
+import TemplateButton from '../../components/template-button'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -34,7 +34,6 @@ const Job = (props: Props) => {
   const { name, value = '', deployedJobValue, jobIndex, rdiInstanceId } = props
 
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false)
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
   const [shouldOpenDedicatedEditor, setShouldOpenDedicatedEditor] = useState<boolean>(false)
 
   const dispatch = useDispatch()
@@ -48,12 +47,12 @@ const Job = (props: Props) => {
   const { setFieldValue } = useFormikContext<IPipeline>()
 
   useEffect(() => {
-    setIsPanelOpen(false)
-  }, [name])
+    dispatch(fetchPipelineStrategies(rdiInstanceId))
+  }, [])
 
   useEffect(() => {
-    setIsPopoverOpen(!value)
-  }, [value, name])
+    setIsPanelOpen(false)
+  }, [name])
 
   useEffect(() => {
     deployedJobValueRef.current = deployedJobValue
@@ -147,7 +146,7 @@ const Job = (props: Props) => {
       <div className={cx('content', { isSidePanelOpen: isPanelOpen })}>
         <div className="rdi__content-header">
           <EuiText className={cx('rdi__title', 'line-clamp-2')}>{name}</EuiText>
-          <div>
+          <div className={styles.actionContainer}>
             <EuiToolTip
               position="top"
               className={styles.tooltip}
@@ -174,13 +173,9 @@ const Job = (props: Props) => {
                 SQL and JMESPath Editor
               </EuiButton>
             </EuiToolTip>
-            <TemplatePopover
-              isPopoverOpen={isPopoverOpen}
-              setIsPopoverOpen={setIsPopoverOpen}
+            <TemplateButton
               value={value}
               setFieldValue={(template) => setFieldValue(`jobs.${jobIndexRef.current ?? -1}.value`, template)}
-              loading={loading}
-              source={RdiPipelineTabs.Jobs}
             />
           </div>
         </div>

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/styles.module.scss

@@ -6,3 +6,9 @@
   display: flex;
   align-items: baseline;
 }
+
+.actionContainer {
+  display: flex;
+  align-items: center;
+}
+

tests/e2e/pageObjects/rdi-instance-page.ts

@@ -52,7 +52,6 @@ export class RdiInstancePage extends BaseOverviewPage {
     templateButton = Selector('[data-testid^=template-trigger-]');
     templateApplyButton = Selector('[data-testid=template-apply-btn]');
     templateCancelButton = Selector('[data-testid=template-cancel-btn]');
-    pipelineDropdown =  Selector('[data-testid=pipeline-type-select]');
     databaseDropdown =  Selector('[data-testid=db-type-select]');
 
     //dialog
@@ -77,17 +76,12 @@ export class RdiInstancePage extends BaseOverviewPage {
 
     /**
      * Select value from template dropdowns
-     * @param pipeline value of pipeline dropdown
      * @param database value of database dropdown
      */
-    async setTemplateDropdownValue(pipeline: RdiTemplatePipelineType, database?: RdiTemplateDatabaseType): Promise<void> {
-        await t.click(this.pipelineDropdown);
-        let selector =  Selector(`[id='${pipeline}']`);
-        await t.click(selector);
+    async setTemplateDropdownValue(database?: RdiTemplateDatabaseType): Promise<void> {
         if(database != null) {
             await t.click(this.databaseDropdown);
-            selector =  Selector(`[id='${database}']`);
-            await t.click(selector);
+            await t.click(Selector(`[id='${database}']`));
         }
         await t.click(this.templateApplyButton);
     }
@@ -97,8 +91,8 @@ export class RdiInstancePage extends BaseOverviewPage {
      * @param option option to select
      */
     async selectStartPipelineOption(option: RdiPopoverOptions): Promise<void> {
-
         const selector =  Selector(`[data-testid='${option}-source-pipeline-dialog']`);
+
         await t.click(selector);
     }
 

tests/e2e/tests/web/critical-path/rdi/add-job.e2e.ts

@@ -80,29 +80,24 @@ test('Verify that user can add, edit and delete job', async() => {
 test('Verify that user insert template for jobs', async() => {
     const jobName = 'testJob';
     const disabledAttribute = 'isDisabled';
-    const defaultValue = 'ingest';
     const templateWords = 'server_name: chinook';
-    // should be empty config
+    const templateInsertedTooltip = 'Templates can be accessed only with the empty Editor to prevent potential data loss.';
+    // Should be empty config
     await rdiInstancePage.PipelineManagementPanel.addJob(jobName);
 
     await rdiInstancePage.PipelineManagementPanel.openJobByName(jobName);
-    await t.expect(rdiInstancePage.templateApplyButton.visible).ok('the template popover is not expanded');
-    const buttonClass = rdiInstancePage.templateApplyButton.getAttribute('class');
-    await t.expect(buttonClass).notContains(disabledAttribute, 'Apply button is disabled');
-    await t.click(rdiInstancePage.templateCancelButton);
-    await t.expect(rdiInstancePage.templateApplyButton.exists).notOk('the template popover is not closed');
-
     await t.click(rdiInstancePage.templateButton);
-    await t.expect(rdiInstancePage.templateApplyButton.visible).ok('the template popover is not expanded');
-    await t.expect(rdiInstancePage.pipelineDropdown.textContent).eql(defaultValue, 'the default value is set incorrectly');
-    await rdiInstancePage.setTemplateDropdownValue(RdiTemplatePipelineType.Ingest);
 
-    //verify uniq templates words - should be undated when templates are added
+    // Verify uniq templates words - should be undated when templates are added
     const enteredText = await rdiInstancePage.MonacoEditor.getTextFromMonaco();
+    // Verify that user can see the template is inserted for the empty editor when clicking on the “Insert template” in jobs
     await t.expect(enteredText).contains(templateWords, 'template is incorrect');
 
-    await t.click(rdiInstancePage.templateButton);
-    await t.expect(buttonClass).contains(disabledAttribute, 'Apply button is active');
+    // Verify that user can see a standard validation on disabled Insert template button when the editor is not empty
+    await t.hover(myRedisDatabasePage.AddRedisDatabase.testConnectionBtn);
+    await rdiInstancePage.verifyTooltipContainsText(templateInsertedTooltip);
+    const buttonClass = rdiInstancePage.templateButton.getAttribute('class');
+    await t.expect(buttonClass).contains(disabledAttribute, 'Insert Template button is not disabled');
 });
 test('Verify that user can change job config', async() => {
     const jobName = 'testJob';