Integrating the new api

Before review comments

First iteration of styling

Author: ananya-agarwal

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

@@ -19,4 +19,5 @@ export const CHECK_CONFIG_EXAMPLES_API_URL = '/api/v1/check_config';
 export const ANALYTICS_PREFERENCES_API_URL = '/about/update_preferences';
 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/';

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

@@ -0,0 +1,40 @@
+// 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-modal {
+    &__input--name {
+      width: 100px;
+    }
+
+    &__select--type {
+      border: 1px solid #838b92;
+      border-radius: 3px;
+      width: 100px;
+    }
+
+    &__input--sample {
+      border: none;
+    }
+
+    &__type-error {
+      color: red;
+      margin-bottom: 16px;
+    }
+  }
+}

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

@@ -20,6 +20,9 @@ import Modal from 'cuix/dist/components/Modal';
 import Table from 'cuix/dist/components/Table';
 import Input from 'cuix/dist/components/Input';
 import Select from 'cuix/dist/components/Select';
+import { SQL_TYPE_MAPPING_API_URL } from '../../../admin/Components/utils';
+
+import './EditColumnsModal.scss';
 
 export interface Column {
   title: string;
@@ -53,14 +56,43 @@ const EditColumnsModal = ({
 }: EditColumnsModalProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
   const [editRows, setEditRows] = useState<EditRow[]>([]);
+  const [sqlTypes, setSqlTypes] = useState<string[]>([]);
+  const [typeError, setTypeError] = useState<string | null>(null);
+
+  useEffect(() => {
+    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 if (data && typeof data === 'object' && Object.keys(data).length > 0) {
+          const typesArray = Array.from(new Set(Object.values(data)));
+          setSqlTypes(typesArray as string[]);
+          setTypeError(null);
+        } else {
+          setSqlTypes([]);
+          setTypeError(t('No SQL types returned from server.'));
+        }
+      } catch (err) {
+        setSqlTypes([]);
+        setTypeError(t('Failed to fetch SQL types.'));
+      }
+    };
+    fetchSqlTypes();
+  }, [t]);
 
   useEffect(() => {
     setEditRows(
       columns.map((col, idx) => ({
         key: idx,
         name: col.title,
         type: col.type || 'string',
-        sample: sample && sample.length > 0 ? (sample[0][col.dataIndex] ?? '') : '',
+        sample:
+          sample && sample.length > 0 && sample[0][col.dataIndex] !== undefined
+            ? String(sample[0][col.dataIndex])
+            : '',
         comment: col.comment || ''
       }))
     );
@@ -85,11 +117,12 @@ const EditColumnsModal = ({
   const modalColumns = useMemo(
     () => [
       {
-        title: t('Column Name'),
+        title: t('Name'),
         dataIndex: 'name',
         render: (text: string, _: EditRow, idx: number) => (
           <Input
             value={text}
+            className="hue-importer-edit-columns-modal__input--name"
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               handleChange(idx, 'name', e.target.value)
             }
@@ -98,49 +131,52 @@ const EditColumnsModal = ({
         )
       },
       {
-        title: t('Column Type'),
+        title: t('Type'),
         dataIndex: 'type',
         render: (value: string, _: EditRow, idx: number) => (
           <Select
             value={value}
             onChange={(val: string) => handleChange(idx, 'type', val)}
+            className="hue-importer-edit-columns-modal__select--type"
             getPopupContainer={triggerNode => triggerNode.parentNode}
-            style={{ border: '1px solid #838b92', borderRadius: '3px', width: '150px' }}
+            disabled={sqlTypes.length === 0}
           >
-            <Select.Option value="string">{t('String')}</Select.Option>
-            <Select.Option value="int">{t('Integer')}</Select.Option>
-            <Select.Option value="float">{t('Float')}</Select.Option>
-            <Select.Option value="bool">{t('Boolean')}</Select.Option>
+            {sqlTypes.map(type => (
+              <Select.Option key={type} value={type}>
+                {type}
+              </Select.Option>
+            ))}
           </Select>
         )
       },
       {
-        title: t('Sample Value'),
+        title: t('Sample'),
         dataIndex: 'sample',
         render: (text: string, _: EditRow, idx: number) => (
           <Input
             value={text}
+            className="hue-importer-edit-columns-modal__input--sample"
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               handleChange(idx, 'sample', e.target.value)
             }
-            style={{ border: 'none' }}
           />
         )
       },
       {
         title: t('Comment'),
         dataIndex: 'comment',
         render: (text: string, _: EditRow, idx: number) => (
-          <Input
+          <textarea
             value={text}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
               handleChange(idx, 'comment', e.target.value)
             }
+            rows={2}
           />
         )
       }
     ],
-    [t]
+    [t, sqlTypes]
   );
 
   return (
@@ -151,8 +187,10 @@ const EditColumnsModal = ({
       cancelText={t('Cancel')}
       okText={t('Done')}
       onOk={handleDone}
+      className="hue-importer-edit-columns-modal"
       width={800}
     >
+      {typeError && <div className="hue-importer-edit-columns-modal__type-error">{typeError}</div>}
       <Table columns={modalColumns} dataSource={editRows} pagination={false} />
     </Modal>
   );