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

* Modal with data

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

* nits left in first commit

* Integrating the new api

Before review comments

First iteration of styling

* Fixed styling issues

* useLoadData hook used

* LoadingErrorWrapper used

* unit tests for the bulk edit columns

* Fixing as part of review comments

* Fixing 2 based on review comments

* Merged properly

* Linting fixed

* Fixed the tests for editColumns

* Removed loadingErrorWrapper

* Fixing the linting issues

* Updated the scss file

* Revert "Removed loadingErrorWrapper"

This reverts commit d49bf7d.

* Removing all the errors after making changes in the previous commits

* nits

* Fixed faling unit tests

* prettier errors fixed

* Dropdown default string value in uppercase like other values

* Based on review comments

* resolve conflict

* Fixed the errors after merge

* Changes based on review comments

* AI comments and suggestions updates

* Review changes

* Changes based on review comments

* final review changes

* Adding TODO

* Fixed the unit tests

* Removing unneccessary comments

* Added the eslint statement that was removed mistakenly

* Correcting tests

* Unneccesary file

* Removing all the unneccessary mocks and tests

* Merging conflicts

* fixing linting issues

* Fixing post merging issues

* Removing unneccessary scss file

* fixing the test

* changing the folder name to EditColumnsModal

* Changes based on review comments

* Fixing the style issues

* Styling issues fixed

* Adding aria-labels

* Renaming to editableRows

* Changes to the test in the filePreview

* updating the test

* Renaming

* sql dialect changed

* If error dont should table

* test that EditColumnsModal is hidden before the the click and then that it is visible later

* test that Edit Columns is visible and that it opens the dialog when clicked

* Fixing the unit tests

* clear error message

* Tests optimized

* Add basic validation for duplicate or empty column names

* Changes acc to the review comments

* testing for no sample data related cases

* Fixing the border of the select dropdown

* Fixing the padding of edit columns button

* nits

* Changing the error message

* Final review changes

* Fix unresolved GitHub conversation - clarify CSS selectors

Author: ananya-agarwal

desktop/core/src/desktop/js/apps/admin/Components/utils.ts

@@ -18,5 +18,6 @@ export const SERVER_LOGS_API_URL = '/api/v1/logs';
 export const CHECK_CONFIG_EXAMPLES_API_URL = '/api/v1/check_config';
 export const INSTALL_APP_EXAMPLES_API_URL = '/api/v1/install_app_examples';
 export const INSTALL_AVAILABLE_EXAMPLES_API_URL = '/api/v1/available_app_examples';
+export const SQL_TYPE_MAPPING_API_URL = '/api/v1/importer/sql_type_mapping';
 export const HUE_DOCS_CONFIG_URL = 'https://docs.gethue.com/administrator/configuration/';
 export const USAGE_ANALYTICS_API_URL = '/api/v1/usage_analytics';

desktop/core/src/desktop/js/apps/newimporter/FilePreviewTab/EditColumns/EditColumnsModal.tsx

@@ -16,8 +16,26 @@
 
 @use 'variables' as vars;
 
-.antd.cuix {
-  .hue-importer-edit-columns {
-    padding: vars.$fluidx-spacing-s;
+.hue-importer-edit-columns-modal {
+  .ant-modal-content {
+    width: 800px;
+  }
+
+  &__input-title {
+    width: 100px;
+  }
+
+  &__type-select {
+    width: 100px;
+
+    .ant-select-selector {
+      border: 1px solid vars.$fluidx-gray-600;
+      border-radius: vars.$border-radius-base;
+    }
+  }
+
+  &__no-sample {
+    color: vars.$fluidx-gray-500;
+    font-style: italic;
   }
 }