chore: Removing 'description_html' from Issue List (#3623)

* chore: removed issue description from issue list

* fix: issue description handling on peekoverview

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Bavisetti Narayan 2024-02-12 15:26:02 +05:30 committed by GitHub
parent 963d26ccda
commit 0fb43c6fc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 77 additions and 50 deletions

View File

@ -68,6 +68,7 @@ from .issue import (
IssueRelationSerializer,
RelatedIssueSerializer,
IssuePublicSerializer,
IssueDetailSerializer,
)
from .module import (

View File

@ -586,7 +586,6 @@ class IssueSerializer(DynamicBaseSerializer):
"id",
"name",
"state_id",
"description_html",
"sort_order",
"completed_at",
"estimate_point",
@ -618,6 +617,13 @@ class IssueSerializer(DynamicBaseSerializer):
return [module for module in obj.issue_module.values_list("module_id", flat=True)]
class IssueDetailSerializer(IssueSerializer):
description_html = serializers.CharField()
class Meta(IssueSerializer.Meta):
fields = IssueSerializer.Meta.fields + ['description_html']
class IssueLiteSerializer(DynamicBaseSerializer):
workspace_detail = WorkspaceLiteSerializer(
read_only=True, source="workspace"

View File

@ -50,6 +50,7 @@ from plane.app.serializers import (
CommentReactionSerializer,
IssueRelationSerializer,
RelatedIssueSerializer,
IssueDetailSerializer,
)
from plane.app.permissions import (
ProjectEntityPermission,
@ -267,7 +268,7 @@ class IssueViewSet(WebhookMixin, BaseViewSet):
def retrieve(self, request, slug, project_id, pk=None):
issue = self.get_queryset().filter(pk=pk).first()
return Response(
IssueSerializer(
IssueDetailSerializer(
issue, fields=self.fields, expand=self.expand
).data,
status=status.HTTP_200_OK,

View File

@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
import useReloadConfirmations from "hooks/use-reload-confirmation";
import debounce from "lodash/debounce";
// components
import { TextArea } from "@plane/ui";
import { Loader, TextArea } from "@plane/ui";
import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
// types
import { TIssue } from "@plane/types";
@ -12,6 +12,8 @@ import { TIssueOperations } from "./issue-detail";
// services
import { FileService } from "services/file.service";
import { useMention, useWorkspace } from "hooks/store";
import { observer } from "mobx-react";
import { isNil } from "lodash";
export interface IssueDescriptionFormValues {
name: string;
@ -36,7 +38,7 @@ export interface IssueDetailsProps {
const fileService = new FileService();
export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
export const IssueDescriptionForm: FC<IssueDetailsProps> = observer((props) => {
const { workspaceSlug, projectId, issueId, issue, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
const workspaceStore = useWorkspace();
const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
@ -71,12 +73,20 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
// editor rerendering on every save
useEffect(() => {
if (issue.id) {
setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
setLocalTitleValue(issue.name);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [issue.id]); // TODO: verify the exhaustive-deps warning
useEffect(() => {
if (issue.description_html) {
setLocalIssueDescription((state) => {
if (!isNil(state.description_html)) return state;
return { id: issue.id, description_html: issue.description_html };
});
}
}, [issue.description_html]);
const handleDescriptionFormSubmit = useCallback(
async (formData: Partial<TIssue>) => {
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@ -167,42 +177,48 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
</div>
<span>{errors.name ? errors.name.message : null}</span>
<div className="relative">
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) =>
!disabled ? (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.getDeleteImageFunction(workspaceId)}
restoreFile={fileService.getRestoreImageFunction(workspaceId)}
value={localIssueDescription.description_html}
rerenderOnPropsChange={localIssueDescription}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName="min-h-[150px] shadow-sm"
onChange={(description: Object, description_html: string) => {
setShowAlert(true);
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
) : (
<RichReadOnlyEditor
value={localIssueDescription.description_html}
customClassName="!p-0 !pt-2 text-custom-text-200"
noBorder={disabled}
mentionHighlights={mentionHighlights}
/>
)
}
/>
{issue.description_html ? (
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) =>
!disabled ? (
<RichTextEditor
cancelUploadImage={fileService.cancelUpload}
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
deleteFile={fileService.getDeleteImageFunction(workspaceId)}
restoreFile={fileService.getRestoreImageFunction(workspaceId)}
value={localIssueDescription.description_html}
rerenderOnPropsChange={localIssueDescription}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName="min-h-[150px] shadow-sm"
onChange={(description: Object, description_html: string) => {
setShowAlert(true);
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
mentionSuggestions={mentionSuggestions}
mentionHighlights={mentionHighlights}
/>
) : (
<RichReadOnlyEditor
value={localIssueDescription.description_html}
customClassName="!p-0 !pt-2 text-custom-text-200"
noBorder={disabled}
mentionHighlights={mentionHighlights}
/>
)
}
/>
) : (
<Loader>
<Loader.Item height="150px" />
</Loader>
)}
</div>
</div>
);
};
});

View File

@ -4,6 +4,7 @@ import { useIssueDetail, useProject, useUser } from "hooks/store";
// components
import { IssueDescriptionForm, TIssueOperations } from "components/issues";
import { IssueReaction } from "../issue-detail/reactions";
import { observer } from "mobx-react";
interface IPeekOverviewIssueDetails {
workspaceSlug: string;
@ -15,7 +16,7 @@ interface IPeekOverviewIssueDetails {
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
}
export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
// store hooks
const { getProjectById } = useProject();
@ -23,6 +24,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
const {
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issue = getIssueById(issueId);
if (!issue) return <></>;
@ -53,4 +55,4 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
)}
</>
);
};
});

View File

@ -4,6 +4,7 @@ import { IssueArchiveService, IssueService } from "services/issue";
// types
import { IIssueDetail } from "./root.store";
import { TIssue } from "@plane/types";
import { computedFn } from "mobx-utils";
export interface IIssueStoreActions {
// actions
@ -44,10 +45,10 @@ export class IssueStore implements IIssueStore {
}
// helper methods
getIssueById = (issueId: string) => {
getIssueById = computedFn((issueId: string) => {
if (!issueId) return undefined;
return this.rootIssueDetailStore.rootIssueStore.issues.getIssueById(issueId) ?? undefined;
};
});
// actions
fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string, isArchived = false) => {
@ -63,12 +64,12 @@ export class IssueStore implements IIssueStore {
if (!issue) throw new Error("Issue not found");
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue]);
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue], true);
// store handlers from issue detail
// parent
if (issue && issue?.parent && issue?.parent?.id)
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue?.parent]);
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue.parent]);
// assignees
// labels
// state

View File

@ -10,7 +10,7 @@ export type IIssueStore = {
// observables
issuesMap: Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
// actions
addIssue(issues: TIssue[]): void;
addIssue(issues: TIssue[], shouldReplace?: boolean): void;
updateIssue(issueId: string, issue: Partial<TIssue>): void;
removeIssue(issueId: string): void;
// helper methods
@ -39,11 +39,11 @@ export class IssueStore implements IIssueStore {
* @param {TIssue[]} issues
* @returns {void}
*/
addIssue = (issues: TIssue[]) => {
addIssue = (issues: TIssue[], shouldReplace = false) => {
if (issues && issues.length <= 0) return;
runInAction(() => {
issues.forEach((issue) => {
if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
if (!this.issuesMap[issue.id] || shouldReplace) set(this.issuesMap, issue.id, issue);
});
});
};