Merge pull request #3614 from RedisInsight/fe/feature/CR-95

CR-95: Add option for overriding baseUrl for resources service

Author: nelsonwellsredis

redisinsight/api/src/__mocks__/database-recommendation.ts

@@ -10,7 +10,7 @@ export const mockRecommendationName = 'string';
 
 export const mockDatabaseRecommendationParamsEncrypted = 'recommendation.params_ENCRYPTED';
 
-export const mockDatabaseRecommendationParamsPlain = [];
+export const mockDatabaseRecommendationParamsPlain = {};
 
 export const mockDatabaseRecommendation = Object.assign(new DatabaseRecommendation(), {
   id: mockDatabaseRecommendationId,

redisinsight/api/src/modules/database-recommendation/models/database-recommendation.ts

@@ -1,7 +1,7 @@
 import { Expose } from 'class-transformer';
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 import {
-  IsArray, IsEnum, IsOptional, IsBoolean,
+  IsEnum, IsOptional, IsBoolean,
 } from 'class-validator';
 import { DatabaseRecommendationParams } from 'src/modules/database-recommendation/models';
 
@@ -77,11 +77,9 @@ export class DatabaseRecommendation {
 
   @ApiPropertyOptional({
     description: 'Additional recommendation params',
-    isArray: true,
-    type: () => String,
+    type: Object,
   })
-  @IsArray()
   @IsOptional()
   @Expose()
-  params?: DatabaseRecommendationParams[];
+  params?: DatabaseRecommendationParams;
 }

redisinsight/ui/src/components/csrf/Csrf.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import apiService, { setCSRFHeader } from 'uiSrc/services/apiService'
+import apiService, { setApiCsrfHeader } from 'uiSrc/services/apiService'
 import { render, screen, waitFor } from 'uiSrc/utils/test-utils'
 import Csrf from './Csrf'
 
 jest.mock('uiSrc/services/apiService', () => ({
-  setCSRFHeader: jest.fn(),
+  setApiCsrfHeader: jest.fn(),
   get: jest.fn(() => ({ data: { token: 'csrf-token' } })),
 }))
 
@@ -31,7 +31,7 @@ describe('Csrf', () => {
   })
 
   it('should not fetch CSRF token when endpoint is not provided', () => {
-    render(<Csrf />)
+    render(<Csrf><div>children</div></Csrf>)
 
     expect(apiService.get).not.toHaveBeenCalled()
 
@@ -41,7 +41,7 @@ describe('Csrf', () => {
   it('should render PagePlaceholder when loading', () => {
     process.env.RI_CSRF_ENDPOINT = 'csrf-endpoint'
 
-    render(<Csrf />)
+    render(<Csrf><div>children</div></Csrf>)
 
     expect(screen.getByTestId('page-placeholder')).toBeInTheDocument()
   })
@@ -57,7 +57,7 @@ describe('Csrf', () => {
 
     await waitFor(() => {
       expect(apiService.get).toHaveBeenCalledWith('csrf-endpoint')
-      expect(setCSRFHeader).toHaveBeenCalledWith('csrf-token')
+      expect(setApiCsrfHeader).toHaveBeenCalledWith('csrf-token')
 
       expect(screen.getByText('children')).toBeInTheDocument()
     })

redisinsight/ui/src/components/csrf/Csrf.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 
-import apiService, { setCSRFHeader } from 'uiSrc/services/apiService'
+import apiService, { setApiCsrfHeader } from 'uiSrc/services/apiService'
+import { setResourceCsrfHeader } from 'uiSrc/services/resourcesService'
 import PagePlaceholder from '../page-placeholder'
 
 const getCsrfEndpoint = () => process.env.RI_CSRF_ENDPOINT || ''
@@ -10,16 +11,16 @@ interface CSRFTokenResponse {
 }
 
 const Csrf = ({ children }: { children: ReactElement }) => {
-  const [loading, setLoading] = useState(false)
+  // default to true to prevent other components from making requests before the CSRF token is fetched
+  const [loading, setLoading] = useState(true)
 
   const fetchCsrfToken = async () => {
     let data: CSRFTokenResponse | undefined
     try {
-      setLoading(true)
-
       const { data } = await apiService.get<CSRFTokenResponse>(getCsrfEndpoint())
 
-      setCSRFHeader(data.token)
+      setApiCsrfHeader(data.token)
+      setResourceCsrfHeader(data.token)
     } catch (error) {
       console.error('Error fetching CSRF token: ', error)
     } finally {

redisinsight/ui/src/services/apiService.ts

@@ -27,7 +27,7 @@ const mutableAxiosInstance: AxiosInstance = axios.create({
   withCredentials: !!hostedApiBaseUrl,
 })
 
-export const setCSRFHeader = (token: string) => {
+export const setApiCsrfHeader = (token: string) => {
   mutableAxiosInstance.defaults.headers.common[CustomHeaders.CsrfToken] = token
 }
 

redisinsight/ui/src/services/resourcesService.ts

@@ -1,10 +1,12 @@
 import axios from 'axios'
+import { CustomHeaders } from 'uiSrc/constants/api'
 import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
 
 const { apiPort } = window.app?.config || { apiPort: process.env.RI_APP_PORT }
 const baseApiUrl = process.env.RI_BASE_API_URL
 const isDevelopment = process.env.NODE_ENV === 'development'
 const isWebApp = process.env.RI_APP_TYPE === 'web'
+const hostedApiBaseUrl = process.env.RI_HOSTED_API_BASE_URL
 
 let BASE_URL = !isDevelopment && isWebApp ? '/' : `${baseApiUrl}:${apiPort}/`
 
@@ -15,9 +17,14 @@ if (window.__RI_PROXY_PATH__) {
 export const RESOURCES_BASE_URL = BASE_URL
 
 const resourcesService = axios.create({
-  baseURL: RESOURCES_BASE_URL,
+  baseURL: hostedApiBaseUrl || RESOURCES_BASE_URL,
+  withCredentials: !!hostedApiBaseUrl,
 })
 
+export const setResourceCsrfHeader = (token: string) => {
+  resourcesService.defaults.headers.common[CustomHeaders.CsrfToken] = token
+}
+
 // TODO: it seems it's shoudn't be location.origin
 // TODO: check all cases and rename this to getResourcesUrl
 // TODO: also might be helpful create function which returns origin url