[ui-importer] fix: settings tab for max width in input fields

desktop/core/src/desktop/js/apps/newimporter/SettingsTab/SettingsTab.scss

@@ -28,6 +28,11 @@
       display: flex;
       flex-direction: column;
       gap: vars.$cdl-spacing-m;
+      max-width: 1024px;
+
+      @media (width <= 1024px) {
+        width: 100%;
+      }
     }
 
     &__section {
@@ -47,6 +52,10 @@
         flex: 1;
         width: 100%;
         gap: vars.$cdl-spacing-m;
+
+        @media (width <= 640px) {
+          flex-direction: column;
+        }
       }
 
       &__fields {

desktop/core/src/desktop/js/apps/newimporter/SettingsTab/SettingsTabConfig.ts

@@ -51,7 +51,7 @@ export const ADVANCED_SETTINGS_CONFIG: Record<string, SettingsFieldConfig[]> = {
   description: [
     {
       name: 'description',
-      type: FieldType.INPUT,
+      type: FieldType.TEXTAREA,
       label: 'Description',
       placeholder: "A table to store customer data imported from the marketing team's CRM.",
       tooltip:
@@ -118,7 +118,7 @@ export const ADVANCED_SETTINGS_CONFIG: Record<string, SettingsFieldConfig[]> = {
     },
     {
       name: 'externalLocation',
-      type: FieldType.INPUT,
+      type: FieldType.FILECHOOSER,
       placeholder: 'External location',
       isHidden: (context: SettingsContext) => !context.useExternalLocation
     }
@@ -139,7 +139,6 @@ export const ADVANCED_SETTINGS_CONFIG: Record<string, SettingsFieldConfig[]> = {
       label: 'Field',
       placeholder: 'Choose an option',
       options: DELIMITER_OPTIONS,
-      tooltip: 'Field delimiter',
       isHidden: (context: SettingsContext) => !context.customCharDelimiters
     },
     {
@@ -148,7 +147,6 @@ export const ADVANCED_SETTINGS_CONFIG: Record<string, SettingsFieldConfig[]> = {
       label: 'Array Map',
       placeholder: 'Choose an option',
       options: DELIMITER_OPTIONS,
-      tooltip: 'Array map delimiter',
       isHidden: (context: SettingsContext) => !context.customCharDelimiters
     },
     {
@@ -157,7 +155,6 @@ export const ADVANCED_SETTINGS_CONFIG: Record<string, SettingsFieldConfig[]> = {
       label: 'Struct',
       placeholder: 'Choose an option',
       options: DELIMITER_OPTIONS,
-      tooltip: 'Struct delimiter',
       isHidden: (context: SettingsContext) => !context.customCharDelimiters
     }
   ]

desktop/core/src/desktop/js/apps/storageBrowser/FileChooserModal/FileChooserModal.tsx

@@ -121,32 +121,25 @@ const FileChooserModal = ({
     [setSearchTerm]
   );
 
-  const getColumns = (file: FileChooserTableData) => {
-    const columns: ColumnProps<FileChooserTableData>[] = [];
-    for (const key of Object.keys(file)) {
-      const column: ColumnProps<FileChooserTableData> = {
-        dataIndex: key,
-        key: `${key}`
-      };
-      if (key === 'name') {
-        column.render = (_, record: FileChooserTableData) => (
-          <Tooltip title={record.name} mouseEnterDelay={1.5}>
-            <span className="hue-filechooser-modal__table-cell-icon">
-              {record.type === BrowserViewType.dir ? <FolderIcon /> : <FileIcon />}
-            </span>
-            <span
-              className="hue-filechooser-modal__table-cell-name"
-              data-testid="hue-filechooser-modal__table-cell-name"
-            >
-              {record.name}
-            </span>
-          </Tooltip>
-        );
-      }
-      columns.push(column);
+  const columnsConfig: ColumnProps<FileChooserTableData>[] = [
+    {
+      dataIndex: 'name',
+      key: 'name',
+      render: (_, record: FileChooserTableData) => (
+        <Tooltip title={record.name} mouseEnterDelay={1.5}>
+          <span className="hue-filechooser-modal__table-cell-icon">
+            {record.type === BrowserViewType.dir ? <FolderIcon /> : <FileIcon />}
+          </span>
+          <span
+            className="hue-filechooser-modal__table-cell-name"
+            data-testid="hue-filechooser-modal__table-cell-name"
+          >
+            {record.name}
+          </span>
+        </Tooltip>
+      )
     }
-    return columns.filter(col => col.dataIndex !== 'type' && col.dataIndex !== 'path');
-  };
+  ];
 
   const onRowClicked = (record: FileChooserTableData) => {
     return {
@@ -243,96 +236,90 @@ const FileChooserModal = ({
     }
   ];
 
-  const TableContent = (
-    <LoadingErrorWrapper errors={errorConfig}>
-      <PaginatedTable<FileChooserTableData>
-        loading={loading && !polling}
-        data={tableData}
-        isDynamicHeight
-        rowKey={r => `${r.path}__${r.type}__${r.name}`}
-        locale={locale}
-        columns={getColumns(tableData[0] ?? {})}
-        rowClassName={record =>
-          record.type === BrowserViewType.file && !isFileSelectionAllowed
-            ? classNames('hue-filechooser-modal__table-row', 'disabled-row')
-            : 'hue-filechooser-modal__table-row'
-        }
-        onRowClick={onRowClicked}
-        showHeader={false}
-      />
-    </LoadingErrorWrapper>
-  );
+  if (!showModal) {
+    return <></>;
+  }
 
   return (
-    <>
-      {showModal && (
-        <Modal
-          open={showModal}
-          title={title}
-          className="hue-filechooser-modal cuix antd"
-          onOk={isUploadEnabled ? handleUploadClick : handleOk}
-          okText={isUploadEnabled ? t('Upload file') : submitText}
-          okButtonProps={
-            !isUploadEnabled ? { disabled: sourcePath === destPath, loading: submitLoading } : {}
-          }
-          secondaryButtonText={t('Create folder')}
-          onSecondary={() => setShowCreateFolderModal(true)}
-          cancelText={cancelText}
-          onCancel={onClose}
+    <Modal
+      open={showModal}
+      title={title}
+      className="hue-filechooser-modal cuix antd"
+      onOk={isUploadEnabled ? handleUploadClick : handleOk}
+      okText={isUploadEnabled ? t('Upload file') : submitText}
+      okButtonProps={
+        !isUploadEnabled ? { disabled: sourcePath === destPath, loading: submitLoading } : {}
+      }
+      secondaryButtonText={t('Create folder')}
+      onSecondary={() => setShowCreateFolderModal(true)}
+      cancelText={cancelText}
+      onCancel={onClose}
+    >
+      <div className="hue-filechooser-modal__body">
+        <div className="hue-filechooser-modal__path-browser-panel">
+          <PathBrowser filePath={destPath} onFilepathChange={setDestPath} showIcon={false} />
+        </div>
+        <Input
+          className="hue-filechooser-modal__search"
+          placeholder={t('Search')}
+          allowClear={true}
+          onChange={event => {
+            handleSearch(event.target.value);
+          }}
+        />
+        <DragAndDrop onDrop={onFilesDrop} disabled={isUploadEnabled}>
+          <LoadingErrorWrapper errors={errorConfig}>
+            <PaginatedTable<FileChooserTableData>
+              loading={loading && !polling}
+              data={tableData}
+              isDynamicHeight
+              rowKey={r => `${r.path}__${r.type}__${r.name}`}
+              locale={locale}
+              columns={columnsConfig}
+              rowClassName={record =>
+                record.type === BrowserViewType.file && !isFileSelectionAllowed
+                  ? classNames('hue-filechooser-modal__table-row', 'disabled-row')
+                  : 'hue-filechooser-modal__table-row'
+              }
+              onRowClick={onRowClicked}
+              showHeader={false}
+            />
+          </LoadingErrorWrapper>
+        </DragAndDrop>
+      </div>
+      <input
+        ref={uploadRef}
+        type="file"
+        className="hue-importer__source-selector-option-upload"
+        onChange={handleFileUpload}
+      />
+      {showCreateFolderModal && (
+        <BottomSlidePanel
+          isOpen={showCreateFolderModal}
+          title={t('Create Folder')}
+          cancelText="Cancel"
+          primaryText={t('Create')}
+          onClose={() => {
+            setShowCreateFolderModal(false);
+            setCreateFolderValue('');
+          }}
+          onPrimaryClick={handleCreate}
         >
-          <div className="hue-filechooser-modal__body">
-            <div className="hue-filechooser-modal__path-browser-panel">
-              <PathBrowser filePath={destPath} onFilepathChange={setDestPath} showIcon={false} />
-            </div>
+          {/* TODO: Refactor CreateAndUpload to reuse */}
+          <LoadingErrorWrapper errors={createFolderErrorConfig}>
             <Input
-              className="hue-filechooser-modal__search"
-              placeholder={t('Search')}
-              allowClear={true}
-              onChange={event => {
-                handleSearch(event.target.value);
+              defaultValue={createFolderValue}
+              disabled={createFolderLoading}
+              onPressEnter={() => handleCreate()}
+              ref={createFolderInputRef}
+              onChange={e => {
+                setCreateFolderValue(e.target.value);
               }}
             />
-            {isUploadEnabled ? (
-              <DragAndDrop onDrop={onFilesDrop}>{TableContent}</DragAndDrop>
-            ) : (
-              TableContent
-            )}
-          </div>
-          <input
-            ref={uploadRef}
-            type="file"
-            className="hue-importer__source-selector-option-upload"
-            onChange={handleFileUpload}
-          />
-          {showCreateFolderModal && (
-            <BottomSlidePanel
-              isOpen={showCreateFolderModal}
-              title={t('Create Folder')}
-              cancelText="Cancel"
-              primaryText={t('Create')}
-              onClose={() => {
-                setShowCreateFolderModal(false);
-                setCreateFolderValue('');
-              }}
-              onPrimaryClick={handleCreate}
-            >
-              {/* TODO: Refactor CreateAndUpload to reuse */}
-              <LoadingErrorWrapper errors={createFolderErrorConfig}>
-                <Input
-                  defaultValue={createFolderValue}
-                  disabled={createFolderLoading}
-                  onPressEnter={() => handleCreate()}
-                  ref={createFolderInputRef}
-                  onChange={e => {
-                    setCreateFolderValue(e.target.value);
-                  }}
-                />
-              </LoadingErrorWrapper>
-            </BottomSlidePanel>
-          )}
-        </Modal>
+          </LoadingErrorWrapper>
+        </BottomSlidePanel>
       )}
-    </>
+    </Modal>
   );
 };
 

desktop/core/src/desktop/js/reactComponents/FormInput/FileChooserInput/FileChooserInput.scss

@@ -0,0 +1,39 @@
+// 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-form-input__file-chooser {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+
+    .cuix.input {
+      flex: 1;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &__button {
+      white-space: nowrap;
+      flex-shrink: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-left: -1px;
+    }
+  }
+}