fix: issue #138

Author: yoution

src/components/FormField/index.jsx

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

src/components/MarkdownEditor/index.jsx

@@ -8,7 +8,6 @@ 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);
@@ -21,7 +20,9 @@ const MarkdownEditor = (props) => {
     return (
       <div styleName="editor-viewer">
         <MarkdownEditorViewer {...props} />
-        <div styleName="message">{DISABLED_DESCRIPTION_MESSAGE}</div>
+        {props.errorMessage && (
+          <div styleName="message">{props.errorMessage}</div>
+        )}
       </div>
     );
   }
@@ -34,21 +35,21 @@ const MarkdownEditor = (props) => {
         onChange={onChange}
         initialValue={props.value}
         toolbarItems={[
-          'heading',
-          'bold',
-          'italic',
-          'strike',
-          'code',
-          'divider',
-          'quote',
-          'codeblock',
-          'hr',
-          'divider',
-          'ul',
-          'ol',
-          'divider',
-          'image',
-          'link',
+          "heading",
+          "bold",
+          "italic",
+          "strike",
+          "code",
+          "divider",
+          "quote",
+          "codeblock",
+          "hr",
+          "divider",
+          "ul",
+          "ol",
+          "divider",
+          "image",
+          "link",
         ]}
         plugins={[]}
       />
@@ -59,6 +60,7 @@ const MarkdownEditor = (props) => {
 MarkdownEditor.propTypes = {
   value: PropTypes.string,
   disabled: PropTypes.bool,
+  errorMessage: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

src/components/MarkdownEditor/styles.module.scss

@@ -2,13 +2,18 @@
 
 .editor-viewer {
     > div:first-child {
-      border: 1px solid #aaaaab;
+      // border: 1px solid #aaaaab;
       border-radius: 4px;
       overflow: hidden;
       box-sizing: border-box;
       padding: 16px 25px 0px 25px;
       height: 280px;
       overflow-y: auto;
+      border: 0;
+      background: #fafafb;
+      box-shadow: none;
+      color: #6b6b6b;
+      -webkit-text-fill-color: #808080;
     }
     .message {
       @include font-roboto;

src/components/ReactSelect/index.jsx

@@ -14,9 +14,15 @@ const ReactSelect = (props) => {
     control: (provided, state) => ({
       ...provided,
       minHeight: "40px",
-      border: "1px solid #aaaaab",
+      border: state.isDisabled ? "none" : "1px solid #aaaaab",
       borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
-      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow,
+      boxShadow: state.isDisabled
+        ? "none"
+        : state.isFocused
+        ? "0 0 2px 1px #cee6ff"
+        : provided.boxShadow,
+      backgroundColor: state.isDisabled ? "#fafafb" : provided.backgroundColor,
+      color: state.isDisabled ? "#6b6b6b" : provided.color,
     }),
     menu: (provided) => ({
       ...provided,
@@ -53,10 +59,10 @@ const ReactSelect = (props) => {
       textAlign: "left",
       fontWeight: "400",
     }),
-    multiValue: (provided) => ({
+    multiValue: (provided, state) => ({
       ...provided,
       margin: "3px 3px",
-      color: "#AAAAAA",
+      color: state.isDisabled ? "#808080" : "#AAAAAA",
       fontFamily: "Roboto",
       fontSize: "14px",
       lineHeight: "22px",

src/routes/JobForm/index.jsx

@@ -108,7 +108,11 @@ const JobForm = ({ teamId, jobId }) => {
               configuration={getEditJobConfig(
                 options,
                 job.isApplicationPageActive,
-                isEdit ? job.status === 'assigned' || job.status === 'closed' || job.status === 'cancelled' : false,
+                isEdit
+                  ? job.status === "assigned" ||
+                      job.status === "closed" ||
+                      job.status === "cancelled"
+                  : false,
                 onSubmit
               )}
               initialValue={job}

src/routes/JobForm/utils.js

@@ -3,6 +3,7 @@
  */
 import { PERMISSIONS } from "constants/permissions";
 import { hasPermission } from "utils/permissions";
+import { DISABLED_DESCRIPTION_MESSAGE } from "constants";
 import {
   RATE_TYPE_OPTIONS,
   STATUS_OPTIONS,
@@ -54,6 +55,7 @@ export const getEditJobConfig = (
         type: FORM_FIELD_TYPE.MARKDOWNEDITOR,
         name: "description",
         disabled: isMarkdownEditorDisabled || onlyEnableStatus,
+        errorMessage: isMarkdownEditorDisabled && DISABLED_DESCRIPTION_MESSAGE,
         placeholder: "Job Description",
       },
       {