Pārlūkot izejas kodu

[frontend]Separate breadcrumbs from Pathbrowser component (#3431)

Nidhi Bhat G 2 gadi atpakaļ
vecāks
revīzija
a7db927e5d

+ 15 - 5
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -16,7 +16,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Modal from 'antd/lib/modal/Modal';
-import { Col, Menu, Row, Spin } from 'antd';
+import { Col, Menu, Row, Spin, Button } from 'antd';
 
 import HdfsIcon from '../../../components/icons/HdfsIcon';
 import S3Icon from '../../../components/icons/S3Icon';
@@ -124,10 +124,20 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
           </Col>
           <Col span={19}>
             <Spin spinning={loadingFiles}>
-              <PathBrowser
-                handleFilePathChange={setFilePath}
-                breadcrumbs={filesData?.breadcrumbs}
-              ></PathBrowser>
+              <Row className="hue-path-browser-panel" onClick={e => e.stopPropagation()}>
+                <Col span={18}>
+                  <PathBrowser
+                    handleFilePathChange={setFilePath}
+                    breadcrumbs={filesData?.breadcrumbs}
+                  ></PathBrowser>
+                </Col>
+                <Col span={3}>
+                  <Button className="hue-path-browser-panel__button">New Folder</Button>
+                </Col>
+                <Col span={3}>
+                  <Button className="hue-path-browser-panel__button">Upload</Button>
+                </Col>
+              </Row>
             </Spin>
           </Col>
         </Row>

+ 86 - 94
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx

@@ -92,102 +92,94 @@ const PathBrowser: React.FC<PathBrowserProps> = ({ breadcrumbs, handleFilePathCh
 
   if (breadcrumbs) {
     return (
-      <Row className="hue-path-browser-panel" onClick={e => e.stopPropagation()}>
-        <Col span={18}>
-          {!isEditMode ? (
-            <div className="hue-path-browser">
-              <div className="hue-filesystem__icon">
-                {icons[extractFileSystem(breadcrumbs[0].label)]}
-              </div>
-              <div className="hue-path-browser__breadcrumb">
-                {breadcrumbs.length <= 3 ? (
-                  breadcrumbs.map((item: BreadcrumbData, index: number) => {
-                    return (
-                      <>
-                        <OverflowingItem
-                          key={item.url}
-                          label={index === 0 ? extractFileSystem(item.label) : item.label}
-                          url={item.url}
-                          handleFilePathChange={handleFilePathChange}
-                          componentType="breadcrumb"
-                        />
-                        {index != breadcrumbs.length - 1 ? (
-                          <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
-                        ) : (
-                          <></>
-                        )}
-                      </>
-                    );
-                  })
-                ) : (
-                  <>
-                    <OverflowingItem
-                      label={extractFileSystem(breadcrumbs[0].label)}
-                      url={breadcrumbs[0].url}
-                      handleFilePathChange={handleFilePathChange}
-                      componentType="breadcrumb"
-                      key={breadcrumbs[0].url}
-                    />
-                    <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
-                    <Dropdown
-                      overlayClassName="hue-path-browser__dropdown"
-                      menu={{
-                        items: extractMenuItems(breadcrumbs.slice(1, breadcrumbs.length - 2)),
-                        className: 'hue-path-browser__dropdown-menu'
-                      }}
-                      trigger={['hover', 'click']}
-                      autoFocus
-                    >
-                      <Button className="hue-path-browser__dropdown-button">..</Button>
-                    </Dropdown>
-                    <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
-                    <OverflowingItem
-                      key={breadcrumbs[breadcrumbs.length - 2].url}
-                      label={breadcrumbs[breadcrumbs.length - 2].label}
-                      url={breadcrumbs[breadcrumbs.length - 2].url}
-                      handleFilePathChange={handleFilePathChange}
-                      componentType="breadcrumb"
-                    />
-                    <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
-                    <OverflowingItem
-                      key={breadcrumbs[breadcrumbs.length - 1].url}
-                      label={breadcrumbs[breadcrumbs.length - 1].label}
-                      url={breadcrumbs[breadcrumbs.length - 1].url}
-                      handleFilePathChange={handleFilePathChange}
-                      componentType="breadcrumb"
-                    />
-                  </>
-                )}
-              </div>
-              <Button
-                className="hue-toggle-breadcrumb-input"
-                title="Edit path"
-                onClick={() => {
-                  setIsEditMode(true);
-                }}
-              ></Button>
+      <>
+        {!isEditMode ? (
+          <div className="hue-path-browser">
+            <div className="hue-filesystem__icon">
+              {icons[extractFileSystem(breadcrumbs[0].label)]}
             </div>
-          ) : (
-            <div ref={wrapperRef}>
-              <Input
-                prefix={icons[extractFileSystem(breadcrumbs[0].label)]}
-                defaultValue={decodeURIComponent(breadcrumbs[breadcrumbs.length - 1].url)}
-                onPressEnter={customPath => {
-                  handleFilePathChange((customPath.target as HTMLInputElement).value);
-                }}
-                className="hue-path-browser__input"
-                autoFocus
-              ></Input>
+            <div className="hue-path-browser__breadcrumb">
+              {breadcrumbs.length <= 3 ? (
+                breadcrumbs.map((item: BreadcrumbData, index: number) => {
+                  return (
+                    <>
+                      <OverflowingItem
+                        key={item.url}
+                        label={index === 0 ? extractFileSystem(item.label) : item.label}
+                        url={item.url}
+                        handleFilePathChange={handleFilePathChange}
+                        componentType="breadcrumb"
+                      />
+                      {index != breadcrumbs.length - 1 ? (
+                        <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  );
+                })
+              ) : (
+                <>
+                  <OverflowingItem
+                    label={extractFileSystem(breadcrumbs[0].label)}
+                    url={breadcrumbs[0].url}
+                    handleFilePathChange={handleFilePathChange}
+                    componentType="breadcrumb"
+                    key={breadcrumbs[0].url}
+                  />
+                  <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
+                  <Dropdown
+                    overlayClassName="hue-path-browser__dropdown"
+                    menu={{
+                      items: extractMenuItems(breadcrumbs.slice(1, breadcrumbs.length - 2)),
+                      className: 'hue-path-browser__dropdown-menu'
+                    }}
+                    trigger={['hover', 'click']}
+                    autoFocus
+                  >
+                    <Button className="hue-path-browser__dropdown-button">..</Button>
+                  </Dropdown>
+                  <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
+                  <OverflowingItem
+                    key={breadcrumbs[breadcrumbs.length - 2].url}
+                    label={breadcrumbs[breadcrumbs.length - 2].label}
+                    url={breadcrumbs[breadcrumbs.length - 2].url}
+                    handleFilePathChange={handleFilePathChange}
+                    componentType="breadcrumb"
+                  />
+                  <RightOutlined className="hue-path-browser__breadcrumb-seperator" />
+                  <OverflowingItem
+                    key={breadcrumbs[breadcrumbs.length - 1].url}
+                    label={breadcrumbs[breadcrumbs.length - 1].label}
+                    url={breadcrumbs[breadcrumbs.length - 1].url}
+                    handleFilePathChange={handleFilePathChange}
+                    componentType="breadcrumb"
+                  />
+                </>
+              )}
             </div>
-          )}
-        </Col>
-        <Col span={3}>
-          <Button className="hue-path-browser-panel__button">New Folder</Button>
-        </Col>
-        <Col span={3}>
-          <Button className="hue-path-browser-panel__button">Upload</Button>
-        </Col>
-      </Row>
+            <Button
+              className="hue-toggle-breadcrumb-input"
+              title="Edit path"
+              onClick={() => {
+                setIsEditMode(true);
+              }}
+            ></Button>
+          </div>
+        ) : (
+          <div ref={wrapperRef}>
+            <Input
+              prefix={icons[extractFileSystem(breadcrumbs[0].label)]}
+              defaultValue={decodeURIComponent(breadcrumbs[breadcrumbs.length - 1].url)}
+              onPressEnter={customPath => {
+                handleFilePathChange((customPath.target as HTMLInputElement).value);
+              }}
+              className="hue-path-browser__input"
+              autoFocus
+            ></Input>
+          </div>
+        )}
+      </>
     );
   }
 };