fix: issue #125

Author: yoution

src/components/FormField/index.jsx

@@ -64,6 +64,7 @@ const FormField = ({ field }) => {
             <MarkdownEditor
               placeholder={field.placeholder}
               value={input?.value ?? ""}
+              disabled={field.disabled}
               onChange={input.onChange}
               onBlur={input.onBlur}
               onFocus={input.onFocus}

src/components/MarkdownEditor/index.jsx

@@ -6,7 +6,9 @@ import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import cn from "classnames";
 import TuiEditor from "../TuiEditor";
+import MarkdownEditorViewer from "../MarkdownEditorViewer";
 import styles from "./styles.module.scss";
+import { DISABLED_DESCRIPTION_MESSAGE } from "constants";
 
 const MarkdownEditor = (props) => {
   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 (
+      <div styleName="editor-viewer">
+        <MarkdownEditorViewer {...props} />
+        <div styleName="message">{DISABLED_DESCRIPTION_MESSAGE}</div>
+      </div>
+    );
+  }
 
   return (
     <div className={cn(styles["editor-container"], props.className)}>
@@ -30,6 +40,7 @@ const MarkdownEditor = (props) => {
 
 MarkdownEditor.propTypes = {
   value: PropTypes.string,
+  disabled: PropTypes.bool,
   className: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

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

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 [email protected].";

src/routes/JobForm/index.jsx

@@ -105,7 +105,11 @@ const JobForm = ({ teamId, jobId }) => {
           />
           <div styleName="job-modification-details">
             <TCForm
-              configuration={getEditJobConfig(options, onSubmit)}
+              configuration={getEditJobConfig(
+                options,
+                job.isApplicationPageActive,
+                onSubmit
+              )}
               initialValue={job}
               submitButton={{ text: isEdit ? "Save" : "Create" }}
               backButton={{

src/routes/JobForm/utils.js

@@ -26,9 +26,14 @@ const EDIT_JOB_ROWS = [
 /**
  * return edit job configuration
  * @param {any} skillOptions skill options
+ * @param {boolean} isMarkdownEditorDisabled is markedownEditor disabled
  * @param {func} onSubmit submit callback
  */
-export const getEditJobConfig = (skillOptions, onSubmit) => {
+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",
       },
       {