import { useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // services import stateService from "services/state.service"; import trackEventServices from "services/track-event.service"; // ui import { CustomSearchSelect, Tooltip } from "components/ui"; // icons import { StateGroupIcon } from "components/icons"; // helpers import { getStatesList } from "helpers/state.helper"; // types import { ICurrentUserResponse, IIssue } from "types"; // fetch-keys import { STATES_LIST } from "constants/fetch-keys"; type Props = { issue: IIssue; partialUpdateIssue: (formData: Partial, issue: IIssue) => void; position?: "left" | "right"; tooltipPosition?: "top" | "bottom"; className?: string; selfPositioned?: boolean; customButton?: boolean; user: ICurrentUserResponse | undefined; isNotAllowed: boolean; }; export const ViewStateSelect: React.FC = ({ issue, partialUpdateIssue, position = "left", tooltipPosition = "top", className = "", selfPositioned = false, customButton = false, user, isNotAllowed, }) => { const [fetchStates, setFetchStates] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { data: stateGroups } = useSWR( workspaceSlug && issue && fetchStates ? STATES_LIST(issue.project) : null, workspaceSlug && issue && fetchStates ? () => stateService.getStates(workspaceSlug as string, issue.project) : null ); const states = getStatesList(stateGroups); const options = states?.map((state) => ({ value: state.id, query: state.name, content: (
{state.name}
), })); const selectedOption = issue.state_detail; const stateLabel = (
{selectedOption && ( )} {selectedOption?.name ?? "State"}
); return ( { const oldState = states?.find((s) => s.id === issue.state); const newState = states?.find((s) => s.id === data); partialUpdateIssue( { state: data, state_detail: newState, }, issue ); trackEventServices.trackIssuePartialPropertyUpdateEvent( { workspaceSlug, workspaceId: issue.workspace, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, "ISSUE_PROPERTY_UPDATE_STATE", user ); if (oldState?.group !== "completed" && newState?.group !== "completed") { trackEventServices.trackIssueMarkedAsDoneEvent( { workspaceSlug: issue.workspace_detail.slug, workspaceId: issue.workspace_detail.id, projectId: issue.project_detail.id, projectIdentifier: issue.project_detail.identifier, projectName: issue.project_detail.name, issueId: issue.id, }, user ); } }} options={options} {...(customButton ? { customButton: stateLabel } : { label: stateLabel })} position={position} disabled={isNotAllowed} onOpen={() => setFetchStates(true)} noChevron selfPositioned={selfPositioned} /> ); };