github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-839] chore: limit project identifier to 5 letters in project settings page. (#4082)

Browse Source
This commit is contained in:
Prateek Shourya 2024-03-28 15:04:16 +05:30 committed by GitHub
parent 5d4b3cea4c
commit 79d227b906
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/components/project/form.tsx
View File

@ -1,7 +1,7 @@
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// icons // icons
import { Lock } from "lucide-react"; import { Info, Lock } from "lucide-react";
import { IProject, IWorkspace } from "@plane/types"; import { IProject, IWorkspace } from "@plane/types";
// ui // ui
import { import {
@ -13,6 +13,7 @@ import {
setToast, setToast,
CustomEmojiIconPicker, CustomEmojiIconPicker,
EmojiIconPickerTypes, EmojiIconPickerTypes,
Tooltip,
} from "@plane/ui"; } from "@plane/ui";
// components // components
import { ImagePickerPopover } from "@/components/core"; import { ImagePickerPopover } from "@/components/core";
@ -24,6 +25,7 @@ import { renderFormattedDate } from "@/helpers/date-time.helper";
// hooks // hooks
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper"; import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { useEventTracker, useProject } from "@/hooks/store"; import { useEventTracker, useProject } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// services // services
import { ProjectService } from "@/services/project"; import { ProjectService } from "@/services/project";
// types // types
@ -42,6 +44,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
// store hooks // store hooks
const { captureProjectEvent } = useEventTracker(); const { captureProjectEvent } = useEventTracker();
const { updateProject } = useProject(); const { updateProject } = useProject();
const { isMobile } = usePlatformOS();
// form info // form info
const { const {
handleSubmit, handleSubmit,
@ -251,20 +254,23 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
</div> </div>
<div className="flex w-full items-center justify-between gap-10"> <div className="flex w-full items-center justify-between gap-10">
<div className="flex w-1/2 flex-col gap-1"> <div className="flex w-1/2 flex-col gap-1">
<h4 className="text-sm">Identifier</h4> <h4 className="text-sm">Project ID</h4>
<div className="relative">
<Controller <Controller
control={control} control={control}
name="identifier" name="identifier"
rules={{ rules={{
required: "Identifier is required", required: "Project ID is required",
validate: (value) => /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.", validate: (value) =>
/^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
"Only Alphanumeric & Non-latin characters are allowed.",
minLength: { minLength: {
value: 1, value: 1,
message: "Identifier must at least be of 1 character", message: "Project ID must at least be of 1 character",
}, },
maxLength: { maxLength: {
value: 12, value: 5,
message: "Identifier must at most be of 5 characters", message: "Project ID must at most be of 5 characters",
}, },
}} }}
render={({ field: { value, ref } }) => ( render={({ field: { value, ref } }) => (
@ -276,12 +282,21 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
onChange={handleIdentifierChange} onChange={handleIdentifierChange}
ref={ref} ref={ref}
hasError={Boolean(errors.identifier)} hasError={Boolean(errors.identifier)}
placeholder="Enter identifier" placeholder="Enter Project ID"
className="w-full font-medium" className="w-full font-medium"
disabled={!isAdmin} disabled={!isAdmin}
/> />
)} )}
/> />
<Tooltip
isMobile={isMobile}
tooltipContent="Helps you identify issues in the project uniquely, (e.g. APP-123). Max 5 characters."
className="text-sm"
position="right-top"
>
<Info className="absolute right-2 top-2.5 h-4 w-4 text-custom-text-400" />
</Tooltip>
</div>
</div> </div>
<div className="flex w-1/2 flex-col gap-1"> <div className="flex w-1/2 flex-col gap-1">
<h4 className="text-sm">Network</h4> <h4 className="text-sm">Network</h4>