Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-2678]feat: added functionality to add labels directly from dropdown #6211

Merged
merged 3 commits into from
Dec 17, 2024
Merged

[WEB-2678]feat: added functionality to add labels directly from dropdown #6211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
109d846
enhancement:added functionality to add features directly from dropdown
mathalav55 Dec 17, 2024
c10783b
fix: fixed import order
mathalav55 Dec 17, 2024
a5d1e0b
fix: fixed lint errors
mathalav55 Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 2 additions & 15 deletions web/core/components/issues/issue-detail/label/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,12 @@ import { IIssueLabel, TIssue, TIssueServiceType } from "@plane/types";
// components
import { TOAST_TYPE, setToast } from "@plane/ui";
// hooks
import { useIssueDetail, useLabel, useProjectInbox, useUserPermissions } from "@/hooks/store";
import { useIssueDetail, useLabel, useProjectInbox } from "@/hooks/store";
// ui
// types
import { LabelList, LabelCreate, IssueLabelSelectRoot } from "./";
import { LabelList, IssueLabelSelectRoot } from "./";
// TODO: Fix this import statement, as core should not import from ee
// eslint-disable-next-line import/order
import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";

export type TIssueLabel = {
workspaceSlug: string;
Expand Down Expand Up @@ -47,9 +46,7 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
issue: { getIssueById },
} = useIssueDetail(issueServiceType);
const { getIssueInboxByIssueId } = useProjectInbox();
const { allowPermissions } = useUserPermissions();

const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
const issue = isInboxIssue ? getIssueInboxByIssueId(issueId)?.issue : getIssueById(issueId);

const labelOperations: TLabelOperations = useMemo(
Expand Down Expand Up @@ -113,16 +110,6 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
labelOperations={labelOperations}
/>
)}

{!disabled && canCreateLabel && (
<LabelCreate
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
values={issue?.label_ids || []}
labelOperations={labelOperations}
/>
)}
</div>
);
});
48 changes: 39 additions & 9 deletions web/core/components/issues/issue-detail/label/select/label-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Search, Tag } from "lucide-react";
import { Check, Loader, Search, Tag } from "lucide-react";
import { Combobox } from "@headlessui/react";
// helpers
import { IIssueLabel } from "@plane/types";
import { getRandomLabelColor } from "@/constants/label";
import { getTabIndex } from "@/helpers/tab-indices.helper";
// hooks
import { useLabel } from "@/hooks/store";
import { useLabel, useUserPermissions } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// components

import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
//constants
export interface IIssueLabelSelect {
workspaceSlug: string;
projectId: string;
issueId: string;
values: string[];
onSelect: (_labelIds: string[]) => void;
onAddLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
}

export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) => {
const { workspaceSlug, projectId, issueId, values, onSelect } = props;
const { workspaceSlug, projectId, issueId, values, onSelect, onAddLabel } = props;
// store hooks
const { isMobile } = usePlatformOS();
const { fetchProjectLabels, getProjectLabels } = useLabel();
const { allowPermissions } = useUserPermissions();
// states
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [query, setQuery] = useState("");
const [submitting, setSubmitting] = useState<boolean>(false);

const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);

const projectLabels = getProjectLabels(projectId);

Expand Down Expand Up @@ -83,11 +90,25 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
</div>
);

const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (query !== "" && e.key === "Escape") {
e.stopPropagation();
setQuery("");
}

if (query !== "" && e.key === "Enter") {
e.stopPropagation();
e.preventDefault();
await handleAddLabel(query);
}
};

const handleAddLabel = async (labelName: string) => {
setSubmitting(true);
const label = await onAddLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
onSelect([...values, label.id]);
setQuery("");
setSubmitting(false);
Comment on lines +106 to +111
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling to handleAddLabel function

Currently, handleAddLabel does not handle errors that might occur during label creation. To enhance robustness, wrap the async call in a try-catch block and handle potential exceptions.

Apply this diff to add error handling:

const handleAddLabel = async (labelName: string) => {
  setSubmitting(true);
+ try {
    const label = await onAddLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
    onSelect([...values, label.id]);
    setQuery("");
+ } catch (error) {
+   // Handle error, e.g., display an error message to the user
+   console.error("Failed to add label:", error);
+ }
  setSubmitting(false);
};

Committable suggestion skipped: line range outside the PR's diff.

};

