[ui-importer-modal] Bulk Edit column modal second iteration #4165

ananya-agarwal · 2025-06-10T07:36:43Z

What changes were proposed in this pull request?

Adding edit columns button on the right and on clicking it, getting the modal with 4 different columns, a cancel and a done button, where the user will be able to edit the column header from the modal and on clicking Done button, he/she will be able to see the updated column header (name) in the preview. Also, getting pre-filled data from the file (say csv) into the modal.

How was this patch tested?

Manual testing, will add unit tests soon.

Video of what is done in the PR:

Screen.Recording.2025-07-14.at.3.14.38.PM.mov

Please review Hue Contributing Guide before opening a pull request.

github-actions · 2025-06-10T07:36:59Z

✅ Test files were modified. Ensure that the tests cover all relevant changes. ✅

github-actions · 2025-06-10T07:41:03Z

UI Code Coverage Report

Lines	Statements	Branches	Functions
	39.48% (30849/78129)	31.21% (14368/46034)	24.89% (2234/8973)

github-actions · 2025-06-10T07:52:21Z

Backend Code Coverage Report •

File	Stmts	Miss	Cover	Missing
TOTAL	54738	27398	49%

report-only-changed-files is enabled. No files were changed during this commit :)

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

ramprasadagarwal

Nice work! See comments below

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

bjornalm · 2025-06-12T12:50:49Z

Can we get some screenshots for this PR?

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

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss

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

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx

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

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx

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

Copilot

Pull Request Overview

This PR implements a bulk edit column modal for the UI importer, allowing users to edit column headers, types, and comments through a modal interface. The modal displays sample data to help users make informed decisions about column configurations.

Adds a fully functional edit columns modal with input fields for name, type selection, sample data display, and comment editing
Integrates the modal with the main file preview component, enabling column data to be updated and persisted
Includes comprehensive test coverage for the new modal functionality

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
ImporterFilePreview.tsx	Integrates edit columns modal with state management for column data and destination configuration
ImporterFilePreview.scss	Adds styling for the edit columns button
EditColumnsModal.tsx	Implements the complete modal with table, input fields, type selection, and data handling
EditColumnsModal.test.tsx	Adds comprehensive unit tests for the modal functionality
EditColumnsModal.scss	Defines styling for modal components including input and select elements
utils.ts	Adds SQL type mapping API URL constant

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

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

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx

ramprasadagarwal · 2025-07-28T14:20:09Z

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss

@@ -14,10 +14,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-@use 'variables' as vars;
+@import '../../../../components/styles/variables';


Why this change?

ramprasadagarwal · 2025-07-28T14:21:52Z

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss

