Skip to content

Commit c95757c

Browse files
mariana-furykmariana-furyk
authored
Impl [Artifacts] Move Overview "Sources" according to Figma (#2048)
1 parent bbdb1b6 commit c95757c

21 files changed

+247
-393
lines changed

‎src/actions/details.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
FETCH_MODEL_FEATURE_VECTOR_SUCCESS,
3131
REMOVE_INFO_CONTENT,
3232
REMOVE_JOB_PODS,
33+
REMOVE_MODEL_ENDPOINT,
3334
REMOVE_MODEL_FEATURE_VECTOR,
3435
RESET_CHANGES,
3536
SET_CHANGES,
@@ -124,6 +125,9 @@ const detailsActions = {
124125
removeInfoContent: () => ({
125126
type: REMOVE_INFO_CONTENT
126127
}),
128+
removeModelEndpoint: () => ({
129+
type: REMOVE_MODEL_ENDPOINT
130+
}),
127131
removeModelFeatureVector: () => ({
128132
type: REMOVE_MODEL_FEATURE_VECTOR
129133
}),

‎src/components/ArtifactInfoSources/ArtifactInfoSources.js

Lines changed: 19 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,90 +17,34 @@ illegal under applicable law, and the grant of the foregoing license
1717
under the Apache 2.0 license is conditioned upon your compliance with
1818
such restriction.
1919
*/
20-
import React, { useState, useEffect, useMemo } from 'react'
20+
import React from 'react'
2121
import PropTypes from 'prop-types'
22-
import classnames from 'classnames'
2322

2423
import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
2524

26-
import { artifactInfoSourcesHeaders } from './artifactInfoSources.utils'
27-
2825
import './artifactInfoSources.scss'
2926

30-
import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'
31-
32-
const ArtifactInfoSources = ({ header, sources }) => {
33-
const [isExpanded, setIsExpanded] = useState(false)
34-
35-
const sourcesLength = useMemo(() => {
36-
return Object.values(sources).length
37-
}, [sources])
38-
39-
const sourcesClassNames = classnames(
40-
'info-sources',
41-
isExpanded && 'info-sources_expanded'
42-
)
43-
const sourcesRowClassNames = classnames(
44-
'info-sources-row',
45-
sourcesLength === 0 && 'info-sources-row_empty'
46-
)
47-
48-
useEffect(() => {
49-
if (sourcesLength === 0) {
50-
setIsExpanded(false)
51-
}
52-
}, [sourcesLength, isExpanded])
27+
const ArtifactInfoSources = ({ sources }) => {
5328
return (
54-
<div className={sourcesClassNames}>
55-
<div
56-
className={sourcesRowClassNames}
57-
onClick={() => {
58-
if (sourcesLength !== 0) setIsExpanded(prevState => !prevState)
59-
}}
60-
>
61-
{sourcesLength !== 0 && (
62-
<Arrow className={isExpanded ? 'expanded' : 'collapsed'} />
63-
)}
64-
65-
<div className="info-sources-row__header">{header}</div>
66-
<div className="info-sources-row__data">
67-
{`${Object.values(sources).length} ${
68-
Object.values(sources).length <= 1 ? 'item' : 'items'
69-
}`}
70-
</div>
71-
</div>
72-
73-
{isExpanded && (
74-
<div className="info-sources-table">
75-
<div className="info-sources-table__header">
76-
{artifactInfoSourcesHeaders.map(({ label, id, className }) => {
77-
const tableItemClassNames = classnames(
78-
'info-sources-table__header-item',
79-
className
80-
)
81-
82-
return (
83-
<div key={id} className={tableItemClassNames}>
84-
{label}
85-
</div>
86-
)
87-
})}
29+
<div className="info-sources" data-testid="sources">
30+
<h3 className="item-info__header">Sources</h3>
31+
{Object.entries(sources).map(([key, value], index) => (
32+
<div className="info-sources__table" key={key + value}>
33+
<h5 className="info-sources__table-header">Source {index + 1}</h5>
34+
<div className="info-sources__table-row">
35+
<div className="info-sources__table-key">Name</div>
36+
<div className="info-sources__table-value">
37+
<Tooltip template={<TextTooltipTemplate text={key} />}>{key}</Tooltip>
38+
</div>
8839
</div>
89-
{Object.entries(sources).map(([key, value], index) => (
90-
<div
91-
key={`${key}-${index}`}
92-
className="info-sources-table__content"
93-
>
94-
<div className="info-sources-table__content-key">
95-
<Tooltip template={<TextTooltipTemplate text={key} />}>
96-
{key}
97-
</Tooltip>
98-
</div>
99-
<div className="info-sources-table__content-value">{value}</div>
40+
<div className="info-sources__table-row">
41+
<div className="info-sources__table-key">Path</div>
42+
<div className="info-sources__table-value">
43+
<Tooltip template={<TextTooltipTemplate text={value} />}>{value}</Tooltip>
10044
</div>
101-
))}
45+
</div>
10246
</div>
103-
)}
47+
))}
10448
</div>
10549
)
10650
}
@@ -110,8 +54,7 @@ ArtifactInfoSources.defaultProps = {
11054
}
11155

11256
ArtifactInfoSources.propTypes = {
113-
header: PropTypes.string.isRequired,
114-
sources: PropTypes.shape({})
57+
sources: PropTypes.shape({}).isRequired
11558
}
11659

11760
export default ArtifactInfoSources

‎src/components/ArtifactInfoSources/artifactInfoSources.scss

Lines changed: 21 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,101 +7,41 @@
77
display: flex;
88
flex: 1;
99
flex-direction: column;
10-
margin-left: -6px;
1110
padding: 0;
1211

13-
&-row {
14-
position: relative;
12+
&__table {
1513
display: flex;
16-
flex-direction: row;
17-
align-items: center;
18-
padding: 18px 25px;
19-
cursor: pointer;
14+
flex-direction: column;
2015

21-
&_empty {
22-
padding: 18px 8px;
16+
&-header {
17+
margin: 0 0 10px;
18+
font-size: 16px;
2319
}
2420

25-
&__header {
26-
min-width: 100px;
27-
font-weight: bold;
28-
font-size: 14px;
29-
line-height: 24px;
30-
}
31-
32-
&__data {
21+
&-row {
3322
display: flex;
34-
padding-left: 16px;
23+
align-items: baseline;
24+
margin-bottom: 10px;
25+
padding: 10px 10px 10px 0;
26+
border-bottom: $dividerBorder;
3527
}
3628

37-
svg {
38-
position: absolute;
39-
left: 0;
40-
cursor: pointer;
41-
42-
&.collapsed {
43-
transform: rotate(0);
44-
transform-origin: center center;
45-
transition: transform 200ms linear;
46-
}
47-
48-
&.expanded {
49-
transform: rotate(90deg);
50-
transform-origin: center center;
51-
transition: transform 200ms linear;
52-
}
53-
}
54-
}
55-
56-
&-table {
57-
padding: 0 18px;
58-
59-
&__header {
29+
&-key {
6030
display: flex;
61-
flex-direction: row;
62-
align-items: center;
63-
padding: 18px;
64-
border-bottom: $secondaryBorder;
65-
66-
&-item {
67-
text-transform: capitalize;
68-
69-
@include detailsItem;
70-
}
71-
72-
.name {
73-
min-width: 200px;
74-
}
75-
76-
.path {
77-
min-width: 100px;
78-
}
31+
width: 150px;
32+
min-width: 100px;
33+
font-weight: bold;
34+
font-size: 14px;
35+
line-height: 24px;
7936
}
8037

81-
&__content {
38+
&-value {
8239
display: flex;
83-
flex-direction: row;
40+
flex: 1 1;
8441
align-items: center;
85-
min-height: 56px;
86-
border-bottom: $secondaryBorder;
87-
88-
&-value {
89-
word-break: break-word;
90-
}
91-
92-
&:last-child {
93-
border: none;
94-
}
95-
96-
&-key {
97-
width: 220px;
98-
min-width: 220px;
99-
padding-left: 18px;
100-
}
42+
min-width: 110px;
43+
padding-left: 1rem;
44+
word-break: break-word;
10145
}
10246
}
103-
104-
&_expanded {
105-
box-shadow: $previewBoxShadow;
106-
}
10747
}

‎src/components/ArtifactInfoSources/artifactInfoSources.utils.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ such restriction.
2020

2121
import { applyTagChanges } from '../../utils/artifacts.util'
2222
import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
23-
import { generateProducerDetailsInfo } from '../../utils/generateProducerDetailsInfo'
2423
import {
2524
DATASETS,
2625
DATASETS_PAGE,
@@ -53,8 +52,7 @@ export const infoHeaders = [
5352
tip: 'Unique identifier representing the job or the workflow that generated the artifact'
5453
},
5554
{ label: 'Updated', id: 'updated' },
56-
{ label: 'Labels', id: 'labels' },
57-
{ label: 'Sources', id: 'sources' }
55+
{ label: 'Labels', id: 'labels' }
5856
]
5957

6058
export const filters = [
@@ -93,11 +91,6 @@ export const generatePageData = (selectedItem, viewMode) => ({
9391
menu: generateDataSetsDetailsMenu(selectedItem),
9492
infoHeaders,
9593
type: DATASETS,
96-
additionalInfo: {
97-
header: 'Producer',
98-
body: generateProducerDetailsInfo(selectedItem),
99-
hidden: !selectedItem.item?.producer
100-
},
10194
hideBackBtn: viewMode === FULL_VIEW_MODE,
10295
withToggleViewBtn: true
10396
}

‎src/components/Details/details.util.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,6 @@ export const generateArtifactsContent = (detailsType, selectedItem, projectName)
162162
},
163163
editModeEnabled: detailsType === MODELS_TAB,
164164
editModeType: 'chips'
165-
},
166-
sources: {
167-
value: selectedItem.sources
168165
}
169166
}
170167
}

‎src/components/DetailsInfo/DetailsInfo.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { handleFinishEdit } from '../Details/details.util'
2828
import { detailsInfoActions, detailsInfoReducer, initialState } from './detailsInfoReducer'
2929
import { isEveryObjectValueEmpty } from '../../utils/isEveryObjectValueEmpty'
3030
import detailsActions from '../../actions/details'
31+
import { generateDriftDetailsInfo, generateProducerDetailsInfo } from './detailsInfo.util'
3132

3233
const DetailsInfo = React.forwardRef(
3334
(
@@ -54,6 +55,12 @@ const DetailsInfo = React.forwardRef(
5455
dispatch(detailsActions.setEditMode(!isEveryObjectValueEmpty(detailsInfoState.editMode)))
5556
}, [detailsInfoState.editMode, dispatch])
5657

58+
useEffect(() => {
59+
return () => {
60+
dispatch(detailsActions.removeModelEndpoint())
61+
}
62+
}, [dispatch, selectedItem])
63+
5764
useEffect(() => {
5865
return () => {
5966
detailsInfoDispatch({
@@ -104,6 +111,13 @@ const DetailsInfo = React.forwardRef(
104111
[selectedItem.sources]
105112
)
106113

114+
const producer = useMemo(() => generateProducerDetailsInfo(selectedItem), [selectedItem])
115+
116+
const drift = useMemo(
117+
() => generateDriftDetailsInfo(detailsStore.modelEndpoint.data),
118+
[detailsStore.modelEndpoint.data]
119+
)
120+
107121
const finishEdit = useCallback(
108122
currentField => {
109123
return handleFinishEdit(
@@ -121,6 +135,7 @@ const DetailsInfo = React.forwardRef(
121135

122136
return (
123137
<DetailsInfoView
138+
additionalInfo={{ drift, producer, sources }}
124139
detailsInfoDispatch={detailsInfoDispatch}
125140
detailsInfoState={detailsInfoState}
126141
detailsStore={detailsStore}
@@ -133,7 +148,6 @@ const DetailsInfo = React.forwardRef(
133148
ref={editItemRef}
134149
selectedItem={selectedItem}
135150
setChangesData={setChangesData}
136-
sources={sources}
137151
/>
138152
)
139153
}

0 commit comments

Comments
 (0)