From 5b2b3f37acd6b8f8563040c4b658635c0b35807e Mon Sep 17 00:00:00 2001
From: Egor Zalenski <egor.zalenski@softeq.com>
Date: Thu, 12 Dec 2024 09:27:00 +0100
Subject: [PATCH] #RIVS-299 - Add the changes from the main project

---
 l10n/bundle.l10n.json                         |   5 +-
 package.json                                  |   3 +-
 .../components/database-form/TlsDetails.tsx   | 103 ++++++++-----
 src/webviews/src/components/index.ts          |   4 +
 .../popover-delete/PopoverDelete.tsx          |   1 +
 .../super-select/SuperSelect.spec.tsx         |  43 ++++++
 .../components/super-select/SuperSelect.tsx   |  51 +++++++
 .../removable-option/RemovableOption.spec.tsx |  13 ++
 .../removable-option/RemovableOption.tsx      |  63 ++++++++
 .../super-select/styles.module.scss           |  38 +++++
 src/webviews/src/constants/database/form.ts   |   6 +-
 src/webviews/src/interfaces/database/form.ts  |   2 +-
 .../rejson-details/RejsonDetailsWrapper.tsx   |   7 +-
 .../EditEntireItemAction.tsx                  |   1 +
 .../rejson-details/hooks/useRejsonStore.ts    |   6 +-
 .../components/rejson-details/interfaces.ts   |   2 +-
 .../rejson-object/RejsonObject.tsx            |   6 +-
 .../rejson-scalar/RejsonScalar.spec.tsx       |  40 +++++
 .../rejson-scalar/RejsonScalar.tsx            |   5 +-
 .../rejson-details/utils/utils.spec.ts        | 143 +++++++++++++++++-
 .../components/rejson-details/utils/utils.ts  | 114 +++++++++++++-
 .../database-wrapper/DatabaseWrapper.tsx      |   2 +-
 .../manual-connection/ManualConnection.tsx    |  23 ++-
 .../ManualConnectionFrom.spec.tsx             |  15 +-
 .../useCertificatesStore.spec.ts              |  24 ++-
 .../useCertificatesStore.ts                   |  20 +++
 src/webviews/src/ui/button/RiButton.tsx       |   1 +
 src/webviews/src/utils/comparisons/diff.ts    |   2 +-
 .../src/utils/comparisons/tests/diff.spec.ts  |   2 +-
 src/webviews/src/utils/database/form.tsx      |  29 ++--
 .../src/utils/formatters/bufferFormatters.ts  |   7 +
 src/webviews/src/utils/formatters/javaDate.ts |  42 +++++
 .../formatters/tests/bufferFormatters.spec.ts |   8 +
 .../formatters/tests/valueFormatters.spec.ts  |   4 +-
 .../src/utils/formatters/valueFormatters.ts   |   4 +-
 src/webviews/src/utils/telemetry/events.ts    |   1 +
 .../handlers/database/certificatesHandlers.ts |   4 +
 src/webviews/test/helpers/constants.ts        |   9 ++
 yarn.lock                                     |   8 +-
 39 files changed, 769 insertions(+), 92 deletions(-)
 create mode 100644 src/webviews/src/components/super-select/SuperSelect.spec.tsx
 create mode 100644 src/webviews/src/components/super-select/SuperSelect.tsx
 create mode 100644 src/webviews/src/components/super-select/components/removable-option/RemovableOption.spec.tsx
 create mode 100644 src/webviews/src/components/super-select/components/removable-option/RemovableOption.tsx
 create mode 100644 src/webviews/src/components/super-select/styles.module.scss
 create mode 100644 src/webviews/src/utils/formatters/javaDate.ts

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index 2d2ba56d..2d260197 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -41,7 +41,7 @@
   "Key Name": "Key Name",
   " will be deleted.": " will be deleted.",
   "Delete": "Delete",
-  "will be deleted from Redis for VS Code.": "will be deleted from Redis for VS Code.",
+  "will be removed from Redis for VS Code.": "will be removed from Redis for VS Code.",
   "Key Size": "Key Size",
   "Key Size: ": "Key Size: ",
   "Length": "Length",
@@ -295,9 +295,6 @@
   "Host:": "Host:",
   "Database Index:": "Database Index:",
   "Modules:": "Modules:",
-  "Select Logical Database": "Select Logical Database",
-  "Database Index": "Database Index",
-  "Enter Database Index": "Enter Database Index",
   "No decompression": "No decompression",
   "Enable automatic data decompression": "Enable automatic data decompression",
   "Decompression format": "Decompression format",
diff --git a/package.json b/package.json
index d829405c..00c17e55 100644
--- a/package.json
+++ b/package.json
@@ -143,6 +143,7 @@
     "download:backend": "tsc ./scripts/downloadBackend.ts && node ./scripts/downloadBackend.js",
     "dev": "vite dev",
     "dev:key": "cross-env RI_DATA_ROUTE=main/key vite dev",
+    "dev:database": "cross-env RI_DATA_ROUTE=main/add_database vite dev",
     "dev:sidebar": "cross-env RI_DATA_ROUTE=sidebar vite dev",
     "l10n:collect": "npx @vscode/l10n-dev export -o ./l10n ./src",
     "watch": "tsc -watch -p ./",
@@ -286,7 +287,7 @@
     "react-inlinesvg": "^4.1.1",
     "react-monaco-editor": "^0.55.0",
     "react-router-dom": "^6.17.0",
-    "react-select": "^5.8.0",
+    "react-select": "^5.8.3",
     "react-spinners": "^0.13.8",
     "react-virtualized": "^9.22.5",
     "react-virtualized-auto-sizer": "^1.0.20",
diff --git a/src/webviews/src/components/database-form/TlsDetails.tsx b/src/webviews/src/components/database-form/TlsDetails.tsx
index ddd70cd6..d4398d89 100644
--- a/src/webviews/src/components/database-form/TlsDetails.tsx
+++ b/src/webviews/src/components/database-form/TlsDetails.tsx
@@ -2,40 +2,61 @@ import React, { ChangeEvent, useId } from 'react'
 import cx from 'classnames'
 import { FormikProps } from 'formik'
 import * as l10n from '@vscode/l10n'
-import { VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 import { CheckboxChangeEvent } from 'rc-checkbox'
+import { find } from 'lodash'
+import { MenuListProps } from 'react-select'
 
-import { validateCertName, validateField } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent, validateCertName, validateField } from 'uiSrc/utils'
 import {
   ADD_NEW,
   ADD_NEW_CA_CERT,
-  ADD_NEW_CA_CERT_LABEL,
-  ADD_NEW_LABEL,
+  ApiEndpoints,
   NO_CA_CERT,
-  NO_CA_CERT_LABEL,
 } from 'uiSrc/constants'
-import { DbConnectionInfo } from 'uiSrc/interfaces'
-import { Checkbox, InputText, Select, TextArea } from 'uiSrc/ui'
+import { DbConnectionInfo, RedisString } from 'uiSrc/interfaces'
+import { Checkbox, InputText, TextArea } from 'uiSrc/ui'
+import { removeCertAction } from 'uiSrc/store'
+import { SuperSelectRemovableOption, SuperSelect, SuperSelectOption } from 'uiSrc/components'
 import styles from './styles.module.scss'
 
+const suffix = '_tls_details'
+
 export interface Props {
   formik: FormikProps<DbConnectionInfo>
   caCertificates?: { id: string, name: string }[]
   certificates?: { id: string, name: string }[]
 }
+
 const TlsDetails = (props: Props) => {
   const { formik, caCertificates, certificates } = props
   const id = useId()
 
-  const optionsCertsCA = [
-    {
-      value: NO_CA_CERT,
-      label: NO_CA_CERT_LABEL,
-    },
-    {
-      value: ADD_NEW_CA_CERT,
-      label: ADD_NEW_CA_CERT_LABEL,
-    },
+  const handleDeleteCaCert = (id: RedisString, onSuccess?: () => void) => {
+    removeCertAction(id, ApiEndpoints.CA_CERTIFICATES, () => {
+      onSuccess?.()
+      handleClickDeleteCert('CA')
+    })
+  }
+
+  const handleDeleteClientCert = (id: RedisString, onSuccess?: () => void) => {
+    removeCertAction(id, ApiEndpoints.CLIENT_CERTIFICATES, () => {
+      onSuccess?.()
+      handleClickDeleteCert('Client')
+    })
+  }
+
+  const handleClickDeleteCert = (certificateType: 'Client' | 'CA') => {
+    sendEventTelemetry({
+      event: TelemetryEvent.CONFIG_DATABASES_CERTIFICATE_REMOVED,
+      eventData: {
+        certificateType,
+      },
+    })
+  }
+
+  const optionsCertsCA: SuperSelectOption[] = [
+    NO_CA_CERT,
+    ADD_NEW_CA_CERT,
   ]
 
   caCertificates?.forEach((cert) => {
@@ -45,12 +66,7 @@ const TlsDetails = (props: Props) => {
     })
   })
 
-  const optionsCertsClient = [
-    {
-      value: ADD_NEW,
-      label: ADD_NEW_LABEL,
-    },
-  ]
+  const optionsCertsClient: SuperSelectOption[] = [ADD_NEW]
 
   certificates?.forEach((cert) => {
     optionsCertsClient.push({
@@ -130,17 +146,22 @@ const TlsDetails = (props: Props) => {
               <div className="w-[100px]">
                 {`${l10n.t('CA Certificate')}${formik.values.verifyServerTlsCert ? '*' : ''}`}
               </div>
-              <Select
-                // name="selectedCaCertName"
-                // placeholder="Select CA certificate"
+              <SuperSelect
                 containerClassName="database-form-select w-[256px]"
-                itemClassName="database-form-select__option"
-                idSelected={formik.values.selectedCaCertName ?? NO_CA_CERT}
+                selectedOption={find(optionsCertsCA, { value: formik.values.selectedCaCertName }) as SuperSelectOption ?? NO_CA_CERT}
                 options={optionsCertsCA}
-                onChange={(value) => {
+                components={{ MenuList: (props: MenuListProps<SuperSelectOption, false>) => (
+                  <SuperSelectRemovableOption
+                    {...props}
+                    suffix={suffix}
+                    countDefaultOptions={2}
+                    onDeleteOption={handleDeleteCaCert}
+                  />
+                ) }}
+                onChange={(option) => {
                   formik.setFieldValue(
                     'selectedCaCertName',
-                    value || NO_CA_CERT,
+                    option?.value || NO_CA_CERT?.value,
                   )
                 }}
                 testid="select-ca-cert"
@@ -148,7 +169,7 @@ const TlsDetails = (props: Props) => {
             </div>
 
             {formik.values.tls
-              && formik.values.selectedCaCertName === ADD_NEW_CA_CERT && (
+              && formik.values.selectedCaCertName === ADD_NEW_CA_CERT.value && (
                 <div className="mb-3">
                   <InputText
                     name="newCaCertName"
@@ -170,7 +191,7 @@ const TlsDetails = (props: Props) => {
           </div>
 
           {formik.values.tls
-            && formik.values.selectedCaCertName === ADD_NEW_CA_CERT && (
+            && formik.values.selectedCaCertName === ADD_NEW_CA_CERT.value && (
             <div>
               <TextArea
                 name="newCaCert"
@@ -203,13 +224,23 @@ const TlsDetails = (props: Props) => {
           <div>
             <div className="flex items-center pb-3">
               <div className="w-[100px]">{l10n.t('Client Certificate*')}</div>
-              <Select
+              <SuperSelect
                 containerClassName="database-form-select w-[256px]"
-                itemClassName="database-form-select__option"
+                selectedOption={find(optionsCertsClient, { value: formik.values.selectedTlsClientCertId }) as SuperSelectOption ?? ADD_NEW}
                 options={optionsCertsClient}
-                idSelected={formik.values.selectedTlsClientCertId ?? ADD_NEW}
-                onChange={(value) => {
-                  formik.setFieldValue('selectedTlsClientCertId', value)
+                components={{ MenuList: (props: MenuListProps<SuperSelectOption, false>) => (
+                  <SuperSelectRemovableOption
+                    {...props}
+                    countDefaultOptions={1}
+                    suffix={suffix}
+                    onDeleteOption={handleDeleteClientCert}
+                  />
+                ) }}
+                onChange={(option) => {
+                  formik.setFieldValue(
+                    'selectedTlsClientCertId',
+                    option?.value || ADD_NEW?.value,
+                  )
                 }}
                 testid="select-cert"
               />
diff --git a/src/webviews/src/components/index.ts b/src/webviews/src/components/index.ts
index f0a11a3a..fef77e72 100644
--- a/src/webviews/src/components/index.ts
+++ b/src/webviews/src/components/index.ts
@@ -10,6 +10,10 @@ export { FieldMessage } from './field-message/FieldMessage'
 export { NoDatabases } from './no-databases/NoDatabases'
 export { MonacoLanguages } from './monaco-languages/MonacoLanguages'
 export { UploadFile } from './upload-file/UploadFile'
+export { SuperSelect } from './super-select/SuperSelect'
+export { SuperSelectRemovableOption } from './super-select/components/removable-option/RemovableOption'
 export * from './database-form'
 export * from './consents-option'
 export * from './consents-privacy'
+
+export type { SuperSelectOption } from './super-select/SuperSelect'
diff --git a/src/webviews/src/components/popover-delete/PopoverDelete.tsx b/src/webviews/src/components/popover-delete/PopoverDelete.tsx
index 4e28e53d..29dd9c0c 100644
--- a/src/webviews/src/components/popover-delete/PopoverDelete.tsx
+++ b/src/webviews/src/components/popover-delete/PopoverDelete.tsx
@@ -66,6 +66,7 @@ const PopoverDelete = (props: Props) => {
     <Popup
       key={item}
       ref={ref}
+      nested={false}
       closeOnEscape
       closeOnDocumentClick
       repositionOnResize
diff --git a/src/webviews/src/components/super-select/SuperSelect.spec.tsx b/src/webviews/src/components/super-select/SuperSelect.spec.tsx
new file mode 100644
index 00000000..767980ce
--- /dev/null
+++ b/src/webviews/src/components/super-select/SuperSelect.spec.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+
+import { render, constants, fireEvent, waitFor } from 'testSrc/helpers'
+import { SuperSelect, Props } from './SuperSelect'
+
+const mockedProps = mock<Props>()
+const testIdMock = 'my-select-component'
+
+describe('SuperSelect', () => {
+  it('should render', async () => {
+    expect(render(
+      <SuperSelect {...instance(mockedProps)} options={constants.SUPER_SELECT_OPTIONS} />),
+    ).toBeTruthy()
+  })
+
+  it('should call onChange when the first option is selected', async () => {
+    const mockedOnChange = vi.fn()
+    const mockedLabel = constants.SUPER_SELECT_OPTIONS?.[0].label ?? ''
+    const mockedValue = constants.SUPER_SELECT_OPTIONS?.[0].value ?? ''
+
+    const { getByText, queryByTestId } = render(<SuperSelect
+      options={constants.SUPER_SELECT_OPTIONS}
+      onChange={mockedOnChange}
+      testid={testIdMock}
+    />)
+
+    const mySelectComponent = queryByTestId('my-select-component')
+
+    expect(mySelectComponent).toBeDefined()
+    expect(mySelectComponent).not.toBeNull()
+    expect(mockedOnChange).toHaveBeenCalledTimes(0)
+
+    fireEvent.keyDown(mySelectComponent?.firstChild!, { key: 'ArrowDown' })
+    await waitFor(() => getByText(mockedLabel))
+    fireEvent.click(getByText(mockedLabel))
+
+    expect(mockedOnChange).toHaveBeenCalledTimes(1)
+    expect(mockedOnChange).toHaveBeenCalledWith(
+      { label: mockedLabel, value: mockedValue },
+      { action: 'select-option', name: undefined, option: undefined })
+  })
+})
diff --git a/src/webviews/src/components/super-select/SuperSelect.tsx b/src/webviews/src/components/super-select/SuperSelect.tsx
new file mode 100644
index 00000000..cd3081ef
--- /dev/null
+++ b/src/webviews/src/components/super-select/SuperSelect.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+import cx from 'classnames'
+import Select, { Props as SelectProps } from 'react-select'
+
+import { Maybe } from 'uiSrc/interfaces'
+import styles from './styles.module.scss'
+
+export interface SuperSelectOption {
+  value: string
+  label: string
+  testid?: string
+}
+
+export interface Props extends SelectProps<SuperSelectOption, false> {
+  selectedOption?: Maybe<SuperSelectOption>
+  containerClassName?: string
+  itemClassName?: string
+  testid?: string
+}
+
+const SuperSelect: FC<Props> = (props) => {
+  const {
+    selectedOption,
+    containerClassName,
+    testid,
+  } = props
+
+  return (
+    <div className={cx(styles.container, containerClassName)} data-testid={testid}>
+      <Select<SuperSelectOption>
+        {...props}
+        closeMenuOnSelect
+        closeMenuOnScroll
+        isSearchable={false}
+        isMulti={false}
+        value={selectedOption}
+        classNames={{
+          container: () => styles.selectContainer,
+          control: () => styles.control,
+          option: ({ isSelected }) => cx(styles.option, { [styles.optionSelected]: isSelected }),
+          singleValue: () => styles.singleValue,
+          menu: () => styles.menu,
+          indicatorsContainer: () => styles.indicatorsContainer,
+          indicatorSeparator: () => 'hidden',
+        }}
+      />
+    </div>
+  )
+}
+
+export { SuperSelect }
diff --git a/src/webviews/src/components/super-select/components/removable-option/RemovableOption.spec.tsx b/src/webviews/src/components/super-select/components/removable-option/RemovableOption.spec.tsx
new file mode 100644
index 00000000..9222caa8
--- /dev/null
+++ b/src/webviews/src/components/super-select/components/removable-option/RemovableOption.spec.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+
+import { render, constants } from 'testSrc/helpers'
+import { SuperSelectRemovableOption, Props } from './RemovableOption'
+
+const mockedProps = mock<Props>()
+
+describe('SuperSelectRemovableOption', () => {
+  it('should render', async () => {
+    expect(render(<SuperSelectRemovableOption {...instance(mockedProps)} options={constants.SUPER_SELECT_OPTIONS} />)).toBeTruthy()
+  })
+})
diff --git a/src/webviews/src/components/super-select/components/removable-option/RemovableOption.tsx b/src/webviews/src/components/super-select/components/removable-option/RemovableOption.tsx
new file mode 100644
index 00000000..6db35c68
--- /dev/null
+++ b/src/webviews/src/components/super-select/components/removable-option/RemovableOption.tsx
@@ -0,0 +1,63 @@
+import React, { Children, useCallback, useState } from 'react'
+import { MenuListProps } from 'react-select'
+import cx from 'classnames'
+import * as l10n from '@vscode/l10n'
+
+import { PopoverDelete, SuperSelectOption } from 'uiSrc/components'
+import { Maybe, RedisString } from 'uiSrc/interfaces'
+
+import styles from '../../styles.module.scss'
+
+export interface Props extends MenuListProps<SuperSelectOption, false> {
+  suffix: string
+  countDefaultOptions: number
+  onDeleteOption: (id: RedisString, onSuccess: () => void) => void
+}
+
+const SuperSelectRemovableOption = (props: Props) => {
+  const { suffix, countDefaultOptions = 0, options, children, getValue, selectOption, onDeleteOption } = props
+
+  const [activeOptionId, setActiveOptionId] = useState<Maybe<string>>(undefined)
+
+  const showPopover = useCallback((id = '') => {
+    setActiveOptionId(`${id}${suffix}`)
+  }, [])
+
+  const handleRemoveOption = (id: RedisString) => {
+    onDeleteOption(id, () => {
+      const selectedValue = getValue()?.[0]
+      setActiveOptionId(undefined)
+
+      // reset selected option if removed value is selected
+      if (selectedValue?.value === id) {
+        selectOption(options?.[0] as SuperSelectOption)
+      } else {
+        selectOption(selectedValue)
+      }
+    })
+  }
+
+  return (
+    <div>
+      {Children.map(children, (child, i) => (
+        <div key={(options[i] as SuperSelectOption).value} className={cx(styles.option, 'flex justify-between items-center relative')}>
+          {child}
+          {i + 1 > countDefaultOptions && <PopoverDelete
+            header={`${(options[i] as SuperSelectOption).label}`}
+            text={l10n.t('will be removed from Redis for VS Code.')}
+            item={(options[i] as SuperSelectOption).value}
+            suffix={suffix}
+            triggerClassName='absolute right-2.5'
+            position='right center'
+            deleting={activeOptionId}
+            showPopover={showPopover}
+            handleDeleteItem={handleRemoveOption}
+            testid={`delete-option-${(options[i] as SuperSelectOption).value}`}
+          />}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { SuperSelectRemovableOption }
diff --git a/src/webviews/src/components/super-select/styles.module.scss b/src/webviews/src/components/super-select/styles.module.scss
new file mode 100644
index 00000000..40728e8f
--- /dev/null
+++ b/src/webviews/src/components/super-select/styles.module.scss
@@ -0,0 +1,38 @@
+.container {
+  @apply min-w-[210px];
+}
+
+.selectContainer {
+  @apply min-h-8 h-8 #{!important};
+}
+
+.control {
+  @apply bg-vscode-dropdown-background border-solid border border-vscode-input-border rounded-none min-h-8 h-8 cursor-pointer #{!important};
+}
+
+.option {
+  @apply bg-vscode-input-background cursor-pointer #{!important};
+
+  &:hover {
+    background-color: var(--vscode-sideBarTitle-background) !important;
+  }
+
+  &Selected {
+    @apply text-vscode-foreground #{!important};
+    background-color: var(--vscode-sideBarTitle-background) !important;
+  }
+}
+
+.indicatorsContainer {
+  @apply min-h-8 h-8 #{!important};
+}
+
+.menu {
+  @apply mt-0 max-h-[200px] rounded-none overflow-auto #{!important};
+}
+
+.singleValue {
+  @apply text-vscode-foreground #{!important};
+}
+
+
diff --git a/src/webviews/src/constants/database/form.ts b/src/webviews/src/constants/database/form.ts
index 4d8fc2e9..d7491d10 100644
--- a/src/webviews/src/constants/database/form.ts
+++ b/src/webviews/src/constants/database/form.ts
@@ -1,11 +1,11 @@
 import * as l10n from '@vscode/l10n'
 
-export const ADD_NEW_CA_CERT = 'ADD_NEW_CA_CERT'
 export const ADD_NEW_CA_CERT_LABEL = l10n.t('Add new CA certificate')
-export const NO_CA_CERT = 'NO_CA_CERT'
 export const NO_CA_CERT_LABEL = l10n.t('No CA Certificate')
-export const ADD_NEW = 'ADD_NEW'
 export const ADD_NEW_LABEL = l10n.t('Add new certificate')
+export const ADD_NEW_CA_CERT = { value: 'ADD_NEW_CA_CERT', label: ADD_NEW_CA_CERT_LABEL }
+export const NO_CA_CERT = { value: 'NO_CA_CERT', label: NO_CA_CERT_LABEL }
+export const ADD_NEW = { value: 'ADD_NEW', label: ADD_NEW_LABEL }
 export const NONE = l10n.t('NONE')
 export const DEFAULT_HOST = '127.0.0.1'
 export const DEFAULT_PORT = '6379'
diff --git a/src/webviews/src/interfaces/database/form.ts b/src/webviews/src/interfaces/database/form.ts
index 3728d1f3..391bc7b2 100644
--- a/src/webviews/src/interfaces/database/form.ts
+++ b/src/webviews/src/interfaces/database/form.ts
@@ -13,7 +13,7 @@ export interface DbConnectionInfo extends Database {
   servername?: string
   verifyServerTlsCert?: boolean
   caCertificates?: { name: string, id: string }[]
-  selectedCaCertName: string | typeof ADD_NEW_CA_CERT | typeof NO_CA_CERT
+  selectedCaCertName: string | typeof ADD_NEW_CA_CERT.value | typeof NO_CA_CERT.value
   newCaCertName?: string
   newCaCert?: string
   username?: string
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx b/src/webviews/src/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
index 1c170532..2ec4e562 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx
@@ -8,6 +8,7 @@ import { KeyTypes } from 'uiSrc/constants'
 import { useDatabasesStore, useSelectedKeyStore } from 'uiSrc/store'
 import { Spinner } from 'uiSrc/ui'
 
+import { parseJsonData } from './utils'
 import { IJSONData } from './interfaces'
 import { RejsonDetails } from './rejson-details'
 import { useRejsonStore } from './hooks/useRejsonStore'
@@ -17,8 +18,8 @@ import styles from './styles.module.scss'
 export interface Props extends KeyDetailsHeaderProps {}
 
 const RejsonDetailsWrapper = (props: Props) => {
-  const { data, downloaded, type, path, loading } = useRejsonStore(useShallow((state) => ({
-    data: state.data.data,
+  const { updatedData, downloaded, type, path, loading } = useRejsonStore(useShallow((state) => ({
+    updatedData: state.data.data,
     type: state.data.type,
     path: state.data.path,
     loading: state.loading,
@@ -35,6 +36,8 @@ const RejsonDetailsWrapper = (props: Props) => {
 
   const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
 
+  const data = parseJsonData(updatedData)
+
   useEffect(() => {
     setExpandedRows(new Set())
   }, [nameString])
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
index f471a4a3..41920eec 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
@@ -83,6 +83,7 @@ export const EditEntireItemAction = (props: Props) => {
               className={styles.declineBtn}
               onClick={onCancel}
               aria-label="Cancel add"
+              data-testid="cancel-edit-btn"
             >
               <VscChromeClose />
             </VSCodeButton>
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts b/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts
index 7238e69a..1f36ff96 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts
+++ b/src/webviews/src/modules/key-details/components/rejson-details/hooks/useRejsonStore.ts
@@ -22,6 +22,7 @@ import {
   RejsonState,
   RejsonDataState,
 } from './interface'
+import { parseJsonData } from '../utils'
 
 const JSON_LENGTH_TO_FORCE_RETRIEVE = 200
 // eslint-disable-next-line import/no-mutable-exports
@@ -222,7 +223,10 @@ export const fetchVisualisationResults = async (
     )
 
     if (isStatusSuccessful(status)) {
-      return data
+      return {
+        ...data,
+        data: parseJsonData(data?.data),
+      }
     }
 
     throw new Error(data.toString())
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/interfaces.ts b/src/webviews/src/modules/key-details/components/rejson-details/interfaces.ts
index f44c79e9..fa04bc13 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/interfaces.ts
+++ b/src/webviews/src/modules/key-details/components/rejson-details/interfaces.ts
@@ -65,7 +65,7 @@ export interface DynamicTypesProps {
 
 interface JSONCommonProps {
   keyName: string | number
-  value: IJSONValue
+  value: string | number | boolean | bigint
   cardinality?: number
   selectedKey: RedisString
   path?: string
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx b/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx
index 2f942410..b98c2bb7 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx
@@ -85,7 +85,11 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
     const data = await handleFetchVisualisationResults(selectedKey, path, true)
 
     setEditEntireObject(true)
-    setValueOfEntireObject(typeof data.data === 'object' ? JSON.stringify(data.data, undefined, 4) : data.data)
+    setValueOfEntireObject(typeof data.data === 'object' ? JSON.stringify(data.data, (_key, value) => (
+      typeof value === 'bigint'
+        ? value.toString()
+        : value
+    ), 4) : data.data)
   }
 
   const onClickExpandCollapse = (path: string) => {
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.spec.tsx b/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.spec.tsx
index c045ca1b..f5854535 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.spec.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.spec.tsx
@@ -98,4 +98,44 @@ describe('JSONScalar', () => {
 
     expect(handleEdit).not.toBeCalled()
   })
+
+  it('should render BigInt value when root', () => {
+    render(<RejsonScalar
+      {...instance(mockedProps)}
+      isRoot
+      value={BigInt('1188950299261208742')}
+    />)
+
+    expect(screen.getByText('1188950299261208742')).toBeInTheDocument()
+  })
+
+  it('should render BigInt value when not root', () => {
+    render(<RejsonScalar
+      {...instance(mockedProps)}
+      isRoot={false}
+      value={BigInt('1188950299261208742')}
+    />)
+
+    expect(screen.getByTestId('json-scalar-value')).toHaveTextContent('1188950299261208742')
+  })
+
+  it('should render regular number without n suffix', () => {
+    render(<RejsonScalar
+      {...instance(mockedProps)}
+      isRoot
+      value={123}
+    />)
+
+    expect(screen.getByText('123')).toBeInTheDocument()
+  })
+
+  it('should render string value with quotes', () => {
+    render(<RejsonScalar
+      {...instance(mockedProps)}
+      isRoot
+      value="test"
+    />)
+
+    expect(screen.getByText('"test"')).toBeInTheDocument()
+  })
 })
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx b/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx
index b20c2eb1..1d1feb6b 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { GoAlert } from 'react-icons/go'
-import { isNull, isString } from 'lodash'
 
 import { InlineEditor, PopoverDelete, FieldMessage } from 'uiSrc/components'
 import { TelemetryEvent, bufferToString, createDeleteFieldHeader, createDeleteFieldMessage, sendEventTelemetry } from 'uiSrc/utils'
@@ -9,7 +8,7 @@ import { Nullable } from 'uiSrc/interfaces'
 import { useKeysInContext } from 'uiSrc/modules/keys-tree/hooks/useKeys'
 
 import { JSONScalarProps } from '../interfaces'
-import { generatePath, getClassNameByValue, isValidJSON } from '../utils'
+import { generatePath, getClassNameByValue, isValidJSON, stringifyScalarValue } from '../utils'
 import { setReJSONDataAction } from '../hooks/useRejsonStore'
 import { JSONErrors } from '../constants'
 
@@ -36,7 +35,7 @@ export const RejsonScalar = (props: JSONScalarProps) => {
   const databaseId = useKeysInContext((state) => state.databaseId)
 
   useEffect(() => {
-    setChangedValue(isString(value) ? `"${value}"` : isNull(value) ? 'null' : value)
+    setChangedValue(stringifyScalarValue(value))
   }, [value])
 
   const onDeclineChanges = () => {
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.spec.ts b/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.spec.ts
index e7f98de5..99d8b5f5 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.spec.ts
+++ b/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.spec.ts
@@ -1,4 +1,4 @@
-import { generatePath, getBrackets, isRealArray, isRealObject, isScalar, isValidKey, wrapPath } from './utils'
+import { generatePath, getBrackets, isRealArray, isRealObject, isScalar, isValidKey, parseJsonData, parseValue, stringifyScalarValue, wrapPath } from './utils'
 import { ObjectTypes } from '../interfaces'
 
 describe('JSONUtils', () => {
@@ -79,4 +79,145 @@ describe('JSONUtils', () => {
       expect(isValidKey('"')).toBeFalsy()
     })
   })
+
+  describe('JSON Parsing Utils', () => {
+    const bigintAsString = '1188950299261208742'
+    const scientificNotation = 1.2345678901234568e+29
+
+    describe('parseValue', () => {
+      it('should handle non-string values', () => {
+        expect(parseValue(123)).toBe(123)
+        expect(parseValue(null)).toBe(null)
+        expect(parseValue(undefined)).toBe(undefined)
+      })
+
+      it('should parse typed integer values', () => {
+        const result = parseValue(bigintAsString, 'integer')
+        expect(typeof result).toBe('bigint')
+        expect(result.toString()).toBe(bigintAsString)
+      })
+
+      it('should parse regular numbers as numbers, not bigints', () => {
+        const result = parseValue('42', 'integer')
+        expect(typeof result).toBe('number')
+        expect(result).toBe(42)
+      })
+
+      it('should preserve string values in JSON objects', () => {
+        const input = '{"a":"111"}'
+        const result = parseValue(input)
+        expect(result.a).toBe('111')
+        expect(typeof result.a).toBe('string')
+      })
+
+      it('should handle mixed string and number values in JSON objects', () => {
+        const input = '{"stringVal":"111","numberVal":111}'
+        const result = parseValue(input)
+        expect(result.stringVal).toBe('111')
+        expect(typeof result.stringVal).toBe('string')
+        expect(result.numberVal).toBe(111)
+        expect(typeof result.numberVal).toBe('number')
+      })
+
+      it('should handle string type with quotes', () => {
+        expect(parseValue('"test"', 'string')).toBe('test')
+        expect(parseValue('test', 'string')).toBe('test')
+      })
+
+      it('should parse boolean values', () => {
+        expect(parseValue('true', 'boolean')).toBe(true)
+        expect(parseValue('false', 'boolean')).toBe(false)
+      })
+
+      it('should parse null values', () => {
+        expect(parseValue('null', 'null')).toBe(null)
+      })
+
+      it('should parse JSON objects without type', () => {
+        const input = `{"value": ${bigintAsString}, "text": "test"}`
+        const result = parseValue(input)
+        expect(typeof result.value).toBe('bigint')
+        expect(result.value.toString()).toBe(bigintAsString)
+        expect(result.text).toBe('test')
+      })
+
+      it('should parse JSON arrays without type', () => {
+        const input = `[${bigintAsString}, "test"]`
+        const result = parseValue(input)
+        expect(typeof result[0]).toBe('bigint')
+        expect(result[0].toString()).toBe(bigintAsString)
+        expect(result[1]).toBe('test')
+      })
+
+      it('should handle extremely large integers and maintain scientific notation', () => {
+        const resultFromString = parseValue(`'${scientificNotation}'`, 'integer')
+        expect(resultFromString).toBe(`'${scientificNotation}'`)
+
+        const resultFromInt = parseValue(scientificNotation, 'integer')
+        expect(resultFromInt).toBe(scientificNotation)
+
+        // Also test parsing as part of JSON
+        const jsonWithLargeInt = `{"value": ${scientificNotation}}`
+        const parsedJson = parseValue(jsonWithLargeInt)
+        expect(parsedJson.value).toBe(scientificNotation)
+      })
+    })
+
+    describe('parseJsonData', () => {
+      it('should handle null or undefined data', () => {
+        expect(parseJsonData(null)).toBe(null)
+        expect(parseJsonData(undefined)).toBe(undefined)
+      })
+
+      it('should parse array of typed values', () => {
+        const input = [
+          { type: 'string', value: '"John"' },
+          { type: 'integer', value: bigintAsString },
+        ]
+        const result = parseJsonData(input)
+
+        expect(result[0].value).toBe('John')
+        expect(typeof result[1].value).toBe('bigint')
+        expect(result[1].value.toString()).toBe(bigintAsString)
+      })
+
+      it('should preserve non-typed array items', () => {
+        const input = [
+          { value: '"John"' },
+          { someOtherProp: 'test' },
+        ]
+        const result = parseJsonData(input)
+
+        expect(result[0].value).toBe('"John"')
+        expect(result[1].someOtherProp).toBe('test')
+      })
+    })
+  })
+
+  describe('stringifyScalarValue', () => {
+    it('should handle bigint values', () => {
+      const bigIntValue = BigInt('9007199254740991')
+      expect(stringifyScalarValue(bigIntValue)).toBe('9007199254740991')
+    })
+
+    it('should wrap string values in quotes', () => {
+      expect(stringifyScalarValue('hello')).toBe('"hello"')
+      expect(stringifyScalarValue('')).toBe('""')
+    })
+
+    it('should convert null to "null" string', () => {
+      expect(stringifyScalarValue(null as any)).toBe('null')
+    })
+
+    it('should convert numbers to string representation', () => {
+      expect(stringifyScalarValue(42)).toBe('42')
+      expect(stringifyScalarValue(-123.456)).toBe('-123.456')
+      expect(stringifyScalarValue(0)).toBe('0')
+    })
+
+    it('should convert boolean values to string representation', () => {
+      expect(stringifyScalarValue(true)).toBe('true')
+      expect(stringifyScalarValue(false)).toBe('false')
+    })
+  })
 })
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.ts b/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.ts
index 95897810..3952d8e3 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.ts
+++ b/src/webviews/src/modules/key-details/components/rejson-details/utils/utils.ts
@@ -1,4 +1,5 @@
-import { isArray } from 'lodash'
+import { isArray, isNull, isString } from 'lodash'
+import JSONBigInt from 'json-bigint'
 import { JSONScalarValue, ObjectTypes } from '../interfaces'
 import styles from '../styles.module.scss'
 
@@ -11,7 +12,7 @@ enum ClassNames {
 }
 
 export function isScalar(x: JSONScalarValue) {
-  return ['string', 'number', 'boolean'].indexOf(typeof x) !== -1 || x === null
+  return ['string', 'number', 'boolean', 'bigint'].indexOf(typeof x) !== -1 || x === null
 }
 
 export const isValidJSON = (value: string): boolean => {
@@ -61,3 +62,112 @@ export const getBrackets = (type: string, position: 'start' | 'end' = 'start') =
 }
 
 export const isValidKey = (key: string): boolean => /^"([^"\\]|\\.)*"$/.test(key)
+
+const JSONParser = JSONBigInt({
+  useNativeBigInt: true,
+  strict: false,
+  alwaysParseAsBig: false,
+  protoAction: 'preserve',
+  constructorAction: 'preserve',
+})
+
+const safeJSONParse = (value: string) => {
+  // Pre-process the string to handle scientific notation
+  const preprocessed = value.replace(/-?\d+\.?\d*e[+-]?\d+/gi, (match) =>
+    // Wrap scientific notation numbers in quotes to prevent BigInt conversion
+    `"${match}"`)
+
+  return JSONParser.parse(preprocessed, (_key: string, value: any) => {
+    // Convert quoted scientific notation back to numbers
+    if (typeof value === 'string' && /^-?\d+\.?\d*e[+-]?\d+$/i.test(value)) {
+      return Number(value)
+    }
+    return value
+  })
+}
+
+export const parseValue = (value: any, type?: string): any => {
+  try {
+    if (typeof value !== 'string' || !value) {
+      return value
+    }
+
+    if (type) {
+      switch (type) {
+        case 'integer': {
+          const num = BigInt(value)
+          return num > Number.MAX_SAFE_INTEGER ? num : Number(value)
+        }
+        case 'number':
+          return Number(value)
+        case 'boolean':
+          return value === 'true'
+        case 'null':
+          return null
+        case 'string':
+          if (value.startsWith('"') && value.endsWith('"')) {
+            return value.slice(1, -1)
+          }
+          return value
+        default:
+          return value
+      }
+    }
+
+    const parsed = safeJSONParse(value)
+
+    if (typeof parsed === 'object' && parsed !== null) {
+      if (Array.isArray(parsed)) {
+        return parsed.map((val) => parseValue(val))
+      }
+      const result: { [key: string]: any } = {}
+      Object.entries(parsed).forEach(([key, val]) => {
+        // This prevents double-parsing of JSON string values.
+        if (typeof val === 'string') {
+          result[key] = val
+        } else {
+          result[key] = parseValue(val)
+        }
+      })
+      return result
+    }
+    return parsed
+  } catch (e) {
+    try {
+      return JSON.parse(value)
+    } catch (error) {
+      return value
+    }
+  }
+}
+
+export const parseJsonData = (data: any) => {
+  if (!data) {
+    return data
+  }
+  try {
+    if (data && Array.isArray(data)) {
+      return data.map((item: { type?: string; value?: any }) => ({
+        ...item,
+        value: item.type && item.value ? parseValue(item.value, item.type) : item.value,
+      }))
+    }
+
+    return parseValue(data)
+  } catch (e) {
+    return data
+  }
+}
+
+export const stringifyScalarValue = (value: string | number | boolean | bigint): string => {
+  if (typeof value === 'bigint') {
+    return value.toString()
+  }
+  if (isString(value)) {
+    return `"${value}"`
+  }
+  if (isNull(value)) {
+    return 'null'
+  }
+  return String(value)
+}
diff --git a/src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx b/src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx
index 1ab0a070..cd5429d0 100644
--- a/src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx
+++ b/src/webviews/src/modules/keys-tree/components/database-wrapper/DatabaseWrapper.tsx
@@ -137,7 +137,7 @@ export const DatabaseWrapper = React.memo(({ database }: Props) => {
           </VSCodeButton>
           <PopoverDelete
             header={formatLongName(name, 50, 10, '...')}
-            text={l10n.t('will be deleted from Redis for VS Code.')}
+            text={l10n.t('will be removed from Redis for VS Code.')}
             item={id}
             position="bottom right"
             maxWidth={window.innerWidth - POPOVER_WINDOW_BORDER_WIDTH}
diff --git a/src/webviews/src/modules/manual-connection/ManualConnection.tsx b/src/webviews/src/modules/manual-connection/ManualConnection.tsx
index 288fba84..07f20e21 100644
--- a/src/webviews/src/modules/manual-connection/ManualConnection.tsx
+++ b/src/webviews/src/modules/manual-connection/ManualConnection.tsx
@@ -14,7 +14,7 @@ import {
   getFormValues,
 } from 'uiSrc/utils'
 import { DatabaseType, DbConnectionInfo, Nullable } from 'uiSrc/interfaces'
-import { ConnectionType, DbType,
+import { ADD_NEW, ADD_NEW_CA_CERT, ConnectionType, DbType,
   DEFAULT_TIMEOUT,
   SubmitBtnText,
   VscodeMessageAction,
@@ -131,6 +131,8 @@ const ManualConnection = (props: Props) => {
       sentinelMasterName,
       sentinelMasterUsername,
       sentinelMasterPassword,
+      ssh,
+      tls,
     } = values
 
     const database: any = {
@@ -143,6 +145,8 @@ const ManualConnection = (props: Props) => {
       password,
       compressor,
       timeout: timeout ? toNumber(timeout) * 1_000 : toNumber(DEFAULT_TIMEOUT),
+      ssh,
+      tls,
     }
 
     // add tls & ssh for database (modifies database object)
@@ -160,7 +164,22 @@ const ManualConnection = (props: Props) => {
     if (editMode) {
       database.id = editedDatabase?.id
 
-      return getFormUpdates(database, omit(editedDatabase, ['id']))
+      const updatedValues = getFormUpdates(database, omit(editedDatabase, ['id']))
+
+      // When a new caCert/clientCert is deleted, the editedDatabase
+      // is not updated with the deletion until 'apply' is
+      // clicked. Once the apply is clicked, the editedDatabase object
+      // that is validated against, still has the older certificates
+      // attached. Attaching the new certs to the final object helps.
+      if (values.selectedCaCertName === ADD_NEW_CA_CERT.value && values.newCaCertName !== '' && values.newCaCertName === editedDatabase?.caCert?.name) {
+        updatedValues.caCert = database.caCert
+      }
+
+      if (values.selectedTlsClientCertId === ADD_NEW.value && values.newTlsCertPairName !== '' && values.newTlsCertPairName === editedDatabase?.clientCert?.name) {
+        updatedValues.clientCert = database.clientCert
+      }
+
+      return updatedValues
     }
 
     return removeEmpty(database)
diff --git a/src/webviews/src/modules/manual-connection/manual-connection-form/ManualConnectionFrom.spec.tsx b/src/webviews/src/modules/manual-connection/manual-connection-form/ManualConnectionFrom.spec.tsx
index c24ac5a6..7cc9f177 100644
--- a/src/webviews/src/modules/manual-connection/manual-connection-form/ManualConnectionFrom.spec.tsx
+++ b/src/webviews/src/modules/manual-connection/manual-connection-form/ManualConnectionFrom.spec.tsx
@@ -384,12 +384,13 @@ describe('DatabaseForm', () => {
         />
       </div>,
     )
-    await waitFor(() => {
-      fireEvent.click(screen.getByTestId('select-ca-cert'))
-    })
-    await waitFor(() => {
-      fireEvent.click(queryAllByText('Add new CA certificate')[0] || document)
-    })
+
+    const caCertComponent = screen.queryByTestId('select-ca-cert')
+    fireEvent.keyDown(caCertComponent?.firstChild!, { key: 'ArrowDown' })
+
+    await waitFor(() => screen.getByText('Add new CA certificate'))
+
+    fireEvent.click(screen.getByText('Add new CA certificate'))
 
     expect(screen.getByTestId(NEW_CA_CERT)).toBeInTheDocument()
     await waitFor(() => {
@@ -423,7 +424,7 @@ describe('DatabaseForm', () => {
 
     expect(handleSubmit).toBeCalledWith(
       expect.objectContaining({
-        selectedCaCertName: ADD_NEW_CA_CERT,
+        selectedCaCertName: ADD_NEW_CA_CERT.value,
         newCaCertName: '321',
         newCaCert: '123',
       }),
diff --git a/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.spec.ts b/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.spec.ts
index f8e9585f..beade3ee 100644
--- a/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.spec.ts
+++ b/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.spec.ts
@@ -1,11 +1,14 @@
-import { apiService } from 'uiSrc/services'
+import { http, HttpResponse } from 'msw'
 import * as modules from 'uiSrc/modules'
+import { ApiEndpoints } from 'uiSrc/constants'
 import { constants } from 'testSrc/helpers'
-import { waitForStack } from 'testSrc/helpers/testUtils'
+import { getMWSUrl, waitForStack } from 'testSrc/helpers/testUtils'
+import { mswServer } from 'testSrc/server'
 import {
   useCertificatesStore,
   initialCertsState as initialStateInit,
   fetchCerts,
+  removeCertAction,
 } from './useCertificatesStore'
 
 vi.spyOn(modules, 'fetchString')
@@ -62,4 +65,21 @@ describe('async', () => {
     expect(useCertificatesStore.getState().clientCerts).toEqual(constants.CLIENT_CERTS)
     expect(useCertificatesStore.getState().loading).toEqual(false)
   })
+
+  it('removeCertAction', async () => {
+    // mock response from BE without first ca cert
+    mswServer.use(
+      http.get(
+        getMWSUrl(`${ApiEndpoints.CA_CERTIFICATES}`),
+        () => HttpResponse.json([constants.CA_CERTS[1]]),
+      ),
+    )
+
+    removeCertAction(constants.CA_CERTS?.[0].id, ApiEndpoints.CA_CERTIFICATES)
+    await waitForStack()
+
+    expect(useCertificatesStore.getState().caCerts).toEqual([constants.CA_CERTS[1]])
+    expect(useCertificatesStore.getState().clientCerts).toEqual(constants.CLIENT_CERTS)
+    expect(useCertificatesStore.getState().loading).toEqual(false)
+  })
 })
diff --git a/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts b/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts
index c9f47ce9..3cdf0fcd 100644
--- a/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts
+++ b/src/webviews/src/store/hooks/use-certificates-store/useCertificatesStore.ts
@@ -5,6 +5,7 @@ import { immer } from 'zustand/middleware/immer'
 import { apiService } from 'uiSrc/services'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { getApiErrorMessage, isStatusSuccessful, showErrorMessage } from 'uiSrc/utils'
+import { RedisString } from 'uiSrc/interfaces'
 import { Certificate, CertificatesActions, CertificatesStore } from './interface'
 
 export const initialCertsState: CertificatesStore = {
@@ -43,3 +44,22 @@ export const fetchCerts = (onSuccess?: () => void) => {
     }
   })
 }
+
+// Asynchronous thunk action
+export const removeCertAction = (id: RedisString, endpoint: ApiEndpoints, onSuccess?: () => void) => {
+  useCertificatesStore.setState(async (state) => {
+    state.processCerts()
+    try {
+      const { status } = await apiService.delete(`${endpoint}/${id}`)
+
+      if (isStatusSuccessful(status)) {
+        onSuccess?.()
+        fetchCerts()
+      }
+    } catch (error) {
+      showErrorMessage(getApiErrorMessage(error as AxiosError))
+    } finally {
+      state.processCertsFinal()
+    }
+  })
+}
diff --git a/src/webviews/src/ui/button/RiButton.tsx b/src/webviews/src/ui/button/RiButton.tsx
index e6a8703a..3fd1beb4 100644
--- a/src/webviews/src/ui/button/RiButton.tsx
+++ b/src/webviews/src/ui/button/RiButton.tsx
@@ -10,6 +10,7 @@ export const RiButton = React.forwardRef<HTMLButtonElement, Props>(({ children,
   <button
     ref={ref}
     {...props}
+    type="button"
     className={cx(styles.button, className)}
   >
     {children}
diff --git a/src/webviews/src/utils/comparisons/diff.ts b/src/webviews/src/utils/comparisons/diff.ts
index a3933511..4dc1a7bf 100644
--- a/src/webviews/src/utils/comparisons/diff.ts
+++ b/src/webviews/src/utils/comparisons/diff.ts
@@ -29,7 +29,7 @@ export const getFormUpdates = (obj1: UnknownObject = {}, obj2: UnknownObject = {
           result[key] = diff
         }
       } else if (value !== obj2[key] && !(!value && !obj2[key])) {
-        result[key] = value || null
+        result[key] = value ?? null
       }
 
       return result
diff --git a/src/webviews/src/utils/comparisons/tests/diff.spec.ts b/src/webviews/src/utils/comparisons/tests/diff.spec.ts
index d3d9926a..5a444573 100644
--- a/src/webviews/src/utils/comparisons/tests/diff.spec.ts
+++ b/src/webviews/src/utils/comparisons/tests/diff.spec.ts
@@ -18,7 +18,7 @@ describe('getDiffKeysOfObjectValues', () => {
 
 const getFormUpdatesTests: any[] = [
   [{ name: 'name' }, { name: 'name' }, {}],
-  [{ name: '' }, { name: 'name' }, { name: null }],
+  [{ name: '' }, { name: 'name' }, { name: '' }],
   [{ name: 'name' }, { name: '' }, { name: 'name' }],
   [{ name: 'name', port: 123 }, { name: '', port: 123 }, { name: 'name' }],
   [{ name: 'name', port: 123 }, { name: '', port: 1 }, { name: 'name', port: 123 }],
diff --git a/src/webviews/src/utils/database/form.tsx b/src/webviews/src/utils/database/form.tsx
index 3391cc4f..898ef07f 100644
--- a/src/webviews/src/utils/database/form.tsx
+++ b/src/webviews/src/utils/database/form.tsx
@@ -18,9 +18,9 @@ export const getTlsSettings = (values: DbConnectionInfo) => ({
   servername: (values.sni && values.servername) || undefined,
   verifyServerCert: values.verifyServerTlsCert,
   caCert:
-    !values.tls || values.selectedCaCertName === NO_CA_CERT
+    !values.tls || values.selectedCaCertName === NO_CA_CERT.value
       ? undefined
-      : values.selectedCaCertName === ADD_NEW_CA_CERT
+      : values.selectedCaCertName === ADD_NEW_CA_CERT.value
         ? {
           new: {
             name: values.newCaCertName,
@@ -35,9 +35,9 @@ export const getTlsSettings = (values: DbConnectionInfo) => ({
     ? undefined
     : typeof values.selectedTlsClientCertId === 'string'
     && values.tlsClientAuthRequired
-    && values.selectedTlsClientCertId !== ADD_NEW
+    && values.selectedTlsClientCertId !== ADD_NEW.value
       ? { id: values.selectedTlsClientCertId }
-      : values.selectedTlsClientCertId === ADD_NEW && values.tlsClientAuthRequired
+      : values.selectedTlsClientCertId === ADD_NEW.value && values.tlsClientAuthRequired
         ? {
           new: {
             name: values.newTlsCertPairName,
@@ -55,6 +55,7 @@ export const applyTlSDatabase = (database: any, tlsSettings: any) => {
   database.tls = useTls
   database.tlsServername = servername
   database.verifyServerCert = !!verifyServerCert
+  database.clientCert = clientCert
 
   if (!isUndefined(caCert?.new)) {
     database.caCert = {
@@ -68,7 +69,7 @@ export const applyTlSDatabase = (database: any, tlsSettings: any) => {
   }
 
   if (clientAuth) {
-    if (!isUndefined(clientCert.new)) {
+    if (!isUndefined(clientCert?.new)) {
       database.clientCert = {
         name: clientCert.new.name,
         certificate: clientCert.new.certificate,
@@ -76,7 +77,7 @@ export const applyTlSDatabase = (database: any, tlsSettings: any) => {
       }
     }
 
-    if (!isUndefined(clientCert.id)) {
+    if (!isUndefined(clientCert?.id)) {
       database.clientCert = { id: clientCert.id }
     }
   }
@@ -129,14 +130,14 @@ export const getFormErrors = (values: DbConnectionInfo) => {
   if (
     values.tls
     && values.verifyServerTlsCert
-    && values.selectedCaCertName === NO_CA_CERT
+    && values.selectedCaCertName === NO_CA_CERT.value
   ) {
     errs.selectedCaCertName = fieldDisplayNames.selectedCaCertName
   }
 
   if (
     values.tls
-    && values.selectedCaCertName === ADD_NEW_CA_CERT
+    && values.selectedCaCertName === ADD_NEW_CA_CERT.value
     && values.newCaCertName === ''
   ) {
     errs.newCaCertName = fieldDisplayNames.newCaCertName
@@ -144,7 +145,7 @@ export const getFormErrors = (values: DbConnectionInfo) => {
 
   if (
     values.tls
-    && values.selectedCaCertName === ADD_NEW_CA_CERT
+    && values.selectedCaCertName === ADD_NEW_CA_CERT.value
     && values.newCaCert === ''
   ) {
     errs.newCaCert = fieldDisplayNames.newCaCert
@@ -161,7 +162,7 @@ export const getFormErrors = (values: DbConnectionInfo) => {
   if (
     values.tls
     && values.tlsClientAuthRequired
-    && values.selectedTlsClientCertId === ADD_NEW
+    && values.selectedTlsClientCertId === ADD_NEW.value
   ) {
     if (values.newTlsCertPairName === '') {
       errs.newTlsCertPairName = fieldDisplayNames.newTlsCertPairName
@@ -285,15 +286,15 @@ export const getFormValues = (instance?: Nullable<Record<string, any>>) => ({
   modules: instance?.modules,
   showDb: !!instance?.db,
   showCompressor: instance && instance.compressor && instance.compressor !== NONE,
-  sni: !!instance?.servername,
-  servername: instance?.servername,
+  sni: !!instance?.tlsServername,
+  servername: instance?.tlsServername,
   newCaCert: '',
   newCaCertName: '',
-  selectedCaCertName: instance?.caCert?.id ?? NO_CA_CERT,
+  selectedCaCertName: instance?.caCert?.id ?? NO_CA_CERT.value,
   tlsClientAuthRequired: instance?.clientCert?.id ?? false,
   verifyServerTlsCert: instance?.verifyServerCert ?? false,
   newTlsCertPairName: '',
-  selectedTlsClientCertId: instance?.clientCert?.id ?? ADD_NEW,
+  selectedTlsClientCertId: instance?.clientCert?.id ?? ADD_NEW.value,
   newTlsClientCert: '',
   newTlsClientKey: '',
   sentinelMasterName: instance?.sentinelMaster?.name || '',
diff --git a/src/webviews/src/utils/formatters/bufferFormatters.ts b/src/webviews/src/utils/formatters/bufferFormatters.ts
index dff60e42..9f70befc 100644
--- a/src/webviews/src/utils/formatters/bufferFormatters.ts
+++ b/src/webviews/src/utils/formatters/bufferFormatters.ts
@@ -8,6 +8,9 @@ import {
   Nullable,
   RedisResponseBufferType,
 } from 'uiSrc/interfaces'
+import JavaDate from './javaDate'
+
+ObjectInputStream.RegisterObjectClass(JavaDate, JavaDate.ClassName, JavaDate.SerialVersionUID)
 
 const decoder = new TextDecoder('utf-8')
 const encoder = new TextEncoder()
@@ -183,6 +186,10 @@ const bufferToJava = (reply: RedisString) => {
     return decoded
   }
 
+  if (decoded instanceof Date) {
+    return decoded
+  }
+
   const { fields } = decoded
   const fieldsArray = Array.from(fields, ([key, value]) => ({ [key]: value }))
   return { ...decoded, fields: fieldsArray }
diff --git a/src/webviews/src/utils/formatters/javaDate.ts b/src/webviews/src/utils/formatters/javaDate.ts
new file mode 100644
index 00000000..eb609dd0
--- /dev/null
+++ b/src/webviews/src/utils/formatters/javaDate.ts
@@ -0,0 +1,42 @@
+import { ObjectInputStream, JavaSerializable } from 'java-object-serialization'
+
+export default class JavaDate implements JavaSerializable {
+  // The class name in the serialized data
+  static readonly ClassName = 'java.util.Date'
+
+  // The serial version UID followed for 'java.util.Date'
+  static readonly SerialVersionUID = '7523967970034938905'
+
+  // The maximum value for a Java long
+  readonly JAVA_MAX_LONG = 9223372036854775807n // 2^63 - 1
+
+  // The maximum value for a two's complement long
+  readonly TWO_COMPLEMENT_MAX_LONG = 18446744073709551616n // 2^64
+
+  time: bigint = 0n
+
+  readObject(stream: ObjectInputStream): void {
+    this.time = stream.readLong()
+  }
+
+  readResolve() {
+    let timeValue: number
+
+    // Handle two's complement conversion for negative numbers
+    if (this.time > this.JAVA_MAX_LONG) {
+      // If the number is larger than MAX_LONG, it's a negative number in two's complement
+      timeValue = Number(this.time - this.TWO_COMPLEMENT_MAX_LONG)
+    } else {
+      timeValue = Number(this.time)
+    }
+
+    const date = new Date(timeValue)
+
+    // Validate the date
+    if (Number.isNaN(date.getTime())) {
+      throw new Error(`Invalid date value: ${timeValue} (original: ${this.time})`)
+    }
+
+    return date
+  }
+}
diff --git a/src/webviews/src/utils/formatters/tests/bufferFormatters.spec.ts b/src/webviews/src/utils/formatters/tests/bufferFormatters.spec.ts
index 517e4bf8..a7e8b188 100644
--- a/src/webviews/src/utils/formatters/tests/bufferFormatters.spec.ts
+++ b/src/webviews/src/utils/formatters/tests/bufferFormatters.spec.ts
@@ -1,3 +1,4 @@
+import { ObjectInputStream } from 'java-object-serialization'
 import { RedisResponseBufferType } from 'uiSrc/interfaces'
 import {
   bufferToString,
@@ -14,6 +15,13 @@ import {
   bufferToJava,
   bufferToUint8Array,
 } from 'uiSrc/utils'
+import JavaDate from 'uiSrc/utils/formatters/javaDate'
+
+try {
+  // Register JavaDate class for deserialization
+  ObjectInputStream.RegisterObjectClass(JavaDate, JavaDate.ClassName, JavaDate.SerialVersionUID)
+  // eslint-disable-next-line no-empty
+} catch (e) {}
 
 const defaultValues = [
   { unicode: 'test', ascii: 'test', hex: '74657374', uint8Array: [116, 101, 115, 116], binary: '01110100011001010111001101110100' },
diff --git a/src/webviews/src/utils/formatters/tests/valueFormatters.spec.ts b/src/webviews/src/utils/formatters/tests/valueFormatters.spec.ts
index 1879eacb..94c8d79e 100644
--- a/src/webviews/src/utils/formatters/tests/valueFormatters.spec.ts
+++ b/src/webviews/src/utils/formatters/tests/valueFormatters.spec.ts
@@ -77,7 +77,7 @@ describe('bufferToSerializedFormat', () => {
 
   describe(KeyValueFormat.Msgpack, () => {
     describe('should properly serialize', () => {
-      const testValues = [{}, '""', 6677, true, { a: { b: [1, 2, '3'] } }].map((v) => ({
+      const testValues = [{}, '""', 6677, '反序列化', true, { a: { b: [1, 2, '3'] } }].map((v) => ({
         input: anyToBuffer(encode(v)),
         expected: JSON.stringify(v)
       }))
@@ -98,7 +98,7 @@ describe('bufferToSerializedFormat', () => {
 
   describe(KeyValueFormat.PHP, () => {
     describe('should properly serialize', () => {
-      const testValues = [[1], '""', 6677, true, { a: { b: [1, 2, '3'] } }].map((v) => ({
+      const testValues = [[1], '""', '反序列化', 6677, true, { a: { b: [1, 2, '3'] } }].map((v) => ({
         input: stringToBuffer(serialize(v)),
         expected: JSON.stringify(v)
       }))
diff --git a/src/webviews/src/utils/formatters/valueFormatters.ts b/src/webviews/src/utils/formatters/valueFormatters.ts
index b71ee1fd..906e8ed7 100644
--- a/src/webviews/src/utils/formatters/valueFormatters.ts
+++ b/src/webviews/src/utils/formatters/valueFormatters.ts
@@ -93,7 +93,7 @@ const formattingBuffer = (
     }
     case KeyValueFormat.PHP: {
       try {
-        const decoded = unserialize(Buffer.from(reply.data), {}, { strict: false, encoding: 'binary' })
+        const decoded = unserialize(bufferToUTF8(reply), {}, { strict: false, encoding: 'utf8' })
         const value = JSONBigInt.stringify(decoded)
         return JSONViewer({ value, ...props })
       } catch (e) {
@@ -198,7 +198,7 @@ const bufferToSerializedFormat = (
     }
     case KeyValueFormat.PHP: {
       try {
-        const decoded = unserialize(Buffer.from(value.data), {}, { strict: false, encoding: 'binary' })
+        const decoded = unserialize(bufferToUTF8(value), {}, { strict: false, encoding: 'utf8' })
         const stringified = JSON.stringify(decoded)
         return reSerializeJSON(stringified, space)
       } catch (e) {
diff --git a/src/webviews/src/utils/telemetry/events.ts b/src/webviews/src/utils/telemetry/events.ts
index 708071f5..a92e0921 100644
--- a/src/webviews/src/utils/telemetry/events.ts
+++ b/src/webviews/src/utils/telemetry/events.ts
@@ -38,6 +38,7 @@ export enum TelemetryEvent {
   CONFIG_DATABASES_REDIS_EXPORT_FAILED = 'CONFIG_DATABASES_REDIS_EXPORT_FAILED',
   CONFIG_DATABASES_REDIS_IMPORT_LOG_VIEWED = 'CONFIG_DATABASES_REDIS_IMPORT_LOG_VIEWED',
   CONFIG_DATABASES_TEST_CONNECTION_CLICKED = 'CONFIG_DATABASES_TEST_CONNECTION_CLICKED',
+  CONFIG_DATABASES_CERTIFICATE_REMOVED = 'CONFIG_DATABASES_CERTIFICATE_REMOVED',
 
   BUILD_FROM_SOURCE_CLICKED = 'BUILD_FROM_SOURCE_CLICKED',
   BUILD_USING_DOCKER_CLICKED = 'BUILD_USING_DOCKER_CLICKED',
diff --git a/src/webviews/test/handlers/database/certificatesHandlers.ts b/src/webviews/test/handlers/database/certificatesHandlers.ts
index 330bff81..32ac8373 100644
--- a/src/webviews/test/handlers/database/certificatesHandlers.ts
+++ b/src/webviews/test/handlers/database/certificatesHandlers.ts
@@ -12,6 +12,10 @@ const handlers: RequestHandler[] = [
     getMWSUrl(`${ApiEndpoints.CLIENT_CERTIFICATES}`),
     () => HttpResponse.json(constants.CLIENT_CERTS),
   ),
+  http.delete(
+    getMWSUrl(`${ApiEndpoints.CA_CERTIFICATES}/${constants.CA_CERTS[0]?.id}`),
+    () => HttpResponse.json(null),
+  ),
 
 ]
 
diff --git a/src/webviews/test/helpers/constants.ts b/src/webviews/test/helpers/constants.ts
index d1721eae..630d0228 100644
--- a/src/webviews/test/helpers/constants.ts
+++ b/src/webviews/test/helpers/constants.ts
@@ -4,6 +4,7 @@ import { KeyInfo } from 'uiSrc/interfaces'
 import { Certificate } from 'uiSrc/store/hooks/use-certificates-store/interface'
 import { UTF8ToArray, stringToBuffer } from 'uiSrc/utils'
 import { Database } from 'uiSrc/store'
+import { SuperSelectOption } from 'uiSrc/components'
 
 const COMMON_CONSENT_CONTENT = {
   defaultValue: false,
@@ -141,6 +142,10 @@ export const constants = {
     return CLIENT_CERTS
   },
 
+  get SUPER_SELECT_OPTIONS() {
+    return SUPER_SELECT_OPTIONS
+  },
+
   TEST_DATABASE_ID: uuidv4(),
   TEST_DATABASE_NAME: uuidv4(),
   TEST_DATABASE_HOST: uuidv4(),
@@ -313,6 +318,10 @@ const KEYS_LIST: any = {
 
 const CA_CERTS: Certificate[] = [{ id: 'id1', name: 'ca_name1' }, { id: 'id2', name: 'ca_name2' }]
 const CLIENT_CERTS: Certificate[] = [{ id: 'id11', name: 'client_name1' }, { id: 'id12', name: 'client_name2' }]
+const SUPER_SELECT_OPTIONS: SuperSelectOption[] = [
+  { value: 'val', label: 'lab' },
+  { value: 'val2', label: 'lab2' },
+]
 
 const DATABASE: Database = {
   id: constants.TEST_DATABASE_ID,
diff --git a/yarn.lock b/yarn.lock
index db4c9b65..981e9745 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7152,10 +7152,10 @@ react-router@6.21.3:
   dependencies:
     "@remix-run/router" "1.14.2"
 
-react-select@^5.8.0:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
-  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
+react-select@^5.8.3:
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.3.tgz#64e89ad20a846348b18c6fbb395b939d0153ed74"
+  integrity sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==
   dependencies:
     "@babel/runtime" "^7.12.0"
     "@emotion/cache" "^11.4.0"