feat(ui): introduce abstraction layer for commands history

- created interface to define the behavior for the services that
  should fetch commands history data (no matter of the data source)
- created example implementation for fetching commands history data from SQLite
- created hook to toggle the data source when fetching commands history data,
  based on a feature flag and target SQLite or INdexDB

re #RI-7614

Author: valkirilov

redisinsight/ui/src/mocks/handlers/workbench/commands.ts

@@ -7,6 +7,13 @@ import { commandExecutionFactory } from 'uiSrc/mocks/factories/workbench/command
 import { INSTANCE_ID_MOCK } from '../instances/instancesHandlers'
 
 const handlers: RestHandler[] = [
+  rest.get<CommandExecution[]>(
+    getMswURL(
+      getUrl(INSTANCE_ID_MOCK, ApiEndpoints.WORKBENCH_COMMAND_EXECUTIONS),
+    ),
+    async (_req, res, ctx) =>
+      res(ctx.status(200), ctx.json(commandExecutionFactory.buildList(1))),
+  ),
   rest.post<CommandExecution[]>(
     getMswURL(
       getUrl(INSTANCE_ID_MOCK, ApiEndpoints.WORKBENCH_COMMAND_EXECUTIONS),

redisinsight/ui/src/pages/vector-search/query/useQuery.ts

@@ -14,6 +14,7 @@ import {
   ResultsMode,
   CommandExecutionUI,
   CommandExecution,
+  CommandExecutionType,
 } from 'uiSrc/slices/interfaces'
 import { PIPELINE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import {
@@ -22,13 +23,13 @@ import {
   findCommand,
   removeCommand,
 } from 'uiSrc/services/workbenchStorage'
+import { useCommandsHistory } from 'uiSrc/services/commands-history/hooks/useCommandsHistory'
 import {
   createErrorResult,
   createGroupItem,
   executeApiCall,
   generateCommandId,
   limitHistoryLength,
-  loadHistoryData,
   prepareNewItems,
   scrollToElement,
   sortCommandsByDate,
@@ -44,13 +45,17 @@ const useQuery = () => {
   const [processing, setProcessing] = useState(false)
   const [isLoaded, setIsLoaded] = useState(false)
 
+  const { getCommandsHistory } = useCommandsHistory({
+    commandExecutionType: CommandExecutionType.Search,
+  })
+
   const resultsMode = ResultsMode.Default
   const activeRunQueryMode = RunQueryMode.ASCII
 
   useEffect(() => {
     const loadHistory = async () => {
       try {
-        const historyData = await loadHistoryData(instanceId)
+        const historyData = await getCommandsHistory(instanceId)
         setItems(historyData)
       } catch (error) {
         // Silently handle error

redisinsight/ui/src/services/commands-history/database/CommandsHistoryIndexedDB.ts

@@ -0,0 +1,15 @@
+import { CommandExecutionType } from 'uiSrc/slices/interfaces'
+import { CommandsHistoryDatabase, CommandHistoryResult } from './interface'
+
+export class CommandsHistoryIndexedDB implements CommandsHistoryDatabase {
+  async getCommandsHistory(
+    instanceId: string,
+    commandExecutionType: CommandExecutionType,
+  ): Promise<CommandHistoryResult> {
+    // TODO: Implementation for fetching command history from IndexedDB
+    return Promise.resolve({
+      success: true,
+      data: [],
+    })
+  }
+}

redisinsight/ui/src/services/commands-history/database/CommandsHistorySQLite.ts

@@ -0,0 +1,46 @@
+import { AxiosError } from 'axios'
+
+import apiService from 'uiSrc/services/apiService'
+import { ApiEndpoints } from 'uiSrc/constants'
+import { getUrl, isStatusSuccessful } from 'uiSrc/utils'
+import {
+  CommandExecution,
+  CommandExecutionType,
+  CommandExecutionUI,
+} from 'uiSrc/slices/interfaces'
+
+import { mapCommandExecutionToUI } from '../utils/command-execution.mapper'
+import { CommandsHistoryDatabase, CommandHistoryResult } from './interface'
+
+export class CommandsHistorySQLite implements CommandsHistoryDatabase {
+  async getCommandsHistory(
+    instanceId: string,
+    commandExecutionType: CommandExecutionType,
+  ): Promise<CommandHistoryResult> {
+    try {
+      const url = getUrl(instanceId, ApiEndpoints.WORKBENCH_COMMAND_EXECUTIONS)
+      const config = { params: { type: commandExecutionType } }
+
+      const { data, status } = await apiService.get<CommandExecution[]>(
+        url,
+        config,
+      )
+
+      if (isStatusSuccessful(status)) {
+        const results: CommandExecutionUI[] = data.map(mapCommandExecutionToUI)
+
+        return { success: true, data: results }
+      }
+
+      return {
+        success: false,
+        error: new Error(`Request failed with status ${status}`),
+      }
+    } catch (exception) {
+      return {
+        success: false,
+        error: exception as AxiosError,
+      }
+    }
+  }
+}

redisinsight/ui/src/services/commands-history/database/interface.ts

@@ -0,0 +1,18 @@
+import { AxiosError } from 'axios'
+import {
+  CommandExecutionType,
+  CommandExecutionUI,
+} from 'uiSrc/slices/interfaces'
+
+export interface CommandsHistoryDatabase {
+  getCommandsHistory(
+    instanceId: string,
+    commandExecutionType: CommandExecutionType,
+  ): Promise<CommandHistoryResult>
+}
+
+export interface CommandHistoryResult {
+  success: boolean
+  data?: CommandExecutionUI[]
+  error?: Error | AxiosError | any
+}

redisinsight/ui/src/services/commands-history/hooks/useCommandsHistory.ts

@@ -0,0 +1,56 @@
+import {
+  CommandExecutionType,
+  CommandExecutionUI,
+} from 'uiSrc/slices/interfaces'
+import { CommandsHistorySQLite } from '../database/CommandsHistorySQLite'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffect } from 'react'
+import { CommandsHistoryDatabase } from '../database/interface'
+import { CommandsHistoryIndexedDB } from '../database/CommandsHistoryIndexedDB'
+import { FeatureFlags } from 'uiSrc/constants/featureFlags'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
+
+interface CommandHistoryProps {
+  commandExecutionType: CommandExecutionType
+}
+
+interface CommandsHistoryHook {
+  getCommandsHistory: (instanceId: string) => Promise<CommandExecutionUI[]>
+}
+
+export const useCommandsHistory = ({
+  commandExecutionType,
+}: CommandHistoryProps): CommandsHistoryHook => {
+  let commandsHistoryDatabase: CommandsHistoryDatabase
+
+  const dispatch = useDispatch()
+  const { [FeatureFlags.envDependent]: envDependentFeature } = useSelector(
+    appFeatureFlagsFeaturesSelector,
+  )
+
+  useEffect(() => {
+    if (envDependentFeature?.flag) {
+      commandsHistoryDatabase = new CommandsHistorySQLite()
+    } else {
+      commandsHistoryDatabase = new CommandsHistoryIndexedDB()
+    }
+  }, [envDependentFeature])
+
+  const getCommandsHistory = async (instanceId: string) => {
+    const { data, error } = await commandsHistoryDatabase.getCommandsHistory(
+      instanceId,
+      commandExecutionType,
+    )
+
+    if (error) {
+      dispatch(addErrorNotification(error))
+    }
+
+    return data || []
+  }
+
+  return {
+    getCommandsHistory,
+  }
+}

redisinsight/ui/src/services/commands-history/utils/command-execution.mapper.ts

@@ -0,0 +1,12 @@
+import { EMPTY_COMMAND } from 'uiSrc/constants'
+import { CommandExecution, CommandExecutionUI } from 'uiSrc/slices/interfaces'
+
+export const mapCommandExecutionToUI = (
+  item: CommandExecution,
+): CommandExecutionUI => {
+  return {
+    ...item,
+    command: item.command || EMPTY_COMMAND,
+    emptyCommand: !item.command,
+  }
+}

redisinsight/ui/src/slices/workbench/wb-results.ts

@@ -48,6 +48,7 @@ import {
   ConnectionType,
   StateWorkbenchResults,
 } from '../interfaces'
+import { mapCommandExecutionToUI } from 'uiSrc/services/commands-history/utils/command-execution.mapper'
 
 export const initialState: StateWorkbenchResults = {
   isLoaded: false,
@@ -80,11 +81,7 @@ const workbenchResultsSlice = createSlice({
       state,
       { payload }: { payload: CommandExecution[] },
     ) => {
-      state.items = payload.map((item) => ({
-        ...item,
-        command: item.command || EMPTY_COMMAND,
-        emptyCommand: !item.command,
-      }))
+      state.items = payload.map(mapCommandExecutionToUI)
       state.loading = false
       state.isLoaded = true
     },