From 096d9b15414a3f3c0a4115dc9458166b899e2fb0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 20 Jun 2024 17:37:51 +0530
Subject: [PATCH] fix: project label error message added and ui improvement
 (#4895)

---
 .../labels/create-update-label-inline.tsx     | 169 +++++++++---------
 .../labels/label-block/label-item-block.tsx   |   2 +-
 .../labels/label-block/label-name.tsx         |   2 +-
 3 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/web/core/components/labels/create-update-label-inline.tsx b/web/core/components/labels/create-update-label-inline.tsx
index 4d7cb50d90..54126b909a 100644
--- a/web/core/components/labels/create-update-label-inline.tsx
+++ b/web/core/components/labels/create-update-label-inline.tsx
@@ -115,88 +115,95 @@ export const CreateUpdateLabelInline = observer(
     }, [labelToUpdate, setValue]);
 
     return (
-      <form
-        ref={ref}
-        onSubmit={(e) => {
-          e.preventDefault();
-          handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
-        }}
-        className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`}
-      >
-        <div className="flex-shrink-0">
-          <Popover className="relative z-10 flex h-full w-full items-center justify-center">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                    open ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <span
-                    className="h-4 w-4 rounded-full"
-                    style={{
-                      backgroundColor: watch("color"),
-                    }}
-                  />
-                </Popover.Button>
-
-                <Transition
-                  as={React.Fragment}
-                  enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1"
-                >
-                  <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-                    <Controller
-                      name="color"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <TwitterPicker
-                          colors={LABEL_COLOR_OPTIONS}
-                          color={value}
-                          onChange={(value) => onChange(value.hex)}
-                        />
-                      )}
+      <>
+        <form
+          ref={ref}
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
+          }}
+          className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`}
+        >
+          <div className="flex-shrink-0">
+            <Popover className="relative z-10 flex h-full w-full items-center justify-center">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                      open ? "text-custom-text-100" : "text-custom-text-200"
+                    }`}
+                  >
+                    <span
+                      className="h-4 w-4 rounded-full"
+                      style={{
+                        backgroundColor: watch("color"),
+                      }}
                     />
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-        </div>
-        <div className="flex flex-1 flex-col justify-center">
-          <Controller
-            control={control}
-            name="name"
-            rules={{
-              required: "Label title is required",
-            }}
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="labelName"
-                name="name"
-                type="text"
-                autoFocus
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.name)}
-                placeholder="Label title"
-                className="w-full"
-              />
-            )}
-          />
-        </div>
-        <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
-          Cancel
-        </Button>
-        <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
-          {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
-        </Button>
-      </form>
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                      <Controller
+                        name="color"
+                        control={control}
+                        render={({ field: { value, onChange } }) => (
+                          <TwitterPicker
+                            colors={LABEL_COLOR_OPTIONS}
+                            color={value}
+                            onChange={(value) => onChange(value.hex)}
+                          />
+                        )}
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          </div>
+          <div className="flex flex-1 flex-col justify-center">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "Label title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Label name should not exceed 255 characters",
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="labelName"
+                  name="name"
+                  type="text"
+                  autoFocus
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Label title"
+                  className="w-full"
+                />
+              )}
+            />
+          </div>
+          <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
+            {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
+          </Button>
+        </form>
+        {errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
+      </>
     );
   })
 );
diff --git a/web/core/components/labels/label-block/label-item-block.tsx b/web/core/components/labels/label-block/label-item-block.tsx
index 225b011bd5..95d3731079 100644
--- a/web/core/components/labels/label-block/label-item-block.tsx
+++ b/web/core/components/labels/label-block/label-item-block.tsx
@@ -53,7 +53,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
 
       <div
         ref={actionSectionRef}
-        className={`absolute right-3 flex items-start gap-3.5 px-4 ${
+        className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
           isMenuActive || isLabelGroup
             ? "opacity-100"
             : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
diff --git a/web/core/components/labels/label-block/label-name.tsx b/web/core/components/labels/label-block/label-name.tsx
index 9c84959ccf..1eaf284981 100644
--- a/web/core/components/labels/label-block/label-name.tsx
+++ b/web/core/components/labels/label-block/label-name.tsx
@@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
   const { name, color, isGroup } = props;
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3 pr-20">
       {isGroup ? (
         <Component className="h-3.5 w-3.5" color={color} />
       ) : (