diff --git a/src/components/FormField/index.jsx b/src/components/FormField/index.jsx index 21d4f3e0..733d1d27 100644 --- a/src/components/FormField/index.jsx +++ b/src/components/FormField/index.jsx @@ -64,6 +64,7 @@ const FormField = ({ field }) => { { const editorElement = useRef(null); @@ -15,6 +17,14 @@ const MarkdownEditor = (props) => { const markdown = editorElement.current.editorInst.getMarkdown(); props.onChange(markdown); }, [props.onChange]); + if (props.disabled) { + return ( +
+ +
{DISABLED_DESCRIPTION_MESSAGE}
+
+ ); + } return (
@@ -30,6 +40,7 @@ const MarkdownEditor = (props) => { MarkdownEditor.propTypes = { value: PropTypes.string, + disabled: PropTypes.bool, className: PropTypes.string, onChange: PropTypes.func, onFocus: PropTypes.func, diff --git a/src/components/MarkdownEditor/styles.module.scss b/src/components/MarkdownEditor/styles.module.scss index d60c33fb..3e164eb7 100644 --- a/src/components/MarkdownEditor/styles.module.scss +++ b/src/components/MarkdownEditor/styles.module.scss @@ -1,5 +1,31 @@ @import "styles/include"; +.editor-viewer { + > div:first-child { + border: 1px solid #aaaaab; + border-radius: 4px; + overflow: hidden; + box-sizing: border-box; + padding: 16px 25px 0px 25px; + height: 280px; + overflow-y: auto; + } + .message { + @include font-roboto; + + width: 100%; + text-align: center; + min-height: 40px; + line-height: 20px; + padding: 9px 10px; + margin: 10px 0 5px; + font-size: 14px; + color: #ff5b52; + border: 1px solid #ffd5d1; + cursor: auto; + outline: none; + } +} .editor-container { :global { // reset style for heading list in headings selection popup diff --git a/src/constants/index.js b/src/constants/index.js index ad6177d5..97baee70 100644 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -276,3 +276,9 @@ export const STATUS_OPTIONS = [ { value: "closed", label: "closed" }, { value: "cancelled", label: "cancelled" }, ]; + +/* + * show error message below the markdown editor when the markedown editor is disabled + */ +export const DISABLED_DESCRIPTION_MESSAGE = + "You may not edit a Job Description that is currently posted to Topcoder.com. Please contact support@topcoder.com."; diff --git a/src/routes/JobForm/index.jsx b/src/routes/JobForm/index.jsx index 61f4cf1a..622188e9 100644 --- a/src/routes/JobForm/index.jsx +++ b/src/routes/JobForm/index.jsx @@ -105,7 +105,11 @@ const JobForm = ({ teamId, jobId }) => { />
{ +export const getEditJobConfig = ( + skillOptions, + isMarkdownEditorDisabled, + onSubmit +) => { return { fields: [ { @@ -44,6 +49,7 @@ export const getEditJobConfig = (skillOptions, onSubmit) => { label: "Job Description", type: FORM_FIELD_TYPE.MARKDOWNEDITOR, name: "description", + disabled: isMarkdownEditorDisabled, placeholder: "Job Description", }, {