Skip to content

Commit f7df2df

Browse files
TalMalka123TalMalka123
committed
pass sidebar widgets from outside
1 parent 613e049 commit f7df2df

File tree

5 files changed

+171
-239
lines changed

5 files changed

+171
-239
lines changed

‎src/components/dagshub/data-engine/metadataKeyValue/CustomTextField.tsx

+52-61
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Box from '@mui/material/Box';
55
import CancelIcon from '@mui/icons-material/Cancel';
66
import StyledTextField from './StyledTextField';
77
import './style.scss';
8-
import { ErroredTooltip, TooltipVariant } from '../../../elements/tooltipV2/ErroredTooltip';
98

109
function CustomTextField({
1110
readOnly,
@@ -116,68 +115,60 @@ function CustomTextField({
116115
}, [currentValue, shouldHighlightIfEmpty]);
117116

118117
return (
119-
<ErroredTooltip
120-
title={isErrored ? 'Value is not valid' : ''}
121-
placement={'top'}
122-
disableInteractive={true}
123-
open={isErrored || isHovered}
124-
tooltipVariant={TooltipVariant.Error}
118+
<Box
119+
sx={{ width: '100%', height: '100%' }}
120+
onMouseEnter={() => {
121+
if (currentValue) {
122+
setHovered(true);
123+
}
124+
}} //have the pencil logic only if a value already exists
125+
onMouseLeave={() => {
126+
if (currentValue) {
127+
setHovered(false);
128+
}
129+
}} //have the pencil logic only if a value already exists
130+
onMouseDown={(e) => {
131+
if (currentValue) {
132+
e.preventDefault();
133+
} //When there is value, make text field not focused on a regular click, but only when clicking on the edit button
134+
}}
135+
ref={textFieldWrapperContainerRef}
125136
>
126-
<Box
127-
sx={{ width: '100%', height: '100%' }}
128-
onMouseEnter={() => {
129-
if (currentValue) {
130-
setHovered(true);
131-
}
132-
}} //have the pencil logic only if a value already exists
133-
onMouseLeave={() => {
134-
if (currentValue) {
135-
setHovered(false);
136-
}
137-
}} //have the pencil logic only if a value already exists
138-
onMouseDown={(e) => {
139-
if (currentValue) {
140-
e.preventDefault();
141-
} //When there is value, make text field not focused on a regular click, but only when clicking on the edit button
142-
}}
143-
ref={textFieldWrapperContainerRef}
144-
>
145-
<StyledTextField
146-
changeColorOnHover={!readOnly || isEditing}
147-
inputRef={textFieldRef}
148-
helperText={helperText}
149-
autoFocus={autoFocus}
150-
InputProps={{
151-
autoComplete: 'off',
152-
readOnly: readOnly && !isEditing,
153-
endAdornment: isEditing ? (
154-
<IconButton sx={{ zIndex: 1 }} onClick={handleCancelClick}>
155-
<CancelIcon fontSize={'small'} />
156-
</IconButton>
157-
) : isHovered && !readOnly ? (
158-
<IconButton sx={{ zIndex: 1 }} onClick={handleEditClick}>
159-
<EditIcon fontSize={'small'} />
160-
</IconButton>
161-
) : null,
162-
sx: {
163-
input: {
164-
width: isEditing || (isHovered && !readOnly) ? 'calc(100% - 45px)' : '100%',
165-
},
137+
<StyledTextField
138+
changeColorOnHover={!readOnly || isEditing}
139+
inputRef={textFieldRef}
140+
helperText={helperText}
141+
autoFocus={autoFocus}
142+
InputProps={{
143+
autoComplete: 'off',
144+
readOnly: readOnly && !isEditing,
145+
endAdornment: isEditing ? (
146+
<IconButton sx={{ zIndex: 1 }} onClick={handleCancelClick}>
147+
<CancelIcon fontSize={'small'} />
148+
</IconButton>
149+
) : isHovered && !readOnly ? (
150+
<IconButton sx={{ zIndex: 1 }} onClick={handleEditClick}>
151+
<EditIcon fontSize={'small'} />
152+
</IconButton>
153+
) : null,
154+
sx: {
155+
input: {
156+
width: isEditing || (isHovered && !readOnly) ? 'calc(100% - 45px)' : '100%',
166157
},
167-
}}
168-
onChange={(e: any) => {
169-
setEditing(true);
170-
setEditedValue(e.target.value);
171-
!!onInputChange && onInputChange(e.target.value);
172-
}}
173-
onKeyDown={handleKeyDown}
174-
value={getValue()}
175-
placeholder={placeholder}
176-
isErrored={isErrored}
177-
errorColor={'rgba(252, 165, 165, 1)'}
178-
/>
179-
</Box>
180-
</ErroredTooltip>
158+
},
159+
}}
160+
onChange={(e: any) => {
161+
setEditing(true);
162+
setEditedValue(e.target.value);
163+
!!onInputChange && onInputChange(e.target.value);
164+
}}
165+
onKeyDown={handleKeyDown}
166+
value={getValue()}
167+
placeholder={placeholder}
168+
isErrored={isErrored}
169+
errorColor={'rgba(252, 165, 165, 1)'}
170+
/>
171+
</Box>
181172
);
182173
}
183174

‎src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValuePair.tsx

+112-95
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import React, { useEffect } from 'react';
22
import Box from '@mui/material/Box';
33
import CustomTextField from './CustomTextField';
44
import { DropdownV2 } from '../../../elements/dropdownV2';
5-
import { RadioButtonItemProps } from '../../../forms';
65
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
76
import IconButton from '@mui/material/IconButton';
8-
import { useMediaQuery } from '@mui/material';
7+
import { ThemeProvider, Tooltip } from '@mui/material';
98
import { MetadataType } from './MetadataKeyValueList';
9+
import { ErroredTooltip, TooltipVariant } from '../../../elements/tooltipV2/ErroredTooltip';
10+
import theme from '../../../../theme';
1011

1112
export interface MetadataKeyValuePairProps {
1213
index: number;
@@ -75,108 +76,124 @@ export function MetadataKeyValuePair({
7576
];
7677

7778
return (
78-
<Box
79-
sx={{
80-
display: 'flex',
81-
flexDirection: 'row',
82-
width: '100%',
83-
height: '100%',
84-
backgroundColor: '#F8FAFC',
85-
borderBottom: '1px solid #E2E8F0',
86-
alignItems: 'center',
87-
flexWrap: isNewlyCreated ? 'wrap' : 'nowrap',
88-
}}
89-
>
79+
<ThemeProvider theme={theme}>
9080
<Box
9181
sx={{
9282
display: 'flex',
93-
flexShrink: 1,
94-
flexGrow: 1,
95-
maxWidth: '100%',
96-
minWidth: '35%',
97-
}}
98-
>
99-
{/*key name should not be editable unless its newly created*/}
100-
<CustomTextField
101-
readOnly={!isNewlyCreated}
102-
value={keyName}
103-
onInputSave={(newVal) => {
104-
if (saveKeyNameLocally) {
105-
saveKeyNameLocally(index, newVal);
106-
}
107-
}}
108-
helperText={description}
109-
placeholder={isNewlyCreated || !value ? 'Enter field name' : 'Typing...'}
110-
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
111-
autoFocus={autoFocusKey}
112-
/>
113-
</Box>
114-
<Box
115-
sx={{
116-
display: 'flex',
117-
flexGrow: 1,
118-
maxWidth: '100%',
119-
gap: '8px',
120-
flexShrink: 1,
121-
minWidth: '65%',
83+
flexDirection: 'row',
84+
width: '100%',
12285
height: '100%',
86+
backgroundColor: '#F8FAFC',
87+
borderBottom: '1px solid #E2E8F0',
88+
alignItems: 'center',
89+
flexWrap: isNewlyCreated ? 'wrap' : 'nowrap',
12390
}}
12491
>
125-
{isNewlyCreated && (
126-
<div style={{ width: '100%', maxWidth: '130px' }}>
127-
<DropdownV2
128-
onChange={(event, value) => {
129-
if (saveValueTypeLocally) {
130-
saveValueTypeLocally(index, value?.id);
131-
}
132-
}}
133-
options={valueTypes}
134-
isReadOnly={true}
135-
label={'Value type'}
136-
errored={false}
137-
maxWidth={'130px'}
138-
height={'100%'}
139-
isSquareCorners={true}
140-
withoutBorder={true}
141-
backgroundColorFocus={'white'}
142-
disableClearable
143-
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
144-
/>
145-
</div>
146-
)}
147-
<CustomTextField
148-
readOnly={!isEditable}
149-
value={value}
150-
onInputSave={(newVal) => {
151-
if (!!validateValueByType && !!valueType) {
152-
setIsErrored(!validateValueByType(valueType, newVal as string));
153-
}
154-
if (saveValueLocally) {
155-
saveValueLocally(index, newVal);
156-
}
92+
<Box
93+
sx={{
94+
display: 'flex',
95+
flexShrink: 1,
96+
flexGrow: 1,
97+
maxWidth: '100%',
98+
minWidth: '35%',
15799
}}
158-
onInputChange={(newVal) => {
159-
if (!!validateValueByType && !!valueType) {
160-
setIsErrored(!validateValueByType(valueType, newVal as string));
161-
}
100+
>
101+
{/*key name should not be editable unless its newly created*/}
102+
<Tooltip title={keyName} disableInteractive={true} arrow={true} placement={'top'}>
103+
<div style={{ width: '100%' }}>
104+
<CustomTextField
105+
readOnly={!isNewlyCreated}
106+
value={keyName}
107+
onInputSave={(newVal) => {
108+
if (saveKeyNameLocally) {
109+
saveKeyNameLocally(index, newVal);
110+
}
111+
}}
112+
helperText={description}
113+
placeholder={isNewlyCreated || !value ? 'Enter field name' : 'Typing...'}
114+
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
115+
autoFocus={autoFocusKey}
116+
/>
117+
</div>
118+
</Tooltip>
119+
</Box>
120+
<Box
121+
sx={{
122+
display: 'flex',
123+
flexGrow: 1,
124+
maxWidth: '100%',
125+
gap: '8px',
126+
flexShrink: 1,
127+
minWidth: '65%',
128+
height: '100%',
162129
}}
163-
placeholder={isNewlyCreated || !value ? 'Add value' : 'Typing...'}
164-
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
165-
isErrored={isErrored} //TODO: add validation
166-
/>
167-
{isEditable && isRemovable && (
168-
<IconButton
169-
style={{ marginRight: '8px', height: '100%', padding: '6px' }}
170-
onClick={() => {
171-
if (deleteFieldPermanently) {
172-
deleteFieldPermanently(index);
173-
}
174-
}}
130+
>
131+
{isNewlyCreated && (
132+
<div style={{ width: '100%', maxWidth: '130px' }}>
133+
<DropdownV2
134+
onChange={(event, value) => {
135+
if (saveValueTypeLocally) {
136+
saveValueTypeLocally(index, value?.id);
137+
}
138+
}}
139+
options={valueTypes}
140+
isReadOnly={true}
141+
label={'Value type'}
142+
errored={false}
143+
maxWidth={'130px'}
144+
height={'100%'}
145+
isSquareCorners={true}
146+
withoutBorder={true}
147+
backgroundColorFocus={'white'}
148+
disableClearable
149+
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
150+
/>
151+
</div>
152+
)}
153+
<ErroredTooltip
154+
title={isErrored ? 'Value is not valid' : ''}
155+
placement={'top'}
156+
disableInteractive={true}
157+
open={isErrored}
158+
tooltipVariant={TooltipVariant.Error}
175159
>
176-
<DeleteOutlinedIcon style={{ color: 'rgba(148, 163, 184, 1)' }} fontSize={'medium'} />
177-
</IconButton>
178-
)}
160+
<div style={{ width: '100%' }}>
161+
<CustomTextField
162+
readOnly={!isEditable}
163+
value={value}
164+
onInputSave={(newVal) => {
165+
if (!!validateValueByType && !!valueType) {
166+
setIsErrored(!validateValueByType(valueType, newVal as string));
167+
}
168+
if (saveValueLocally) {
169+
saveValueLocally(index, newVal);
170+
}
171+
}}
172+
onInputChange={(newVal) => {
173+
if (!!validateValueByType && !!valueType) {
174+
setIsErrored(!validateValueByType(valueType, newVal as string));
175+
}
176+
}}
177+
placeholder={isNewlyCreated || !value ? 'Add value' : 'Typing...'}
178+
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
179+
isErrored={isErrored} //TODO: add validation
180+
/>
181+
</div>
182+
</ErroredTooltip>
183+
{isEditable && isRemovable && (
184+
<IconButton
185+
style={{ marginRight: '8px', height: '100%', padding: '6px' }}
186+
onClick={() => {
187+
if (deleteFieldPermanently) {
188+
deleteFieldPermanently(index);
189+
}
190+
}}
191+
>
192+
<DeleteOutlinedIcon style={{ color: 'rgba(148, 163, 184, 1)' }} fontSize={'medium'} />
193+
</IconButton>
194+
)}
195+
</Box>
179196
</Box>
180-
</Box>
197+
</ThemeProvider>
181198
);
182199
}

0 commit comments

Comments
 (0)