Merge pull request #2383 from RedisInsight/fe/bugfix/RI-4776-4778_icon_and_loading

Fe/bugfix/ri 4776 4778 icon and loading

Author: vlad-dargel

electron-builder.json

@@ -29,7 +29,7 @@
     "type": "distribution",
     "hardenedRuntime": true,
     "darkModeSupport": true,
-    "bundleVersion": "60",
+    "bundleVersion": "70",
     "icon": "resources/icon.icns",
     "artifactName": "${productName}-${os}-${arch}.${ext}",
     "entitlements": "resources/entitlements.mac.plist",

redisinsight/ui/src/assets/img/triggers_and_functions_dark.svg

@@ -161,4 +161,14 @@ describe('FunctionsPage', () => {
     expect(pushMock)
       .toBeCalledWith(Pages.triggeredFunctionsLibraries('instanceId'))
   })
+
+  it('should not render functions list', () => {
+    (triggeredFunctionsFunctionsSelector as jest.Mock).mockReturnValueOnce({
+      data: null,
+      loading: false
+    })
+    const { queryByTestId } = render(<FunctionsPage />)
+
+    expect(queryByTestId('total-functions')).not.toBeInTheDocument()
+  })
 })

redisinsight/ui/src/assets/img/triggers_and_functions_light.svg

@@ -3,7 +3,7 @@ import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiResiza
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
-import { find, pick } from 'lodash'
+import { find, isNull, pick } from 'lodash'
 import {
   fetchTriggeredFunctionsFunctionsList,
   setSelectedFunctionToShow,
@@ -114,6 +114,10 @@ const FunctionsPage = () => {
     ? NoFunctionsMessage
     : (<NoLibrariesScreen isModuleLoaded={isModuleLoaded} onAddLibrary={onAddLibrary} />)
 
+  if (!instanceId) {
+    return null
+  }
+
   return (
     <EuiFlexGroup
       className={cx('triggeredFunctions__page', styles.main)}
@@ -164,16 +168,18 @@ const FunctionsPage = () => {
                       <EuiLoadingSpinner size="xl" />
                     </div>
                   )}
-                  <FunctionsList
-                    items={items}
-                    loading={loading}
-                    onRefresh={updateList}
-                    lastRefresh={lastRefresh}
-                    selectedRow={selectedRow}
-                    onSelectRow={handleSelectRow}
-                    message={message}
-                    isRefreshDisabled={!isModuleLoaded}
-                  />
+                  {(!isModuleLoaded || !isNull(functions)) && (
+                    <FunctionsList
+                      items={items}
+                      loading={loading}
+                      onRefresh={updateList}
+                      lastRefresh={lastRefresh}
+                      selectedRow={selectedRow}
+                      onSelectRow={handleSelectRow}
+                      message={message}
+                      isRefreshDisabled={!isModuleLoaded}
+                    />
+                  )}
                 </div>
               </EuiResizablePanel>
               <EuiResizableButton

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

@@ -229,4 +229,14 @@ describe('LibrariesPage', () => {
 
     expect(screen.queryByTestId('lib-details-lib1')).not.toBeInTheDocument()
   })
+
+  it('should not render libraries list', () => {
+    (triggeredFunctionsLibrariesSelector as jest.Mock).mockReturnValueOnce({
+      data: null,
+      loading: false
+    })
+    const { queryByTestId } = render(<LibrariesPage />)
+
+    expect(queryByTestId('total-libraries')).not.toBeInTheDocument()
+  })
 })

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

@@ -240,17 +240,19 @@ const LibrariesPage = () => {
                       <EuiLoadingSpinner size="xl" />
                     </div>
                   )}
-                  <LibrariesList
-                    items={items}
-                    loading={loading}
-                    onRefresh={updateList}
-                    lastRefresh={lastRefresh}
-                    selectedRow={selectedRow}
-                    onSelectRow={handleSelectRow}
-                    onDeleteRow={handleDelete}
-                    message={message}
-                    isRefreshDisabled={!isModuleLoaded}
-                  />
+                  {(!isModuleLoaded || !isNull(libraries)) && (
+                    <LibrariesList
+                      items={items}
+                      loading={loading}
+                      onRefresh={updateList}
+                      lastRefresh={lastRefresh}
+                      selectedRow={selectedRow}
+                      onSelectRow={handleSelectRow}
+                      onDeleteRow={handleDelete}
+                      message={message}
+                      isRefreshDisabled={!isModuleLoaded}
+                    />
+                  )}
                 </div>
               </EuiResizablePanel>
               <EuiResizableButton