refactor: code cleanup

Author: yordan-st

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx

@@ -6,11 +6,21 @@ interface PropsWithChildrenWithClass extends PropsWithChildren {
     className?: string;
 }
 
-export function DialogContent(props: PropsWithChildrenWithClass): ReactElement {
-    const { children, className } = props;
+export interface DialogContentProps extends PropsWithChildrenWithClass {
+    formOrientation: "horizontal" | "vertical";
+}
+
+export function DialogContent(props: DialogContentProps): ReactElement {
+    const { children, className, formOrientation } = props;
 
     return (
-        <div className={classNames("widget-rich-text-modal-body modal-dialog mx-window mx-window-active", className)}>
+        <div
+            className={classNames(
+                "widget-rich-text-modal-body modal-dialog mx-window mx-window-active",
+                { "form-vertical": formOrientation === "vertical" },
+                className
+            )}
+        >
             <div className="modal-content mx-window-content">{children}</div>
         </div>
     );
@@ -36,16 +46,21 @@ export function DialogHeader(props: DialogHeaderProps): ReactElement {
     );
 }
 
-export function DialogBody(
-    props: PropsWithChildrenWithClass & { formOrientation: "horizontal" | "vertical" }
-): ReactElement {
+export interface DialogBodyProps extends PropsWithChildrenWithClass {
+    formOrientation: "horizontal" | "vertical";
+}
+
+export function DialogBody(props: DialogBodyProps): ReactElement {
     const { children, className, formOrientation } = props;
 
     return (
         <div
             className={classNames(
                 "widget-rich-text-modal-content",
-                formOrientation === "vertical" ? "form-vertical" : "form-horizontal",
+                {
+                    "form-vertical": formOrientation === "vertical",
+                    "form-horizontal": formOrientation !== "vertical"
+                },
                 className
             )}
         >
@@ -70,7 +85,7 @@ export function FormControl(props: FormControlProps): ReactElement {
                     <label
                         htmlFor={inputId}
                         id={`${inputId}-label`}
-                        className={classNames("control-label", formOrientation !== "vertical" && "col-sm-3")}
+                        className={classNames("control-label", { "col-sm-3": formOrientation !== "vertical" })}
                     >
                         {label}
                     </label>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx

@@ -131,7 +131,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
     }, [imageUploadElementRef.current]);
 
     return (
-        <DialogContent className={classNames("image-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={"image-dialog"} formOrientation={formOrientation}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <div ref={imageUploadElementRef}>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx

@@ -1,5 +1,4 @@
 import { ChangeEvent, createElement, ReactElement, useState } from "react";
-import classNames from "classnames";
 import { type linkConfigType } from "../../utils/formats";
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
 
@@ -24,7 +23,7 @@ export default function LinkDialog(props: LinkDialogProps): ReactElement {
     };
 
     return (
-        <DialogContent className={classNames("link-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={"link-dialog"} formOrientation={formOrientation}>
             <DialogHeader onClose={onClose}>Insert/Edit Link</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <FormControl label="Text" formOrientation={formOrientation} inputId="rich-text-link-text-input">

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx

@@ -121,7 +121,7 @@ export default function VideoDialog(props: VideoDialogProps): ReactElement {
     // disable embed tab if it is about modifying current video
     const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
     return (
-        <DialogContent className={classNames("video-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={"video-dialog"} formOrientation={formOrientation}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Media</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <div>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx

@@ -27,7 +27,7 @@ const BEAUTIFY_OPTIONS: beautify.HTMLBeautifyOptions = {
 };
 
 export default function ViewCodeDialog(props: ViewCodeDialogProps): ReactElement {
-    const { onSubmit, onClose, currentCode } = props;
+    const { onSubmit, onClose, currentCode, formOrientation } = props;
     const [formState, setFormState] = useState({
         src: beautify.html(currentCode ?? "", BEAUTIFY_OPTIONS) || ""
     });
@@ -36,13 +36,13 @@ export default function ViewCodeDialog(props: ViewCodeDialogProps): ReactElement
     }, []);
 
     return (
-        <DialogContent className="view-code-dialog">
+        <DialogContent className={"view-code-dialog"} formOrientation={formOrientation}>
             <DialogHeader onClose={onClose}>View/Edit Code</DialogHeader>
             <DialogBody formOrientation={props.formOrientation}>
                 <div>
                     <label>Source Code</label>
                 </div>
-                <FormControl label="Title" formOrientation={props.formOrientation} inputId="rich-text-view-code-input">
+                <FormControl label="Code input" formOrientation={props.formOrientation} inputId="rich-text-code-input">
                     <CodeMirror
                         className="form-control mx-textarea-input mx-textarea-noresize code-input"
                         value={formState.src}