feat(ui): replace "clear slo log" popover with a modal

re #RI-7437

Author: valkirilov

redisinsight/ui/src/pages/slow-log/components/Actions/Actions.styles.ts

@@ -5,7 +5,3 @@ export const StyledInfoIcon = styled.span`
   align-self: center;
   cursor: pointer;
 `
-
-export const StyledDatabaseName = styled.span`
-  color: ${({ theme }) => theme.semantic.color.text.primary500};
-`

redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx

@@ -8,24 +8,18 @@ import { AutoRefresh } from 'uiSrc/components'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import {
-  Col,
-  FlexGroup,
-  FlexItem,
-  Row,
-} from 'uiSrc/components/base/layout/flex'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EraserIcon, SettingsIcon } from 'uiSrc/components/base/icons'
 import {
-  DestructiveButton,
   IconButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Text, Title } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import SlowLogConfig from '../SlowLogConfig'
-import { StyledDatabaseName, StyledInfoIcon } from './Actions.styles'
+import { StyledInfoIcon } from './Actions.styles'
+import { ClearSlowLogModal } from '../ClearSlowLogModal/ClearSlowLogModal'
 
 export interface Props {
   width: number
@@ -67,11 +61,6 @@ const Actions = (props: Props) => {
     setIsPopoverConfigOpen(false)
   }
 
-  const handleClearClick = () => {
-    onClear()
-    closePopoverClear()
-  }
-
   const handleEnableAutoRefresh = (
     enableAutoRefresh: boolean,
     refreshRate: string,
@@ -102,35 +91,6 @@ const Actions = (props: Props) => {
     }
   }
 
-  const ToolTipContent = (
-    <FlexGroup direction="column" gap="l">
-      <Col gap="m">
-        <Title size="S" color="primary">
-          Clear Slow Log?
-        </Title>
-        <Col>
-          <Text size="m" color="primary">
-            Slow Log will be cleared for&nbsp;
-            <StyledDatabaseName>{name}</StyledDatabaseName>
-          </Text>
-          <Text size="xs" color="secondary">
-            NOTE: This is server configuration
-          </Text>
-        </Col>
-      </Col>
-      <Row justify="end">
-        <DestructiveButton
-          size="small"
-          icon={EraserIcon}
-          onClick={() => handleClearClick()}
-          data-testid="reset-confirm-btn"
-        >
-          Clear
-        </DestructiveButton>
-      </Row>
-    </FlexGroup>
-  )
-
   return (
     <Row gap="s" align="center">
       <FlexItem>
@@ -174,27 +134,21 @@ const Actions = (props: Props) => {
       </FlexItem>
 
       {!isEmptySlowLog && (
-        <FlexItem>
-          <RiPopover
-            anchorPosition="leftCenter"
-            ownFocus
+        <>
+          <IconButton
+            icon={EraserIcon}
+            aria-label="Clear Slow Log"
+            onClick={() => showClearPopover()}
+            data-testid="clear-btn"
+          />
+
+          <ClearSlowLogModal
+            name={name}
             isOpen={isPopoverClearOpen}
-            closePopover={closePopoverClear}
-            panelPaddingSize="m"
-            button={
-              <RiTooltip position="left" content="Clear Slow Log">
-                <IconButton
-                  icon={EraserIcon}
-                  aria-label="Clear Slow Log"
-                  onClick={() => showClearPopover()}
-                  data-testid="clear-btn"
-                />
-              </RiTooltip>
-            }
-          >
-            {ToolTipContent}
-          </RiPopover>
-        </FlexItem>
+            onClose={closePopoverClear}
+            onClear={onClear}
+          />
+        </>
       )}
 
       <FlexItem>

redisinsight/ui/src/pages/slow-log/components/ClearSlowLogModal/ClearSlowLogModal.spec.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+
+import { ClearSlowLogModal, ClearSlowLogModalProps } from './ClearSlowLogModal'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+
+const renderClearSlowLogModal = (props?: Partial<ClearSlowLogModalProps>) => {
+  const defaultProps: ClearSlowLogModalProps = {
+    name: 'test-database',
+    isOpen: true,
+    onClose: jest.fn(),
+    onClear: jest.fn(),
+  }
+
+  return render(<ClearSlowLogModal {...defaultProps} {...props} />)
+}
+
+describe('ClearSlowLogModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render the modal when isOpen is true', () => {
+    const props: Partial<ClearSlowLogModalProps> = {
+      name: 'test-database',
+      isOpen: true,
+    }
+
+    renderClearSlowLogModal(props)
+
+    const title = screen.getByText('Clear slow log')
+    expect(title).toBeInTheDocument()
+
+    const message = screen.getByText(
+      /Slow Log will be cleared for\s+test-database/,
+    )
+    expect(message).toBeInTheDocument()
+
+    const note = screen.getByText('NOTE: This is server configuration')
+    expect(note).toBeInTheDocument()
+
+    const cancelButton = screen.getByTestId('reset-cancel-btn')
+    expect(cancelButton).toBeInTheDocument()
+    expect(cancelButton).toHaveTextContent('Cancel')
+
+    const clearButton = screen.getByTestId('reset-confirm-btn')
+    expect(clearButton).toBeInTheDocument()
+    expect(clearButton).toHaveTextContent('Clear')
+  })
+
+  it('should not render the modal when isOpen is false', () => {
+    renderClearSlowLogModal({ isOpen: false })
+
+    const modal = screen.queryByTestId('clear-slow-log-modal')
+    expect(modal).not.toBeInTheDocument()
+  })
+
+  it('should call onClose when Cancel button is clicked', () => {
+    const props: Partial<ClearSlowLogModalProps> = {
+      onClose: jest.fn(),
+      onClear: jest.fn(),
+    }
+
+    renderClearSlowLogModal(props)
+
+    const cancelButton = screen.getByTestId('reset-cancel-btn')
+    fireEvent.click(cancelButton)
+
+    expect(props.onClose).toHaveBeenCalledTimes(1)
+    expect(props.onClear).not.toHaveBeenCalled()
+  })
+
+  it('should call onClear and onClose when Clear button is clicked', () => {
+    const props: Partial<ClearSlowLogModalProps> = {
+      onClose: jest.fn(),
+      onClear: jest.fn(),
+    }
+
+    renderClearSlowLogModal(props)
+
+    const clearButton = screen.getByTestId('reset-confirm-btn')
+    fireEvent.click(clearButton)
+
+    expect(props.onClear).toHaveBeenCalledTimes(1)
+    expect(props.onClose).toHaveBeenCalledTimes(1)
+  })
+})

redisinsight/ui/src/pages/slow-log/components/ClearSlowLogModal/ClearSlowLogModal.styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+import FormDialog from 'uiSrc/components/form-dialog/FormDialog'
+
+export const StyledFormDialog = styled(FormDialog)`
+  width: 402px;
+  height: auto;
+`

redisinsight/ui/src/pages/slow-log/components/ClearSlowLogModal/ClearSlowLogModal.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { Button, DestructiveButton } from 'uiSrc/components/base/forms/buttons'
+import { Col, FlexGroup, Row } from 'uiSrc/components/base/layout/flex'
+import { Title, Text } from 'uiSrc/components/base/text'
+import { EraserIcon } from 'uiSrc/components/base/icons'
+import { Spacer } from 'uiSrc/components/base/layout'
+
+import { StyledFormDialog } from './ClearSlowLogModal.styles'
+
+export interface ClearSlowLogModalProps {
+  name: string
+  isOpen: boolean
+  onClose: () => void
+  onClear: () => void
+}
+
+export const ClearSlowLogModal = ({
+  name,
+  isOpen,
+  onClose,
+  onClear,
+}: ClearSlowLogModalProps) => {
+  const handleClearClick = () => {
+    onClear()
+    onClose()
+  }
+
+  return (
+    <StyledFormDialog
+      isOpen={isOpen}
+      onClose={onClose}
+      data-testid="clear-slow-log-modal"
+      header={<Title size="XL">Clear slow log</Title>}
+      footer={
+        <Row justify="end" gap="m">
+          <Button
+            variant="secondary-ghost"
+            size="large"
+            onClick={onClose}
+            data-testid="reset-cancel-btn"
+          >
+            Cancel
+          </Button>
+          <DestructiveButton
+            size="large"
+            icon={EraserIcon}
+            onClick={() => handleClearClick()}
+            data-testid="reset-confirm-btn"
+          >
+            Clear
+          </DestructiveButton>
+        </Row>
+      }
+    >
+      <Spacer size="l" />
+      <FlexGroup direction="column" gap="l">
+        <Col>
+          <Text size="m" color="primary">
+            Slow Log will be cleared for&nbsp;{name}
+          </Text>
+          <Text size="m" color="secondary">
+            NOTE: This is server configuration
+          </Text>
+        </Col>
+      </FlexGroup>
+    </StyledFormDialog>
+  )
+}