replacing customText with EditableText from k-ui (#2399)
* replacing customText with EditableText from k-ui * sort alphabetically in style file Signed-off-by: Ritik Srivastava <ritik.srivastava@mayadata.io>
This commit is contained in:
Ritik Srivastava
GitHub
parent
7137a69fc7
commit
cdab6d7798
|
|
@ -4446,13 +4446,6 @@
|
|||
"num2fraction": "^1.2.2",
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-value-parser": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001123",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
|
||||
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"aws-sign2": {
|
||||
|
|
@ -5967,9 +5960,9 @@
|
|||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001100",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001100.tgz",
|
||||
"integrity": "sha512-0eYdp1+wFCnMlCj2oudciuQn2B9xAFq3WpgpcBIZTxk/1HNA/O2YA7rpeYhnOqsqAJq1AHUgx6i1jtafg7m2zA=="
|
||||
"version": "1.0.30001176",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001176.tgz",
|
||||
"integrity": "sha512-VWdkYmqdkDLRe0lvfJlZQ43rnjKqIGKHWhWWRbkqMsJIUaYDNf/K/sdZZcVO6YKQklubokdkJY+ujArsuJ5cag=="
|
||||
},
|
||||
"canvas-fit": {
|
||||
"version": "1.5.0",
|
||||
|
|
@ -12180,9 +12173,9 @@
|
|||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
|
||||
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
|
||||
},
|
||||
"inline-source-map": {
|
||||
"version": "0.6.2",
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
import { IconButton, makeStyles, TextField, Theme } from '@material-ui/core';
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
import React from 'react';
|
||||
|
||||
interface CustomTextProps {
|
||||
value: string;
|
||||
id: string;
|
||||
onchange: (val: string) => void;
|
||||
isEditable?: boolean;
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => ({
|
||||
editBtn: {
|
||||
color: theme.palette.common.black,
|
||||
},
|
||||
saveBtn: {
|
||||
color: theme.palette.common.black,
|
||||
},
|
||||
inputText: {
|
||||
width: '40.75rem',
|
||||
paddingTop: theme.spacing(0.375),
|
||||
},
|
||||
}));
|
||||
|
||||
// Editable text field used to edit and save the input in the text box
|
||||
const CustomText: React.FC<CustomTextProps> = ({
|
||||
value,
|
||||
id,
|
||||
onchange,
|
||||
isEditable,
|
||||
}) => {
|
||||
const [isDisabled, setIsDisabled] = React.useState(true);
|
||||
const [newValue, setNewValue] = React.useState<string>(value);
|
||||
|
||||
const handleEdit = () => {
|
||||
setIsDisabled(false);
|
||||
};
|
||||
const handleSave = () => {
|
||||
onchange(newValue);
|
||||
setIsDisabled(true);
|
||||
};
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setNewValue(event.target.value);
|
||||
};
|
||||
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<div>
|
||||
<TextField
|
||||
data-cy="text"
|
||||
className={classes.inputText}
|
||||
disabled={isDisabled}
|
||||
id={id}
|
||||
defaultValue={newValue}
|
||||
multiline
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
style: {
|
||||
color: 'rgba(0,0,0)',
|
||||
lineHeight: '1rem',
|
||||
fontSize: '1rem',
|
||||
},
|
||||
}}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{isEditable ? (
|
||||
<>
|
||||
{isDisabled ? (
|
||||
<IconButton size="medium" onClick={handleEdit}>
|
||||
<EditIcon className={classes.editBtn} data-cy="edit" />
|
||||
</IconButton>
|
||||
) : (
|
||||
<IconButton size="medium" onClick={handleSave}>
|
||||
<SaveIcon className={classes.saveBtn} data-cy="save" />
|
||||
</IconButton>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default CustomText;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { Divider, IconButton, Typography } from '@material-ui/core';
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import cronstrue from 'cronstrue';
|
||||
import { EditableText } from 'kubera-ui';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
|
@ -8,7 +9,6 @@ import YAML from 'yaml';
|
|||
import AdjustedWeights from '../../../components/AdjustedWeights';
|
||||
import ButtonFilled from '../../../components/Button/ButtonFilled';
|
||||
import ButtonOutline from '../../../components/Button/ButtonOutline/index';
|
||||
import CustomText from '../../../components/CustomText';
|
||||
import YamlEditor from '../../../components/YamlEditor/Editor';
|
||||
import {
|
||||
AceValidations,
|
||||
|
|
@ -137,13 +137,14 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({
|
|||
</Typography>
|
||||
</div>
|
||||
<div className={classes.col2}>
|
||||
<CustomText
|
||||
<EditableText
|
||||
value={name}
|
||||
id="name"
|
||||
onchange={(changedName: string) =>
|
||||
handleNameChange({ changedName })
|
||||
fullWidth
|
||||
onChange={(e) =>
|
||||
handleNameChange({ changedName: e.target.value })
|
||||
}
|
||||
isEditable={workflowData.isRecurring ? false : isEditable}
|
||||
disabled={workflowData.isRecurring}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,19 +166,15 @@ const VerifyCommit: React.FC<VerifyCommitProps> = ({
|
|||
{t('createWorkflow.verifyCommit.summary.desc')}:
|
||||
</Typography>
|
||||
</div>
|
||||
<div
|
||||
className={classes.col2}
|
||||
style={{
|
||||
width: 724,
|
||||
}}
|
||||
>
|
||||
<CustomText
|
||||
<div className={classes.col2}>
|
||||
<EditableText
|
||||
value={description}
|
||||
id="desc"
|
||||
onchange={(changedDesc: string) =>
|
||||
handleDescChange({ changedDesc })
|
||||
fullWidth
|
||||
onChange={(e) =>
|
||||
handleDescChange({ changedDesc: e.target.value })
|
||||
}
|
||||
isEditable={isEditable}
|
||||
disabled={!isEditable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import { makeStyles, Theme } from '@material-ui/core/styles';
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => ({
|
||||
horizontalLine: {
|
||||
background: theme.palette.border.main,
|
||||
},
|
||||
root: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.6)',
|
||||
width: '80%',
|
||||
margin: '0 auto',
|
||||
border: 1,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderRadius: 3,
|
||||
padding: theme.spacing(2),
|
||||
borderRadius: '0.1875rem',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
margin: '0 auto',
|
||||
padding: theme.spacing(3.75, 6, 3.75, 3.75),
|
||||
width: '80%',
|
||||
},
|
||||
suHeader: {
|
||||
display: 'flex',
|
||||
|
|
@ -16,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
justifyContent: 'space-even',
|
||||
},
|
||||
headerText: {
|
||||
marginTop: theme.spacing(1.25),
|
||||
marginTop: theme.spacing(2.75),
|
||||
fontSize: '1.5625rem',
|
||||
},
|
||||
description: {
|
||||
|
|
@ -25,13 +29,13 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
fontSize: '1.0625rem',
|
||||
},
|
||||
suBody: {
|
||||
width: '40%',
|
||||
width: '65%',
|
||||
},
|
||||
bfinIcon: {
|
||||
width: '7rem',
|
||||
height: '6.31rem',
|
||||
marginTop: theme.spacing(5),
|
||||
marginLeft: theme.spacing(25),
|
||||
marginLeft: theme.spacing(12),
|
||||
},
|
||||
outerSum: {
|
||||
marginTop: theme.spacing(2),
|
||||
|
|
@ -44,28 +48,38 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
alignItems: 'baseline',
|
||||
marginTop: theme.spacing(3),
|
||||
},
|
||||
innerSumDiv: {
|
||||
width: '7.625rem',
|
||||
alignContent: 'center',
|
||||
display: 'table-cell',
|
||||
height: '100%',
|
||||
verticalAlign: 'middle',
|
||||
width: '20%',
|
||||
},
|
||||
sumText: {
|
||||
width: '100%',
|
||||
marginTop: theme.spacing(4.5),
|
||||
marginBottom: theme.spacing(3),
|
||||
fontSize: '1.5rem',
|
||||
},
|
||||
col1: {
|
||||
alignContent: 'center',
|
||||
color: theme.palette.highlight,
|
||||
fontSize: '1rem',
|
||||
color: theme.palette.secondary.dark,
|
||||
paddingTop: theme.spacing(0.5),
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
schedule: {
|
||||
fontSize: '1rem',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingTop: theme.spacing(0.75),
|
||||
},
|
||||
col2: {
|
||||
color: theme.palette.text.secondary,
|
||||
marginLeft: theme.spacing(5),
|
||||
width: '75%',
|
||||
},
|
||||
schCol2: {
|
||||
marginLeft: theme.spacing(5),
|
||||
|
|
@ -74,14 +88,14 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
},
|
||||
clusterName: {
|
||||
fontSize: '1rem',
|
||||
marginLeft: theme.spacing(5),
|
||||
marginLeft: theme.spacing(7),
|
||||
paddingTop: theme.spacing(0.5),
|
||||
},
|
||||
editButton1: {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
editbtn: {
|
||||
color: theme.palette.common.black,
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
link: {
|
||||
fontSize: '0.875rem',
|
||||
|
|
@ -90,6 +104,9 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
adjWeights: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginLeft: theme.spacing(2),
|
||||
width: '80%',
|
||||
},
|
||||
config: {
|
||||
height: '3rem',
|
||||
|
|
@ -109,26 +126,28 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
padding: theme.spacing(1.5),
|
||||
},
|
||||
errorText: {
|
||||
color: theme.palette.error.main,
|
||||
fontSize: '1rem',
|
||||
color: 'red',
|
||||
marginLeft: theme.spacing(5),
|
||||
},
|
||||
yamlFlex: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginLeft: theme.spacing(5),
|
||||
marginLeft: theme.spacing(7),
|
||||
},
|
||||
yamlButton: {
|
||||
width: theme.spacing(1.5),
|
||||
marginLeft: theme.spacing(1),
|
||||
marginTop: theme.spacing(1),
|
||||
marginLeft: theme.spacing(-2),
|
||||
width: theme.spacing(1.5),
|
||||
},
|
||||
progress: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
flexGrow: 1,
|
||||
marginLeft: theme.spacing(5),
|
||||
width: theme.spacing(79.5),
|
||||
},
|
||||
buttomPad: {
|
||||
paddingBottom: theme.spacing(3.75),
|
||||
},
|
||||
}));
|
||||
export default useStyles;
|
||||
|
|
|
|||
Loading…
Reference in New Issue