[ui-importer] add tabs layout (#4203)

Author: ramprasadagarwal

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.scss renamed to desktop/core/src/desktop/js/apps/newimporter/FileImportTabs/FileImportTabs.scss

@@ -17,12 +17,13 @@
 @use 'variables' as vars;
 
 .antd.cuix {
-  .hue-importer-preview-page {
+  .hue-file-import-tabs {
     display: flex;
     flex-direction: column;
-    gap: 16px;
-    padding: 8px 24px 24px;
     height: 100%;
+    overflow: auto;
+    gap: vars.$cdl-spacing-s;
+    padding: vars.$cdl-spacing-s vars.$cdl-spacing-m vars.$cdl-spacing-s vars.$cdl-spacing-m;
 
     &__header {
       display: flex;
@@ -39,31 +40,29 @@
       &__actions {
         display: flex;
         align-items: center;
-        gap: 24px;
+        gap: vars.$cdl-spacing-m;
 
         .action {
           margin-left: 10px;
         }
       }
     }
 
-    &__metadata {
-      background-color: white;
-      padding: 16px;
-      font-size: 12px;
-      color: #5a656d;
-    }
-
-    &__main-section {
+    &__tabs {
       display: flex;
-      flex-direction: column;
-      flex: 1;
-      background-color: white;
-    }
+      height: 100%;
 
-    &__header-section {
-      display: flex;
-      justify-content: space-between;
+      .ant-tabs-content-holder {
+        display: flex;
+        flex: 1;
+
+        .ant-tabs-content,
+        .ant-tabs-tabpane-active {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+        }
+      }
     }
   }
 }

desktop/core/src/desktop/js/apps/newimporter/FileImportTabs/FileImportTabs.test.tsx

@@ -0,0 +1,134 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import FileImportTabs from './FileImportTabs';
+import { FileMetaData, ImporterFileSource } from '../types';
+import useSaveData from '../../../utils/hooks/useSaveData/useSaveData';
+import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
+
+jest.mock('../../../utils/hooks/useSaveData/useSaveData');
+const mockedUseSaveData = jest.mocked(useSaveData);
+
+jest.mock('../../../utils/hooks/useLoadData/useLoadData');
+const mockedUseLoadData = jest.mocked(useLoadData);
+
+jest.mock('../../../utils/hooks/useDataCatalog/useDataCatalog', () => ({
+  useDataCatalog: jest.fn(() => ({
+    loading: false,
+    databases: ['default'],
+    database: 'default',
+    connectors: [{ id: 'hive', displayName: 'Hive' }],
+    connector: { id: 'hive', displayName: 'Hive' },
+    computes: [{ id: 'compute1', name: 'Compute 1' }],
+    compute: { id: 'compute1', name: 'Compute 1' },
+    setCompute: jest.fn(),
+    setConnector: jest.fn(),
+    setDatabase: jest.fn()
+  }))
+}));
+
+describe('FileImportTabs', () => {
+  const mockFileMetaData: FileMetaData = {
+    path: '/test/path/file.csv',
+    fileName: 'file.csv',
+    source: ImporterFileSource.LOCAL
+  };
+
+  const defaultProps = {
+    fileMetaData: mockFileMetaData
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockedUseSaveData.mockReturnValue({
+      save: jest.fn(),
+      loading: false
+    });
+
+    mockedUseLoadData.mockReturnValue({
+      data: undefined,
+      loading: false,
+      error: undefined,
+      reloadData: jest.fn()
+    });
+  });
+
+  it('renders the component with header and tabs', async () => {
+    render(<FileImportTabs {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('file.csv')).toBeInTheDocument();
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+      expect(screen.getByText('Finish Import')).toBeInTheDocument();
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+      expect(screen.getByText('Partitions')).toBeInTheDocument();
+    });
+  });
+
+  it('renders FilePreviewTab in the Preview tab by default', async () => {
+    render(<FileImportTabs {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+      expect(screen.getByLabelText('Engine')).toBeInTheDocument();
+    });
+  });
+
+  it('starts with custom default active tab', async () => {
+    render(<FileImportTabs {...defaultProps} defaultActiveKey="settings" />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+  });
+
+  it('has finish import button that calls save function', async () => {
+    const mockSave = jest.fn();
+    mockedUseSaveData.mockReturnValue({
+      save: mockSave,
+      loading: false
+    });
+
+    render(<FileImportTabs {...defaultProps} />);
+
+    const finishButton = screen.getByText('Finish Import');
+    fireEvent.click(finishButton);
+
+    await waitFor(() => {
+      expect(mockSave).toHaveBeenCalledWith(expect.any(FormData));
+    });
+  });
+
+  it('shows loading state on finish import button', async () => {
+    mockedUseSaveData.mockReturnValue({
+      save: jest.fn(),
+      loading: true
+    });
+
+    render(<FileImportTabs {...defaultProps} />);
+
+    const finishButton = screen.getByText('Finish Import');
+    await waitFor(() => {
+      expect(finishButton.closest('button')).toHaveClass('ant-btn-loading');
+    });
+  });
+});

desktop/core/src/desktop/js/apps/newimporter/FileImportTabs/FileImportTabs.tsx

@@ -0,0 +1,123 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import { i18nReact } from '../../../utils/i18nReact';
+import { DestinationConfig, FileMetaData } from '../types';
+
+import './FileImportTabs.scss';
+import FilePreviewTab from '../FilePreviewTab/FilePreviewTab';
+import BorderlessButton from 'cuix/dist/components/Button/BorderlessButton';
+import { PrimaryButton } from 'cuix/dist/components/Button';
+import useSaveData from '../../../utils/hooks/useSaveData/useSaveData';
+import { FINISH_IMPORT_URL } from '../api';
+import { getDefaultTableName } from '../utils/utils';
+
+interface FileImportTabsProps {
+  fileMetaData: FileMetaData;
+  onTabChange?: (activeKey: string) => void;
+  defaultActiveKey?: string;
+}
+
+const FileImportTabs = ({
+  fileMetaData,
+  defaultActiveKey = 'preview'
+}: FileImportTabsProps): JSX.Element => {
+  const { t } = i18nReact.useTranslation();
+
+  const [destinationConfig, setDestinationConfig] = useState<DestinationConfig>({
+    tableName: getDefaultTableName(fileMetaData)
+  });
+
+  const handleDestinationConfigChange = (name: string, value: string) => {
+    setDestinationConfig(prevConfig => ({
+      ...prevConfig,
+      [name]: value
+    }));
+  };
+
+  const { save: finishImport, loading: finalizingImport } = useSaveData(FINISH_IMPORT_URL);
+
+  const handleFinishImport = () => {
+    const source = {
+      inputFormat: fileMetaData.source,
+      path: fileMetaData.path,
+      // format: fileFormat,
+      sourceType: destinationConfig.connectorId
+    };
+    const destination = {
+      outputFormat: 'table',
+      nonDefaultLocation: fileMetaData.path,
+      name: `${destinationConfig.database}.${destinationConfig.tableName}`,
+      sourceType: destinationConfig.connectorId
+      // columns: previewData?.columns
+    };
+
+    const formData = new FormData();
+    formData.append('source', JSON.stringify(source));
+    formData.append('destination', JSON.stringify(destination));
+
+    finishImport(formData);
+  };
+
+  const tabItems = [
+    {
+      label: t('Preview'),
+      key: 'preview',
+      children: (
+        <FilePreviewTab
+          fileMetaData={fileMetaData}
+          destinationConfig={destinationConfig}
+          onDestinationConfigChange={handleDestinationConfigChange}
+        />
+      )
+    },
+    {
+      label: t('Settings'),
+      key: 'settings'
+      // children: <SettingsTab />
+    },
+    {
+      label: t('Partitions'),
+      key: 'partitions'
+      // children: <PartitionsTab />
+    }
+  ];
+
+  return (
+    <div className="hue-file-import-tabs">
+      <div className="hue-file-import-tabs__header">
+        <div className="hue-file-import-tabs__header__title">{fileMetaData?.fileName}</div>
+        <div className="hue-file-import-tabs__header__actions">
+          <BorderlessButton data-testid="hue-importer-preview-page__header__actions__cancel">
+            {t('Cancel')}
+          </BorderlessButton>
+          <PrimaryButton loading={finalizingImport} onClick={handleFinishImport}>
+            {t('Finish Import')}
+          </PrimaryButton>
+        </div>
+      </div>
+      <Tabs
+        defaultActiveKey={defaultActiveKey}
+        items={tabItems}
+        className="hue-file-import-tabs__tabs"
+      />
+    </div>
+  );
+};
+
+export default FileImportTabs;

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/DestinationSettings/DestinationSettings.scss renamed to desktop/core/src/desktop/js/apps/newimporter/FilePreviewTab/DestinationSettings/DestinationSettings.scss

@@ -115,7 +115,7 @@ const DestinationSettings = ({
   };
 
   const validateTableName = (name: string) => {
-    const tableExists = tables.some(table => table.name.toLowerCase() === name.toLowerCase());
+    const tableExists = tables?.some(table => table.name.toLowerCase() === name.toLowerCase());
     if (tableExists) {
       setError(prev => ({ ...prev, tableName: t('Table name already exists in the database') }));
     } else {

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/DestinationSettings/DestinationSettings.test.tsx renamed to desktop/core/src/desktop/js/apps/newimporter/FilePreviewTab/DestinationSettings/DestinationSettings.test.tsx

@@ -0,0 +1,45 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@use 'variables' as vars;
+
+.antd.cuix {
+  .hue-importer-preview-page {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+
+    &__metadata {
+      background-color: vars.$cdl-white;
+      padding: 16px;
+      font-size: 12px;
+      color: vars.$cdl-gray-700;
+    }
+
+    &__main-section {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      background-color: vars.$cdl-white;
+    }
+
+    &__header-section {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}