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: updated issue title and description components (#3687)

Browse Source 
* fix: issue description fixes

* chore: description html in the archive issue

* chore: changed retrieve viewset

* chore: implemented new issue title description components in inbox, issue-detail and fixed issue in archived store

* chore: removed consoles and empty description update in issue detail

* fix: draft issue empty state image

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
This commit is contained in:
guru_sainath 2024-02-16 20:07:04 +05:30 committed by GitHub
parent 665a07f15a
commit a94c607031
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 289 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apiserver/plane/app/views/issue.py
View File

@ -1209,13 +1209,13 @@ class IssueArchiveViewSet(BaseViewSet):
return Response(issues, status=status.HTTP_200_OK)
def retrieve(self, request, slug, project_id, pk=None):
issue = Issue.objects.get(
workspace__slug=slug,
project_id=project_id,
archived_at__isnull=False,
pk=pk,
issue = self.get_queryset().filter(pk=pk).first()
return Response(
IssueDetailSerializer(
issue, fields=self.fields, expand=self.expand
).data,
status=status.HTTP_200_OK,
)
return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
def unarchive(self, request, slug, project_id, pk=None):
issue = Issue.objects.get(

95
web/components/issues/description-input.tsx Normal file
View File

@ -0,0 +1,95 @@
import { FC, useState, useEffect } from "react";
import { observer } from "mobx-react";
// components
import { Loader } from "@plane/ui";
import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
// store hooks
import { useMention, useWorkspace } from "hooks/store";
// services
import { FileService } from "services/file.service";
const fileService = new FileService();
// types
import { TIssueOperations } from "./issue-detail";
// hooks
import useDebounce from "hooks/use-debounce";
import useReloadConfirmations from "hooks/use-reload-confirmation";
export type IssueDescriptionInputProps = {
disabled?: boolean;
value: string | undefined | null;
workspaceSlug: string;
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
issueOperations: TIssueOperations;
projectId: string;
issueId: string;
};
export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
// states
const [descriptionHTML, setDescriptionHTML] = useState(value);
// store hooks
const { mentionHighlights, mentionSuggestions } = useMention();
const workspaceStore = useWorkspace();
// hooks
const { setShowAlert } = useReloadConfirmations();
const debouncedValue = useDebounce(descriptionHTML, 1500);
// computed values
const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
useEffect(() => {
setDescriptionHTML(value);
}, [value]);
useEffect(() => {
if (debouncedValue || debouncedValue === "") {
issueOperations
.update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }, false)
.finally(() => {
setIsSubmitting("saved");
});
}
// DO NOT Add more dependencies here. It will cause multiple requests to be sent.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue]);
if (!descriptionHTML && descriptionHTML !== "") {
return (
<Loader>
<Loader.Item height="150px" />
</Loader>
);
}
if (disabled) {
return (
<RichReadOnlyEditor
value={descriptionHTML}
customClassName="!p-0 !pt-2 text-custom-text-200"
noBorder={disabled}
mentionHighlights={mentionHighlights}
/>
);
}
return (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.getDeleteImageFunction(workspaceId)}
restoreFile={fileService.getRestoreImageFunction(workspaceId)}
value={descriptionHTML}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName="min-h-[150px] shadow-sm"
onChange={(description: Object, description_html: string) => {
setShowAlert(true);
setIsSubmitting("submitting");
setDescriptionHTML(description_html);
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
);
});

23
web/components/issues/issue-detail/inbox/main-content.tsx
View File

@ -3,7 +3,9 @@ import { observer } from "mobx-react-lite";
// hooks
import { useIssueDetail, useProjectState, useUser } from "hooks/store";
// components
import { IssueDescriptionForm, IssueUpdateStatus, TIssueOperations } from "components/issues";
import { IssueUpdateStatus, TIssueOperations } from "components/issues";
import { IssueTitleInput } from "../../title-input";
import { IssueDescriptionInput } from "../../description-input";
import { IssueReaction } from "../reactions";
import { IssueActivity } from "../issue-activity";
import { InboxIssueStatus } from "../../../inbox/inbox-issue-status";
@ -57,15 +59,24 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
<IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
</div>
<IssueDescriptionForm
<IssueTitleInput
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
issue={issue}
issueOperations={issueOperations}
disabled={!is_editable}
value={issue.name}
/>
<IssueDescriptionInput
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
issueOperations={issueOperations}
disabled={!is_editable}
value={issue.description_html}
/>
{currentUser && (

1
web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
View File

@ -81,7 +81,6 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
render={({ field: { value, onChange } }) => (
<LiteTextEditorWithRef
onEnterKeyPress={(e) => {
console.log("yo");
handleSubmit(onSubmit)(e);
}}
cancelUploadImage={fileService.cancelUpload}

23
web/components/issues/issue-detail/main-content.tsx
View File

@ -3,7 +3,9 @@ import { observer } from "mobx-react-lite";
// hooks
import { useIssueDetail, useProjectState, useUser } from "hooks/store";
// components
import { IssueDescriptionForm, IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
import { IssueTitleInput } from "../title-input";
import { IssueDescriptionInput } from "../description-input";
import { IssueParentDetail } from "./parent";
import { IssueReaction } from "./reactions";
import { SubIssuesRoot } from "../sub-issues";
@ -61,15 +63,24 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<IssueUpdateStatus isSubmitting={isSubmitting} issueDetail={issue} />
</div>
<IssueDescriptionForm
<IssueTitleInput
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
issue={issue}
issueOperations={issueOperations}
disabled={!is_editable}
value={issue.name}
/>
<IssueDescriptionInput
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
issueOperations={issueOperations}
disabled={!is_editable}
value={issue.description_html}
/>
{currentUser && (

2
web/components/issues/issue-layouts/empty-states/draft-issues.tsx
View File

@ -42,7 +42,7 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {
const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
const currentLayoutEmptyStateImagePath = getEmptyStateImagePath("empty-filters", activeLayout ?? "list", isLightMode);
const EmptyStateImagePath = getEmptyStateImagePath("draft", "empty-issues", isLightMode);
const EmptyStateImagePath = getEmptyStateImagePath("draft", "draft-issues-empty", isLightMode);
const issueFilterCount = size(
Object.fromEntries(

5
web/components/issues/issue-layouts/list/block.tsx
View File

@ -50,9 +50,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return (
<div
className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
"border border-custom-primary-70 hover:border-custom-primary-70":
peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id,
})}
>
{displayProperties && displayProperties?.key && (

2
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View File

@ -54,7 +54,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
<div className="relative h-full w-full overflow-auto">
<ArchivedIssueListLayout />
</div>
<IssuePeekOverview is_archived />
<IssuePeekOverview is_archived={true} />
</Fragment>
)}
</div>

42
web/components/issues/peek-overview/issue-detail.tsx
View File

@ -1,10 +1,15 @@
import { FC } from "react";
// hooks
import { useIssueDetail, useProject, useUser } from "hooks/store";
// components
import { IssueDescriptionForm, TIssueOperations } from "components/issues";
import { IssueReaction } from "../issue-detail/reactions";
import { FC, useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
// store hooks
import { useIssueDetail, useProject, useUser } from "hooks/store";
// hooks
import useReloadConfirmations from "hooks/use-reload-confirmation";
// components
import { TIssueOperations } from "components/issues";
import { IssueReaction } from "../issue-detail/reactions";
import { IssueTitleInput } from "../title-input";
import { IssueDescriptionInput } from "../description-input";
import { debounce } from "lodash";
interface IPeekOverviewIssueDetails {
workspaceSlug: string;
@ -17,17 +22,18 @@ interface IPeekOverviewIssueDetails {
}
export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
const { workspaceSlug, issueId, issueOperations, disabled, setIsSubmitting } = props;
// store hooks
const { getProjectById } = useProject();
const { currentUser } = useUser();
const {
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
const projectDetails = getProjectById(issue?.project_id);
return (
@ -35,20 +41,28 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
<span className="text-base font-medium text-custom-text-400">
{projectDetails?.identifier}-{issue?.sequence_id}
</span>
<IssueDescriptionForm
<IssueTitleInput
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
isSubmitting={isSubmitting}
issue={issue}
issueOperations={issueOperations}
disabled={disabled}
value={issue.name}
/>
<IssueDescriptionInput
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
setIsSubmitting={(value) => setIsSubmitting(value)}
issueOperations={issueOperations}
disabled={disabled}
value={issue.description_html}
/>
{currentUser && (
<IssueReaction
workspaceSlug={workspaceSlug}
projectId={projectId}
projectId={issue.project_id}
issueId={issueId}
currentUser={currentUser}
/>

22
web/components/issues/peek-overview/root.tsx
View File

@ -69,20 +69,11 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
// state
const [loader, setLoader] = useState(false);
useEffect(() => {
if (peekIssue) {
setLoader(true);
fetchIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
setLoader(false);
});
}
}, [peekIssue, fetchIssue]);
const issueOperations: TIssuePeekOperations = useMemo(
() => ({
fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await fetchIssue(workspaceSlug, projectId, issueId);
await fetchIssue(workspaceSlug, projectId, issueId, is_archived);
} catch (error) {
console.error("Error fetching the parent issue");
}
@ -324,9 +315,20 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
removeModulesFromIssue,
setToastAlert,
onIssueUpdate,
captureIssueEvent,
router.asPath,
]
);
useEffect(() => {
if (peekIssue) {
setLoader(true);
issueOperations.fetch(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId).finally(() => {
setLoader(false);
});
}
}, [peekIssue, issueOperations]);
if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
const issue = getIssueById(peekIssue.issueId) || undefined;

70
web/components/issues/title-input.tsx Normal file
View File

@ -0,0 +1,70 @@
import { FC, useState, useEffect, useCallback } from "react";
import { observer } from "mobx-react";
// components
import { TextArea } from "@plane/ui";
// types
import { TIssueOperations } from "./issue-detail";
// hooks
import useDebounce from "hooks/use-debounce";
import useReloadConfirmations from "hooks/use-reload-confirmation";
export type IssueTitleInputProps = {
disabled?: boolean;
value: string | undefined | null;
workspaceSlug: string;
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
issueOperations: TIssueOperations;
projectId: string;
issueId: string;
};
export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
// states
const [title, setTitle] = useState("");
// hooks
const { setShowAlert } = useReloadConfirmations();
const debouncedValue = useDebounce(title, 1500);
useEffect(() => {
if (value) setTitle(value);
}, [value]);
useEffect(() => {
if (debouncedValue) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
setIsSubmitting("saved");
});
}
// DO NOT Add more dependencies here. It will cause multiple requests to be sent.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue]);
const handleTitleChange = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
setShowAlert(true);
setIsSubmitting("submitting");
setTitle(e.target.value);
},
[setIsSubmitting, setShowAlert]
);
return (
<div className="relative">
<TextArea
className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
title?.length === 0 ? "!ring-red-400" : ""
}`}
disabled={disabled}
value={title}
onChange={handleTitleChange}
maxLength={255}
placeholder="Issue title"
/>
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
<span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
/255
</div>
</div>
);
});

1
web/components/pages/create-update-page-modal.tsx
View File

@ -68,7 +68,6 @@ export const CreateUpdatePageModal: FC<Props> = (props) => {
state: "SUCCESS",
},
});
console.log("Page updated successfully", pageStore);
} else {
await createProjectPage(formData);
}

2
web/components/project/form.tsx
View File

@ -79,7 +79,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
return updateProject(workspaceSlug.toString(), project.id, payload)
.then((res) => {
const changed_properties = Object.keys(dirtyFields);
console.log(dirtyFields);
captureProjectEvent({
eventName: PROJECT_UPDATED,
payload: {

19
web/layouts/settings-layout/profile/preferences/layout.tsx
View File

@ -20,12 +20,11 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
const { theme: themeStore } = useApplication();
const showMenuItem = () => {
const item = router.asPath.split('/');
const item = router.asPath.split("/");
let splittedItem = item[item.length - 1];
splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
console.log(splittedItem);
return splittedItem;
}
};
const profilePreferenceLinks: Array<{
label: string;
@ -42,7 +41,8 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
];
return (
<ProfileSettingsLayout header={
<ProfileSettingsLayout
header={
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
<CustomMenu
@ -59,15 +59,16 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
>
<></>
{profilePreferenceLinks.map((link) => (
<CustomMenu.MenuItem
className="flex items-center gap-2"
>
<Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link>
<CustomMenu.MenuItem className="flex items-center gap-2">
<Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
{link.label}
</Link>
</CustomMenu.MenuItem>
))}
</CustomMenu>
</div>
}>
}
>
<div className="relative flex h-screen w-full overflow-hidden">
<ProfilePreferenceSettingsSidebar />
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">