Browse Source

[ui-importer] Adding column modal button to importer (#4121)

* Adding column modal to importer

Variable changing in scss file

* Improvement commit

Linting

* Review changes

nit

nit again

* Removing a separate EditColumns react component and fething the required code within importerFilePreview parent itself
Ananya_Agarwal 6 months ago
parent
commit
164a32c076

+ 23 - 0
desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumns.scss

@@ -0,0 +1,23 @@
+// 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-edit-columns {
+    padding: vars.$fluidx-spacing-s;
+  }
+}

+ 41 - 0
desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx

@@ -0,0 +1,41 @@
+// 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 { i18nReact } from '../../../../utils/i18nReact';
+import Modal from 'cuix/dist/components/Modal';
+import './EditColumns.scss';
+
+interface EditColumnsModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+const EditColumnsModal = ({ isOpen, closeModal }: EditColumnsModalProps): JSX.Element => {
+  const { t } = i18nReact.useTranslation();
+
+  return (
+    <Modal
+      cancelText={t('Cancel')}
+      okText={t('Done')}
+      title={t('Edit Columns')}
+      open={isOpen}
+      onCancel={closeModal}
+    />
+  );
+};
+
+export default EditColumnsModal;

+ 5 - 0
desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.scss

@@ -61,5 +61,10 @@
       flex: 1;
       background-color: white;
     }
+
+    &__header-section {
+      display: flex;
+      justify-content: space-between;
+    }
   }
 }

+ 9 - 2
desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.tsx

@@ -28,6 +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 EditColumnsModal from './EditColumns/EditColumnsModal';
 
 import './ImporterFilePreview.scss';
 
@@ -38,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>(
@@ -129,7 +130,12 @@ const ImporterFilePreview = ({ fileMetaData }: ImporterFilePreviewProps): JSX.El
       </div>
       <div className="hue-importer-preview-page__metadata">{t('DESTINATION')}</div>
       <div className="hue-importer-preview-page__main-section">
-        <SourceConfiguration fileFormat={fileFormat} setFileFormat={setFileFormat} />
+        <div className="hue-importer-preview-page__header-section">
+          <SourceConfiguration fileFormat={fileFormat} setFileFormat={setFileFormat} />
+          <BorderlessButton onClick={() => setIsEditColumnsOpen(true)}>
+            {t('Edit Columns')}
+          </BorderlessButton>
+        </div>
         <PaginatedTable<ImporterTableData>
           loading={guessingFormat || guessingFields}
           data={tableData}
@@ -139,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>
   );
 };