thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: rendering default state in the issue create update modal whenever we switch between the projects in the issue modal (#4024)

Browse Source
This commit is contained in:
guru_sainath 2024-03-21 20:46:18 +05:30 committed by GitHub
parent 15e04e55bb
commit 58a45c96c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/components/dropdowns/state.tsx
View File

@ -4,7 +4,7 @@ import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react"; import { Check, ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
// hooks // hooks
import { StateGroupIcon } from "@plane/ui"; import { Spinner, StateGroupIcon } from "@plane/ui";
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { useApplication, useProjectState } from "@/hooks/store"; import { useApplication, useProjectState } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down"; import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
@ -50,6 +50,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
// states // states
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [stateLoader, setStateLoader] = useState(false);
// refs // refs
const dropdownRef = useRef<HTMLDivElement | null>(null); const dropdownRef = useRef<HTMLDivElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null); const inputRef = useRef<HTMLInputElement | null>(null);
@ -74,6 +75,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
} = useApplication(); } = useApplication();
const { fetchProjectStates, getProjectStates, getStateById } = useProjectState(); const { fetchProjectStates, getProjectStates, getStateById } = useProjectState();
const statesList = getProjectStates(projectId); const statesList = getProjectStates(projectId);
const defaultStateList = statesList?.find((state) => state.default);
const stateValue = value ? value : defaultStateList?.id;
const options = statesList?.map((state) => ({ const options = statesList?.map((state) => ({
value: state.id, value: state.id,
@ -89,11 +92,19 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
const filteredOptions = const filteredOptions =
query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase())); query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
const selectedState = getStateById(value); const selectedState = stateValue ? getStateById(stateValue) : undefined;
const onOpen = () => { const onOpen = async () => {
if (!statesList && workspaceSlug) fetchProjectStates(workspaceSlug, projectId); if (!statesList && workspaceSlug) {
setStateLoader(true);
await fetchProjectStates(workspaceSlug, projectId);
setStateLoader(false);
}
}; };
useEffect(() => {
if (projectId) onOpen();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
const handleClose = () => { const handleClose = () => {
if (!isOpen) return; if (!isOpen) return;
@ -141,7 +152,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
ref={dropdownRef} ref={dropdownRef}
tabIndex={tabIndex} tabIndex={tabIndex}
className={cn("h-full", className)} className={cn("h-full", className)}
value={value} value={stateValue}
onChange={dropdownOnChange} onChange={dropdownOnChange}
disabled={disabled} disabled={disabled}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
@ -178,18 +189,27 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
showTooltip={showTooltip} showTooltip={showTooltip}
variant={buttonVariant} variant={buttonVariant}
> >
{!hideIcon && ( {stateLoader ? (
<StateGroupIcon <Spinner className="w-3.5 h-3.5" />
stateGroup={selectedState?.group ?? "backlog"} ) : (
color={selectedState?.color} <>
className="h-3 w-3 flex-shrink-0" {!hideIcon && (
/> <StateGroupIcon
)} stateGroup={selectedState?.group ?? "backlog"}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && ( color={selectedState?.color}
<span className="flex-grow truncate">{selectedState?.name ?? "State"}</span> className="h-3 w-3 flex-shrink-0"
)} />
{dropdownArrow && ( )}
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" /> {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">{selectedState?.name ?? "State"}</span>
)}
{dropdownArrow && (
<ChevronDown
className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
aria-hidden="true"
/>
)}
</>
)} )}
</DropdownButton> </DropdownButton>
</button> </button>

2
web/store/state.store.ts
View File

@ -2,10 +2,10 @@ import groupBy from "lodash/groupBy";
import set from "lodash/set"; import set from "lodash/set";
import { makeObservable, observable, computed, action, runInAction } from "mobx"; import { makeObservable, observable, computed, action, runInAction } from "mobx";
import { computedFn } from "mobx-utils"; import { computedFn } from "mobx-utils";
import { IState } from "@plane/types";
// store // store
import { sortStates } from "@/helpers/state.helper"; import { sortStates } from "@/helpers/state.helper";
import { ProjectStateService } from "@/services/project"; import { ProjectStateService } from "@/services/project";
import { IState } from "@plane/types";
import { RootStore } from "./root.store"; import { RootStore } from "./root.store";
// types // types
// services // services