feat: randomize color on label create (#1839)

fix: create label state being persisted after edit label

apps/app/components/labels/create-label-modal.tsx

@@ -20,6 +20,7 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
 // constants
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 
 // types
 type Props = {
@@ -52,10 +53,15 @@ export const CreateLabelModal: React.FC<Props> = ({
     watch,
     control,
     reset,
+    setValue,
   } = useForm<IIssueLabels>({
     defaultValues,
   });
 
+  useEffect(() => {
+    if (isOpen) setValue("color", getRandomLabelColor());
+  }, [setValue, isOpen]);
+
   const onClose = () => {
     handleClose();
     reset(defaultValues);
@@ -156,6 +162,7 @@ export const CreateLabelModal: React.FC<Props> = ({
                                   render={({ field: { value, onChange } }) => (
                                     <TwitterPicker
                                       color={value}
+                                      colors={LABEL_COLOR_OPTIONS}
                                       onChange={(value) => {
                                         onChange(value.hex);
                                         close();

apps/app/components/labels/create-update-label-inline.tsx

@@ -22,12 +22,14 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
 
 type Props = {
   labelForm: boolean;
   setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
   isUpdating: boolean;
   labelToUpdate: IIssueLabels | null;
+  onClose?: () => void;
 };
 
 const defaultValues: Partial<IIssueLabels> = {
@@ -35,12 +37,10 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "rgb(var(--color-text-200))",
 };
 
-type Ref = HTMLDivElement;
+export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
+  function CreateUpdateLabelInline(props, ref) {
+    const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
 
-export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpdateLabelInline(
-  { labelForm, setLabelForm, isUpdating, labelToUpdate },
-  ref
-) {
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
@@ -58,6 +58,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
       defaultValues,
     });
 
+    const handleClose = () => {
+      setLabelForm(false);
+      reset(defaultValues);
+      if (onClose) onClose();
+    };
+
     const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
       if (!workspaceSlug || !projectId || isSubmitting) return;
 
@@ -69,8 +75,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
             (prevData) => [res, ...(prevData ?? [])],
             false
           );
-        reset(defaultValues);
+          handleClose();
-        setLabelForm(false);
         });
     };
 
@@ -93,7 +98,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
               prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
             false
           );
-        setLabelForm(false);
+          handleClose();
         });
     };
 
@@ -113,6 +118,18 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
       setValue("name", labelToUpdate.name);
     }, [labelToUpdate, setValue]);
 
+    useEffect(() => {
+      if (labelToUpdate) {
+        setValue(
+          "color",
+          labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
+        );
+        return;
+      }
+
+      setValue("color", getRandomLabelColor());
+    }, [labelToUpdate, setValue]);
+
     return (
       <div
         className={`flex scroll-m-8 items-center gap-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5 ${
@@ -157,7 +174,11 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
                       name="color"
                       control={control}
                       render={({ field: { value, onChange } }) => (
-                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
+                        <TwitterPicker
+                          colors={LABEL_COLOR_OPTIONS}
+                          color={value}
+                          onChange={(value) => onChange(value.hex)}
+                        />
                       )}
                     />
                   </Popover.Panel>
@@ -179,14 +200,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
             error={errors.name}
           />
         </div>
-      <SecondaryButton
+        <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
-        onClick={() => {
-          reset();
-          setLabelForm(false);
-        }}
-      >
-        Cancel
-      </SecondaryButton>
         {isUpdating ? (
           <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
             {isSubmitting ? "Updating" : "Update"}
@@ -198,4 +212,5 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
         )}
       </div>
     );
-});
+  }
+);

apps/app/constants/label.ts

@@ -0,0 +1,17 @@
+export const LABEL_COLOR_OPTIONS = [
+  "#FF6900",
+  "#FCB900",
+  "#7BDCB5",
+  "#00D084",
+  "#8ED1FC",
+  "#0693E3",
+  "#ABB8C3",
+  "#EB144C",
+  "#F78DA7",
+  "#9900EF",
+];
+
+export const getRandomLabelColor = () => {
+  const randomIndex = Math.floor(Math.random() * LABEL_COLOR_OPTIONS.length);
+  return LABEL_COLOR_OPTIONS[randomIndex];
+};

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -133,6 +133,11 @@ const LabelsSettings: NextPage = () => {
                   setLabelForm={setLabelForm}
                   isUpdating={isUpdating}
                   labelToUpdate={labelToUpdate}
+                  onClose={() => {
+                    setLabelForm(false);
+                    setIsUpdating(false);
+                    setLabelToUpdate(null);
+                  }}
                   ref={scrollToRef}
                 />
               )}