diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx index 3e770a618..5ab9f36fe 100644 --- a/web/components/project/form.tsx +++ b/web/components/project/form.tsx @@ -1,7 +1,7 @@ import { FC, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; // icons -import { Lock } from "lucide-react"; +import { Info, Lock } from "lucide-react"; import { IProject, IWorkspace } from "@plane/types"; // ui import { @@ -13,6 +13,7 @@ import { setToast, CustomEmojiIconPicker, EmojiIconPickerTypes, + Tooltip, } from "@plane/ui"; // components import { ImagePickerPopover } from "@/components/core"; @@ -24,6 +25,7 @@ import { renderFormattedDate } from "@/helpers/date-time.helper"; // hooks import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper"; import { useEventTracker, useProject } from "@/hooks/store"; +import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { ProjectService } from "@/services/project"; // types @@ -42,6 +44,7 @@ export const ProjectDetailsForm: FC = (props) => { // store hooks const { captureProjectEvent } = useEventTracker(); const { updateProject } = useProject(); + const { isMobile } = usePlatformOS(); // form info const { handleSubmit, @@ -251,37 +254,49 @@ export const ProjectDetailsForm: FC = (props) => {
-

Identifier

- /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.", - minLength: { - value: 1, - message: "Identifier must at least be of 1 character", - }, - maxLength: { - value: 12, - message: "Identifier must at most be of 5 characters", - }, - }} - render={({ field: { value, ref } }) => ( - - )} - /> +

Project ID

+
+ + /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || + "Only Alphanumeric & Non-latin characters are allowed.", + minLength: { + value: 1, + message: "Project ID must at least be of 1 character", + }, + maxLength: { + value: 5, + message: "Project ID must at most be of 5 characters", + }, + }} + render={({ field: { value, ref } }) => ( + + )} + /> + + + +

Network