Skip to content

Commit 9e27d5f

Browse files
nidhibhatgnidhibhatg
authored
[ui-storageBrowser] Add cuix and antd classes to Storage Browser (#3741)
* [ui-storageBrowser] Add cuix and antd classes to Storage Browser
1 parent dc02b1b commit 9e27d5f

File tree

26 files changed

+279
-435
lines changed

26 files changed

+279
-435
lines changed

‎apps/filebrowser/src/filebrowser/templates/storage_browser.mako‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,12 @@
2424
${ render_bundle(bundle) | n,unicode }
2525
% endfor
2626

27-
<StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
27+
<script type="text/javascript">
28+
(function () {
29+
window.createReactComponents('#storageBrowser');
30+
})();
31+
</script>
2832

33+
<div id="storageBrowser">
34+
<StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
35+
</div>

‎desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.scss‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,8 @@
1616
@use 'variables' as vars;
1717
@use 'mixins';
1818

19-
.hue-input-modal {
20-
@include mixins.hue-svg-icon__d3-conflict;
21-
22-
.hue-input-modal__description {
23-
color: vars.$fluidx-black;
24-
margin-bottom: 14px;
25-
}
26-
27-
.hue-input-modal__input {
28-
height: vars.$fluidx-spacing-l;
19+
.antd.cuix {
20+
.hue-input-modal__input-label {
21+
color: vars.$fluidx-gray-700;
2922
}
3023
}
31-
32-
.hue-input-modal__input-label {
33-
color: vars.$fluidx-gray-700;
34-
}

‎desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,22 @@ interface InputModalProps {
3232
title: string;
3333
}
3434

35-
const InputModal: React.FC<InputModalProps> = ({
35+
const InputModal = ({
3636
inputLabel,
3737
onClose,
3838
onSubmit,
3939
showModal,
4040
title,
4141
...i18n
42-
}): JSX.Element => {
42+
}: InputModalProps): JSX.Element => {
4343
const [value, setValue] = useState<string>('');
4444
const { t } = i18nReact.useTranslation();
4545
const { cancelText = t('Cancel'), submitText = t('Submit') } = i18n;
4646

4747
return (
4848
<Modal
4949
cancelText={cancelText}
50-
className="hue-input-modal"
50+
className="hue-input-modal cuix antd"
5151
okText={submitText}
5252
onCancel={() => {
5353
setValue('');

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,13 @@
1717
@use 'variables' as vars;
1818
@import '../../../components/styles/mixins';
1919

20-
.hue-storage-browser {
21-
@include fillAbsolute;
22-
@include flexRowLayout;
20+
.antd.cuix {
21+
.hue-storage-browser {
22+
@include fillAbsolute;
23+
@include flexRowLayout;
2324

24-
display: flex;
25+
display: flex;
26+
}
2527

2628
.hue-storage-browser__tab {
2729
background-color: vars.$fluidx-gray-100;
@@ -34,4 +36,3 @@
3436
}
3537
}
3638
}
37-

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { fetchFileSystems } from '../../../reactComponents/FileChooser/api';
2727

2828
import './StorageBrowserPage.scss';
2929

30-
const StorageBrowserPage: React.FC = (): JSX.Element => {
30+
const StorageBrowserPage = (): JSX.Element => {
3131
const [fileSystemTabs, setFileSystemTabs] = useState<TabsProps['items'] | undefined>();
3232
const [loading, setLoading] = useState(true);
3333

@@ -58,7 +58,7 @@ const StorageBrowserPage: React.FC = (): JSX.Element => {
5858
}, []);
5959

6060
return (
61-
<div className="hue-storage-browser">
61+
<div className="hue-storage-browser cuix antd">
6262
<CommonHeader title={t('Storage Browser')} icon={<DataBrowserIcon />} />
6363
<Spin spinning={loading}>
6464
<Tabs className="hue-storage-browser__tab" defaultActiveKey="0" items={fileSystemTabs} />

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserRowActions/StorageBrowserRowActions.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@
1818
$action-dropdown-width: 214px;
1919

2020
//TODO: Remove styling for cuix button
21-
.hue-storage-browser__table-actions-btn {
22-
box-shadow: none;
23-
background-color: transparent;
24-
border: none;
21+
.antd.cuix {
22+
.hue-storage-browser__table-actions-btn {
23+
box-shadow: none;
24+
background-color: transparent;
25+
border: none;
26+
}
2527
}
2628

2729
.hue-storage-browser__table-actions-dropdown {

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss‎

Lines changed: 34 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -19,87 +19,58 @@
1919
$icon-margin: 5px;
2020
$action-dropdown-width: 214px;
2121

22-
.hue-storage-browser-tabContent {
23-
background-color: vars.$fluidx-white;
24-
margin: vars.$fluidx-spacing-s 0;
22+
.antd.cuix {
23+
.hue-storage-browser-tabContent {
24+
margin: vars.$fluidx-spacing-s 0;
25+
}
2526

2627
.hue-storage-browser__title-bar {
2728
display: flex;
28-
align-items: center;
2929
margin: 0 vars.$fluidx-spacing-s;
30-
padding-top: vars.$fluidx-spacing-s;
30+
}
3131

32-
.hue-storage-browser__icon {
33-
margin-right: vars.$fluidx-spacing-xs;
34-
flex: 0 0 auto;
35-
height: 24px;
36-
width: 24px;
37-
}
32+
.hue-storage-browser__icon {
33+
margin-right: vars.$fluidx-spacing-xs;
34+
flex: 0 0 auto;
35+
height: vars.$fluidx-heading-h3-line-height;
36+
}
3837

39-
.hue-storage-browser__folder-name {
40-
flex: 0 0 auto;
41-
font-size: vars.$fluidx-heading-h3-size;
42-
line-height: vars.$fluidx-heading-h3-line-height;
43-
font-weight: vars.$fluidx-heading-h3-weight;
44-
}
38+
.hue-storage-browser__folder-name {
39+
flex: 0 0 auto;
40+
font-size: vars.$fluidx-heading-h3-size;
41+
line-height: vars.$fluidx-heading-h3-line-height;
42+
font-weight: vars.$fluidx-heading-h3-weight;
4543
}
4644

4745
.hue-storage-browser__path-browser-panel {
4846
display: flex;
4947
margin: vars.$fluidx-spacing-xs 0;
50-
//TODO: Remove nesting of classes.
51-
.hue-storage-browser__filePath {
52-
flex: 0 0 auto;
53-
color: vars.$text-color;
54-
font-weight: 600;
55-
margin: 0 vars.$fluidx-spacing-xs 0 vars.$fluidx-spacing-s;
56-
}
48+
align-items: center;
5749
}
58-
}
59-
60-
.hue-storage-browser__actions-bar {
61-
display: flex;
62-
margin: vars.$fluidx-spacing-s;
63-
justify-content: space-between;
64-
@include mixins.hue-svg-icon__d3-conflict;
65-
}
6650

67-
.hue-storage-browser__search {
68-
flex: 0 0 auto;
69-
display: flex;
70-
}
71-
72-
.hue-storage-browser__actions-bar-right {
73-
display: flex;
74-
height: 32px;
75-
}
76-
77-
.hue-storage-browser__bulk-action-btn {
78-
flex: 0 0 auto;
79-
color: vars.$fluidx-blue-600;
80-
margin-right: vars.$fluidx-spacing-xs;
81-
border: solid 1px vars.$fluidx-gray-300;
82-
box-shadow: none;
83-
background-color: transparent;
84-
85-
.cdp-icon-dropdown {
86-
margin-left: $icon-margin;
51+
.hue-storage-browser__filePath {
52+
flex: 0 0 auto;
53+
font-weight: 600;
54+
margin: 0 vars.$fluidx-spacing-xs 0 vars.$fluidx-spacing-s;
8755
}
88-
}
8956

90-
.hue-storage-browser__new-btn {
91-
flex: 0 0 auto;
92-
color: vars.$fluidx-white;
93-
background-color: vars.$fluidx-blue-600;
94-
border: solid 1px vars.$fluidx-blue-600;
95-
box-shadow: none;
57+
.hue-storage-browser__actions-bar {
58+
display: flex;
59+
margin: vars.$fluidx-spacing-s;
60+
justify-content: space-between;
61+
}
9662

97-
.cdp-icon-dropdown {
98-
margin-left: $icon-margin;
63+
.hue-storage-browser__search {
64+
width: 30%;
9965
}
10066

101-
.cdp-icon-plus-circle {
102-
margin-right: $icon-margin;
67+
.hue-storage-browser__actions-bar-right {
68+
display: flex;
69+
gap: vars.$fluidx-spacing-xs;
70+
71+
.cdp-icon-dropdown {
72+
margin-left: $icon-margin;
73+
}
10374
}
10475
}
10576

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@
1515
// limitations under the License.
1616

1717
import React, { useState, useEffect } from 'react';
18-
import { Spin, Input, Dropdown, Button } from 'antd';
18+
import { Spin, Dropdown, Input } from 'antd';
1919
import type { MenuProps } from 'antd';
20+
import Button from 'cuix/dist/components/Button';
21+
import { PrimaryButton } from 'cuix/dist/components/Button';
2022

2123
import { i18nReact } from '../../../../utils/i18nReact';
2224
import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
@@ -27,7 +29,6 @@ import DownloadIcon from '@cloudera/cuix-core/icons/react/DownloadIcon';
2729
import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
2830
import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
2931
import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
30-
import PlusCircleIcon from '@cloudera/cuix-core/icons/react/PlusCircleIcon';
3132
//TODO: Use cuix icon (Currently fileIcon does not exist in cuix)
3233
import { FileOutlined } from '@ant-design/icons';
3334

@@ -53,10 +54,10 @@ const defaultProps = {
5354
testId: 'hue-storage-browser-tabContent'
5455
};
5556

56-
const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
57+
const StorageBrowserTabContent = ({
5758
user_home_dir,
5859
testId
59-
}): JSX.Element => {
60+
}: StorageBrowserTabContentProps): JSX.Element => {
6061
const [filePath, setFilePath] = useState<string>(user_home_dir);
6162
const [filesData, setFilesData] = useState<PathAndFileData>();
6263
const [files, setFiles] = useState<StorageBrowserTableData[]>();
@@ -198,15 +199,15 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
198199
<div className="hue-storage-browser-tabContent" data-testid={testId}>
199200
<div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
200201
<BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
201-
<div className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
202+
<h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
202203
{filesData?.breadcrumbs[filesData?.breadcrumbs?.length - 1].label}
203-
</div>
204+
</h3>
204205
</div>
205206
<div
206207
className="hue-storage-browser__path-browser-panel"
207208
data-testid={`${testId}-path-browser-panel`}
208209
>
209-
<div className="hue-storage-browser__filePath">{t('File Path:')}</div>
210+
<span className="hue-storage-browser__filePath">{t('File Path:')}</span>
210211
<PathBrowser
211212
breadcrumbs={filesData?.breadcrumbs}
212213
onFilepathChange={setFilePath}
@@ -225,7 +226,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
225226
}}
226227
trigger={['hover', 'click']}
227228
>
228-
<Button className="hue-storage-browser__bulk-action-btn">
229+
<Button data-event={''}>
229230
{t('Bulk Actions')}
230231
<DropDownIcon />
231232
</Button>
@@ -238,10 +239,10 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
238239
}}
239240
trigger={['hover', 'click']}
240241
>
241-
<Button className="hue-storage-browser__new-btn" icon={<PlusCircleIcon />}>
242+
<PrimaryButton data-event={''}>
242243
{t('New')}
243244
<DropDownIcon />
244-
</Button>
245+
</PrimaryButton>
245246
</Dropdown>
246247
</div>
247248
</div>

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss‎

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -19,57 +19,42 @@
1919
$cell-height: 40px;
2020
$table-placeholder-height: 100px;
2121

22-
.hue-storage-browser__table {
23-
@include mixins.hue-svg-icon__d3-conflict;
24-
25-
margin: 0 vars.$fluidx-spacing-s;
22+
.antd.cuix {
23+
.hue-storage-browser__table {
24+
margin: 0 vars.$fluidx-spacing-s;
25+
26+
.ant-table-placeholder {
27+
height: $table-placeholder-height;
28+
text-align: center;
29+
}
30+
31+
th.ant-table-cell {
32+
height: $cell-height;
33+
background-color: vars.$fluidx-gray-040;
34+
}
35+
}
2636

2737
.hue-storage-browser__table-cell-icon {
2838
color: vars.$fluidx-blue-700;
2939
margin-right: 6px;
3040
}
3141

32-
.ant-table-placeholder {
33-
height: $table-placeholder-height;
34-
text-align: center;
35-
}
36-
37-
thead {
38-
//TODO:Check why height isnt applied in safari browser
39-
height: $cell-height;
40-
background-color: vars.$fluidx-gray-040;
42+
.hue-storage-browser__table-row {
43+
td.ant-table-cell {
44+
height: $cell-height;
45+
@include mixins.nowrap-ellipsis;
46+
}
4147
}
4248

43-
th.ant-table-cell {
44-
text-align: left;
49+
.hue-storage-browser__table-cell-name {
50+
color: vars.$fluidx-blue-700;
4551
}
4652

47-
table {
48-
width: 100%;
53+
.hue-storage-browser__table-column-header {
54+
display: flex;
4955
}
50-
}
51-
52-
.hue-storage-browser__table-row {
53-
height: $cell-height;
54-
border-bottom: solid 1px vars.$fluidx-gray-300;
5556

56-
td.ant-table-cell {
57-
white-space: nowrap;
58-
overflow-x: hidden;
59-
text-overflow: ellipsis;
60-
//ellipsis does not work without display as block or specifying max-width. Display as block not possible in table
61-
max-width: 400px;
57+
.hue-storage-browser__table-column-title {
58+
text-transform: capitalize;
6259
}
6360
}
64-
65-
.hue-storage-browser__table-cell-name {
66-
color: vars.$fluidx-blue-700;
67-
}
68-
69-
.hue-storage-browser__table-column-header {
70-
display: flex;
71-
}
72-
73-
.hue-storage-browser__table-column-title {
74-
text-transform: capitalize;
75-
}

0 commit comments

Comments
 (0)