Skip to content

Commit c0c915a

Browse files
mariana-furykmariana-furyk
committed
Revamp [Models/Datasets/Artifacts] change UI according to Figma new design
1 parent 7b87922 commit c0c915a

File tree

20 files changed

+156
-120
lines changed

20 files changed

+156
-120
lines changed

‎src/components/ArtifactInfoSources/ArtifactInfoSources.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ const ArtifactInfoSources = ({ sources }) => {
3232
<div className="info-sources__table" key={key + value}>
3333
<h5 className="info-sources__table-header">Source {index + 1}</h5>
3434
<div className="info-sources__table-row">
35-
<div className="info-sources__table-key">Name</div>
35+
<div className="info-sources__table-key">Name:</div>
3636
<div className="info-sources__table-value">
3737
<Tooltip template={<TextTooltipTemplate text={key} />}>{key}</Tooltip>
3838
</div>
3939
</div>
4040
<div className="info-sources__table-row">
41-
<div className="info-sources__table-key">Path</div>
41+
<div className="info-sources__table-key">Path:</div>
4242
<div className="info-sources__table-value">
4343
<Tooltip template={<TextTooltipTemplate text={value} />}>{value}</Tooltip>
4444
</div>

‎src/components/ArtifactInfoSources/artifactInfoSources.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
flex-direction: column;
1515

1616
&-header {
17-
margin: 0 0 10px;
17+
margin: 10px 0;
1818
font-size: 16px;
1919
}
2020

@@ -40,8 +40,8 @@
4040
flex: 1 1;
4141
align-items: center;
4242
min-width: 110px;
43-
padding-left: 1rem;
4443
word-break: break-word;
44+
color: $topaz;
4545
}
4646
}
4747
}

‎src/components/ArtifactsActionBar/ArtifactsActionBar.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { isEmpty } from 'lodash'
2626
import { useNavigate, useParams } from 'react-router-dom'
2727
import PropTypes from 'prop-types'
2828

29-
import { RoundedIcon } from 'igz-controls/components'
29+
import { RoundedIcon, Button } from 'igz-controls/components'
3030
import FilterMenuModal from '../FilterMenuModal/FilterMenuModal'
3131
import ArtifactsFilters from './ArtifactsFilters'
3232
import NameFilter from '../../common/NameFilter/NameFilter'
@@ -40,6 +40,7 @@ import detailsActions from '../../actions/details'
4040
import { ReactComponent as RefreshIcon } from 'igz-controls/images/refresh.svg'
4141

