snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/labels/create-update-label-inline.tsx

@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { forwardRef, useEffect } from "react";
+import { observer } from "mobx-react";
+import { TwitterPicker } from "react-color";
+import type { SubmitHandler } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IIssueLabel } from "@plane/types";
+
+// error codes
+const errorCodes = {
+  LABEL_NAME_ALREADY_EXISTS: "LABEL_NAME_ALREADY_EXISTS",
+};
+
+export type TLabelOperationsCallbacks = {
+  createLabel: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+  updateLabel: (labelId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+};
+
+type TCreateUpdateLabelInlineProps = {
+  labelForm: boolean;
+  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
+  isUpdating: boolean;
+  labelOperationsCallbacks: TLabelOperationsCallbacks;
+  labelToUpdate?: IIssueLabel;
+  onClose?: () => void;
+};
+
+const defaultValues: Partial<IIssueLabel> = {
+  name: "",
+  color: "var(--text-color-secondary)",
+};
+
+export const CreateUpdateLabelInline = observer(
+  forwardRef(function CreateUpdateLabelInline(
+    props: TCreateUpdateLabelInlineProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const { labelForm, setLabelForm, isUpdating, labelOperationsCallbacks, labelToUpdate, onClose } = props;
+    // form info
+    const {
+      handleSubmit,
+      control,
+      reset,
+      formState: { errors, isSubmitting },
+      watch,
+      setValue,
+      setFocus,
+    } = useForm<IIssueLabel>({
+      defaultValues,
+    });
+
+    const { t } = useTranslation();
+
+    const handleClose = () => {
+      setLabelForm(false);
+      reset(defaultValues);
+      if (onClose) onClose();
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getErrorMessage = (error: any, operation: "create" | "update"): string => {
+      const errorData = error ?? {};
+
+      const labelError = errorData.name?.includes(errorCodes.LABEL_NAME_ALREADY_EXISTS);
+      if (labelError) {
+        return t("label.create.already_exists");
+      }
+
+      // Fallback to general error messages
+      if (operation === "create") {
+        return errorData?.detail ?? errorData?.error ?? t("common.something_went_wrong");
+      }
+
+      return errorData?.error ?? t("project_settings.labels.toast.error");
+    };
+
+    const handleLabelCreate: SubmitHandler<IIssueLabel> = async (formData) => {
+      if (isSubmitting) return;
+
+      await labelOperationsCallbacks
+        .createLabel(formData)
+        .then((_res) => {
+          handleClose();
+          reset(defaultValues);
+        })
+        .catch((error) => {
+          const errorMessage = getErrorMessage(error, "create");
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: errorMessage,
+          });
+          reset(formData);
+        });
+    };
+
+    const handleLabelUpdate: SubmitHandler<IIssueLabel> = async (formData) => {
+      if (!labelToUpdate?.id || isSubmitting) return;
+
+      await labelOperationsCallbacks
+        .updateLabel(labelToUpdate.id, formData)
+        .then((_res) => {
+          reset(defaultValues);
+          handleClose();
+        })
+        .catch((error) => {
+          const errorMessage = getErrorMessage(error, "update");
+          setToast({
+            title: "Oops!",
+            type: TOAST_TYPE.ERROR,
+            message: errorMessage,
+          });
+          reset(formData);
+        });
+    };
+
+    const handleFormSubmit = (formData: IIssueLabel) => {
+      if (isUpdating) {
+        handleLabelUpdate(formData);
+      } else {
+        handleLabelCreate(formData);
+      }
+    };
+
+    /**
+     * For settings focus on name input
+     */
+    useEffect(() => {
+      setFocus("name");
+    }, [setFocus, labelForm]);
+
+    useEffect(() => {
+      if (!labelToUpdate) return;
+
+      setValue("name", labelToUpdate.name);
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+    }, [labelToUpdate, setValue]);
+
+    useEffect(() => {
+      if (labelToUpdate) {
+        setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+        return;
+      }
+
+      setValue("color", getRandomLabelColor());
+    }, [labelToUpdate, setValue]);
+
+    return (
+      <>
+        <div
+          ref={ref}
+          className={`flex w-full scroll-m-8 items-center gap-2 bg-surface-1 ${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-14 font-medium focus:outline-none ${
+                      open ? "text-primary" : "text-secondary"
+                    }`}
+                  >
+                    <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 top-full left-0 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: t("project_settings.labels.label_title_is_required"),
+                maxLength: {
+                  value: 255,
+                  message: t("project_settings.labels.label_max_char"),
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Field name="name" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="labelName"
+                      name="name"
+                      type="text"
+                      autoFocus
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      placeholder={t("project_settings.labels.label_title")}
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <Button variant="secondary" onClick={() => handleClose()}>
+            {t("cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={(e) => {
+              e.preventDefault();
+              handleSubmit(handleFormSubmit)();
+            }}
+            loading={isSubmitting}
+          >
+            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
+          </Button>
+        </div>
+        {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
+      </>
+    );
+  })
+);