forked from github/plane
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:
parent
963d26ccda
commit
0fb43c6fc5
@ -68,6 +68,7 @@ from .issue import (
|
||||
IssueRelationSerializer,
|
||||
RelatedIssueSerializer,
|
||||
IssuePublicSerializer,
|
||||
IssueDetailSerializer,
|
||||
)
|
||||
|
||||
from .module import (
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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) =
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user