4242
function ArtifactsActionBar({
43+
actionButton,
4344
cancelRequest,
4445
filterMenuName,
4546
handleRefresh,
@@ -153,6 +154,15 @@ function ArtifactsActionBar({
153154
</FilterMenuModal>
154155
</div>
155156
<div className="action-bar__actions">
157+
{actionButton && !actionButton.hidden && (
158+
<Button
159+
variant={actionButton.variant}
160+
label={actionButton.label}
161+
className={actionButton.className}
162+
onClick={actionButton.onClick}
163+
/>
164+
)}
165+
156166
<RoundedIcon tooltipText="Refresh" onClick={() => refresh(formState)} id="refresh">
157167
<RefreshIcon />
158168
</RoundedIcon>
@@ -164,11 +174,19 @@ function ArtifactsActionBar({
164174
}
165175

166176
ArtifactsActionBar.defaultProps = {
177+
actionButton: null,
167178
cancelRequest: null,
168179
tab: ''
169180
}
170181

171182
ArtifactsActionBar.propTypes = {
183+
actionButton: PropTypes.shape({
184+
className: PropTypes.string,
185+
hidden: PropTypes.bool,
186+
label: PropTypes.string.isRequired,
187+
onClick: PropTypes.func.isRequired,
188+
variant: PropTypes.string.isRequired
189+
}),
172190
cancelRequest: PropTypes.func,
173191
filterMenuName: PropTypes.string.isRequired,
174192
handleRefresh: PropTypes.func.isRequired,

‎src/components/Datasets/Datasets.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ import { isNil } from 'lodash'
2424

2525
import DatasetsView from './DatasetsView'
2626
import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactTagPopUp'
27+
import RegisterArtifactModal from '../RegisterArtifactModal/RegisterArtifactModal'
2728

2829
import {
30+
DATASET_TYPE,
2931
DATASETS_FILTERS,
3032
DATASETS_PAGE,
3133
FILTER_MENU_MODAL,
@@ -45,7 +47,8 @@ import {
4547
fetchDataSetRowData,
4648
filters,
4749
generatePageData,
48-
handleApplyDetailsChanges
50+
handleApplyDetailsChanges,
51+
registerDatasetTitle
4952
} from './datasets.util'
5053
import { cancelRequest } from '../../utils/cancelRequest'
5154
import { createDatasetsRowData, getIsTargetPathValid } from '../../utils/createArtifactsContent'
@@ -337,6 +340,15 @@ const Datasets = () => {
337340
}
338341
}, [dispatch])
339342

343+
const handleRegisterDataset = useCallback(() => {
344+
openPopUp(RegisterArtifactModal, {
345+
artifactKind: DATASET_TYPE,
346+
projectName: params.projectName,
347+
refresh: handleRefresh,
348+
title: registerDatasetTitle
349+
})
350+
}, [handleRefresh, params.projectName])
351+
340352
return (
341353
<DatasetsView
342354
actionsMenu={actionsMenu}
@@ -348,6 +360,7 @@ const Datasets = () => {
348360
detailsFormInitialValues={detailsFormInitialValues}
349361
filtersStore={filtersStore}
350362
handleExpandRow={handleExpandRow}
363+
handleRegisterDataset={handleRegisterDataset}
351364
handleRefresh={handleRefresh}
352365
pageData={pageData}
353366
ref={datasetsRef}

‎src/components/Datasets/DatasetsView.js

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,23 @@ such restriction.
1919
*/
2020
import React from 'react'
2121
import PropTypes from 'prop-types'
22-
import { useParams } from 'react-router-dom'
2322

2423
import PreviewModal from '../../elements/PreviewModal/PreviewModal'
2524
import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
26-
import PageActionsMenu from '../../common/PageActionsMenu/PageActionsMenu'
2725
import Table from '../Table/Table'
2826
import ArtifactsTableRow from '../../elements/ArtifactsTableRow/ArtifactsTableRow'
2927
import YamlModal from '../../common/YamlModal/YamlModal'
30-
import RegisterArtifactModal from '../RegisterArtifactModal/RegisterArtifactModal'
3128
import Loader from '../../common/Loader/Loader'
3229
import ArtifactsActionBar from '../ArtifactsActionBar/ArtifactsActionBar'
3330
import NoData from '../../common/NoData/NoData'
3431
import Details from '../Details/Details'
3532

36-
import { DATASET_TYPE, DATASETS_FILTERS, DATASETS_PAGE, FULL_VIEW_MODE } from '../../constants'
33+
import { DATASETS_FILTERS, DATASETS_PAGE, FULL_VIEW_MODE } from '../../constants'
3734
import { getNoDataMessage } from '../../utils/getNoDataMessage'
38-
import { actionsMenuHeader, filters } from './datasets.util'
39-
import { openPopUp } from 'igz-controls/utils/common.util'
35+
import { registerDatasetTitle, filters } from './datasets.util'
4036
import { removeDataSet } from '../../reducers/artifactsReducer'
4137
import { ACTIONS_MENU } from '../../types'
38+
import { SECONDARY_BUTTON } from 'igz-controls/constants'
4239

4340
const DatasetsView = React.forwardRef(
4441
(
@@ -53,6 +50,7 @@ const DatasetsView = React.forwardRef(
5350
filtersStore,
5451
handleExpandRow,
5552
handleRefresh,
53+
handleRegisterDataset,
5654
pageData,
5755
selectedDataset,
5856
selectedRowData,
@@ -66,31 +64,23 @@ const DatasetsView = React.forwardRef(
6664
},
6765
ref
6866
) => {
69-
const params = useParams()
70-
7167
return (
7268
<>
7369
<div className="content-wrapper" ref={ref}>
7470
<div className="content__header">
7571
<Breadcrumbs />
76-
<PageActionsMenu
77-
actionsMenuHeader={actionsMenuHeader}
78-
onClick={() =>
79-
openPopUp(RegisterArtifactModal, {
80-
artifactKind: DATASET_TYPE,
81-
projectName: params.projectName,
82-
refresh: handleRefresh,
83-
title: actionsMenuHeader
84-
})
85-
}
86-
showActionsMenu
87-
/>
8872
</div>
8973
<div className="content">
9074
{artifactsStore.loading && <Loader />}
9175
<div className="table-container">
9276
<div className="content__action-bar-wrapper">
9377
<ArtifactsActionBar
78+
actionButton={{
79+
variant: SECONDARY_BUTTON,
80+
label: registerDatasetTitle,
81+
className: 'register-button',
82+
onClick: handleRegisterDataset
83+
}}
9484
filterMenuName={DATASETS_FILTERS}
9585
handleRefresh={handleRefresh}
9686
page={DATASETS_PAGE}
@@ -182,6 +172,7 @@ DatasetsView.propTypes = {
182172
filtersStore: PropTypes.object.isRequired,
183173
handleExpandRow: PropTypes.func.isRequired,
184174
handleRefresh: PropTypes.func.isRequired,
175+
handleRegisterDataset: PropTypes.func.isRequired,
185176
pageData: PropTypes.object.isRequired,
186177
selectedDataset: PropTypes.object.isRequired,
187178
selectedRowData: PropTypes.object.isRequired,

‎src/components/Datasets/datasets.util.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const filters = [
6262
{ type: ITERATIONS_FILTER, label: 'Show best iteration only' }
6363
]
6464

65-
export const actionsMenuHeader = 'Register dataset'
65+
export const registerDatasetTitle = 'Register dataset'
6666

6767
export const generateDataSetsDetailsMenu = selectedItem => [
6868
{

‎src/components/DetailsInfo/DetailsInfoView.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const DetailsInfoView = React.forwardRef(
158158
<li className={detailsItemClassNames} key={header.id}>
159159
<>
160160
<div className="details-item__header">
161-
{header.label}
161+
{header.label}:
162162
{header.tip && <Tip className="details-item__tip" text={header.tip} />}
163163
</div>
164164
<DetailsInfoItem

‎src/components/DetailsInfo/detailsInfo.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616

1717
&__header {
1818
margin: 0;
19-
padding: 21.5px 0 21.5px 0;
20-
font-size: 25px;
19+
padding: 10px 0 21.5px 0;
20+
font-size: 18px;
2121
}
2222

2323
&__details {
24-
margin: 0;
24+
margin: 0 0 21px;
2525
padding: 0 0 0 0;
2626
list-style-type: none;
2727

@@ -55,11 +55,11 @@
5555

5656
&__header {
5757
display: flex;
58-
width: 150px;
58+
width: 160px;
5959
min-width: 100px;
60-
font-weight: bold;
61-
font-size: 14px;
62-
line-height: 24px;
60+
font-weight: 500;
61+
font-size: 15px;
62+
line-height: 18px;
6363
}
6464

6565
&__tip {
@@ -71,8 +71,8 @@
7171
flex: 1;
7272
align-items: center;
7373
min-width: 110px;
74-
padding-left: 1rem;
7574
word-break: break-word;
75+
color: $topaz;
7676

7777
&-btn-edit {
7878
margin-left: 10px;

‎src/components/DetailsInfo/detailsInfo.util.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const generateDriftDetailsInfo = modelEndpoint => {
106106
? modelEndpointContent.map(item => {
107107
return (
108108
<li className="details-item" key={item.id}>
109-
<div className="details-item__header">{item.label}</div>
109+
<div className="details-item__header">{item.label}:</div>
110110
<DetailsInfoItem info={item.value} />
111111
</li>
112112
)
@@ -131,7 +131,7 @@ export const generateProducerDetailsInfo = selectedItem => {
131131
return (
132132
<li className="details-item" key={key}>
133133
<div className="details-item__header">
134-
{key === 'uri' ? key.toUpperCase() : capitalize(key)}
134+
{key === 'uri' ? key.toUpperCase() : capitalize(key)}:
135135
</div>
136136
<DetailsInfoItem link={url} info={value} />
137137
</li>

‎src/components/Files/Files.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ import { isNil } from 'lodash'
2424

2525
import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactTagPopUp'
2626
import FilesView from './FilesView'
27+
import RegisterArtifactModal from '../RegisterArtifactModal/RegisterArtifactModal'
2728

2829
import {
30+
ARTIFACT_TYPE,
2931
FILES_FILTERS,
3032
FILES_PAGE,
3133
FILTER_MENU_MODAL,
@@ -38,7 +40,8 @@ import {
3840
fetchFilesRowData,
3941
filters,
4042
generatePageData,
41-
handleApplyDetailsChanges
43+
handleApplyDetailsChanges,
44+
registerArtifactTitle
4245
} from './files.util'
4346
import { cancelRequest } from '../../utils/cancelRequest'
4447
import { createFilesRowData, getIsTargetPathValid } from '../../utils/createArtifactsContent'
@@ -325,6 +328,15 @@ const Files = () => {
325328
selectedRowData
326329
])
327330

331+
const handleRegisterArtifact = useCallback(() => {
332+
openPopUp(RegisterArtifactModal, {
333+
artifactKind: ARTIFACT_TYPE,
334+
projectName: params.projectName,
335+
refresh: handleRefresh,
336+
title: registerArtifactTitle
337+
})
338+
}, [handleRefresh, params.projectName])
339+
328340
return (
329341
<FilesView
330342
actionsMenu={actionsMenu}
@@ -337,6 +349,7 @@ const Files = () => {
337349
filtersStore={filtersStore}
338350
handleExpandRow={handleExpandRow}
339351
handleRefresh={handleRefresh}
352+
handleRegisterArtifact={handleRegisterArtifact}
340353
pageData={pageData}
341354
ref={filesRef}
342355
selectedFile={selectedFile}

0 commit comments

Comments
 (0)