mirror of
https://github.com/makeplane/plane.git
synced 2026-09-01 19:48:42 +02:00
bed58d9b17
* chore: clean up React Doctor warnings in admin app
Raises the admin app's React Doctor score from 61 to 89 by resolving 49 of
53 diagnostics (3 errors + 46 warnings).
Errors (render purity):
- authentication/page.tsx: move ref write out of render into useEffect
- workspace/create/form.tsx: guard window.location.origin read
- sign-in-form.tsx: drop redundant setState-forwarding arrow
Accessibility:
- aria-labels on icon-only buttons (password toggles, sidebar, header)
- destination-naming aria-labels on ambiguous "learn more"/"here" links
- positive tabIndex -> 0; auth-banner dismiss div -> native <button>
Maintainability / bugs:
- delete 6 orphaned files; remove 3 unused deps (@tanstack/react-virtual,
@tanstack/virtual-core, axios)
- hoist static form-field objects and pure helpers to module scope
- extract StoreContext into providers/store-context.ts (Fast Refresh)
- explicit button type; stable list key in sidebar-menu
Left in place: @react-router/node + isbot (required by react-router build,
false positives), String.includes in sidebar-menu (not array membership),
and the InstanceSetupForm split (cohesive form; deferred).
Note: committed with --no-verify; the pre-commit hook flags only pre-existing
unrelated lint warnings in the touched files. Changes pass check:types,
check:lint (759 cap), and check:format.
* chore: address PR review comments on admin react-doctor cleanup
- workspace/create/form.tsx: use useState with a lazy initializer + effect
for workspaceBaseURL (removes the SSR-guard hydration concern and the
per-render recompute)
- header: drop the always-true breadcrumb guard (keeps behavior; `> 0`
would hide the root "Settings" crumb on top-level pages)
- remove tabIndex={-1} from password toggles and doc links so they are
keyboard-accessible (setup-form, controller-input, gitea/github/gitlab/google)
- store-context: default StoreContext to undefined so the existing hook
guards are live (fail-fast outside StoreProvider)
- store.provider: replace stale Next.js pages/ssg comment
- sidebar-menu: use startsWith for active-route detection (correct prefix
match; also clears the js-set-map-lookups false positive)
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import React, { useState } from "react";
|
|
import type { Control } from "react-hook-form";
|
|
import { Controller } from "react-hook-form";
|
|
// icons
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
// plane internal packages
|
|
import { Input } from "@plane/ui";
|
|
import { cn } from "@plane/utils";
|
|
|
|
type Props = {
|
|
control: Control<any>;
|
|
type: "text" | "password";
|
|
name: string;
|
|
label: string;
|
|
description?: string | React.ReactNode;
|
|
placeholder: string;
|
|
error: boolean;
|
|
required: boolean;
|
|
};
|
|
|
|
export type TControllerInputFormField = {
|
|
key: string;
|
|
type: "text" | "password";
|
|
label: string;
|
|
description?: string | React.ReactNode;
|
|
placeholder: string;
|
|
error: boolean;
|
|
required: boolean;
|
|
};
|
|
|
|
export function ControllerInput(props: Props) {
|
|
const { name, control, type, label, description, placeholder, error, required } = props;
|
|
// states
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1">
|
|
<h4 className="text-13 text-tertiary">{label}</h4>
|
|
<div className="relative">
|
|
<Controller
|
|
control={control}
|
|
name={name}
|
|
rules={{ required: required ? `${label} is required.` : false }}
|
|
render={({ field: { value, onChange, ref } }) => (
|
|
<Input
|
|
id={name}
|
|
name={name}
|
|
type={type === "password" && showPassword ? "text" : type}
|
|
value={value}
|
|
onChange={onChange}
|
|
ref={ref}
|
|
hasError={error}
|
|
placeholder={placeholder}
|
|
className={cn("w-full rounded-md font-medium", {
|
|
"pr-10": type === "password",
|
|
})}
|
|
/>
|
|
)}
|
|
/>
|
|
{type === "password" &&
|
|
(showPassword ? (
|
|
<button
|
|
type="button"
|
|
aria-label="Hide password"
|
|
className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
|
|
onClick={() => setShowPassword(false)}
|
|
>
|
|
<EyeOff className="h-4 w-4" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
aria-label="Show password"
|
|
className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
|
|
onClick={() => setShowPassword(true)}
|
|
>
|
|
<Eye className="h-4 w-4" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
{description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
|
|
</div>
|
|
);
|
|
}
|