chore: bug fixes & improvement (#3218)

* chore: draft issue validation added to prevent saving empty or whitespace title * chore: resolve scrolling issue in page empty state * chore: kanban layout quick add issue improvement
makeplane · Dec 22, 2023 · 0a41eff · 0a41eff
1 parent 5f68197
commit 0a41eff
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 61 deletions.
diff --git a/web/components/common/new-empty-state.tsx b/web/components/common/new-empty-state.tsx
@@ -41,69 +41,71 @@ export const NewEmptyState: React.FC<Props> = ({
     setIsHovered(false);
   };
   return (
-    <div className=" flex h-full w-full flex-col items-center justify-center ">
-      <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
-        <h3 className="text-2xl font-semibold">{title}</h3>
-        {description && <p className=" text-lg">{description}</p>}
-        <div className="relative w-full max-w-6xl">
-          <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
-        </div>
+    <div className="flex items-center justify-center overflow-y-auto">
+      <div className=" flex h-full w-full flex-col items-center justify-center ">
+        <div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
+          <h3 className="text-2xl font-semibold">{title}</h3>
+          {description && <p className=" text-lg">{description}</p>}
+          <div className="relative w-full max-w-6xl">
+            <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
+          </div>
 
-        <div className="relative flex items-start justify-center">
-          {primaryButton && (
-            <Button
-              className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
-              size="lg"
-              variant="primary"
-              onClick={primaryButton.onClick}
-              disabled={disabled}
-            >
-              {primaryButton.text}
-              <div
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
-                className={`absolute bg-blue-300 ${
-                  comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
-                } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
-              />
-              <div
-                className={`absolute bg-blue-400/40 ${
-                  comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
-                } h-1.5 w-1.5 rounded-full`}
-              />
-            </Button>
-          )}
-          {comicBox &&
-            isHovered &&
-            (comicBox.direction === "right" ? (
-              <div
-                className={`absolute left-1/2 top-0 flex max-w-sm ${
-                  comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
-                } pb-5`}
+          <div className="relative flex items-start justify-center">
+            {primaryButton && (
+              <Button
+                className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
+                size="lg"
+                variant="primary"
+                onClick={primaryButton.onClick}
+                disabled={disabled}
               >
-                <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                  <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
-                </div>
-                <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
-                  <h1 className="p-5">
-                    <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
-                    <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
-                  </h1>
-                </div>
-              </div>
-            ) : (
-              <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
-                <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
-                  <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                {primaryButton.text}
+                <div
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  className={`absolute bg-blue-300 ${
+                    comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
+                  } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+                />
+                <div
+                  className={`absolute bg-blue-400/40 ${
+                    comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
+                  } h-1.5 w-1.5 rounded-full`}
+                />
+              </Button>
+            )}
+            {comicBox &&
+              isHovered &&
+              (comicBox.direction === "right" ? (
+                <div
+                  className={`absolute left-1/2 top-0 flex max-w-sm ${
+                    comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
+                  } pb-5`}
+                >
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                  </div>
+                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                    <h1 className="p-5">
+                      <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
+                    </h1>
+                  </div>
                 </div>
-                <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
-                  <h1 className="p-5">
-                    <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
-                    <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
-                  </h1>
+              ) : (
+                <div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
+                  <div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
+                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
+                  </div>
+                  <div className="rounded-md border border-custom-border-200 bg-custom-background-100">
+                    <h1 className="p-5">
+                      <h3 className="text-lg font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-sm">{comicBox?.description}</h4>
+                    </h1>
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+          </div>
         </div>
       </div>
     </div>

diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -22,7 +22,7 @@ const Inputs = (props: any) => {
   }, [setFocus]);
 
   return (
-    <div>
+    <div className="w-full">
       <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
       <input
         autoComplete="off"

diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
@@ -187,7 +187,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
    */
 
   const onDiscardClose = () => {
-    if (formDirtyState !== null) {
+    if (formDirtyState !== null && formDirtyState.name.trim() !== "") {
       setShowConfirmDiscard(true);
     } else {
       handleClose();