From c481a57c2edfa331b518058dcc7ed3aed5e2a122 Mon Sep 17 00:00:00 2001 From: Ishan Gupta Date: Thu, 10 Sep 2020 10:12:50 +0530 Subject: [PATCH] chore(litmus-portal): Editor update with time-stamp based workflow mapping. (#2021) Refractor and update Editor as per new designs and add UNIX time-stamp to name as replacement of generateName. Signed-off-by: ishangupta-ds --- litmus-portal/frontend/package-lock.json | 18 - litmus-portal/frontend/public/index.html | 4 + .../CreateWorkflow/ChooseWorkflow/index.tsx | 7 +- .../CreateWorkflow/TuneWorkflow/index.tsx | 10 +- .../CreateWorkflow/VerifyCommit/index.tsx | 24 -- .../src/components/YamlEditor/Editor.tsx | 408 ++++++++++-------- .../src/components/YamlEditor/styles.ts | 217 +++++++--- .../src/containers/layouts/Unimodal/index.tsx | 1 + .../src/containers/layouts/Unimodal/styles.ts | 21 +- litmus-portal/frontend/src/theme/index.tsx | 3 + 10 files changed, 436 insertions(+), 277 deletions(-) diff --git a/litmus-portal/frontend/package-lock.json b/litmus-portal/frontend/package-lock.json index 2388b03ac04..f5fd77bd9c6 100644 --- a/litmus-portal/frontend/package-lock.json +++ b/litmus-portal/frontend/package-lock.json @@ -14315,24 +14315,6 @@ "gl-mat4": "^1.0.1" } }, - "materialui-daterange-picker": { - "version": "1.1.91", - "resolved": "https://registry.npmjs.org/materialui-daterange-picker/-/materialui-daterange-picker-1.1.91.tgz", - "integrity": "sha512-vMEQlI3WrTuWEVgAhO6P5X6WfC46A1I4BwnlaEKz9Tbsw/1vj1fms5BX37yJkZZs4+Rbj1XIp34l7uy3UyuVyw==", - "requires": { - "@material-ui/core": "^4.9.4", - "@material-ui/icons": "^4.9.1", - "classnames": "^2.2.6", - "date-fns": "^1.30.1" - }, - "dependencies": { - "date-fns": { - "version": "1.30.1", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz", - "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==" - } - } - }, "math-log2": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/math-log2/-/math-log2-1.0.1.tgz", diff --git a/litmus-portal/frontend/public/index.html b/litmus-portal/frontend/public/index.html index e55b504e404..255692aab09 100644 --- a/litmus-portal/frontend/public/index.html +++ b/litmus-portal/frontend/public/index.html @@ -33,6 +33,10 @@ + { const selectWorkflow = (index: number) => { setVisible(false); + const timeStampBasedWorkflowName: string = `argowf-chaos-${ + workflowsList[index].title + }-${Math.round(new Date().getTime() / 1000)}`; workflow.setWorkflowDetails({ - name: workflowsList[index].title, + name: timeStampBasedWorkflowName, link: workflowsList[index].chaosWkfCRDLink, id: workflowsList[index].workflowID, yaml: 'none', @@ -77,7 +80,7 @@ const ChooseWorkflow: React.FC = () => { }); setWorkflowData({ - workflowName: workflowsList[index].title, + workflowName: timeStampBasedWorkflowName, workflowDesc: workflowsList[index].description, }); diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx index 4e096e7af5d..8a1ee0d9246 100644 --- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { Typography } from '@material-ui/core'; import Divider from '@material-ui/core/Divider'; import { useSelector } from 'react-redux'; +import YAML from 'yaml'; import useStyles from './styles'; import { WorkflowData } from '../../../../models/workflow'; import { RootState } from '../../../../redux/reducers'; @@ -29,11 +30,15 @@ const TuneWorkflow: React.FC = () => { fetch(link) .then((data) => { data.text().then((yamlText) => { - setYamlFile(yamlText); + const parsedYaml = YAML.parse(yamlText); + delete parsedYaml.metadata.generateName; + parsedYaml.metadata.name = workflowData.name; + const nameMappedYaml = YAML.stringify(parsedYaml); + setYamlFile(nameMappedYaml); workflow.setWorkflowDetails({ name, link, - yaml: yamlText, + yaml: nameMappedYaml, id, description, }); @@ -84,7 +89,6 @@ const TuneWorkflow: React.FC = () => { id={id} description={description} readOnly={false} - optionsDisplay /> diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx index 92ed326f40b..86f745b64bd 100644 --- a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx +++ b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx @@ -247,29 +247,6 @@ const VerifyCommit: React.FC = ({ gotoStep }) => { */} - {/* -
-
- -
- -
- */} = ({ gotoStep }) => { id={id} description={description} readOnly - optionsDisplay={false} /> diff --git a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx index 4b5996cc386..9a6e7ff8ce3 100644 --- a/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx +++ b/litmus-portal/frontend/src/components/YamlEditor/Editor.tsx @@ -16,7 +16,7 @@ import Tooltip from '@material-ui/core/Tooltip'; import Fade from '@material-ui/core/Fade'; import AceEditor from 'react-ace'; import 'brace/mode/yaml'; -import 'brace/theme/chaos'; +import 'brace/theme/cobalt'; import 'ace-builds/src-min-noconflict/ext-searchbox'; import 'ace-builds/src-min-noconflict/ext-beautify'; import 'ace-builds/src-min-noconflict/ext-code_lens'; @@ -38,9 +38,9 @@ import 'ace-builds/src-min-noconflict/ext-textarea'; import 'ace-builds/src-min-noconflict/ext-themelist'; import 'ace-builds/src-min-noconflict/ext-whitespace'; import { AceValidations, parseYamlValidations } from './Validations'; +import useStyles from './styles'; import useActions from '../../redux/actions'; import * as WorkflowActions from '../../redux/actions/workflow'; -import useStyles from './styles'; interface YamlEditorProps { id: string; @@ -48,7 +48,6 @@ interface YamlEditorProps { filename: string; yamlLink: string; description: string; - optionsDisplay: boolean; readOnly: boolean; } @@ -58,7 +57,6 @@ const YamlEditor: React.FC = ({ yamlLink, id, description, - optionsDisplay, readOnly, }) => { const classes = useStyles(); @@ -102,6 +100,11 @@ const YamlEditor: React.FC = ({ errorType: stateObject.annotations[0].type as string, errorInfo: stateObject.annotations[0].text as string, }); + const nodeStyleError = (document.getElementsByClassName( + 'ace_gutter-cell' + )[stateObject.annotations[0].row] as any).style; + nodeStyleError.background = 'red'; + nodeStyleError.color = '#FFFFFF'; } else { setIsValid(true); setErrors({ @@ -110,6 +113,13 @@ const YamlEditor: React.FC = ({ errorType: ' ', errorInfo: ' ', }); + const nodeStyleErrorList = document.getElementsByClassName( + 'ace_gutter-cell' + ); + for (let i = 0; i < nodeStyleErrorList.length; i += 1) { + (nodeStyleErrorList[i] as any).style.backgroundColor = '#1C1C1C'; + (nodeStyleErrorList[i] as any).style.color = 'rgba(255, 255, 255, 0.4)'; + } } setEditorState(stateObject as any); setModifiedYaml(value); @@ -224,26 +234,33 @@ const YamlEditor: React.FC = ({ return (
- - Status YAML: - + + Status YAML:     {isValid ? '\u2713' : '\u274C'}   {isValid ? 'Correct' : 'Incorrect'} @@ -261,165 +278,165 @@ const YamlEditor: React.FC = ({ ? 'Your code is fine. You can move on!' : 'Correct this error and keep moving forward!'} +
+ + {!readOnly && ( +
+ +
- )} + +
+ )} +
= ({ > = ({ }} onLoad={(editor) => { editor.setReadOnly(readOnly); + editor.setOptions({ + fontFamily: 'Ubuntu Mono', + highlightGutterLine: false, + autoScrollEditorIntoView: true, + tooltipFollowsMouse: true, + displayIndentGuides: false, + }); editor.focus(); editor.setHighlightSelectedWord(true); editor.session.setFoldStyle('markbeginend'); editor.setShowFoldWidgets(true); editor.setAnimatedScroll(true); editor.setShowInvisibles(false); - editor.container.style.background = '#161616'; + editor.setFontSize('0.98rem'); + editor.container.style.background = '#1C1C1C'; + editor.container.style.lineHeight = '160%'; + const nodeStyle = (document.getElementsByClassName( + 'ace_gutter' + )[0] as any).style; + nodeStyle.color = 'rgba(255, 255, 255, 0.4)'; + nodeStyle.borderRight = 0; + nodeStyle.background = '#1C1C1C'; + }} + onCursorChange={(selection) => { + (YamlAce.current!.editor as any).setOptions({ + autoScrollEditorIntoView: true, + tooltipFollowsMouse: true, + }); + (YamlAce.current!.editor as any).focus(); + + const nodeStyleActiveList = document.getElementsByClassName( + 'ace_gutter-cell' + ); + for (let i = 0; i < nodeStyleActiveList.length; i += 1) { + (nodeStyleActiveList[i] as any).style.backgroundColor = + '#1C1C1C'; + (nodeStyleActiveList[i] as any).style.color = + 'rgba(255, 255, 255, 0.4)'; + } + + if ( + document.getElementsByClassName('ace_gutter-cell')[ + selection.cursor.row + ] as any + ) { + const nodeStyleActive = (document.getElementsByClassName( + 'ace_gutter-cell' + )[selection.cursor.row] as any).style; + nodeStyleActive.backgroundColor = '#5B44BA'; + nodeStyleActive.color = '#FFFFFF'; + } }} annotations={editorState.annotations} markers={editorState.markers} /> - + ({ // Editor - statusHeading: { + statusHeadingInModal: { marginTop: theme.spacing(-2.5), - fontFamily: 'Ubuntu', fontSize: '1rem', - marginLeft: theme.spacing(2), + marginLeft: theme.spacing(2.5), + fontWeight: 500, + lineHeight: '130%', + paddingTop: theme.spacing(-4), + }, + + statusHeadingOutModal: { + marginTop: theme.spacing(-2.5), + fontSize: '1rem', + marginLeft: theme.spacing(2.5), + fontWeight: 500, + lineHeight: '130%', + paddingTop: theme.spacing(4), }, statusDescription: { - width: '100%', + width: '95%', marginTop: theme.spacing(1.875), - fontFamily: 'Ubuntu', fontSize: '0.875rem', marginLeft: theme.spacing(2), + marginRight: theme.spacing(2), + lineHeight: '160%', }, editorBackgroundFull: { - backgroundColor: theme.palette.common.black, + backgroundColor: theme.palette.editorBackground, color: theme.palette.secondary.contrastText, width: '100%', }, horizontalLineWhite: { marginTop: theme.spacing(4), - backgroundColor: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.customColors.white(0.2), + }, + + widthManager: { + width: '98.5%', }, editorButtonGrid: { marginTop: theme.spacing(3), - width: '100%', + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', }, editorContainer: { @@ -40,87 +58,174 @@ const useStyles = makeStyles((theme: Theme) => ({ editorGrid: { overflow: 'auto', - maxHeight: '34.5rem', - width: '92%', + height: '50vh', + width: '100%', + '&::-webkit-scrollbar': { + width: '0.2em', + }, + '&::-webkit-scrollbar-track': { + webkitBoxShadow: `inset 0 0 6px ${theme.palette.common.black}`, + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.secondary.dark, + }, + [theme.breakpoints.down('xl')]: { + height: '84vh', + }, + [theme.breakpoints.down('lg')]: { + height: '56vh', + }, + [theme.breakpoints.down('md')]: { + height: '49vh', + }, + + [theme.breakpoints.down('sm')]: { + height: '40vh', + }, + [theme.breakpoints.down('xs')]: { + height: '30vh', + }, }, extraSpace: { - backgroundColor: '#161616', + backgroundColor: theme.palette.editorBackground, height: '2rem', width: '100%', }, editorButtons: { borderRadius: 3, - backgroundColor: '#161616', + backgroundColor: theme.palette.editorBackground, boxSizing: 'border-box', color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, + borderColor: theme.palette.customColors.white(0.2), paddingLeft: theme.spacing(3.125), width: '4rem', height: '2.75rem', marginLeft: theme.spacing(1.25), }, + editorButtonGotoCopyUnfold: { + [theme.breakpoints.down('xs')]: { + marginLeft: 0, + marginTop: theme.spacing(1.5), + }, + }, + + editorButtonFind: { + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(4.25), + }, + [theme.breakpoints.down('xs')]: { + marginLeft: theme.spacing(0.1), + marginTop: theme.spacing(1.5), + }, + }, + + editorButtonFold: { + [theme.breakpoints.down('xs')]: { + marginLeft: theme.spacing(2.5), + marginTop: theme.spacing(1.5), + }, + }, + editorButtonUndo: { - borderRadius: 3, - backgroundColor: '#161616', - boxSizing: 'border-box', - color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, - paddingLeft: theme.spacing(3.125), - width: '4rem', - height: '2.75rem', marginLeft: theme.spacing(2.5), + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(4.25), + }, + [theme.breakpoints.down('xs')]: { + marginLeft: theme.spacing(0.1), + }, }, editorButtonDownload: { - borderRadius: 3, - backgroundColor: '#161616', - boxSizing: 'border-box', - color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, - paddingLeft: theme.spacing(3.125), - width: '4rem', - height: '2.75rem', marginLeft: theme.spacing(6.25), + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(1.5), + }, + [theme.breakpoints.down('md')]: { + marginLeft: theme.spacing(1), + }, }, editorButtonReplace: { - borderRadius: 3, - backgroundColor: '#161616', - boxSizing: 'border-box', - color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, - paddingLeft: theme.spacing(3.125), - width: '4rem', - height: '2.75rem', marginLeft: theme.spacing(15.625), + [theme.breakpoints.down('xs')]: { + marginLeft: theme.spacing(-0.5), + marginTop: theme.spacing(1.5), + }, + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(1.3), + }, + [theme.breakpoints.down('md')]: { + display: 'none', + }, + [theme.breakpoints.down('lg')]: { + marginLeft: theme.spacing(5), + }, }, editorButtonSelectAll: { - borderRadius: 3, - backgroundColor: '#161616', - boxSizing: 'border-box', - color: theme.palette.secondary.contrastText, - borderColor: theme.palette.secondary.contrastText, - paddingLeft: theme.spacing(3.125), - width: '4rem', - height: '2.75rem', marginLeft: theme.spacing(7.5), + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(1.4), + }, + [theme.breakpoints.down('md')]: { + marginLeft: theme.spacing(1), + }, + [theme.breakpoints.down('lg')]: { + marginRight: theme.spacing(2.5), + }, + [theme.breakpoints.down('xs')]: { + marginLeft: theme.spacing(1.5), + marginTop: theme.spacing(1.5), + }, + [theme.breakpoints.down('xl')]: { + marginRight: theme.spacing(2), + }, }, editorButtonFullScreen: { borderRadius: 3, - backgroundColor: '#161616', + backgroundColor: theme.palette.editorBackground, boxSizing: 'border-box', - color: theme.palette.secondary.contrastText, - borderColor: '#161616', + color: theme.palette.customColors.white(0.2), + borderColor: theme.palette.editorBackground, paddingLeft: theme.spacing(3.75), paddingBottom: theme.spacing(1.875), + marginTop: theme.spacing(-2), width: '1.875rem', height: '1.875rem', - marginLeft: theme.spacing(1.25), + marginLeft: theme.spacing(-7.5), + [theme.breakpoints.down('sm')]: { + marginLeft: theme.spacing(-2), + width: 0, + height: 0, + padding: 0, + border: 0, + }, + [theme.breakpoints.down('xl')]: { + width: 0, + height: 0, + padding: 0, + border: 0, + marginLeft: theme.spacing(-7.5), + }, + [theme.breakpoints.down('lg')]: { + width: 0, + height: 0, + padding: 0, + border: 0, + marginLeft: theme.spacing(-7.5), + }, + [theme.breakpoints.down('md')]: { + width: 0, + height: 0, + padding: 0, + border: 0, + marginLeft: theme.spacing(-7.5), + }, }, saved: { @@ -129,13 +234,25 @@ const useStyles = makeStyles((theme: Theme) => ({ fontFamily: 'Ubuntu', fontSize: '1rem', color: theme.palette.secondary.dark, + display: 'inline', + }, + + markStyleCorrect: { display: 'inline-block', + fontFamily: 'Ubuntu', + fontSize: '1rem', + color: theme.palette.primary.dark, }, - markStyle: { + markStyleWrong: { display: 'inline-block', fontFamily: 'Ubuntu', fontSize: '1rem', + color: theme.palette.error.dark, + }, + + fullScreenGrid: { + width: 0, }, fullWidth: { diff --git a/litmus-portal/frontend/src/containers/layouts/Unimodal/index.tsx b/litmus-portal/frontend/src/containers/layouts/Unimodal/index.tsx index f821efc9f96..b78ae061fd7 100644 --- a/litmus-portal/frontend/src/containers/layouts/Unimodal/index.tsx +++ b/litmus-portal/frontend/src/containers/layouts/Unimodal/index.tsx @@ -33,6 +33,7 @@ const Unimodal: React.FC = ({ data-cy="modal" aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" + className={classes.uniModalStyle} >
{hasCloseBtn && ( diff --git a/litmus-portal/frontend/src/containers/layouts/Unimodal/styles.ts b/litmus-portal/frontend/src/containers/layouts/Unimodal/styles.ts index 5cce90d9d3b..3687968b9f5 100644 --- a/litmus-portal/frontend/src/containers/layouts/Unimodal/styles.ts +++ b/litmus-portal/frontend/src/containers/layouts/Unimodal/styles.ts @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => ({ padding: '1rem', margin: '2rem auto', background: props.isDark - ? theme.palette.common.black + ? theme.palette.editorBackground : theme.palette.common.white, borderRadius: 3, textAlign: props.textAlign ? props.textAlign : 'center', @@ -30,13 +30,22 @@ const useStyles = makeStyles((theme: Theme) => ({ minHeight: 0, minWidth: 0, borderRadius: 3, - color: props.isDark ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.4)', - border: props.isDark - ? '1px solid rgba(255, 255, 255, 0.4)' - : '1px solid rgba(0, 0, 0, 0.4)', - marginLeft: '60%', + color: props.isDark + ? theme.palette.secondary.contrastText + : theme.palette.customColors.black(0.4), + border: '1px solid', + borderColor: props.isDark + ? theme.palette.customColors.white(0.2) + : theme.palette.customColors.black(0.4), + marginLeft: props.isDark ? '82.5%' : '60%', marginTop: theme.spacing(5), }), + + uniModalStyle: { + alignItems: 'center', + justifyContent: 'center', + background: theme.palette.customColors.black(0.8), + }, })); export default useStyles; diff --git a/litmus-portal/frontend/src/theme/index.tsx b/litmus-portal/frontend/src/theme/index.tsx index 053061ccea2..a5f37b15f90 100644 --- a/litmus-portal/frontend/src/theme/index.tsx +++ b/litmus-portal/frontend/src/theme/index.tsx @@ -32,6 +32,7 @@ declare module '@material-ui/core/styles/createPalette' { input: { disabled: string; }; + editorBackground: string; } // allow configuration using `createMuiTheme` interface PaletteOptions { @@ -46,6 +47,7 @@ declare module '@material-ui/core/styles/createPalette' { input?: { disabled?: string; }; + editorBackground?: string; } } function customTheme(options: ThemeOptions) { @@ -103,6 +105,7 @@ function customTheme(options: ThemeOptions) { active: 'rgba(16, 155, 103, 0.1)', }, }, + editorBackground: '#1C1C1C', }, typography: { fontSize: 12,