Merge pull request #3796 from RedisInsight/feature/RI-6004-delete-certificates

[RI-6004] Delete Certificates

Author: mariasergeenko

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -388,7 +388,7 @@ const DatabasesListWrapper = ({ width, onEditInstance, editedInstance, onDeleteI
             />
             <PopoverDelete
               header={formatLongName(instance.name, 50, 10, '...')}
-              text="will be deleted from Redis Insight."
+              text="will be removed from Redis Insight."
               item={instance.id}
               suffix={suffix}
               deleting={deletingIdRef.current}

redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react'
+import React, { ChangeEvent, useState } from 'react'
 import {
   EuiCheckbox,
   EuiFieldText,
@@ -13,25 +13,76 @@ import {
 import cx from 'classnames'
 import { FormikProps } from 'formik'
 
-import { validateCertName, validateField } from 'uiSrc/utils'
+import { useDispatch } from 'react-redux'
+import { validateCertName, validateField, Nullable, truncateText } from 'uiSrc/utils'
+import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 
 import {
   ADD_NEW_CA_CERT,
-  NO_CA_CERT
+  NO_CA_CERT,
+  ADD_NEW,
 } from 'uiSrc/pages/home/constants'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import { deleteCaCertificateAction } from 'uiSrc/slices/instances/caCerts'
+import { deleteClientCertAction } from 'uiSrc/slices/instances/clientCerts'
 import styles from '../styles.module.scss'
 
+const suffix = '_tls_details'
+
 export interface Props {
   flexGroupClassName?: string
   flexItemClassName?: string
   formik: FormikProps<DbConnectionInfo>
   caCertificates?: { id: string; name: string }[]
   certificates?: { id: number; name: string }[]
 }
+
 const TlsDetails = (props: Props) => {
+  const dispatch = useDispatch()
   const { flexGroupClassName = '', flexItemClassName = '', formik, caCertificates, certificates } = props
+  const [activeCertId, setActiveCertId] = useState<Nullable<string>>(null)
+
+  const handleDeleteCaCert = (id: string) => {
+    dispatch(deleteCaCertificateAction(id, () => {
+      if (formik.values.selectedCaCertName === id) {
+        formik.setFieldValue(
+          'selectedCaCertName',
+          NO_CA_CERT,
+        )
+      }
+      handleClickDeleteCert('CA')
+    }))
+  }
+
+  const handleDeleteClientCert = (id: string) => {
+    dispatch(deleteClientCertAction(id, () => {
+      if (formik.values.selectedTlsClientCertId === id) {
+        formik.setFieldValue(
+          'selectedTlsClientCertId',
+          ADD_NEW,
+        )
+      }
+      handleClickDeleteCert('Client')
+    }))
+  }
+
+  const handleClickDeleteCert = (certificateType: 'Client' | 'CA') => {
+    sendEventTelemetry({
+      event: TelemetryEvent.CONFIG_DATABASES_CERTIFICATE_REMOVED,
+      eventData: {
+        certificateType,
+      },
+    })
+  }
+
+  const closePopover = () => {
+    setActiveCertId(null)
+  }
+
+  const showPopover = (id: string) => {
+    setActiveCertId(`${id}${suffix}`)
+  }
 
   const optionsCertsCA: EuiSuperSelectOption<string>[] = [
     {
@@ -48,6 +99,23 @@ const TlsDetails = (props: Props) => {
     optionsCertsCA.push({
       value: cert.id,
       inputDisplay: cert.name,
+      dropdownDisplay: (
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div>{truncateText(cert.name, 25)}</div>
+          <PopoverDelete
+            header={cert.name}
+            text="will be removed from RedisInsight."
+            item={cert.id}
+            suffix={suffix}
+            deleting={activeCertId}
+            closePopover={closePopover}
+            updateLoading={false}
+            showPopover={showPopover}
+            handleDeleteItem={handleDeleteCaCert}
+            testid={`delete-ca-cert-${cert.id}`}
+          />
+        </div>
+      ),
     })
   })
 
@@ -62,6 +130,23 @@ const TlsDetails = (props: Props) => {
     optionsCertsClient.push({
       value: `${cert.id}`,
       inputDisplay: cert.name,
+      dropdownDisplay: (
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div>{truncateText(cert.name, 25)}</div>
+          <PopoverDelete
+            header={cert.name}
+            text="will be removed from RedisInsight."
+            item={cert.id}
+            suffix={suffix}
+            deleting={activeCertId}
+            closePopover={closePopover}
+            updateLoading={false}
+            showPopover={showPopover}
+            handleDeleteItem={handleDeleteClientCert}
+            testid={`delete-client-cert-${cert.id}`}
+          />
+        </div>
+      ),
     })
   })
 

redisinsight/ui/src/pages/home/components/manual-connection/ManualConnectionWrapper.tsx

@@ -27,6 +27,8 @@ import { applyTlSDatabase, applySSHDatabase, autoFillFormDetails, getTlsSettings
 import {
   DEFAULT_TIMEOUT,
   SubmitBtnText,
+  ADD_NEW,
+  ADD_NEW_CA_CERT,
 } from 'uiSrc/pages/home/constants'
 import ManualConnectionForm from './manual-connection-form'
 
@@ -207,7 +209,22 @@ const ManualConnectionWrapper = (props: Props) => {
     if (editMode) {
       database.id = editedInstance?.id
 
-      return getFormUpdates(database, omit(editedInstance, ['id']))
+      const updatedValues = getFormUpdates(database, omit(editedInstance, ['id']))
+
+      // When a new caCert/clientCert is deleted, the editedInstance
+      // is not updated with the deletion until 'apply' is
+      // clicked. Once the apply is clicked, the editedInstance 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 && values.newCaCertName !== '' && values.newCaCertName === editedInstance.caCert?.name) {
+        updatedValues.caCert = database.caCert
+      }
+
+      if (values.selectedTlsClientCertId === ADD_NEW && values.newTlsCertPairName !== '' && values.newTlsCertPairName === editedInstance?.clientCert?.name) {
+        updatedValues.clientCert = database.clientCert
+      }
+
+      return updatedValues
     }
 
     return removeEmpty(database)

redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.tsx

@@ -186,7 +186,7 @@ const RdiInstancesListWrapper = ({ width, onEditInstance, editedInstance, onDele
           />
           <PopoverDelete
             header={formatLongName(instance.name, 50, 10, '...')}
-            text="will be deleted from RedisInsight."
+            text="will be removed from RedisInsight."
             item={instance.id}
             suffix={suffix}
             deleting={deleting.id}

redisinsight/ui/src/slices/instances/caCerts.ts

@@ -30,6 +30,19 @@ const caCertsSlice = createSlice({
       state.loading = false
       state.error = payload
     },
+
+    // delete ca certificate
+    deleteCaCertificate: (state) => {
+      state.loading = true
+      state.error = ''
+    },
+    deleteCaCertificateSuccess: (state) => {
+      state.loading = false
+    },
+    deleteCaCertificateFailure: (state, { payload }) => {
+      state.loading = false
+      state.error = payload
+    },
   },
 })
 
@@ -38,6 +51,10 @@ export const {
   loadCaCerts,
   loadCaCertsSuccess,
   loadCaCertsFailure,
+
+  deleteCaCertificate,
+  deleteCaCertificateSuccess,
+  deleteCaCertificateFailure,
 } = caCertsSlice.actions
 
 // A selector
@@ -66,3 +83,25 @@ export function fetchCaCerts() {
     }
   }
 }
+
+export function deleteCaCertificateAction(id: string, onSuccessAction?: (id: string) => void,) {
+  return async (dispatch: AppDispatch) => {
+    dispatch(deleteCaCertificate(id))
+
+    try {
+      const { status } = await apiService.delete(
+        `${ApiEndpoints.CA_CERTIFICATES}/${id}`
+      )
+
+      if (isStatusSuccessful(status)) {
+        dispatch(deleteCaCertificateSuccess())
+        onSuccessAction?.(id)
+        dispatch(fetchCaCerts())
+      }
+    } catch (error) {
+      const errorMessage = getApiErrorMessage(error)
+      dispatch(addErrorNotification(error))
+      dispatch(deleteCaCertificateFailure(errorMessage))
+    }
+  }
+}

redisinsight/ui/src/slices/instances/clientCerts.ts

@@ -30,6 +30,19 @@ const clientCertsSlice = createSlice({
       state.loading = false
       state.error = payload
     },
+
+    // delete client certificate
+    deleteClientCert: (state) => {
+      state.loading = true
+      state.error = ''
+    },
+    deleteClientCertSuccess: (state) => {
+      state.loading = false
+    },
+    deleteClientCertFailure: (state, { payload }) => {
+      state.loading = false
+      state.error = payload
+    },
   },
 })
 
@@ -38,6 +51,10 @@ export const {
   loadClientCerts,
   loadClientCertsSuccess,
   loadClientCertsFailure,
+
+  deleteClientCert,
+  deleteClientCertSuccess,
+  deleteClientCertFailure,
 } = clientCertsSlice.actions
 
 // A selector
@@ -67,3 +84,22 @@ export function fetchClientCerts() {
     }
   }
 }
+
+export function deleteClientCertAction(id: string, onSuccessAction?: (id: string) => void,) {
+  return async (dispatch: AppDispatch) => {
+    try {
+      const { status } = await apiService.delete(
+        `${ApiEndpoints.CLIENT_CERTIFICATES}/${id}`
+      )
+
+      if (isStatusSuccessful(status)) {
+        dispatch(deleteClientCertSuccess())
+        onSuccessAction?.(id)
+        dispatch(fetchClientCerts())
+      }
+    } catch (error) {
+      dispatch(addErrorNotification(error))
+      dispatch(deleteClientCertFailure(getApiErrorMessage(error)))
+    }
+  }
+}