RI-7687: rework menu and modals

Author: ArtemHoruzhenko

redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx

@@ -184,7 +184,7 @@ export const RiFilePicker = ({
           size={normalFormControl ? 'L' : 'XL'}
           aria-hidden="true"
         />
-        <FilePickerPromptText size="XS" className="RI-File-Picker__promptText">
+        <FilePickerPromptText size="s" className="RI-File-Picker__promptText">
           {promptText || initialPromptText}
         </FilePickerPromptText>
         {clearButton}

redisinsight/ui/src/components/import-file-modal/ImportFileModal.spec.tsx

@@ -155,17 +155,6 @@ describe('ImportFileModal', () => {
     expect(screen.getByTestId('submit-btn')).toHaveTextContent('Import')
   })
 
-  it('should render warning message', () => {
-    render(
-      <ImportFileModal
-        {...mockProps}
-        warning={<div data-testid="warning">warning</div>}
-      />,
-    )
-
-    expect(screen.getByTestId('warning')).toHaveTextContent('warning')
-  })
-
   it('should contain the upload warning text', () => {
     render(<ImportFileModal {...mockProps} />)
 

redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx

@@ -2,12 +2,15 @@ import React from 'react'
 
 import { Nullable } from 'uiSrc/utils'
 import { RiFilePicker, UploadWarning } from 'uiSrc/components'
-import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import { Loader, Modal } from 'uiSrc/components/base/display'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { CancelIcon } from 'uiSrc/components/base/icons'
-import { Button } from 'uiSrc/components/base/forms/buttons'
+import {
+  PrimaryButton,
+  SecondaryButton,
+} from 'uiSrc/components/base/forms/buttons'
 import styles from './styles.module.scss'
 
 export interface Props<T> {
@@ -19,7 +22,6 @@ export interface Props<T> {
   submitResults: JSX.Element
   loading: boolean
   data: Nullable<T>
-  warning?: JSX.Element | null
   error?: string
   errorMessage?: string
   invalidMessage?: string
@@ -38,7 +40,6 @@ const ImportFileModal = <T,>({
   submitResults,
   loading,
   data,
-  warning,
   error,
   errorMessage,
   invalidMessage,
@@ -50,17 +51,21 @@ const ImportFileModal = <T,>({
   const isShowForm = !loading && !data && !error
   return (
     <Modal.Compose open>
-      <Modal.Content.Compose className={styles.modal}>
-        <Modal.Content.Close icon={CancelIcon} onClick={onClose} data-testid="import-file-modal-close-btn" />
-        <Modal.Content.Header.Title
-          data-testid="import-file-modal-title"
-          className={styles.marginTop2}
-        >
-          {!data && !error ? title : resultsTitle || 'Import Results'}
-        </Modal.Content.Header.Title>
-        <Modal.Content.Body.Compose className={styles.marginTop2}>
+      <Modal.Content.Compose persistent>
+        <Modal.Content.Close
+          icon={CancelIcon}
+          onClick={onClose}
+          data-testid="import-file-modal-close-btn"
+        />
+
+        <Modal.Content.Header.Compose>
+          <Modal.Content.Header.Title data-testid="import-file-modal-title">
+            {!data && !error ? title : resultsTitle || 'Import Results'}
+          </Modal.Content.Header.Title>
+        </Modal.Content.Header.Compose>
+
+        <Modal.Content.Body.Compose>
           <Col align="center">
-            {warning && <FlexItem>{warning}</FlexItem>}
             <FlexItem>
               {isShowForm && (
                 <>
@@ -114,36 +119,33 @@ const ImportFileModal = <T,>({
             </FlexItem>
           </Col>
           {data && (
-            <Row justify="center">
-              <FlexItem>{submitResults}</FlexItem>
-            </Row>
+            <Modal.Content.Body
+              content={submitResults}
+              data-testid="result-succeeded"
+            />
           )}
         </Modal.Content.Body.Compose>
         <Modal.Content.Footer.Compose>
           {isShowForm && (
             <>
-              <Button
-                variant="secondary-invert"
+              <SecondaryButton
+                size="l"
                 onClick={onClose}
                 data-testid="cancel-btn"
               >
                 Cancel
-              </Button>
-              <Button
-                variant="primary"
+              </SecondaryButton>
+              <PrimaryButton
+                size="l"
                 onClick={onSubmit}
                 disabled={isSubmitDisabled}
                 data-testid="submit-btn"
               >
                 {submitBtnText || 'Import'}
-              </Button>
+              </PrimaryButton>
             </>
           )}
-          {data && (
-            <Button variant="primary" onClick={onClose}>
-              OK
-            </Button>
-          )}
+          {data && <PrimaryButton onClick={onClose}>OK</PrimaryButton>}
         </Modal.Content.Footer.Compose>
       </Modal.Content.Compose>
     </Modal.Compose>

redisinsight/ui/src/components/import-file-modal/styles.module.scss

@@ -1,7 +1,3 @@
-.marginTop2 {
-  margin-top: 2rem !important;
-}
-
 .uploadWarningContainer {
   align-self: flex-start;
   text-wrap: wrap;

redisinsight/ui/src/pages/rdi/instance/components/download/Download.spec.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
-import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import Download from './Download'
+import { render, screen, userEvent } from 'uiSrc/utils/test-utils'
+import Download, { Props } from './Download'
 
 jest.mock('uiSrc/slices/rdi/pipeline', () => ({
   ...jest.requireActual('uiSrc/slices/rdi/pipeline'),
@@ -22,18 +22,27 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+const button = (
+  <button type="button" data-testid="download-pipeline-btn">
+    test
+  </button>
+)
+
+const renderDownload = (props: Partial<Props> = {}) => {
+  const { trigger = button, ...rest } = props
+  return render(<Download trigger={trigger} {...rest} />)
+}
+
 describe('Download', () => {
   it('should render', () => {
-    expect(render(<Download />)).toBeTruthy()
+    expect(renderDownload()).toBeTruthy()
   })
 
   it('should call onClose when download clicked', async () => {
     const onClose = jest.fn()
-    render(<Download onClose={onClose} />)
+    renderDownload({ onClose })
 
-    await act(() => {
-      fireEvent.click(screen.getByTestId('download-pipeline-btn'))
-    })
+    await userEvent.click(screen.getByTestId('download-pipeline-btn'))
 
     expect(onClose).toBeCalledTimes(1)
   })
@@ -44,11 +53,9 @@ describe('Download', () => {
       () => sendEventTelemetryMock,
     )
 
-    render(<Download />)
+    renderDownload()
 
-    await act(() => {
-      fireEvent.click(screen.getByTestId('download-pipeline-btn'))
-    })
+    await userEvent.click(screen.getByTestId('download-pipeline-btn'))
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.RDI_PIPELINE_DOWNLOAD_CLICKED,
@@ -64,7 +71,7 @@ describe('Download', () => {
       loading: true,
     }))
 
-    render(<Download />)
+    renderDownload()
 
     expect(screen.getByTestId('download-pipeline-btn')).toBeDisabled()
   })

redisinsight/ui/src/pages/rdi/instance/components/download/Download.tsx

@@ -4,19 +4,15 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
-import { SaveIcon } from 'uiSrc/components/base/icons'
 import { rdiPipelineSelector } from 'uiSrc/slices/rdi/pipeline'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
-import styles from './styles.module.scss'
-
-interface Props {
-  dataTestid?: string
+export interface Props {
+  trigger: React.ReactElement
   onClose?: () => void
 }
 
-const Download = ({ dataTestid, onClose }: Props) => {
+const Download = ({ onClose, trigger }: Props) => {
   const { loading, jobs, config } = useSelector(rdiPipelineSelector)
 
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
@@ -43,19 +39,14 @@ const Download = ({ dataTestid, onClose }: Props) => {
     onClose?.()
   }
 
-  return (
-    <EmptyButton
-      color="text"
-      className={styles.downloadBtn}
-      icon={SaveIcon}
-      disabled={loading}
-      onClick={handleDownloadClick}
-      aria-labelledby="Download pipeline button"
-      data-testid={dataTestid || 'download-pipeline-btn'}
-    >
-      Save to file
-    </EmptyButton>
-  )
+  const button = trigger
+    ? React.cloneElement(trigger, {
+        disabled: loading,
+        onClick: handleDownloadClick,
+      })
+    : null
+
+  return <>{button}</>
 }
 
 export default Download