+      width: 100px;
+    }
+
+    &__select--type {


select--type is not a BEM best practice.
-- is used for css property like select--hidden or select--nowrap

ramprasadagarwal · 2025-07-28T14:22:50Z

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx

+  ];
+  const sample = { importerDataKey: 'row1', col1: 'val1', col2: 42 };
+
+  test('lists existing modal columns as expected', () => {


We follow it('should pattern for starting the test case description.
Although test(' is also correct but for consistency lets stick to it('should

ramprasadagarwal · 2025-07-28T14:24:40Z

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

+    data: sqlTypesData,
+    loading: sqlTypesLoading,
+    error: sqlTypesError
+  } = useLoadData<string[]>(`${SQL_TYPE_MAPPING_API_URL}?sql_dialect=hive`);


Why are we hardcoding the sql_dialect to hive here?
Can we avoid it?
If not, then add a TODO to make it dynamic in future.

ramprasadagarwal · 2025-07-28T14:26:50Z

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

+          className="hue-importer-edit-columns-modal__select--type"
+          getPopupContainer={triggerNode => triggerNode.parentNode}
+          disabled={sqlTypesLoading || sqlTypes.length === 0}
+          loading={sqlTypesLoading}


Can we use the options prop available in the Select tag instead?

ramprasadagarwal · 2025-07-28T14:33:52Z

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

+import { ImporterTableData, BaseColumnProperties } from '../../types';
+
+export interface Column extends BaseColumnProperties {
+  title: string;


Are we sticking to title or name?
In case we are sticking to title, then make sure everywhere else we have title.

ananya-agarwal requested review from tabraiz12, JohanAhlen, bjornalm, ramprasadagarwal and Copilot June 10, 2025 07:36

This comment was marked as outdated.

Sign in to view

cloudera deleted a comment from Copilot AI Jun 10, 2025

tabraiz12 reviewed Jun 10, 2025

View reviewed changes

...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx Outdated Show resolved Hide resolved

tabraiz12 reviewed Jun 10, 2025

View reviewed changes

ramprasadagarwal requested changes Jun 10, 2025

View reviewed changes

tabraiz12 reviewed Jun 12, 2025

View reviewed changes

...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx Outdated Show resolved Hide resolved

ananya-agarwal force-pushed the modal branch from e9aa4ef to a29b890 Compare June 19, 2025 07:34

tabraiz12 reviewed Jun 19, 2025

View reviewed changes

...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx Show resolved Hide resolved

ananya-agarwal force-pushed the modal branch from 1992d8d to 8689a58 Compare June 23, 2025 06:55

tabraiz12 reviewed Jun 23, 2025

View reviewed changes

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx Outdated Show resolved Hide resolved

ramprasadagarwal requested changes Jun 23, 2025

View reviewed changes

ananya-agarwal force-pushed the modal branch from 8689a58 to 4dec36d Compare June 30, 2025 07:17

ananya-agarwal requested review from ramprasadagarwal, Copilot and tabraiz12 July 7, 2025 08:09

This comment was marked as outdated.

Sign in to view

ananya-agarwal requested a review from Copilot July 7, 2025 08:13

This comment was marked as outdated.

Sign in to view

ramprasadagarwal assigned ananya-agarwal Jul 7, 2025

ananya-agarwal force-pushed the modal branch from aabde11 to 431a7b7 Compare July 8, 2025 10:24

ananya-agarwal requested a review from Copilot July 8, 2025 10:27

This comment was marked as outdated.

Sign in to view

ananya-agarwal added 2 commits July 14, 2025 14:27

Merge branch 'master' into modal

237ebb8

prettier errors fixed

27f1d73

ananya-agarwal requested a review from Copilot July 14, 2025 09:00

This comment was marked as outdated.

Sign in to view

Dropdown default string value in uppercase like other values

c61abcb

ananya-agarwal requested a review from Copilot July 14, 2025 09:45

This comment was marked as outdated.

Sign in to view

ananya-agarwal requested a review from Copilot July 14, 2025 10:19

This comment was marked as outdated.

Sign in to view

ramprasadagarwal requested changes Jul 14, 2025

View reviewed changes

...p/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.scss Outdated Show resolved Hide resolved

...re/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx Outdated Show resolved Hide resolved

ramprasadagarwal requested changes Jul 14, 2025

View reviewed changes

...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx Outdated Show resolved Hide resolved

ananya-agarwal requested a review from Copilot July 16, 2025 08:55

This comment was marked as outdated.

Sign in to view

ananya-agarwal added 4 commits July 16, 2025 14:45

Based on review comments

f2e822f

Merge branch 'master' into modal

b158f52

resolve conflict

b0651f5

Fixed the errors after merge

35472e4

ananya-agarwal requested review from ramprasadagarwal and Copilot July 16, 2025 11:10

Copilot AI reviewed Jul 16, 2025

View reviewed changes

ananya-agarwal added 3 commits July 24, 2025 16:18

Merge branch 'master' into modal

2042cb4

Changes based on review comments

01e2bcc

AI comments and suggestions updates

4474b51

ananya-agarwal requested a review from Harshg999 July 28, 2025 10:25

ramprasadagarwal requested changes Jul 28, 2025

View reviewed changes

Review changes

c7eb1c4

ananya-agarwal force-pushed the modal branch from 880ac83 to c7eb1c4 Compare July 28, 2025 14:37

[ui-importer-modal] Bulk Edit column modal second iteration #4165

Are you sure you want to change the base?

[ui-importer-modal] Bulk Edit column modal second iteration #4165

Uh oh!

Conversation

ananya-agarwal commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this pull request?

How was this patch tested?

Uh oh!

github-actions bot commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

github-actions bot commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

UI Code Coverage Report

Uh oh!

github-actions bot commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ramprasadagarwal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjornalm commented Jun 12, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ramprasadagarwal Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

ramprasadagarwal Jul 28, 2025

Choose a reason for hiding this comment

Uh oh!

ramprasadagarwal Jul 28, 2025

Choose a reason for hiding this comment

ananya-agarwal commented Jun 10, 2025 •

edited

Loading

github-actions bot commented Jun 10, 2025 •

edited

Loading

github-actions bot commented Jun 10, 2025 •

edited

Loading

github-actions bot commented Jun 10, 2025 •

edited

Loading