Adding column modal to importer

Variable changing in scss file

Author: ananya-agarwal

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ColumnModal/ColumnModal.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-columnmodal {
+    padding: vars.$fluidx-spacing-s;
+  }
+}

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

@@ -0,0 +1,42 @@
+// 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 { i18nReact } from '../../../../utils/i18nReact';
+import ConfigureIcon from '@cloudera/cuix-core/icons/react/ConfigureIcon';
+import ColumnModalTable from './ColumnModalTable';
+import '../SourceConfiguration/SourceConfiguration.scss';
+
+const ColumnModal = (): JSX.Element => {
+  const { t } = i18nReact.useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="hue-importer-columnmodal">
+      <summary className="hue-importer-columnmodal__button" onClick={() => setIsOpen(true)}>
+        <ConfigureIcon />
+        {t('Edit Columns')}
+      </summary>
+      <ColumnModalTable isOpen={isOpen} closeModal={handleClose} />
+    </div>
+  );
+};
+
+export default ColumnModal;

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ColumnModal/ColumnModalTable.tsx

@@ -0,0 +1,48 @@
+// 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 Button from 'cuix/dist/components/Button';
+import Modal from 'cuix/dist/components/Modal';
+import './ColumnModal.scss';
+
+interface ColumnModalTableProps {
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+const ColumnModalTable = ({ isOpen, closeModal }: ColumnModalTableProps): JSX.Element => {
+  const { t } = i18nReact.useTranslation();
+
+  return (
+    <Modal
+      title={t('Edit Column')}
+      open={isOpen}
+      onCancel={closeModal}
+      footer={[
+        <Button key="back" onClick={closeModal}>
+          {t('Cancel')}
+        </Button>,
+        <Button key="submit" onClick={closeModal}>
+          {t('Done')}
+        </Button>
+      ]}
+    ></Modal>
+  );
+};
+
+export default ColumnModalTable;

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;
+    }
   }
 }

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

@@ -30,6 +30,7 @@ import { GUESS_FORMAT_URL, GUESS_FIELD_TYPES_URL } from '../api';
 import SourceConfiguration from './SourceConfiguration/SourceConfiguration';
 
 import './ImporterFilePreview.scss';
+import ColumnModal from './ColumnModal/ColumnModal';
 
 interface ImporterFilePreviewProps {
   fileMetaData: FileMetaData;
@@ -98,7 +99,10 @@ 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} />
+          <ColumnModal />
+        </div>
         <PaginatedTable<ImporterTableData>
           loading={guessingFormat || guessingFields}
           data={tableData}

desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/SourceConfiguration/SourceConfiguration.scss

@@ -20,7 +20,14 @@
   .hue-importer-configuration {
     padding: 16px;
 
-    &__summary {
+    &__dropdown {
+      border: 1px solid vars.$fluidx-gray-600;
+      border-radius: vars.$border-radius-base;
+      width: 100%;
+    }
+  }
+
+    .hue-importer-configuration__summary, .hue-importer-columnmodal__button {
       display: flex;
       gap: 8px;
       width: max-content;
@@ -29,13 +36,6 @@
       cursor: pointer;
     }
 
-    &__dropdown {
-      border: 1px solid vars.$fluidx-gray-600;
-      border-radius: vars.$border-radius-base;
-      width: 100%;
-    }
-  }
-
   .hue-importer-configuration-options {
     padding-top: 16px;
     display: grid;