Fixed portal ux issues and minor style changes (#2940)
Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
This commit is contained in:
parent
f693470827
commit
48c079aa85
|
@ -14,6 +14,7 @@ import useStyles from './styles';
|
||||||
import { getProjectID } from '../../../utils/getSearchParams';
|
import { getProjectID } from '../../../utils/getSearchParams';
|
||||||
import Loader from '../../../components/Loader';
|
import Loader from '../../../components/Loader';
|
||||||
import { constants } from '../../../constants';
|
import { constants } from '../../../constants';
|
||||||
|
import { validateWorkflowName } from '../../../utils/validate';
|
||||||
|
|
||||||
interface SaveTemplateModalProps {
|
interface SaveTemplateModalProps {
|
||||||
closeTemplate: () => void;
|
closeTemplate: () => void;
|
||||||
|
@ -89,9 +90,14 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
|
||||||
label="Name of the template"
|
label="Name of the template"
|
||||||
value={templateName}
|
value={templateName}
|
||||||
data-cy="WorkflowName"
|
data-cy="WorkflowName"
|
||||||
helperText=""
|
|
||||||
required
|
required
|
||||||
onChange={(e) => setTemplateName(e.target.value)}
|
onChange={(e) => setTemplateName(e.target.value.toLowerCase())}
|
||||||
|
helperText={
|
||||||
|
validateWorkflowName(templateName)
|
||||||
|
? t('createWorkflow.chooseWorkflow.validate')
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
variant={validateWorkflowName(templateName) ? 'error' : 'primary'}
|
||||||
className={classes.InputFieldTemplate}
|
className={classes.InputFieldTemplate}
|
||||||
/>
|
/>
|
||||||
<br />
|
<br />
|
||||||
|
@ -133,6 +139,7 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
|
||||||
cloneResult.type === constants.success ||
|
cloneResult.type === constants.success ||
|
||||||
templateName.trim().length === 0 ||
|
templateName.trim().length === 0 ||
|
||||||
templateDesc.trim().length === 0 ||
|
templateDesc.trim().length === 0 ||
|
||||||
|
validateWorkflowName(templateName) ||
|
||||||
!yamlValid
|
!yamlValid
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
@ -169,6 +169,7 @@ const TableData: React.FC<TableDataProps> = ({
|
||||||
width="60%"
|
width="60%"
|
||||||
open={isTemplateModalOpen}
|
open={isTemplateModalOpen}
|
||||||
onClose={handleCloseTemplate}
|
onClose={handleCloseTemplate}
|
||||||
|
disableBackdropClick
|
||||||
modalActions={
|
modalActions={
|
||||||
<ButtonOutlined onClick={handleCloseTemplate}>
|
<ButtonOutlined onClick={handleCloseTemplate}>
|
||||||
✕
|
✕
|
||||||
|
|
|
@ -59,8 +59,10 @@ const useStyles = makeStyles((theme) => ({
|
||||||
'& p': {
|
'& p': {
|
||||||
fontSize: '0.8125rem',
|
fontSize: '0.8125rem',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
|
color: theme.palette.text.hint,
|
||||||
},
|
},
|
||||||
'& th': {
|
'& th': {
|
||||||
|
color: theme.palette.text.hint,
|
||||||
backgroundColor: theme.palette.cards.background,
|
backgroundColor: theme.palette.cards.background,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
|
||||||
'& th': {
|
'& th': {
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fontSize: '0.8125rem',
|
fontSize: '0.8125rem',
|
||||||
color: theme.palette.text.disabled,
|
color: theme.palette.text.hint,
|
||||||
backgroundColor: theme.palette.cards.background,
|
backgroundColor: theme.palette.cards.background,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,7 +17,7 @@ const SelectMyHub = () => {
|
||||||
const [availableHubs, setAvailableHubs] = useState<MyHubDetail[]>([]);
|
const [availableHubs, setAvailableHubs] = useState<MyHubDetail[]>([]);
|
||||||
|
|
||||||
// Get all MyHubs with status
|
// Get all MyHubs with status
|
||||||
const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
|
const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
|
||||||
variables: { data: selectedProjectID },
|
variables: { data: selectedProjectID },
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
});
|
});
|
||||||
|
@ -38,17 +38,33 @@ const SelectMyHub = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data?.getHubStatus.length) {
|
if (data?.getHubStatus !== undefined) {
|
||||||
setAvailableHubs([...data.getHubStatus]);
|
if (data.getHubStatus.length) {
|
||||||
data.getHubStatus.forEach((hubData) => {
|
const hubDetails: MyHubDetail[] = [];
|
||||||
if (hubData.HubName.toLowerCase() === 'chaos hub') {
|
data.getHubStatus.forEach((hub) => {
|
||||||
setSelectedHub('Chaos Hub');
|
/**
|
||||||
localforage.setItem('selectedHub', 'Chaos Hub');
|
* Push only available hubs
|
||||||
localforage.setItem('hasSetWorkflowData', false);
|
*/
|
||||||
}
|
if (hub.IsAvailable) {
|
||||||
});
|
hubDetails.push({
|
||||||
|
id: hub.id,
|
||||||
|
HubName: hub.HubName,
|
||||||
|
RepoBranch: hub.RepoBranch,
|
||||||
|
RepoURL: hub.RepoURL,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setAvailableHubs(hubDetails);
|
||||||
|
data.getHubStatus.forEach((hubData) => {
|
||||||
|
if (hubData.HubName.toLowerCase() === 'chaos hub') {
|
||||||
|
setSelectedHub('Chaos Hub');
|
||||||
|
localforage.setItem('selectedHub', 'Chaos Hub');
|
||||||
|
localforage.setItem('hasSetWorkflowData', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [loading]);
|
}, [data]);
|
||||||
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -45,7 +45,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
|
||||||
const [workflowList, setWorkflowlist] = useState([]);
|
const [workflowList, setWorkflowlist] = useState([]);
|
||||||
|
|
||||||
// Get all MyHubs with status
|
// Get all MyHubs with status
|
||||||
const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
|
const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
|
||||||
variables: { data: selectedProjectID },
|
variables: { data: selectedProjectID },
|
||||||
fetchPolicy: 'cache-and-network',
|
fetchPolicy: 'cache-and-network',
|
||||||
});
|
});
|
||||||
|
@ -111,7 +111,21 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data?.getHubStatus !== undefined) {
|
if (data?.getHubStatus !== undefined) {
|
||||||
if (data.getHubStatus.length) {
|
if (data.getHubStatus.length) {
|
||||||
setAvailableHubs([...data.getHubStatus]);
|
const hubDetails: MyHubDetail[] = [];
|
||||||
|
data.getHubStatus.forEach((hub) => {
|
||||||
|
/**
|
||||||
|
* Push only available hub
|
||||||
|
*/
|
||||||
|
if (hub.IsAvailable) {
|
||||||
|
hubDetails.push({
|
||||||
|
id: hub.id,
|
||||||
|
HubName: hub.HubName,
|
||||||
|
RepoBranch: hub.RepoBranch,
|
||||||
|
RepoURL: hub.RepoURL,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setAvailableHubs(hubDetails);
|
||||||
}
|
}
|
||||||
data.getHubStatus.forEach((hubData) => {
|
data.getHubStatus.forEach((hubData) => {
|
||||||
if (hubData.HubName.toLowerCase() === 'chaos hub') {
|
if (hubData.HubName.toLowerCase() === 'chaos hub') {
|
||||||
|
@ -126,7 +140,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [loading]);
|
}, [data]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AccordionDetails>
|
<AccordionDetails>
|
||||||
|
|
|
@ -279,11 +279,13 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
||||||
*/
|
*/
|
||||||
const getSelectedWorkflowDetails = () => {
|
const getSelectedWorkflowDetails = () => {
|
||||||
localforage.getItem('workflow').then((workflow) => {
|
localforage.getItem('workflow').then((workflow) => {
|
||||||
setWorkflow({
|
if (workflow) {
|
||||||
name: (workflow as WorkflowDetailsProps).name,
|
setWorkflow({
|
||||||
crd: (workflow as WorkflowDetailsProps).CRDLink,
|
name: (workflow as WorkflowDetailsProps).name,
|
||||||
description: (workflow as WorkflowDetailsProps).description,
|
crd: (workflow as WorkflowDetailsProps).CRDLink,
|
||||||
});
|
description: (workflow as WorkflowDetailsProps).description,
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
localforage.getItem('selectedScheduleOption').then((value) => {
|
localforage.getItem('selectedScheduleOption').then((value) => {
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue