[ui-importer-modal] Bulk Edit column modal second iteration #4165
Conversation
before starting new work header name changed but entire column vanishes Optimized code but with removing column bug Fixed mapping issue removed grey color Row data present as column values in sample values Fixed padding for the edit columns button WIP wip
ananya-agarwal
requested review from
tabraiz12,
JohanAhlen,
bjornalm,
ramprasadagarwal and
Copilot
|
✅ Test files were modified. Ensure that the tests cover all relevant changes. ✅ |
There was a problem hiding this comment.
Pull Request Overview
This pull request implements a bulk edit modal for updating column headers in the importer preview, allowing users to modify column names, types, and comments directly from the UI.
- Introduces a stateful implementation for handling columns and pre-fills modal data from file content.
- Adds an Edit Columns modal component with inline editing capabilities using inputs and selects.
- Updates styling for the new edit button and adds a placeholder for future test coverage.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.tsx | Adds state management for columns, updates preview data mapping, and integrates the EditColumnsModal. |
| desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.scss | Introduces new styling for the edit columns button. |
| desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx | Implements a modal with a table interface for editing column properties and handling modal actions. |
| desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.test.tsx | Contains preliminary test modifications with a placeholder for future tests. |
Comments suppressed due to low confidence (1)
desktop/core/src/desktop/js/apps/newimporter/ImporterFilePreview/ImporterFilePreview.tsx:131
- [nitpick] Ensure that the 'columns' state is correctly populated before calculating sample rows, as an empty array could lead to incomplete sample data.
const sampleRows = Array.isArray(previewData?.sample?.[0]) ? previewData.sample.map(rowArr => {
UI Coverage Report
|
Python Coverage Report •
Pytest Report
|
| } | ||
| }; | ||
| fetchSqlTypes(); | ||
| }, [t]); |
There was a problem hiding this comment.
t? why is a dependency?
There was a problem hiding this comment.
const noSqlTypesMsg = t('No SQL types returned from server.');
const fetchFailedMsg = t('Failed to fetch SQL types.');
useEffect(() => {
// Fetch SQL types on mount
const fetchSqlTypes = async () => {
try {
const res = await fetch(${SQL_TYPE_MAPPING_API_URL}?sql_dialect=hive);
const data = await res.json();
if (Array.isArray(data) && data.length > 0) {
setSqlTypes(data);
setTypeError(null);
} else {
setSqlTypes([]);
setTypeError(noSqlTypesMsg);
}
} catch (err) {
setSqlTypes([]);
setTypeError(fetchFailedMsg);
}
};
fetchSqlTypes();
}, []); // t removed from dependencies
Does this look better @tabraiz12
...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx
Show resolved
Hide resolved
...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx
Show resolved
Hide resolved
| value={value} | ||
| onChange={(val: string) => handleChange(idx, 'type', val)} | ||
| getPopupContainer={triggerNode => triggerNode.parentNode} | ||
| style={{ border: '1px solid #838b92', borderRadius: '3px', width: '150px' }} |
| width={800} | ||
| > | ||
| {typeError && ( | ||
| <div style={{ color: 'red', marginBottom: 16 }}>{typeError}</div> |
There was a problem hiding this comment.
use variable and remove inline style
|
|
||
| useEffect(() => { | ||
| // Fetch SQL types on mount | ||
| const fetchSqlTypes = async () => { |
There was a problem hiding this comment.
Can we use useLoadData hook instead?
Also, till the time, API is loading, can you show the loader on the dropdown of the type? This can be done by passing a loading prop to dropdown component.
...op/core/src/desktop/js/apps/newimporter/ImporterFilePreview/EditColumns/EditColumnsModal.tsx
Show resolved
Hide resolved
| onOk={handleDone} | ||
| width={800} | ||
| > | ||
| {typeError && ( |
There was a problem hiding this comment.
Use Loading Error Wrapper here.
|
Can we get some screenshots for this PR? |
| comment: col.comment || '' | ||
| })) | ||
| ); | ||
| }, [columns, sample, isOpen]); |
There was a problem hiding this comment.
isOpen required? why is there a dependency
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.
Please review Hue Contributing Guide before opening a pull request.