fix: cannot change the state if it's the only state in group (#1358)

* fixed loohole with groups and added tooltip

* muted text when dropdown disabled
This commit is contained in:
M. Palanikannan 2023-06-26 18:28:12 +05:30 committed by GitHub
parent 3f22ccc528
commit 5914240290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 21 deletions

View File

@ -15,7 +15,7 @@ import stateService from "services/state.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui"; import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
// types // types
import type { ICurrentUserResponse, IState, IStateResponse } from "types"; import type { ICurrentUserResponse, IState, IStateResponse } from "types";
// fetch-keys // fetch-keys
@ -28,6 +28,7 @@ type Props = {
onClose: () => void; onClose: () => void;
selectedGroup: StateGroup | null; selectedGroup: StateGroup | null;
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
groupLength: number;
}; };
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null; export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
@ -43,6 +44,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
onClose, onClose,
selectedGroup, selectedGroup,
user, user,
groupLength,
}) => { }) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -174,9 +176,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${ className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-brand-base" : "text-brand-secondary"
open ? "text-brand-base" : "text-brand-secondary" }`}
}`}
> >
{watch("color") && watch("color") !== "" && ( {watch("color") && watch("color") !== "" && (
<span <span
@ -228,22 +229,27 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
name="group" name="group"
control={control} control={control}
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomSelect <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"} >
value={value} <div>
onChange={onChange} <CustomSelect
label={ disabled={groupLength === 1}
Object.keys(GROUP_CHOICES).find((k) => k === value.toString()) value={value}
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES] onChange={onChange}
: "Select group" label={
} Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
input ? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
> : "Select group"
{Object.keys(GROUP_CHOICES).map((key) => ( }
<CustomSelect.Option key={key} value={key}> input
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} >
</CustomSelect.Option> {Object.keys(GROUP_CHOICES).map((key) => (
))} <CustomSelect.Option key={key} value={key}>
</CustomSelect> {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
</CustomSelect.Option>
))}
</CustomSelect>
</div>
</Tooltip>
)} )}
/> />
)} )}

View File

@ -54,7 +54,7 @@ const CustomSelect = ({
) : ( ) : (
<Listbox.Button <Listbox.Button
className={`flex w-full ${ className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2" disabled ? "cursor-not-allowed text-brand-secondary" : "cursor-pointer hover:bg-brand-surface-2"
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${ } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${ } ${

View File

@ -98,6 +98,7 @@ const StatesSettings: NextPage = () => {
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base"> <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
{key === activeGroup && ( {key === activeGroup && (
<CreateUpdateStateInline <CreateUpdateStateInline
groupLength={orderedStateGroups[key].length}
onClose={() => { onClose={() => {
setActiveGroup(null); setActiveGroup(null);
setSelectedState(null); setSelectedState(null);
@ -128,6 +129,7 @@ const StatesSettings: NextPage = () => {
setActiveGroup(null); setActiveGroup(null);
setSelectedState(null); setSelectedState(null);
}} }}
groupLength={orderedStateGroups[key].length}
data={ data={
statesList?.find((state) => state.id === selectedState) ?? null statesList?.find((state) => state.id === selectedState) ?? null
} }