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

fix: merge conflicts resolved

Browse Source
This commit is contained in:
sriram veeraghanta 2024-01-04 17:28:11 +05:30
commit d98b688342
26 changed files with 1170 additions and 1344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apiserver/.env.example
View File

@ -39,7 +39,6 @@ OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
OPENAI_API_KEY="sk-" # deprecated
GPT_ENGINE="gpt-3.5-turbo" # deprecated
# Settings related to Docker
DOCKERIZED=1 # deprecated

15
apiserver/plane/app/views/config.py
View File

@ -20,7 +20,6 @@ class ConfigurationEndpoint(BaseAPIView):
]
def get(self, request):
# Get all the configuration
(
GOOGLE_CLIENT_ID,
@ -90,8 +89,12 @@ class ConfigurationEndpoint(BaseAPIView):
data = {}
# Authentication
data["google_client_id"] = GOOGLE_CLIENT_ID if GOOGLE_CLIENT_ID and GOOGLE_CLIENT_ID != "\"\"" else None
data["github_client_id"] = GITHUB_CLIENT_ID if GITHUB_CLIENT_ID and GITHUB_CLIENT_ID != "\"\"" else None
data["google_client_id"] = (
GOOGLE_CLIENT_ID if GOOGLE_CLIENT_ID and GOOGLE_CLIENT_ID != '""' else None
)
data["github_client_id"] = (
GITHUB_CLIENT_ID if GITHUB_CLIENT_ID and GITHUB_CLIENT_ID != '""' else None
)
data["github_app_name"] = GITHUB_APP_NAME
data["magic_login"] = (
bool(EMAIL_HOST_USER) and bool(EMAIL_HOST_PASSWORD)
@ -114,7 +117,9 @@ class ConfigurationEndpoint(BaseAPIView):
# File size settings
data["file_size_limit"] = float(os.environ.get("FILE_SIZE_LIMIT", 5242880))
# is self managed
data["is_self_managed"] = bool(int(os.environ.get("IS_SELF_MANAGED", "1")))
# is smtp configured
data["is_smtp_configured"] = not (
bool(EMAIL_HOST_USER) and bool(EMAIL_HOST_PASSWORD)
)
return Response(data, status=status.HTTP_200_OK)

63
packages/editor/core/src/ui/extensions/table/table/table-view.tsx
View File

@ -1,5 +1,5 @@
import { h } from "jsx-dom-cjs";
import { Node as ProseMirrorNode } from "@tiptap/pm/model";
import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
import { Decoration, NodeView } from "@tiptap/pm/view";
import tippy, { Instance, Props } from "tippy.js";
@ -8,6 +8,12 @@ import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/table
import { icons } from "src/ui/extensions/table/table/icons";
type ToolboxItem = {
label: string;
icon: string;
action: (args: any) => void;
};
export function updateColumns(
node: ProseMirrorNode,
colgroup: HTMLElement,
@ -75,7 +81,7 @@ const defaultTippyOptions: Partial<Props> = {
placement: "right",
};
function setCellsBackgroundColor(editor: Editor, backgroundColor) {
function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
return editor
.chain()
.focus()
@ -88,7 +94,7 @@ function setCellsBackgroundColor(editor: Editor, backgroundColor) {
.run();
}
const columnsToolboxItems = [
const columnsToolboxItems: ToolboxItem[] = [
{
label: "Add Column Before",
icon: icons.insertLeftTableIcon,
@ -109,7 +115,7 @@ const columnsToolboxItems = [
}: {
editor: Editor;
triggerButton: HTMLElement;
controlsContainer;
controlsContainer: Element;
}) => {
createColorPickerToolbox({
triggerButton,
@ -127,7 +133,7 @@ const columnsToolboxItems = [
},
];
const rowsToolboxItems = [
const rowsToolboxItems: ToolboxItem[] = [
{
label: "Add Row Above",
icon: icons.insertTopTableIcon,
@ -172,11 +178,12 @@ function createToolbox({
tippyOptions,
onClickItem,
}: {
triggerButton: HTMLElement;
items: { icon: string; label: string }[];
triggerButton: Element | null;
items: ToolboxItem[];
tippyOptions: any;
onClickItem: any;
onClickItem: (item: ToolboxItem) => void;
}): Instance<Props> {
// @ts-expect-error
const toolbox = tippy(triggerButton, {
content: h(
"div",
@ -278,14 +285,14 @@ export class TableView implements NodeView {
decorations: Decoration[];
editor: Editor;
getPos: () => number;
hoveredCell;
hoveredCell: ResolvedPos | null = null;
map: TableMap;
root: HTMLElement;
table: HTMLElement;
colgroup: HTMLElement;
table: HTMLTableElement;
colgroup: HTMLTableColElement;
tbody: HTMLElement;
rowsControl?: HTMLElement;
columnsControl?: HTMLElement;
rowsControl?: HTMLElement | null;
columnsControl?: HTMLElement | null;
columnsToolbox?: Instance<Props>;
rowsToolbox?: Instance<Props>;
controls?: HTMLElement;
@ -398,13 +405,13 @@ export class TableView implements NodeView {
this.render();
}
update(node: ProseMirrorNode, decorations) {
update(node: ProseMirrorNode, decorations: readonly Decoration[]) {
if (node.type !== this.node.type) {
return false;
}
this.node = node;
this.decorations = decorations;
this.decorations = [...decorations];
this.map = TableMap.get(this.node);
if (this.editor.isEditable) {
@ -430,8 +437,7 @@ export class TableView implements NodeView {
}
updateControls() {
const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
(acc, curr) => {
const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
if (curr.spec.hoveredCell !== undefined) {
acc["hoveredCell"] = curr.spec.hoveredCell;
}
@ -440,9 +446,7 @@ export class TableView implements NodeView {
acc["hoveredTable"] = curr.spec.hoveredTable;
}
return acc;
},
{} as Record<string, HTMLElement>
) as any;
}, {} as Record<string, HTMLElement>) as any;
if (table === undefined || cell === undefined) {
return this.root.classList.add("controls--disabled");
@ -453,15 +457,22 @@ export class TableView implements NodeView {
const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
if (!this.table) {
return;
}
const tableRect = this.table.getBoundingClientRect();
const cellRect = cellDom.getBoundingClientRect();
if (this.columnsControl) {
this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
this.columnsControl.style.width = `${cellRect.width}px`;
}
if (this.rowsControl) {
this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
this.rowsControl.style.height = `${cellRect.height}px`;
}
}
selectColumn() {
if (!this.hoveredCell) return;
@ -471,10 +482,7 @@ export class TableView implements NodeView {
const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
const cellSelection = CellSelection.create(this.editor.view.state.doc, anchorCellPos, headCellPos);
this.editor.view.dispatch(
// @ts-ignore
this.editor.state.tr.setSelection(cellSelection)
);
this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
}
selectRow() {
@ -485,9 +493,6 @@ export class TableView implements NodeView {
const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
const cellSelection = CellSelection.create(this.editor.state.doc, anchorCellPos, headCellPos);
this.editor.view.dispatch(
// @ts-ignore
this.editor.view.state.tr.setSelection(cellSelection)
);
this.editor.view.dispatch(this.editor.view.state.tr.setSelection(cellSelection));
}
}

4
packages/types/src/app.d.ts vendored
View File

@ -1,5 +1,3 @@
export interface IAppConfig {
email_password_login: boolean;
file_size_limit: number;
@ -12,5 +10,5 @@ export interface IAppConfig {
posthog_host: string | null;
has_openai_configured: boolean;
has_unsplash_configured: boolean;
is_self_managed: boolean;
is_smtp_configured: boolean;
}

16
web/components/account/sign-in-forms/email-form.tsx
View File

@ -1,10 +1,12 @@
import React, { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
import { observer } from "mobx-react-lite";
// services
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import { useApplication } from "hooks/store";
// ui
import { Button, Input } from "@plane/ui";
// helpers
@ -25,11 +27,13 @@ type TEmailFormValues = {
const authService = new AuthService();
export const EmailForm: React.FC<Props> = (props) => {
export const EmailForm: React.FC<Props> = observer((props) => {
const { handleStepChange, updateEmail } = props;
// hooks
const { setToastAlert } = useToast();
const {
config: { envConfig },
} = useApplication();
const {
control,
formState: { errors, isSubmitting, isValid },
@ -55,7 +59,9 @@ export const EmailForm: React.FC<Props> = (props) => {
.emailCheck(payload)
.then((res) => {
// if the password has been auto set, send the user to magic sign-in
if (res.is_password_autoset) handleStepChange(ESignInSteps.UNIQUE_CODE);
if (res.is_password_autoset && envConfig?.is_smtp_configured) {
handleStepChange(ESignInSteps.UNIQUE_CODE);
}
// if the password has not been auto set, send them to password sign-in
else handleStepChange(ESignInSteps.PASSWORD);
})
@ -119,4 +125,4 @@ export const EmailForm: React.FC<Props> = (props) => {
</form>
</>
);
};
});

25
web/components/account/sign-in-forms/password.tsx
View File

@ -6,6 +6,7 @@ import { XCircle } from "lucide-react";
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import { useApplication } from "hooks/store";
// ui
import { Button, Input } from "@plane/ui";
// helpers
@ -14,12 +15,14 @@ import { checkEmailValidity } from "helpers/string.helper";
import { IPasswordSignInData } from "@plane/types";
// constants
import { ESignInSteps } from "components/account";
import { observer } from "mobx-react-lite";
type Props = {
email: string;
updateEmail: (email: string) => void;
handleStepChange: (step: ESignInSteps) => void;
handleSignInRedirection: () => Promise<void>;
handleEmailClear: () => void;
};
type TPasswordFormValues = {
@ -34,13 +37,16 @@ const defaultValues: TPasswordFormValues = {
const authService = new AuthService();
export const PasswordForm: React.FC<Props> = (props) => {
const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
export const PasswordForm: React.FC<Props> = observer((props) => {
const { email, updateEmail, handleStepChange, handleSignInRedirection, handleEmailClear } = props;
// states
const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
// toast alert
const { setToastAlert } = useToast();
const {
config: { envConfig },
} = useApplication();
// form info
const {
control,
@ -157,11 +163,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
disabled
/>
{value.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => onChange("")}
onClick={handleEmailClear}
/>
)}
</div>
@ -199,26 +206,28 @@ export const PasswordForm: React.FC<Props> = (props) => {
</button>
</div>
</div>
<div className="grid gap-2.5 sm:grid-cols-2">
<div className="flex gap-4">
{envConfig && envConfig.is_smtp_configured && (
<Button
type="button"
onClick={handleSendUniqueCode}
variant="primary"
variant="outline-primary"
className="w-full"
size="xl"
loading={isSendingUniqueCode}
>
{isSendingUniqueCode ? "Sending code" : "Use unique code"}
</Button>
)}
<Button
type="submit"
variant="outline-primary"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
Go to workspace
Continue
</Button>
</div>
<p className="text-xs text-onboarding-text-200">
@ -230,4 +239,4 @@ export const PasswordForm: React.FC<Props> = (props) => {
</form>
</>
);
};
});

21
web/components/account/sign-in-forms/root.tsx
View File

@ -13,7 +13,6 @@ import {
OAuthOptions,
OptionalSetPasswordForm,
CreatePasswordForm,
SelfHostedSignInForm,
} from "components/account";
export enum ESignInSteps {
@ -45,13 +44,6 @@ export const SignInRoot = observer(() => {
return (
<>
<div className="mx-auto flex flex-col">
{envConfig?.is_self_managed ? (
<SelfHostedSignInForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleSignInRedirection={handleRedirection}
/>
) : (
<>
{signInStep === ESignInSteps.EMAIL && (
<EmailForm
@ -64,6 +56,10 @@ export const SignInRoot = observer(() => {
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step) => setSignInStep(step)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
handleSignInRedirection={handleRedirection}
/>
)}
@ -79,6 +75,10 @@ export const SignInRoot = observer(() => {
submitButtonLabel="Go to workspace"
showTermsAndConditions
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
/>
)}
{signInStep === ESignInSteps.UNIQUE_CODE && (
@ -88,6 +88,10 @@ export const SignInRoot = observer(() => {
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
/>
)}
{signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
@ -107,7 +111,6 @@ export const SignInRoot = observer(() => {
/>
)}
</>
)}
</div>
{isOAuthEnabled && !OAUTH_HIDDEN_STEPS.includes(signInStep) && (
<OAuthOptions handleSignInRedirection={handleRedirection} />

5
web/components/account/sign-in-forms/unique-code.tsx
View File

@ -25,6 +25,7 @@ type Props = {
submitButtonLabel?: string;
showTermsAndConditions?: boolean;
updateUserOnboardingStatus: (value: boolean) => void;
handleEmailClear: () => void;
};
type TUniqueCodeFormValues = {
@ -50,6 +51,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
submitButtonLabel = "Continue",
showTermsAndConditions = false,
updateUserOnboardingStatus,
handleEmailClear,
} = props;
// states
const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
@ -183,11 +185,12 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
disabled
/>
{value.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => onChange("")}
onClick={handleEmailClear}
/>
)}
</div>

8
web/components/command-palette/command-palette.tsx
View File

@ -60,7 +60,6 @@ export const CommandPalette: FC = observer(() => {
isDeleteIssueModalOpen,
toggleDeleteIssueModal,
isAnyModalOpen,
createIssueStoreType,
} = commandPalette;
const { setToastAlert } = useToast();
@ -215,11 +214,8 @@ export const CommandPalette: FC = observer(() => {
<CreateUpdateIssueModal
isOpen={isCreateIssueModalOpen}
handleClose={() => toggleCreateIssueModal(false)}
prePopulateData={
cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined
}
currentStore={createIssueStoreType}
onClose={() => toggleCreateIssueModal(false)}
data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined}
/>
{workspaceSlug && projectId && issueId && issueDetails && (

67
web/components/issues/draft-issue-form.tsx
View File

@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
import { observer } from "mobx-react-lite";
import { Sparkle, X } from "lucide-react";
// hooks
import { useApplication, useEstimate, useMention } from "hooks/store";
import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
import useLocalStorage from "hooks/use-local-storage";
// services
@ -18,8 +18,10 @@ import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels";
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
import {
CycleDropdown,
DateDropdown,
EstimateDropdown,
ModuleDropdown,
PriorityDropdown,
ProjectDropdown,
ProjectMemberDropdown,
@ -103,7 +105,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
// store hooks
const { areEstimatesActiveForProject } = useEstimate();
const { areEstimatesEnabledForProject } = useEstimate();
const { mentionHighlights, mentionSuggestions } = useMention();
// hooks
const { setValue: setLocalStorageValue } = useLocalStorage("draftedIssue", {});
@ -117,6 +119,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
const {
config: { envConfig },
} = useApplication();
const { getProjectById } = useProject();
// form info
const {
formState: { errors, isSubmitting },
@ -277,6 +280,8 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
const maxDate = targetDate ? new Date(targetDate) : null;
maxDate?.setDate(maxDate.getDate());
const projectDetails = getProjectById(projectId);
return (
<>
{projectId && (
@ -302,19 +307,21 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
control={control}
name="project_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectDropdown
value={value}
onChange={(val) => {
onChange(val);
setActiveProject(val);
}}
buttonVariant="background-with-text"
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
<h3 className="text-xl font-semibold leading-6 text-custom-text-100">
{status ? "Update" : "Create"} Issue
{status ? "Update" : "Create"} issue
</h3>
</div>
{watch("parent_id") &&
@ -374,11 +381,11 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
<div className="relative">
<div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
<div className="border-0.5 absolute bottom-3.5 right-3.5 flex items-center gap-2">
{issueName && issueName !== "" && (
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
@ -388,7 +395,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
"Generating response..."
) : (
<>
<Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
<Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
</>
)}
</button>
@ -408,10 +415,10 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
button={
<button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80"
onClick={() => setGptAssistantModal((prevData) => !prevData)}
>
<Sparkle className="h-4 w-4" />
<Sparkle className="h-3.5 w-3.5" />
AI
</button>
}
@ -470,7 +477,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
name="priority"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<PriorityDropdown value={value} onChange={onChange} buttonVariant="background-with-text" />
<PriorityDropdown value={value} onChange={onChange} buttonVariant="border-with-text" />
</div>
)}
/>
@ -485,8 +492,10 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
projectId={projectId}
value={value}
onChange={onChange}
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
placeholder="Assignees"
multiple
buttonVariant="background-with-text"
/>
</div>
)}
@ -542,8 +551,40 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
)}
/>
)}
{projectDetails?.cycle_view && (
<Controller
control={control}
name="cycle_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<CycleDropdown
projectId={projectId}
onChange={(cycleId) => onChange(cycleId)}
value={value}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{projectDetails?.module_view && (
<Controller
control={control}
name="module_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ModuleDropdown
projectId={projectId}
value={value}
onChange={(moduleId) => onChange(moduleId)}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
areEstimatesActiveForProject(projectId) && (
areEstimatesEnabledForProject(projectId) && (
<Controller
control={control}
name="estimate_point"
@ -553,7 +594,7 @@ export const DraftIssueForm: FC<IssueFormProps> = observer((props) => {
value={value}
onChange={onChange}
projectId={projectId}
buttonVariant="background-with-text"
buttonVariant="border-with-text"
/>
</div>
)}

2
web/components/issues/draft-issue-modal.tsx
View File

@ -322,7 +322,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
<DraftIssueForm
isOpen={isOpen}
handleFormSubmit={handleFormSubmit}

655
web/components/issues/form.tsx
View File

@ -1,655 +0,0 @@
import React, { FC, useState, useEffect, useRef } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// hooks
import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
// services
import { AIService } from "services/ai.service";
import { FileService } from "services/file.service";
// components
import { GptAssistantPopover } from "components/core";
import { ParentIssuesListModal } from "components/issues";
import { IssueLabelSelect } from "components/issues/select";
import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels";
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
import {
CycleDropdown,
DateDropdown,
EstimateDropdown,
ModuleDropdown,
PriorityDropdown,
ProjectDropdown,
ProjectMemberDropdown,
StateDropdown,
} from "components/dropdowns";
// ui
import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
// helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// types
import type { TIssue, ISearchIssueResponse } from "@plane/types";
const defaultValues: Partial<TIssue> = {
project_id: "",
name: "",
description_html: "<p></p>",
estimate_point: null,
state_id: "",
parent_id: null,
priority: "none",
assignee_ids: [],
label_ids: [],
start_date: undefined,
target_date: undefined,
};
export interface IssueFormProps {
handleFormSubmit: (values: Partial<TIssue>) => Promise<void>;
initialData?: Partial<TIssue>;
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
createMore: boolean;
setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
handleDiscardClose: () => void;
status: boolean;
handleFormDirty: (payload: Partial<TIssue> | null) => void;
fieldsToShow: (
| "project"
| "name"
| "description"
| "state"
| "priority"
| "assignee"
| "label"
| "startDate"
| "dueDate"
| "estimate"
| "parent"
| "all"
| "module"
| "cycle"
)[];
}
// services
const aiService = new AIService();
const fileService = new FileService();
export const IssueForm: FC<IssueFormProps> = observer((props) => {
const {
handleFormSubmit,
initialData,
projectId,
setActiveProject,
createMore,
setCreateMore,
handleDiscardClose,
status,
fieldsToShow,
handleFormDirty,
} = props;
// states
const [stateModal, setStateModal] = useState(false);
const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
// refs
const editorRef = useRef<any>(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
config: { envConfig },
} = useApplication();
const { getProjectById } = useProject();
const { areEstimatesActiveForProject } = useEstimate();
const { mentionHighlights, mentionSuggestions } = useMention();
// toast alert
const { setToastAlert } = useToast();
// form info
const {
formState: { errors, isSubmitting, isDirty },
handleSubmit,
reset,
watch,
control,
getValues,
setValue,
setFocus,
} = useForm<TIssue>({
defaultValues: initialData ?? defaultValues,
reValidateMode: "onChange",
});
const issueName = watch("name");
const payload: Partial<TIssue> = {
name: getValues("name"),
state_id: getValues("state_id"),
priority: getValues("priority"),
assignee_ids: getValues("assignee_ids"),
label_ids: getValues("label_ids"),
start_date: getValues("start_date"),
target_date: getValues("target_date"),
project_id: getValues("project_id"),
parent_id: getValues("parent_id"),
cycle_id: getValues("cycle_id"),
module_id: getValues("module_id"),
};
// derived values
const projectDetails = getProjectById(projectId);
useEffect(() => {
if (isDirty) handleFormDirty(payload);
else handleFormDirty(null);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(payload), isDirty]);
const handleCreateUpdateIssue = async (formData: Partial<TIssue>) => {
await handleFormSubmit(formData);
setGptAssistantModal(false);
reset({
...defaultValues,
project_id: projectId,
description_html: "<p></p>",
});
editorRef?.current?.clearEditor();
};
const handleAiAssistance = async (response: string) => {
if (!workspaceSlug || !projectId) return;
setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
editorRef.current?.setEditorValue(`${watch("description_html")}`);
};
const handleAutoGenerateDescription = async () => {
if (!workspaceSlug || !projectId) return;
setIAmFeelingLucky(true);
aiService
.createGptTask(workspaceSlug.toString(), projectId.toString(), {
prompt: issueName,
task: "Generate a proper description for this issue.",
})
.then((res) => {
if (res.response === "")
setToastAlert({
type: "error",
title: "Error!",
message:
"Issue title isn't informative enough to generate the description. Please try with a different title.",
});
else handleAiAssistance(res.response_html);
})
.catch((err) => {
const error = err?.data?.error;
if (err.status === 429)
setToastAlert({
type: "error",
title: "Error!",
message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: error || "Some error occurred. Please try again.",
});
})
.finally(() => setIAmFeelingLucky(false));
};
useEffect(() => {
setFocus("name");
reset({
...defaultValues,
...initialData,
});
}, [setFocus, initialData, reset]);
// update projectId in form when projectId changes
useEffect(() => {
reset({
...getValues(),
project_id: projectId,
});
}, [getValues, projectId, reset]);
const startDate = watch("start_date");
const targetDate = watch("target_date");
const minDate = startDate ? new Date(startDate) : null;
minDate?.setDate(minDate.getDate());
const maxDate = targetDate ? new Date(targetDate) : null;
maxDate?.setDate(maxDate.getDate());
return (
<>
{projectId && (
<>
<CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
onSuccess={(response) => setValue("label_ids", [...watch("label_ids"), response.id])}
/>
</>
)}
<form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
<div className="space-y-5">
<div className="flex items-center gap-x-2">
{(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && !status && (
<Controller
control={control}
name="project_id"
rules={{
required: true,
}}
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectDropdown
value={value}
onChange={(val) => {
onChange(val);
setActiveProject(val);
}}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
<h3 className="text-xl font-semibold leading-6 text-custom-text-100">
{status ? "Update" : "Create"} Issue
</h3>
</div>
{watch("parent_id") &&
(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
selectedParentIssue && (
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
<div className="flex items-center gap-2">
<span
className="block h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: selectedParentIssue.state__color,
}}
/>
<span className="flex-shrink-0 text-custom-text-200">
{selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
</span>
<span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
<X
className="h-3 w-3 cursor-pointer"
onClick={() => {
setValue("parent_id", null);
setSelectedParentIssue(null);
}}
/>
</div>
</div>
)}
<div className="space-y-3">
<div className="mt-2 space-y-3">
{(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
<div>
<Controller
control={control}
name="name"
rules={{
required: "Title is required",
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Issue Title"
className="w-full resize-none text-xl focus:border-blue-400"
/>
)}
/>
</div>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
<div className="relative">
<div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex rounded bg-custom-background-80">
{issueName && issueName !== "" && (
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
{iAmFeelingLucky ? (
"Generating response..."
) : (
<>
<Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
</>
)}
</button>
)}
{envConfig?.has_openai_configured && (
<GptAssistantPopover
isOpen={gptAssistantModal}
projectId={projectId}
handleClose={() => {
setGptAssistantModal((prevData) => !prevData);
// this is done so that the title do not reset after gpt popover closed
reset(getValues());
}}
onResponse={(response) => {
handleAiAssistance(response);
}}
placement="top-end"
button={
<button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
onClick={() => setGptAssistantModal((prevData) => !prevData)}
>
<Sparkle className="h-4 w-4" />
AI
</button>
}
/>
)}
</div>
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={
!value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
? watch("description_html")
: value
}
customClassName="min-h-[7rem] border-custom-border-100"
onChange={(description: Object, description_html: string) => {
onChange(description_html);
}}
mentionHighlights={mentionHighlights}
mentionSuggestions={mentionSuggestions}
/>
)}
/>
</div>
)}
<div className="flex flex-wrap items-center gap-2">
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
<Controller
control={control}
name="state_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<StateDropdown
value={value}
onChange={onChange}
projectId={projectId}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
<Controller
control={control}
name="priority"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<PriorityDropdown value={value} onChange={onChange} buttonVariant="border-with-text" />
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
<Controller
control={control}
name="assignee_ids"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectMemberDropdown
projectId={projectId}
value={value}
onChange={onChange}
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
placeholder="Assignees"
multiple
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
<Controller
control={control}
name="label_ids"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<IssueLabelSelect
setIsOpen={setLabelModal}
value={value}
onChange={onChange}
projectId={projectId}
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Start date"
maxDate={maxDate ?? undefined}
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
<div>
<Controller
control={control}
name="target_date"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Due date"
minDate={minDate ?? undefined}
/>
</div>
)}
/>
</div>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
<Controller
control={control}
name="cycle_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<CycleDropdown
projectId={projectId}
onChange={onChange}
value={value}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
<Controller
control={control}
name="module_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ModuleDropdown
projectId={projectId}
value={value}
onChange={onChange}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
areEstimatesActiveForProject(projectId) && (
<Controller
control={control}
name="estimate_point"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<EstimateDropdown
value={value}
onChange={onChange}
projectId={projectId}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<>
{watch("parent_id") ? (
<CustomMenu
customButton={
<button
type="button"
className="h-7 flex items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80"
>
<div className="flex items-center gap-1 text-custom-text-200">
<LayoutPanelTop className="h-2.5 w-2.5 flex-shrink-0" />
<span className="whitespace-nowrap">
{selectedParentIssue &&
`${selectedParentIssue.project__identifier}-
${selectedParentIssue.sequence_id}`}
</span>
</div>
</button>
}
placement="bottom-start"
>
<CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent_id", null)}>
Remove parent issue
</CustomMenu.MenuItem>
</CustomMenu>
) : (
<button
type="button"
className="h-7 flex items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80"
onClick={() => setParentIssueListModalOpen(true)}
>
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add parent</span>
</button>
)}
<Controller
control={control}
name="parent_id"
render={({ field: { onChange } }) => (
<ParentIssuesListModal
isOpen={parentIssueListModalOpen}
handleClose={() => setParentIssueListModalOpen(false)}
onChange={(issue) => {
onChange(issue.id);
setSelectedParentIssue(issue);
}}
projectId={projectId}
/>
)}
/>
</>
)}
</div>
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
{!status && (
<div
className="flex cursor-default items-center gap-1.5"
onClick={() => setCreateMore((prevData) => !prevData)}
>
<div className="flex cursor-pointer items-center justify-center">
<ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
</div>
<span className="text-xs">Create more</span>
</div>
)}
<div className="ml-auto flex items-center gap-2">
<Button
variant="neutral-primary"
size="sm"
onClick={() => {
handleDiscardClose();
}}
>
Discard
</Button>
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
{status
? isSubmitting
? "Updating Issue..."
: "Update Issue"
: isSubmitting
? "Adding Issue..."
: "Add Issue"}
</Button>
</div>
</div>
</form>
</>
);
});

3
web/components/issues/index.ts
View File

@ -1,15 +1,14 @@
export * from "./attachment";
export * from "./comment";
export * from "./issue-modal";
export * from "./sidebar-select";
export * from "./view-select";
export * from "./activity";
export * from "./delete-issue-modal";
export * from "./description-form";
export * from "./form";
export * from "./issue-layouts";
export * from "./peek-overview";
export * from "./main-content";
export * from "./modal";
export * from "./parent-issues-list-modal";
export * from "./sidebar";
export * from "./label";

10
web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View File

@ -2,9 +2,8 @@ import React, { FC } from "react";
import { useRouter } from "next/router";
// components
import { CustomMenu } from "@plane/ui";
import { CreateUpdateIssueModal } from "components/issues/modal";
import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
import { ExistingIssuesListModal } from "components/core";
import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/issues";
// lucide icons
import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
// hooks
@ -85,12 +84,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
fieldsToShow={["all"]}
/>
) : (
<CreateUpdateIssueModal
isOpen={isOpen}
handleClose={() => setIsOpen(false)}
prePopulateData={issuePayload}
currentStore={currentStore}
/>
<CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
)}
{renderExistingIssueModal && (
<ExistingIssuesListModal

10
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View File

@ -2,8 +2,7 @@ import { useRouter } from "next/router";
// lucide icons
import { CircleDashed, Plus } from "lucide-react";
// components
import { CreateUpdateDraftIssueModal } from "components/issues/draft-issue-modal";
import { CreateUpdateIssueModal } from "components/issues/modal";
import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/issues";
import { ExistingIssuesListModal } from "components/core";
import { CustomMenu } from "@plane/ui";
// mobx
@ -102,12 +101,7 @@ export const HeaderGroupByCard = observer(
fieldsToShow={["all"]}
/>
) : (
<CreateUpdateIssueModal
isOpen={isOpen}
handleClose={() => setIsOpen(false)}
currentStore={currentStore}
prePopulateData={issuePayload}
/>
<CreateUpdateIssueModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
)}
{renderExistingIssueModal && (

29
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View File

@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
import { EIssuesStoreType } from "constants/issue";
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, customActionButton } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// toast alert
const { setToastAlert } = useToast();
const handleCopyIssueLink = () => {
@ -36,6 +34,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
);
};
const duplicateIssuePayload = {
...issue,
name: `${issue.name} (copy)`,
};
delete duplicateIssuePayload.id;
return (
<>
<DeleteIssueModal
@ -46,17 +50,14 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
/>
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal}
handleClose={() => {
onClose={() => {
setCreateUpdateIssueModal(false);
setIssueToEdit(null);
setIssueToEdit(undefined);
}}
// pre-populate date only if not editing
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
data={issueToEdit}
data={issueToEdit ?? duplicateIssuePayload}
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EIssuesStoreType.PROJECT}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem

29
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
import { EIssuesStoreType } from "constants/issue";
export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
const router = useRouter();
const { workspaceSlug, cycleId } = router.query;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, cycleId } = router.query;
// toast alert
const { setToastAlert } = useToast();
const handleCopyIssueLink = () => {
@ -36,6 +34,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
);
};
const duplicateIssuePayload = {
...issue,
name: `${issue.name} (copy)`,
};
delete duplicateIssuePayload.id;
return (
<>
<DeleteIssueModal
@ -46,17 +50,14 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
/>
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal}
handleClose={() => {
onClose={() => {
setCreateUpdateIssueModal(false);
setIssueToEdit(null);
setIssueToEdit(undefined);
}}
// pre-populate date only if not editing
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
data={issueToEdit}
data={issueToEdit ?? duplicateIssuePayload}
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EIssuesStoreType.CYCLE}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem

29
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -11,19 +11,17 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
import { EIssuesStoreType } from "constants/issue";
export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
const router = useRouter();
const { workspaceSlug, moduleId } = router.query;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, moduleId } = router.query;
// toast alert
const { setToastAlert } = useToast();
const handleCopyIssueLink = () => {
@ -36,6 +34,12 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
);
};
const duplicateIssuePayload = {
...issue,
name: `${issue.name} (copy)`,
};
delete duplicateIssuePayload.id;
return (
<>
<DeleteIssueModal
@ -46,17 +50,14 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
/>
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal}
handleClose={() => {
onClose={() => {
setCreateUpdateIssueModal(false);
setIssueToEdit(null);
setIssueToEdit(undefined);
}}
// pre-populate date only if not editing
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
data={issueToEdit}
data={issueToEdit ?? duplicateIssuePayload}
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EIssuesStoreType.MODULE}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem

20
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -14,7 +14,6 @@ import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
// constant
import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, customActionButton } = props;
@ -23,7 +22,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
const { workspaceSlug } = router.query;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | null>(null);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// store hooks
const {
@ -44,6 +43,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
);
};
const duplicateIssuePayload = {
...issue,
name: `${issue.name} (copy)`,
};
delete duplicateIssuePayload.id;
return (
<>
<DeleteIssueModal
@ -54,17 +59,14 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
/>
<CreateUpdateIssueModal
isOpen={createUpdateIssueModal}
handleClose={() => {
onClose={() => {
setCreateUpdateIssueModal(false);
setIssueToEdit(null);
setIssueToEdit(undefined);
}}
// pre-populate date only if not editing
prePopulateData={!issueToEdit && createUpdateIssueModal ? { ...issue, name: `${issue.name} (copy)` } : {}}
data={issueToEdit}
data={issueToEdit ?? duplicateIssuePayload}
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EIssuesStoreType.PROJECT}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu.MenuItem

82
web/components/issues/issue-modal/draft-issue-layout.tsx Normal file
View File

@ -0,0 +1,82 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import useToast from "hooks/use-toast";
// services
import { IssueDraftService } from "services/issue";
// components
import { IssueFormRoot } from "components/issues/issue-modal/form";
import { ConfirmIssueDiscard } from "components/issues";
// types
import type { TIssue } from "@plane/types";
export interface DraftIssueProps {
changesMade: Partial<TIssue> | null;
data?: Partial<TIssue>;
onChange: (formData: Partial<TIssue> | null) => void;
onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
onSubmit: (formData: Partial<TIssue>) => Promise<void>;
projectId: string;
}
const issueDraftService = new IssueDraftService();
export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
const { changesMade, data, onChange, onClose, onSubmit, projectId } = props;
// states
const [issueDiscardModal, setIssueDiscardModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// toast alert
const { setToastAlert } = useToast();
const handleClose = () => {
if (changesMade) setIssueDiscardModal(true);
else onClose(false);
};
const handleCreateDraftIssue = async () => {
if (!changesMade || !workspaceSlug || !projectId) return;
const payload = { ...changesMade };
await issueDraftService
.createDraftIssue(workspaceSlug.toString(), projectId.toString(), payload)
.then(() => {
setToastAlert({
type: "success",
title: "Success!",
message: "Draft Issue created successfully.",
});
onChange(null);
setIssueDiscardModal(false);
onClose(false);
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
})
);
};
return (
<>
<ConfirmIssueDiscard
isOpen={issueDiscardModal}
handleClose={() => setIssueDiscardModal(false)}
onConfirm={handleCreateDraftIssue}
onDiscard={() => {
onChange(null);
setIssueDiscardModal(false);
onClose(false);
}}
/>
<IssueFormRoot data={data} onChange={onChange} onClose={handleClose} onSubmit={onSubmit} projectId={projectId} />
</>
);
});

599
web/components/issues/issue-modal/form.tsx Normal file
View File

@ -0,0 +1,599 @@
import React, { FC, useState, useRef } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// editor
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
// hooks
import { useApplication, useEstimate, useMention, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
// services
import { AIService } from "services/ai.service";
import { FileService } from "services/file.service";
// components
import { GptAssistantPopover } from "components/core";
import { ParentIssuesListModal } from "components/issues";
import { IssueLabelSelect } from "components/issues/select";
import { CreateLabelModal } from "components/labels";
import {
CycleDropdown,
DateDropdown,
EstimateDropdown,
ModuleDropdown,
PriorityDropdown,
ProjectDropdown,
ProjectMemberDropdown,
StateDropdown,
} from "components/dropdowns";
// ui
import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
// helpers
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
// types
import type { TIssue, ISearchIssueResponse } from "@plane/types";
const defaultValues: Partial<TIssue> = {
project_id: "",
name: "",
description_html: "",
estimate_point: null,
state_id: "",
parent_id: null,
priority: "none",
assignee_ids: [],
label_ids: [],
cycle_id: null,
module_id: null,
start_date: null,
target_date: null,
};
export interface IssueFormProps {
data?: Partial<TIssue>;
onChange?: (formData: Partial<TIssue> | null) => void;
onClose: () => void;
onSubmit: (values: Partial<TIssue>) => Promise<void>;
projectId: string;
}
// services
const aiService = new AIService();
const fileService = new FileService();
export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const { data, onChange, onClose, onSubmit, projectId } = props;
// states
const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
const [createMore, setCreateMore] = useState(false);
// refs
const editorRef = useRef<any>(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// store hooks
const {
config: { envConfig },
} = useApplication();
const { getProjectById } = useProject();
const { areEstimatesEnabledForProject } = useEstimate();
const { mentionHighlights, mentionSuggestions } = useMention();
// toast alert
const { setToastAlert } = useToast();
// form info
const {
formState: { errors, isDirty, isSubmitting },
handleSubmit,
reset,
watch,
control,
getValues,
setValue,
} = useForm<TIssue>({
defaultValues: { ...defaultValues, project_id: projectId, ...data },
reValidateMode: "onChange",
});
const issueName = watch("name");
const handleFormSubmit = async (formData: Partial<TIssue>) => {
await onSubmit(formData);
setGptAssistantModal(false);
reset({
...defaultValues,
project_id: getValues("project_id"),
});
editorRef?.current?.clearEditor();
};
const handleAiAssistance = async (response: string) => {
if (!workspaceSlug || !projectId) return;
setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
editorRef.current?.setEditorValue(`${watch("description_html")}`);
};
const handleAutoGenerateDescription = async () => {
if (!workspaceSlug || !projectId) return;
setIAmFeelingLucky(true);
aiService
.createGptTask(workspaceSlug.toString(), projectId.toString(), {
prompt: issueName,
task: "Generate a proper description for this issue.",
})
.then((res) => {
if (res.response === "")
setToastAlert({
type: "error",
title: "Error!",
message:
"Issue title isn't informative enough to generate the description. Please try with a different title.",
});
else handleAiAssistance(res.response_html);
})
.catch((err) => {
const error = err?.data?.error;
if (err.status === 429)
setToastAlert({
type: "error",
title: "Error!",
message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
});
else
setToastAlert({
type: "error",
title: "Error!",
message: error || "Some error occurred. Please try again.",
});
})
.finally(() => setIAmFeelingLucky(false));
};
const handleFormChange = () => {
if (!onChange) return;
if (isDirty) onChange(watch());
else onChange(null);
};
const startDate = watch("start_date");
const targetDate = watch("target_date");
const minDate = startDate ? new Date(startDate) : null;
minDate?.setDate(minDate.getDate());
const maxDate = targetDate ? new Date(targetDate) : null;
maxDate?.setDate(maxDate.getDate());
const projectDetails = getProjectById(projectId);
return (
<>
{projectId && (
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
onSuccess={(response) => {
setValue("label_ids", [...watch("label_ids"), response.id]);
handleFormChange();
}}
/>
)}
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-5">
<div className="flex items-center gap-x-2">
{/* Don't show project selection if editing an issue */}
{!data?.id && (
<Controller
control={control}
name="project_id"
rules={{
required: true,
}}
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectDropdown
value={value}
onChange={(projectId) => {
onChange(projectId);
handleFormChange();
}}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
<h3 className="text-xl font-semibold leading-6 text-custom-text-100">
{data?.id ? "Update" : "Create"} issue
</h3>
</div>
{watch("parent_id") && selectedParentIssue && (
<div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-custom-background-80 p-2 text-xs">
<div className="flex items-center gap-2">
<span
className="block h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: selectedParentIssue.state__color,
}}
/>
<span className="flex-shrink-0 text-custom-text-200">
{selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
</span>
<span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
<X
className="h-3 w-3 cursor-pointer"
onClick={() => {
setValue("parent_id", null);
handleFormChange();
setSelectedParentIssue(null);
}}
/>
</div>
</div>
)}
<div className="space-y-3">
<div className="mt-2 space-y-3">
<Controller
control={control}
name="name"
rules={{
required: "Title is required",
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={(e) => {
onChange(e.target.value);
handleFormChange();
}}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Issue Title"
className="resize-none text-xl w-full"
/>
)}
/>
<div className="relative">
<div className="absolute bottom-3.5 right-3.5 z-10 border-0.5 flex items-center gap-2">
{issueName && issueName.trim() !== "" && (
<button
type="button"
className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80 ${
iAmFeelingLucky ? "cursor-wait" : ""
}`}
onClick={handleAutoGenerateDescription}
disabled={iAmFeelingLucky}
>
{iAmFeelingLucky ? (
"Generating response"
) : (
<>
<Sparkle className="h-3.5 w-3.5" />I{"'"}m feeling lucky
</>
)}
</button>
)}
{envConfig?.has_openai_configured && (
<GptAssistantPopover
isOpen={gptAssistantModal}
projectId={projectId}
handleClose={() => {
setGptAssistantModal((prevData) => !prevData);
// this is done so that the title do not reset after gpt popover closed
reset(getValues());
}}
onResponse={(response) => {
handleAiAssistance(response);
}}
placement="top-end"
button={
<button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
onClick={() => setGptAssistantModal((prevData) => !prevData)}
>
<Sparkle className="h-4 w-4" />
AI
</button>
}
/>
)}
</div>
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
restoreFile={fileService.restoreImage}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={
!value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
? watch("description_html")
: value
}
customClassName="min-h-[7rem] border-custom-border-100"
onChange={(description: Object, description_html: string) => {
onChange(description_html);
handleFormChange();
}}
mentionHighlights={mentionHighlights}
mentionSuggestions={mentionSuggestions}
/>
)}
/>
</div>
<div className="flex flex-wrap items-center gap-2">
<Controller
control={control}
name="state_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<StateDropdown
value={value}
onChange={(stateId) => {
onChange(stateId);
handleFormChange();
}}
projectId={projectId}
buttonVariant="border-with-text"
/>
</div>
)}
/>
<Controller
control={control}
name="priority"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<PriorityDropdown
value={value}
onChange={(priority) => {
onChange(priority);
handleFormChange();
}}
buttonVariant="border-with-text"
/>
</div>
)}
/>
<Controller
control={control}
name="assignee_ids"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ProjectMemberDropdown
projectId={projectId}
value={value}
onChange={(assigneeIds) => {
onChange(assigneeIds);
handleFormChange();
}}
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
placeholder="Assignees"
multiple
/>
</div>
)}
/>
<Controller
control={control}
name="label_ids"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<IssueLabelSelect
setIsOpen={setLabelModal}
value={value}
onChange={(labelIds) => {
onChange(labelIds);
handleFormChange();
}}
projectId={projectId}
/>
</div>
)}
/>
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => {
onChange(date ? renderFormattedPayloadDate(date) : null);
handleFormChange();
}}
buttonVariant="border-with-text"
placeholder="Start date"
maxDate={maxDate ?? undefined}
/>
</div>
)}
/>
<Controller
control={control}
name="target_date"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => {
onChange(date ? renderFormattedPayloadDate(date) : null);
handleFormChange();
}}
buttonVariant="border-with-text"
placeholder="Due date"
minDate={minDate ?? undefined}
/>
</div>
)}
/>
{projectDetails?.cycle_view && (
<Controller
control={control}
name="cycle_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<CycleDropdown
projectId={projectId}
onChange={(cycleId) => {
onChange(cycleId);
handleFormChange();
}}
value={value}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{projectDetails?.module_view && (
<Controller
control={control}
name="module_id"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<ModuleDropdown
projectId={projectId}
value={value}
onChange={(moduleId) => {
onChange(moduleId);
handleFormChange();
}}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
{areEstimatesEnabledForProject(projectId) && (
<Controller
control={control}
name="estimate_point"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<EstimateDropdown
value={value}
onChange={(estimatePoint) => {
onChange(estimatePoint);
handleFormChange();
}}
projectId={projectId}
buttonVariant="border-with-text"
/>
</div>
)}
/>
)}
<CustomMenu
customButton={
<button
type="button"
className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
>
{watch("parent_id") ? (
<div className="flex items-center gap-1 text-custom-text-200">
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">
{selectedParentIssue &&
`${selectedParentIssue.project__identifier}-
${selectedParentIssue.sequence_id}`}
</span>
</div>
) : (
<div className="flex items-center gap-1 text-custom-text-300">
<LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
<span className="whitespace-nowrap">Add parent</span>
</div>
)}
</button>
}
placement="bottom-start"
>
{watch("parent_id") ? (
<>
<CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
className="!p-1"
onClick={() => {
setValue("parent_id", null);
handleFormChange();
}}
>
Remove parent issue
</CustomMenu.MenuItem>
</>
) : (
<CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
Select parent Issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
<Controller
control={control}
name="parent_id"
render={({ field: { onChange } }) => (
<ParentIssuesListModal
isOpen={parentIssueListModalOpen}
handleClose={() => setParentIssueListModalOpen(false)}
onChange={(issue) => {
onChange(issue.id);
handleFormChange();
setSelectedParentIssue(issue);
}}
projectId={projectId}
/>
)}
/>
</div>
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-100 px-5 pt-5">
<div
className="flex cursor-default items-center gap-1.5"
onClick={() => setCreateMore((prevData) => !prevData)}
>
<div className="flex cursor-pointer items-center justify-center">
<ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
</div>
<span className="text-xs">Create more</span>
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose}>
Discard
</Button>
<Button type="submit" variant="primary" size="sm" loading={isSubmitting}>
{data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
</Button>
</div>
</div>
</form>
</>
);
});

3
web/components/issues/issue-modal/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./draft-issue-layout";
export * from "./form";
export * from "./modal";

188
web/components/issues/issue-modal/modal.tsx Normal file
View File

@ -0,0 +1,188 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Dialog, Transition } from "@headlessui/react";
// hooks
import { useIssues, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
import useLocalStorage from "hooks/use-local-storage";
// components
import { DraftIssueLayout } from "./draft-issue-layout";
import { IssueFormRoot } from "./form";
// types
import type { TIssue } from "@plane/types";
// constants
import { EIssuesStoreType } from "constants/issue";
export interface IssuesModalProps {
data?: Partial<TIssue>;
isOpen: boolean;
onClose: () => void;
onSubmit?: (res: Partial<TIssue>) => Promise<void>;
withDraftIssueWrapper?: boolean;
}
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true } = props;
// states
const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
const { workspaceProjectIds } = useProject();
const {
issues: { createIssue, updateIssue },
} = useIssues(EIssuesStoreType.PROJECT);
const {
issues: { addIssueToCycle },
} = useIssues(EIssuesStoreType.CYCLE);
const {
issues: { addIssueToModule },
} = useIssues(EIssuesStoreType.MODULE);
// toast alert
const { setToastAlert } = useToast();
// local storage
const { setValue: setLocalStorageDraftIssue } = useLocalStorage<any>("draftedIssue", {});
const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
if (changesMade && saveDraftIssueInLocalStorage) {
const draftIssue = JSON.stringify(changesMade);
setLocalStorageDraftIssue(draftIssue);
}
onClose();
};
const handleCreateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
if (!workspaceSlug || !payload.project_id) return null;
await createIssue(workspaceSlug.toString(), payload.project_id, payload)
.then(async (res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
handleClose();
return res;
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
});
return null;
};
const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | null> => {
if (!workspaceSlug || !payload.project_id || !data?.id) return null;
await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
.then((res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
handleClose();
return { ...payload, ...res };
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be updated. Please try again.",
});
});
return null;
};
const handleFormSubmit = async (formData: Partial<TIssue>) => {
if (!workspaceSlug || !formData.project_id) return;
const payload: Partial<TIssue> = {
...formData,
description_html: formData.description_html ?? "<p></p>",
};
let res: TIssue | null = null;
if (!data?.id) res = await handleCreateIssue(payload);
else res = await handleUpdateIssue(payload);
// add issue to cycle if cycle is selected, and cycle is different from current cycle
if (formData.cycle_id && res && (!data?.id || formData.cycle_id !== data?.cycle_id))
await addIssueToCycle(workspaceSlug.toString(), formData.project_id, formData.cycle_id, [res.id]);
// add issue to module if module is selected, and module is different from current module
if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
if (res && onSubmit) await onSubmit(res);
};
const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);
// don't open the modal if there are no projects
if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
// if project id is present in the router query, use that as the selected project id, otherwise use the first project id
const selectedProjectId = projectId ? projectId.toString() : workspaceProjectIds[0];
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={() => handleClose(true)}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full mx-4 sm:max-w-4xl">
{withDraftIssueWrapper ? (
<DraftIssueLayout
changesMade={changesMade}
data={data}
onChange={handleFormChange}
onClose={handleClose}
onSubmit={handleFormSubmit}
projectId={selectedProjectId}
/>
) : (
<IssueFormRoot
data={data}
onClose={() => handleClose(false)}
onSubmit={handleFormSubmit}
projectId={selectedProjectId}
/>
)}
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
});

448
web/components/issues/modal.tsx
View File

@ -1,448 +0,0 @@
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
import { Dialog, Transition } from "@headlessui/react";
// hooks
import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
import useLocalStorage from "hooks/use-local-storage";
// services
import { IssueDraftService } from "services/issue";
// components
import { IssueForm, ConfirmIssueDiscard } from "components/issues";
// types
import type { TIssue } from "@plane/types";
// fetch-keys
import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
export interface IssuesModalProps {
data?: TIssue | null;
handleClose: () => void;
isOpen: boolean;
prePopulateData?: Partial<TIssue>;
fieldsToShow?: (
| "project"
| "name"
| "description"
| "state"
| "priority"
| "assignee"
| "label"
| "startDate"
| "dueDate"
| "estimate"
| "parent"
| "all"
| "module"
| "cycle"
)[];
onSubmit?: (data: Partial<TIssue>) => Promise<void>;
handleSubmit?: (data: Partial<TIssue>) => Promise<void>;
currentStore?: TCreateModalStoreTypes;
}
const issueDraftService = new IssueDraftService();
export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
const {
data,
handleClose,
isOpen,
prePopulateData: prePopulateDataProps,
fieldsToShow = ["all"],
onSubmit,
handleSubmit,
currentStore = EIssuesStoreType.PROJECT,
} = props;
// states
const [createMore, setCreateMore] = useState(false);
const [formDirtyState, setFormDirtyState] = useState<any>(null);
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
const [activeProject, setActiveProject] = useState<string | null>(null);
const [prePopulateData, setPreloadedData] = useState<Partial<TIssue>>({});
// router
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
workspaceSlug: string;
projectId: string | undefined;
cycleId: string | undefined;
moduleId: string | undefined;
};
// store hooks
const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
const { issues: moduleIssues } = useIssues(EIssuesStoreType.MODULE);
const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
const {
eventTracker: { postHogEventTracker },
} = useApplication();
const { currentUser } = useUser();
const { currentWorkspace } = useWorkspace();
const { workspaceProjectIds } = useProject();
const { fetchCycleDetails } = useCycle();
const { fetchModuleDetails } = useModule();
const issueStores = {
[EIssuesStoreType.PROJECT]: {
store: projectIssues,
dataIdToUpdate: activeProject,
viewId: undefined,
},
[EIssuesStoreType.PROJECT_VIEW]: {
store: viewIssues,
dataIdToUpdate: activeProject,
viewId: undefined,
},
[EIssuesStoreType.PROFILE]: {
store: profileIssues,
dataIdToUpdate: currentUser?.id || undefined,
viewId: undefined,
},
[EIssuesStoreType.CYCLE]: {
store: cycleIssues,
dataIdToUpdate: activeProject,
viewId: cycleId,
},
[EIssuesStoreType.MODULE]: {
store: moduleIssues,
dataIdToUpdate: activeProject,
viewId: moduleId,
},
};
const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[currentStore];
const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
"draftedIssue",
{}
);
const { setToastAlert } = useToast();
useEffect(() => {
setPreloadedData(prePopulateDataProps ?? {});
if (cycleId && !prePopulateDataProps?.cycle_id) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
cycle_id: cycleId.toString(),
}));
}
if (moduleId && !prePopulateDataProps?.module_id) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
module_id: moduleId.toString(),
}));
}
if (
(router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
!prePopulateDataProps?.assignee_ids
) {
setPreloadedData((prevData) => ({
...(prevData ?? {}),
...prePopulateDataProps,
assignees: prePopulateDataProps?.assignee_ids ?? [currentUser?.id ?? ""],
}));
}
}, [prePopulateDataProps, cycleId, moduleId, router.asPath, currentUser?.id]);
/**
*
* @description This function is used to close the modals. This function will show a confirm discard modal if the form is dirty.
* @returns void
*/
const onClose = () => {
if (!showConfirmDiscard) handleClose();
if (formDirtyState === null) return setActiveProject(null);
const data = JSON.stringify(formDirtyState);
setValueInLocalStorage(data);
};
/**
* @description This function is used to close the modals. This function is to be used when the form is submitted,
* meaning we don't need to show the confirm discard modal or store the form data in local storage.
*/
const onFormSubmitClose = () => {
setFormDirtyState(null);
handleClose();
};
/**
* @description This function is used to close the modals. This function is to be used when we click outside the modal,
* meaning we don't need to show the confirm discard modal but will store the form data in local storage.
* Use this function when you want to store the form data in local storage.
*/
const onDiscardClose = () => {
if (formDirtyState !== null && formDirtyState.name.trim() !== "") {
setShowConfirmDiscard(true);
} else {
handleClose();
setActiveProject(null);
}
};
const handleFormDirty = (data: any) => {
setFormDirtyState(data);
};
useEffect(() => {
// if modal is closed, reset active project to null
// and return to avoid activeProject being set to some other project
if (!isOpen) {
setActiveProject(null);
return;
}
// if data is present, set active project to the project of the
// issue. This has more priority than the project in the url.
if (data && data.project_id) {
setActiveProject(data.project_id);
return;
}
// if data is not present, set active project to the project
// in the url. This has the least priority.
if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
}, [data, projectId, workspaceProjectIds, isOpen, activeProject]);
const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
if (!workspaceSlug || !activeProject) return;
await cycleIssues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]);
fetchCycleDetails(workspaceSlug, activeProject, cycleId);
};
const addIssueToModule = async (issue: TIssue, moduleId: string) => {
if (!workspaceSlug || !activeProject) return;
await moduleIssues.addIssueToModule(workspaceSlug, activeProject, moduleId, [issue.id]);
fetchModuleDetails(workspaceSlug, activeProject, moduleId);
};
const createIssue = async (payload: Partial<TIssue>) => {
if (!workspaceSlug || !dataIdToUpdate) return;
await currentIssueStore
.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId)
.then(async (res) => {
if (!res) throw new Error();
if (handleSubmit) {
await handleSubmit(res);
} else {
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
if (payload.cycle_id && payload.cycle_id !== "") await addIssueToCycle(res, payload.cycle_id);
if (payload.module_id && payload.module_id !== "") await addIssueToModule(res, payload.module_id);
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
postHogEventTracker(
"ISSUE_CREATED",
{
...res,
state: "SUCCESS",
},
{
isGrouping: true,
groupType: "Workspace_metrics",
groupId: currentWorkspace?.id!,
}
);
if (payload.parent_id && payload.parent_id !== "") mutate(SUB_ISSUES(payload.parent_id));
}
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: err.detail ?? "Issue could not be created. Please try again.",
});
postHogEventTracker(
"ISSUE_CREATED",
{
state: "FAILED",
},
{
isGrouping: true,
groupType: "Workspace_metrics",
groupId: currentWorkspace?.id!,
}
);
});
if (!createMore) onFormSubmitClose();
};
const createDraftIssue = async () => {
if (!workspaceSlug || !activeProject || !currentUser) return;
const payload: Partial<TIssue> = {
...formDirtyState,
};
await issueDraftService
.createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
.then(() => {
setToastAlert({
type: "success",
title: "Success!",
message: "Draft Issue created successfully.",
});
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
if (payload.assignee_ids?.some((assignee) => assignee === currentUser?.id))
mutate(USER_ISSUE(workspaceSlug as string));
if (payload.parent_id && payload.parent_id !== "") mutate(SUB_ISSUES(payload.parent_id));
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: err.detail ?? "Issue could not be created. Please try again.",
});
});
};
const updateIssue = async (payload: Partial<TIssue>) => {
if (!workspaceSlug || !dataIdToUpdate || !data) return;
await currentIssueStore
.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId)
.then((res) => {
if (!createMore) onFormSubmitClose();
setToastAlert({
type: "success",
title: "Success!",
message: "Issue updated successfully.",
});
postHogEventTracker(
"ISSUE_UPDATED",
{
...res,
state: "SUCCESS",
},
{
isGrouping: true,
groupType: "Workspace_metrics",
groupId: currentWorkspace?.id!,
}
);
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: err.detail ?? "Issue could not be updated. Please try again.",
});
postHogEventTracker(
"ISSUE_UPDATED",
{
state: "FAILED",
},
{
isGrouping: true,
groupType: "Workspace_metrics",
groupId: currentWorkspace?.id!,
}
);
});
};
const handleFormSubmit = async (formData: Partial<TIssue>) => {
if (!workspaceSlug || !dataIdToUpdate || !currentStore) return;
const payload: Partial<TIssue> = {
...formData,
description_html: formData.description_html ?? "<p></p>",
};
if (!data) await createIssue(payload);
else await updateIssue(payload);
if (onSubmit) await onSubmit(payload);
};
if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
return (
<>
<ConfirmIssueDiscard
isOpen={showConfirmDiscard}
handleClose={() => setShowConfirmDiscard(false)}
onConfirm={createDraftIssue}
onDiscard={() => {
handleClose();
setActiveProject(null);
setFormDirtyState(null);
setShowConfirmDiscard(false);
clearLocalStorageValue();
}}
/>
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative mx-4 transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-4xl">
<IssueForm
handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleDiscardClose={onDiscardClose}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
fieldsToShow={fieldsToShow}
handleFormDirty={handleFormDirty}
/>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
</>
);
});

8
web/components/issues/sub-issues/root.tsx
View File

@ -320,10 +320,10 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
{isEditable && issueCrudOperation?.create?.toggle && (
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.create?.toggle}
prePopulateData={{
data={{
parent_id: issueCrudOperation?.create?.issueId,
}}
handleClose={() => {
onClose={() => {
mutateSubIssues(issueCrudOperation?.create?.issueId);
handleIssueCrudOperation("create", null);
}}
@ -342,11 +342,11 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
<>
<CreateUpdateIssueModal
isOpen={issueCrudOperation?.edit?.toggle}
handleClose={() => {
onClose={() => {
mutateSubIssues(issueCrudOperation?.edit?.issueId);
handleIssueCrudOperation("edit", null, null);
}}
data={issueCrudOperation?.edit?.issue}
data={issueCrudOperation?.edit?.issue ?? undefined}
/>
</>
)}

6
web/store/estimate.store.ts
View File

@ -14,7 +14,7 @@ export interface IEstimateStore {
projectEstimates: IEstimate[] | null;
activeEstimateDetails: IEstimate | null;
// computed actions
areEstimatesActiveForProject: (projectId: string) => boolean;
areEstimatesEnabledForProject: (projectId: string) => boolean;
getEstimatePointValue: (estimateKey: number | null) => string;
getProjectEstimateById: (estimateId: string) => IEstimate | null;
getProjectActiveEstimateDetails: (projectId: string) => IEstimate | null;
@ -48,7 +48,7 @@ export class EstimateStore implements IEstimateStore {
projectEstimates: computed,
activeEstimateDetails: computed,
// computed actions
areEstimatesActiveForProject: action,
areEstimatesEnabledForProject: action,
getProjectEstimateById: action,
getEstimatePointValue: action,
getProjectActiveEstimateDetails: action,
@ -96,7 +96,7 @@ export class EstimateStore implements IEstimateStore {
* @description returns true if estimates are enabled for a project using project id
* @param projectId
*/
areEstimatesActiveForProject = (projectId: string) => {
areEstimatesEnabledForProject = (projectId: string) => {
const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
if (!projectDetails) return false;
return Boolean(projectDetails.estimate) ?? false;