RI-7713: polish import from file forms

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Nullable } from 'uiSrc/utils'
 import { RiFilePicker, UploadWarning } from 'uiSrc/components'
-import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } 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'
@@ -137,7 +137,7 @@ const ImportFileModal = <T,>({
         <Modal.Content.Footer.Compose>
           <Modal.Content.Footer.Group>
             {isShowForm && (
-              <>
+              <Row gap="m" justify="end">
                 <SecondaryButton
                   size="l"
                   onClick={onClose}
@@ -153,7 +153,7 @@ const ImportFileModal = <T,>({
                 >
                   {submitBtnText || 'Import'}
                 </PrimaryButton>
-              </>
+              </Row>
             )}
             {data && <PrimaryButton onClick={onClose}>OK</PrimaryButton>}
           </Modal.Content.Footer.Group>

redisinsight/ui/src/constants/importDatabasesTableResult.ts

@@ -0,0 +1,20 @@
+export enum ImportTableResultColumn {
+  Index = 'index',
+  Host = 'host',
+  Errors = 'errors',
+}
+
+export const TABLE_IMPORT_RESULT_COLUMN_ID_HEADER_MAP = new Map<
+  ImportTableResultColumn,
+  string
+>([
+  [ImportTableResultColumn.Index, '#'],
+  [ImportTableResultColumn.Host, 'Host:Port'],
+  [ImportTableResultColumn.Errors, 'Result'],
+])
+
+export enum ImportDatabaseResultType {
+  Success = 'success',
+  Partial = 'partial',
+  Fail = 'fail',
+}

redisinsight/ui/src/constants/index.ts

@@ -36,4 +36,5 @@ export * from './datetime'
 export * from './sorting'
 export * from './databaseList'
 export * from './rdiList'
+export * from './importDatabasesTableResult'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -16,7 +16,6 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { InfoIcon } from 'uiSrc/components/base/icons'
 import {
   FormField,
   RiInfoIconProps,
@@ -163,7 +162,6 @@ const ClusterConnectionForm = (props: Props) => {
         onClick={onClick}
         disabled={submitIsDisabled}
         loading={loading}
-        icon={submitIsDisabled ? InfoIcon : undefined}
         data-testid="btn-submit"
       >
         Submit

redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import ReactDOM from 'react-dom'
+
 import {
   fetchInstancesAction,
   importInstancesSelector,
@@ -9,22 +10,19 @@ import {
 } from 'uiSrc/slices/instances/instances'
 import { Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { RiTooltip, UploadWarning, RiFilePicker } from 'uiSrc/components'
+import { RiFilePicker, RiTooltip, UploadWarning } from 'uiSrc/components'
 import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { InfoIcon } from 'uiSrc/components/base/icons'
+import { InfoIcon, RiIcon } from 'uiSrc/components/base/icons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import { Loader } from 'uiSrc/components/base/display'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import ResultsLog from './components/ResultsLog'
 
-import styles from './styles.module.scss'
 import { ScrollableWrapper } from '../styles.module'
 
 export interface Props {
@@ -102,53 +100,47 @@ const ImportDatabase = (props: Props) => {
 
     if (error) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m" data-testid="footer-import-database">
           <PrimaryButton
-            size="s"
             color="secondary"
             onClick={onClickRetry}
             data-testid="btn-retry"
           >
             Retry
           </PrimaryButton>
-        </div>,
+        </Row>,
         footerEl,
       )
     }
 
     if (data) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m" data-testid="footer-import-database">
           <PrimaryButton
-            size="s"
             type="submit"
             onClick={handleOnClose}
             data-testid="btn-close"
           >
-            Ok
+            OK
           </PrimaryButton>
-        </div>,
+        </Row>,
         footerEl,
       )
     }
 
     return ReactDOM.createPortal(
-      <div className="footerAddDatabase">
+      <Row justify="end" gap="m" data-testid="footer-import-database">
         <SecondaryButton
-          size="s"
           className="btn-cancel"
           onClick={handleOnClose}
-          style={{ marginRight: 12 }}
         >
           Cancel
         </SecondaryButton>
         <RiTooltip
           position="top"
-          anchorClassName="euiToolTip__btn-disabled"
           content={isSubmitDisabled ? 'Upload a file' : undefined}
         >
           <PrimaryButton
-            size="s"
             type="submit"
             onClick={onSubmit}
             loading={loading}
@@ -159,7 +151,7 @@ const ImportDatabase = (props: Props) => {
             Submit
           </PrimaryButton>
         </RiTooltip>
-      </div>,
+      </Row>,
       footerEl,
     )
   }
@@ -169,70 +161,70 @@ const ImportDatabase = (props: Props) => {
   return (
     <>
       <ScrollableWrapper data-testid="add-db_import">
-        <Col>
-          <FlexItem grow>
+        <Col gap="xl">
+          <Col grow gap="xl">
             {isShowForm && (
-              <>
-                <Text color="subdued" size="s">
+              <Col gap="xl">
+                <Text>
                   Use a JSON file to import your database connections. Ensure
                   that you only use files from trusted sources to prevent the
                   risk of automatically executing malicious code.
                 </Text>
-                <Spacer />
 
                 <RiFilePicker
                   id="import-file-modal-filepicker"
                   initialPromptText="Select or drag and drop a file"
-                  className={styles.fileDrop}
                   isInvalid={isInvalid}
                   onChange={onFileChange}
                   display="large"
                   data-testid="import-file-modal-filepicker"
                   aria-label="Select or drag and drop file"
                 />
+
                 {isInvalid && (
-                  <ColorText
-                    color="danger"
-                    className={styles.errorFileMsg}
-                    data-testid="input-file-error-msg"
-                  >
+                  <ColorText color="danger" data-testid="input-file-error-msg">
                     {`File should not exceed ${MAX_MB_FILE} MB`}
                   </ColorText>
                 )}
-              </>
+              </Col>
             )}
             {loading && (
-              <div
-                className={styles.loading}
+              <Col
+                justify="center"
+                gap="l"
+                align="center"
                 data-testid="file-loading-indicator"
               >
                 <Loader size="xl" />
-                <Text color="subdued" style={{ marginTop: 12 }}>
-                  Uploading...
-                </Text>
-              </div>
+                <Text>Uploading...</Text>
+              </Col>
             )}
             {error && (
-              <div className={styles.result} data-testid="result-failed">
-                <RiIcon type="ToastCancelIcon" color="danger600" size="xxl" />
-                <Text color="subdued" style={{ marginTop: 16 }}>
-                  Failed to add database connections
-                </Text>
-                <Text color="subdued">{error}</Text>
-              </div>
+              <Col
+                align="center"
+                gap="l"
+                justify="center"
+                data-testid="result-failed"
+              >
+                <RiIcon
+                  type="IndicatorXIcon"
+                  color="danger600"
+                  customSize="5rem"
+                />
+                <Text>Failed to add database connections</Text>
+                <Text>{error}</Text>
+              </Col>
             )}
-          </FlexItem>
+          </Col>
           {isShowForm && (
-            <FlexItem grow className={styles.uploadWarningContainer}>
+            <FlexItem>
               <UploadWarning />
             </FlexItem>
           )}
         </Col>
         {data && (
           <Row justify="center">
-            <FlexItem grow style={{ maxWidth: '100%' }}>
-              <ResultsLog data={data} />
-            </FlexItem>
+            <ResultsLog data={data} />
           </Row>
         )}
       </ScrollableWrapper>

redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultLog.styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+import { Col } from 'uiSrc/components/base/layout/flex'
+
+// Ideally this should not be needed, but the section component
+// will not let the parent cut the border, more precisely the box-shadow,
+// so we need to add padding to the parent container
+export const StyledColWrapper = styled(Col)`
+  padding: ${({ theme }) => theme.core.space.space025};
+`

redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.config.tsx

@@ -0,0 +1,17 @@
+import { ImportDatabaseResultType } from 'uiSrc/constants'
+import { TableResultData } from './ResultsLog'
+
+export const RESULTS_DATA_CONFIG: TableResultData[] = [
+  {
+    type: ImportDatabaseResultType.Success,
+    title: 'Fully imported',
+  },
+  {
+    type: ImportDatabaseResultType.Partial,
+    title: 'Partially imported',
+  },
+  {
+    type: ImportDatabaseResultType.Fail,
+    title: 'Failed to import',
+  },
+]

redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.spec.tsx

@@ -27,7 +27,7 @@ describe('ResultsLog', () => {
 
     expect(screen.getByTestId('success-results-closed')).toBeInTheDocument()
     expect(screen.getByTestId('partial-results-closed')).toBeInTheDocument()
-    expect(screen.getByTestId('failed-results-closed')).toBeInTheDocument()
+    expect(screen.getByTestId('fail-results-closed')).toBeInTheDocument()
   })
 
   it('should open and collapse other groups', () => {
@@ -45,12 +45,12 @@ describe('ResultsLog', () => {
     expect(screen.getByTestId('success-results-open')).toBeInTheDocument()
 
     expect(screen.getByTestId('partial-results-closed')).toBeInTheDocument()
-    expect(screen.getByTestId('failed-results-closed')).toBeInTheDocument()
+    expect(screen.getByTestId('fail-results-closed')).toBeInTheDocument()
 
     fireEvent.click(
-      within(screen.getByTestId('failed-results-closed')).getByRole('button'),
+      within(screen.getByTestId('fail-results-closed')).getByRole('button'),
     )
-    expect(screen.getByTestId('failed-results-open')).toBeInTheDocument()
+    expect(screen.getByTestId('fail-results-open')).toBeInTheDocument()
 
     expect(screen.getByTestId('partial-results-closed')).toBeInTheDocument()
     expect(screen.getByTestId('success-results-closed')).toBeInTheDocument()
@@ -60,7 +60,7 @@ describe('ResultsLog', () => {
     )
     expect(screen.getByTestId('partial-results-open')).toBeInTheDocument()
 
-    expect(screen.getByTestId('failed-results-closed')).toBeInTheDocument()
+    expect(screen.getByTestId('fail-results-closed')).toBeInTheDocument()
     expect(screen.getByTestId('success-results-closed')).toBeInTheDocument()
   })
 
@@ -87,7 +87,7 @@ describe('ResultsLog', () => {
       ),
     ).toHaveTextContent('1')
     expect(
-      within(screen.getByTestId('failed-results-closed')).getByTestId(
+      within(screen.getByTestId('fail-results-closed')).getByTestId(
         'number-of-dbs',
       ),
     ).toHaveTextContent('1')