Merge pull request #2563 from RedisInsight/fe/feature/RI-4909_add_library_btn

#RI-4909 - add library from functions tab

Author: vlad-dargel

redisinsight/ui/src/pages/triggeredFunctions/pages/Functions/FunctionsPage.spec.tsx

@@ -171,4 +171,27 @@ describe('FunctionsPage', () => {
 
     expect(queryByTestId('total-functions')).not.toBeInTheDocument()
   })
+
+  it('should open library add form and sent proper telemetry event', () => {
+    const sendEventTelemetryMock = jest.fn()
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<FunctionsPage />)
+
+    fireEvent.click(screen.getByTestId('btn-add-library'))
+
+    expect(pushMock)
+      .toBeCalledWith(Pages.triggeredFunctionsLibraries('instanceId'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.TRIGGERS_AND_FUNCTIONS_LOAD_LIBRARY_CLICKED,
+      eventData: {
+        databaseId: 'instanceId',
+        tab: 'functions',
+      }
+    })
+  })
 })

redisinsight/ui/src/pages/triggeredFunctions/pages/Functions/FunctionsPage.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from 'react'
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiResizableContainer, } from '@elastic/eui'
+import {
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiResizableContainer,
+  EuiToolTip,
+  EuiButton,
+} from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
@@ -105,6 +113,13 @@ const FunctionsPage = () => {
 
   const onAddLibrary = () => {
     dispatch(setAddLibraryFormOpen(true))
+    sendEventTelemetry({
+      event: TelemetryEvent.TRIGGERS_AND_FUNCTIONS_LOAD_LIBRARY_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+        tab: 'functions',
+      }
+    })
     history.push(Pages.triggeredFunctionsLibraries(instanceId))
   }
 
@@ -143,6 +158,25 @@ const FunctionsPage = () => {
               data-testid="search-functions-list"
             />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="bottom"
+              anchorClassName="euiToolTip__btn-disabled"
+              content={isModuleLoaded ? null : 'Triggered Functions is not loaded in current database'}
+            >
+              <EuiButton
+                fill
+                size="s"
+                color="secondary"
+                onClick={onAddLibrary}
+                disabled={!isModuleLoaded}
+                className={styles.addLibrary}
+                data-testid="btn-add-library"
+              >
+                + Library
+              </EuiButton>
+            </EuiToolTip>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem className="triggeredFunctions__content">

redisinsight/ui/src/pages/triggeredFunctions/pages/Libraries/LibrariesPage.spec.tsx

@@ -163,6 +163,7 @@ describe('LibrariesPage', () => {
       event: TelemetryEvent.TRIGGERS_AND_FUNCTIONS_LOAD_LIBRARY_CLICKED,
       eventData: {
         databaseId: 'instanceId',
+        tab: 'libraries',
       }
     })
   })

redisinsight/ui/src/pages/triggeredFunctions/pages/Libraries/LibrariesPage.tsx

@@ -135,6 +135,7 @@ const LibrariesPage = () => {
       event: TelemetryEvent.TRIGGERS_AND_FUNCTIONS_LOAD_LIBRARY_CLICKED,
       eventData: {
         databaseId: instanceId,
+        tab: 'libraries',
       }
     })
   }