Removing a separate EditColumns react component and fething the required code within importerFilePreview parent itself

Author: ananya-agarwal

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumns.tsx

@@ -28,7 +28,7 @@ import { BorderlessButton, PrimaryButton } from 'cuix/dist/components/Button';
 import PaginatedTable from '../../../reactComponents/PaginatedTable/PaginatedTable';
 import { GUESS_FORMAT_URL, GUESS_FIELD_TYPES_URL, FINISH_IMPORT_URL } from '../api';
 import SourceConfiguration from './SourceConfiguration/SourceConfiguration';
-import EditColumns from './EditColumns/EditColumns';
+import EditColumnsModal from './EditColumns/EditColumnsModal';
 
 import './ImporterFilePreview.scss';
 
@@ -39,7 +39,7 @@ interface ImporterFilePreviewProps {
 const ImporterFilePreview = ({ fileMetaData }: ImporterFilePreviewProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
   const [fileFormat, setFileFormat] = useState<FileFormatResponse | undefined>();
-
+  const [isEditColumnsOpen, setIsEditColumnsOpen] = useState(false);
   const defaultTableName = getDefaultTableName(fileMetaData.path, fileMetaData.source);
 
   const { save: guessFormat, loading: guessingFormat } = useSaveData<FileFormatResponse>(
@@ -132,7 +132,9 @@ const ImporterFilePreview = ({ fileMetaData }: ImporterFilePreviewProps): JSX.El
       <div className="hue-importer-preview-page__main-section">
         <div className="hue-importer-preview-page__header-section">
           <SourceConfiguration fileFormat={fileFormat} setFileFormat={setFileFormat} />
-          <EditColumns />
+          <BorderlessButton onClick={() => setIsEditColumnsOpen(true)}>
+            {t('Edit Columns')}
+          </BorderlessButton>
         </div>
         <PaginatedTable<ImporterTableData>
           loading={guessingFormat || guessingFields}
@@ -143,6 +145,7 @@ const ImporterFilePreview = ({ fileMetaData }: ImporterFilePreviewProps): JSX.El
           locale={{ emptyText: t('No data found in the file!') }}
         />
       </div>
+      <EditColumnsModal isOpen={isEditColumnsOpen} closeModal={() => setIsEditColumnsOpen(false)} />
     </div>
   );
 };