if (!issueId || !values) return <></>;
Expand Down Expand Up @@ -159,10 +180,19 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
)}
</Combobox.Option>
))
) : submitting ? (
<Loader className="spin h-3.5 w-3.5" />
) : canCreateLabel ? (
<p
onClick={() => {
handleAddLabel(query);
}}
className="text-left text-custom-text-200 cursor-pointer"
>
+ Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
</p>
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
<p className="text-left text-custom-text-200 ">No matching results.</p>
)}
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions web/core/components/issues/issue-detail/label/select/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
issueId={issueId}
values={values}
onSelect={handleLabel}
onAddLabel={labelOperations.createLabel}
/>
);
};
2 changes: 1 addition & 1 deletion web/core/components/issues/issue-layouts/kanban/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// plane helpers
import { EIssueServiceType } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
// types
import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
Expand All @@ -26,7 +27,6 @@ import { IssueIdentifier } from "@/plane-web/components/issues";
import { TRenderQuickActions } from "../list/list-view-types";
import { IssueProperties } from "../properties/all-properties";
import { getIssueBlockId } from "../utils";
import { EIssueServiceType } from "@plane/constants";

interface IssueBlockProps {
issueId: string;
Expand Down
47 changes: 39 additions & 8 deletions web/core/components/issues/issue-layouts/properties/labels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
"use client";

import { Fragment, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search, Tags } from "lucide-react";
import { Check, ChevronDown, Loader, Search, Tags } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane helpers
import { useOutsideClickDetector } from "@plane/hooks";
Expand All @@ -14,9 +14,12 @@ import { IIssueLabel } from "@plane/types";
// ui
import { ComboDropDown, Tooltip } from "@plane/ui";
// hooks
import { useLabel } from "@/hooks/store";
import { getRandomLabelColor } from "@/constants/label";
import { useLabel, useUserPermissions } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import { usePlatformOS } from "@/hooks/use-platform-os";
import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
// constants

export interface IIssuePropertyLabels {
projectId: string | null;
Expand Down Expand Up @@ -62,6 +65,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
// states
const [query, setQuery] = useState("");
const [isOpen, setIsOpen] = useState(false);
const [submitting, setSubmitting] = useState<boolean>(false);
// refs
const dropdownRef = useRef<HTMLDivElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
Expand All @@ -70,9 +74,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
// store hooks
const { fetchProjectLabels, getProjectLabels } = useLabel();
const { fetchProjectLabels, getProjectLabels, createLabel } = useLabel();
const { isMobile } = usePlatformOS();
const storeLabels = getProjectLabels(projectId);
const { allowPermissions } = useUserPermissions();

const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Utilize the canCreateLabel variable or remove it

The canCreateLabel variable is defined but not used. Ensure it's utilized where necessary or remove it to clean up the code.


const onOpen = () => {
if (!storeLabels && workspaceSlug && projectId)
Expand Down Expand Up @@ -102,11 +109,17 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro

useOutsideClickDetector(dropdownRef, handleClose);

const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (query !== "" && e.key === "Escape") {
e.stopPropagation();
setQuery("");
}

if (query !== "" && e.key === "Enter") {
e.stopPropagation();
e.preventDefault();
await handleAddLabel(query);
}
};

useEffect(() => {
Expand Down Expand Up @@ -249,6 +262,15 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
</button>
);

const handleAddLabel = async (labelName: string) => {
if (!projectId) return;
setSubmitting(true);
const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
onChange([...value, label.id]);
setQuery("");
setSubmitting(false);
};

Comment on lines +265 to +273
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling to handleAddLabel function

Include error handling in handleAddLabel to manage potential exceptions during label creation, enhancing the reliability of the component.

Apply this diff:

const handleAddLabel = async (labelName: string) => {
  if (!projectId) return;
  setSubmitting(true);
+ try {
    const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
    onChange([...value, label.id]);
    setQuery("");
+ } catch (error) {
+   // Handle error, e.g., display an error message to the user
+   console.error("Failed to add label:", error);
+ }
  setSubmitting(false);
};
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const handleAddLabel = async (labelName: string) => {
if (!projectId) return;
setSubmitting(true);
const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
onChange([...value, label.id]);
setQuery("");
setSubmitting(false);
};
const handleAddLabel = async (labelName: string) => {
if (!projectId) return;
setSubmitting(true);
try {
const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
onChange([...value, label.id]);
setQuery("");
} catch (error) {
// Handle error, e.g., display an error message to the user
console.error("Failed to add label:", error);
}
setSubmitting(false);
};

return (
<ComboDropDown
as="div"
Expand Down Expand Up @@ -314,10 +336,19 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
)}
</Combobox.Option>
))
) : submitting ? (
<Loader className="spin h-3.5 w-3.5" />
) : canCreateLabel ? (
<p
onClick={() => {
handleAddLabel(query);
}}
className="text-left text-custom-text-200 cursor-pointer"
>
+ Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
</p>
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
<p className="text-left text-custom-text-200 ">No matching results.</p>
)}
</div>
</div>
Expand Down
Loading