Merge pull request #698 from gauravshinde1729/feat/add-4k-character-limit-to-justification-fields

feat: add 4K character limit to justification input fields

Author: timbastin

src/components/AcceptRiskDialog.tsx

@@ -84,13 +84,19 @@ const AcceptRiskDialog: FunctionComponent<AcceptRiskDialogProps> = ({
               placeholder="Add your comment here..."
               value={justification}
               setValue={(value) => setJustification(value ?? "")}
+              maxLength={4000}
             />
           </div>
           <DialogFooter>
             <Button variant="secondary" onClick={() => onOpenChange(false)}>
               Cancel
             </Button>
-            <AsyncButton onClick={handleSubmit}>Accept Risk</AsyncButton>
+            <AsyncButton
+              onClick={handleSubmit}
+              disabled={justification.length > 4000}
+            >
+              Accept Risk
+            </AsyncButton>
           </DialogFooter>
         </form>
       </DialogContent>

src/components/CommentDialog.tsx

@@ -63,13 +63,19 @@ const CommentDialog: FunctionComponent<CommentDialogProps> = ({
               placeholder="Add your comment here..."
               value={justification}
               setValue={(value) => setJustification(value ?? "")}
+              maxLength={4000}
             />
           </div>
           <DialogFooter>
             <Button variant="secondary" onClick={() => onOpenChange(false)}>
               Cancel
             </Button>
-            <AsyncButton onClick={handleSubmit}>Add Comment</AsyncButton>
+            <AsyncButton
+              onClick={handleSubmit}
+              disabled={justification.length > 4000}
+            >
+              Add Comment
+            </AsyncButton>
           </DialogFooter>
         </form>
       </DialogContent>

src/components/FalsePositiveDialog.tsx

@@ -206,6 +206,7 @@ const FalsePositiveDialog: FunctionComponent<FalsePositiveDialogProps> = ({
               placeholder="Add your comment here..."
               value={justification}
               setValue={(value) => setJustification(value ?? "")}
+              maxLength={4000}
             />
           </div>
           <DialogFooter>
@@ -218,6 +219,7 @@ const FalsePositiveDialog: FunctionComponent<FalsePositiveDialogProps> = ({
                   onClick={handleSubmit}
                   variant={"default"}
                   className="mr-0 rounded-r-none pr-0 capitalize"
+                  disabled={justification.length > 4000}
                 >
                   {removeUnderscores(selectedOption)}
                 </AsyncButton>

src/components/MitigateDialog.tsx

@@ -74,13 +74,14 @@ const MitigateDialog: FunctionComponent<MitigateDialogProps> = ({
               placeholder="Add your justification for mitigating this vulnerability..."
               value={justification}
               setValue={(value) => setJustification(value ?? "")}
+              maxLength={4000}
             />
           </div>
           <DialogFooter>
             <Button variant="secondary" onClick={() => onOpenChange(false)}>
               Cancel
             </Button>
-            <AsyncButton variant={"secondary"} onClick={handleSubmit}>
+            <AsyncButton variant={"secondary"} onClick={handleSubmit} disabled={justification.length > 4000}>
               <div className="flex flex-row items-center">
                 {integrationType === "gitlab" && (
                   <>

src/components/common/MarkdownEditor.tsx

@@ -29,64 +29,83 @@ interface Props extends Partial<MDXEditorProps> {
   value: string;
   setValue: (value?: string) => void;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const MarkdownEditor: FunctionComponent<Props> = ({
   value,
   setValue,
   placeholder,
+  maxLength,
   ...rest
 }) => {
   const markdownRef = useRef<MDXEditorMethods>(null);
 
   useEffect(() => {
     markdownRef.current?.setMarkdown(value);
   }, [value]);
+
+  const charCount = value.length;
+  const isOverLimit = maxLength !== undefined && charCount > maxLength;
+
   return (
-    <MDXEditor
-      ref={markdownRef}
-      className={classNames(
-        "ring-primary focus:ring-2 focus-within:ring-2 rounded border",
-        styles.mdxeditor,
-        rest.className || "",
-      )}
-      onChange={(value) => setValue(value)}
-      placeholder={placeholder}
-      markdown={value}
-      contentEditableClassName="mdx-editor-content"
-      plugins={[
-        //    toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
-        toolbarPlugin({
-          toolbarContents: () => (
-            <>
-              <BoldItalicUnderlineToggles />
-              <CodeToggle />
-              <ListsToggle />
-            </>
-          ),
-        }),
-        listsPlugin(),
-        quotePlugin(),
-        headingsPlugin(),
-        linkPlugin(),
-        imagePlugin(),
-        tablePlugin(),
-        thematicBreakPlugin(),
-        frontmatterPlugin(),
-        codeBlockPlugin({ defaultCodeBlockLanguage: "go" }),
-        codeMirrorPlugin({
-          codeBlockLanguages: {
-            js: "JavaScript",
-            css: "CSS",
-            txt: "text",
-            tsx: "TypeScript",
-            go: "Go",
-          },
-        }),
+    <div>
+      <MDXEditor
+        ref={markdownRef}
+        className={classNames(
+          "ring-primary focus:ring-2 focus-within:ring-2 rounded border",
+          isOverLimit ? "border-destructive" : "",
+          styles.mdxeditor,
+          rest.className || "",
+        )}
+        onChange={(value) => setValue(value)}
+        placeholder={placeholder}
+        markdown={value}
+        contentEditableClassName="mdx-editor-content"
+        plugins={[
+          //    toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <>
+                <BoldItalicUnderlineToggles />
+                <CodeToggle />
+                <ListsToggle />
+              </>
+            ),
+          }),
+          listsPlugin(),
+          quotePlugin(),
+          headingsPlugin(),
+          linkPlugin(),
+          imagePlugin(),
+          tablePlugin(),
+          thematicBreakPlugin(),
+          frontmatterPlugin(),
+          codeBlockPlugin({ defaultCodeBlockLanguage: "go" }),
+          codeMirrorPlugin({
+            codeBlockLanguages: {
+              js: "JavaScript",
+              css: "CSS",
+              txt: "text",
+              tsx: "TypeScript",
+              go: "Go",
+            },
+          }),
 
-        markdownShortcutPlugin(),
-      ]}
-    />
+          markdownShortcutPlugin(),
+        ]}
+      />
+      {maxLength !== undefined && (
+        <p
+          className={classNames(
+            "mt-1 text-right text-xs",
+            isOverLimit ? "text-destructive" : "text-muted-foreground",
+          )}
+        >
+          {charCount} / {maxLength}
+        </p>
+      )}
+    </div>
   );
 };