fixed merge conflict
This commit is contained in:
Dakshesh Jain
commit
b757609161
24 changed files with 1070 additions and 476 deletions
196
apps/app/components/command-palette/addAsSubIssue.tsx
Normal file
196
apps/app/components/command-palette/addAsSubIssue.tsx
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
import React, { useState } from "react";
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// icons
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||
import { FolderIcon } from "@heroicons/react/24/outline";
|
||||
// commons
|
||||
import { classNames } from "constants/common";
|
||||
// types
|
||||
import { IIssue, IssueResponse } from "types";
|
||||
import { Button } from "ui";
|
||||
import { PROJECT_ISSUES_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
import issuesServices from "lib/services/issues.services";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
parentId: string;
|
||||
};
|
||||
|
||||
type FormInput = {
|
||||
issue_ids: string[];
|
||||
cycleId: string;
|
||||
};
|
||||
|
||||
const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parentId }) => {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const { activeWorkspace, activeProject, issues } = useUser();
|
||||
|
||||
const filteredIssues: IIssue[] =
|
||||
query === ""
|
||||
? issues?.results ?? []
|
||||
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
|
||||
[];
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
setError,
|
||||
} = useForm<FormInput>();
|
||||
|
||||
const handleCommandPaletteClose = () => {
|
||||
setIsOpen(false);
|
||||
setQuery("");
|
||||
reset();
|
||||
};
|
||||
|
||||
const addAsSubIssue = (issueId: string) => {
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: parentId })
|
||||
.then((res) => {
|
||||
mutate<IssueResponse>(
|
||||
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
||||
(prevData) => ({
|
||||
...(prevData as IssueResponse),
|
||||
results: (prevData?.results ?? []).map((p) =>
|
||||
p.id === issueId ? { ...p, ...res } : p
|
||||
),
|
||||
}),
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||
<Dialog as="div" className="relative z-10" onClose={handleCommandPaletteClose}>
|
||||
<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-gray-500 bg-opacity-25 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Combobox
|
||||
// onChange={(item: ItemType) => {
|
||||
// const { url, onClick } = item;
|
||||
// if (url) router.push(url);
|
||||
// else if (onClick) onClick();
|
||||
// handleCommandPaletteClose();
|
||||
// }}
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
||||
placeholder="Search..."
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
>
|
||||
{filteredIssues.length > 0 && (
|
||||
<>
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
{filteredIssues.map((issue) => {
|
||||
if (issue.parent === "" || issue.parent === null)
|
||||
return (
|
||||
<Combobox.Option
|
||||
key={issue.id}
|
||||
value={{
|
||||
name: issue.name,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
"flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
addAsSubIssue(issue.id);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`h-1.5 w-1.5 block rounded-full`}
|
||||
style={{
|
||||
backgroundColor: issue.state_detail.color,
|
||||
}}
|
||||
/>
|
||||
{issue.name}
|
||||
</Combobox.Option>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
|
||||
{query !== "" && filteredIssues.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<FolderIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
We couldn{"'"}t find any issue with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddAsSubIssue;
|
||||
|
|
@ -4,7 +4,7 @@ import { useRouter } from "next/router";
|
|||
// swr
|
||||
import { mutate } from "swr";
|
||||
// react hook form
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { Controller, SubmitHandler, useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Combobox, Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
|
|
@ -17,6 +17,7 @@ import {
|
|||
FolderIcon,
|
||||
RectangleStackIcon,
|
||||
ClipboardDocumentListIcon,
|
||||
ArrowPathIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// commons
|
||||
import { classNames, copyTextToClipboard } from "constants/common";
|
||||
|
|
@ -27,7 +28,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
|
|||
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||
// types
|
||||
import { IIssue, IProject, IssueResponse } from "types";
|
||||
import { Button } from "ui";
|
||||
import { Button, SearchListbox } from "ui";
|
||||
import issuesServices from "lib/services/issues.services";
|
||||
// fetch keys
|
||||
import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
|
|
@ -40,6 +41,7 @@ type ItemType = {
|
|||
|
||||
type FormInput = {
|
||||
issue_ids: string[];
|
||||
cycleId: string;
|
||||
};
|
||||
|
||||
const CommandPalette: React.FC = () => {
|
||||
|
|
@ -69,6 +71,7 @@ const CommandPalette: React.FC = () => {
|
|||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
setError,
|
||||
} = useForm<FormInput>();
|
||||
|
|
@ -143,10 +146,24 @@ const CommandPalette: React.FC = () => {
|
|||
);
|
||||
|
||||
const handleDelete: SubmitHandler<FormInput> = (data) => {
|
||||
if (activeWorkspace && activeProject && data.issue_ids) {
|
||||
if (!data.issue_ids || data.issue_ids.length === 0) {
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "Please select atleast one issue",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
|
||||
.then((res) => {
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
mutate<IssueResponse>(
|
||||
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
|
||||
(prevData) => {
|
||||
|
|
@ -170,10 +187,30 @@ const CommandPalette: React.FC = () => {
|
|||
};
|
||||
|
||||
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
|
||||
if (activeWorkspace && activeProject && data.issue_ids) {
|
||||
if (!data.issue_ids || data.issue_ids.length === 0) {
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "Please select atleast one issue",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!data.cycleId) {
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: "Please select a cycle",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, "", data)
|
||||
.then((res) => {})
|
||||
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, data.cycleId, data)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
|
@ -230,7 +267,7 @@ const CommandPalette: React.FC = () => {
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<form>
|
||||
<Combobox
|
||||
// onChange={(item: ItemType) => {
|
||||
|
|
@ -369,6 +406,23 @@ const CommandPalette: React.FC = () => {
|
|||
|
||||
<div className="flex justify-between items-center gap-2 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="cycleId"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<SearchListbox
|
||||
title="Cycle"
|
||||
optionsFontsize="sm"
|
||||
options={cycles?.map((cycle) => {
|
||||
return { value: cycle.id, display: cycle.name };
|
||||
})}
|
||||
multiple={false}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
icon={<ArrowPathIcon className="h-4 w-4 text-gray-400" />}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
|
||||
Add to Cycle
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="bg-white p-8">
|
||||
<div className="bg-white p-5">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="text-center sm:text-left w-full">
|
||||
<Dialog.Title
|
||||
|
|
@ -59,37 +59,46 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||
{
|
||||
title: "Navigation",
|
||||
shortcuts: [
|
||||
{ key: "Ctrl + /", description: "To open navigator" },
|
||||
{ key: "↑", description: "Move up" },
|
||||
{ key: "↓", description: "Move down" },
|
||||
{ key: "←", description: "Move left" },
|
||||
{ key: "→", description: "Move right" },
|
||||
{ key: "Enter", description: "Select" },
|
||||
{ key: "Esc", description: "Close" },
|
||||
{ keys: "ctrl,/", description: "To open navigator" },
|
||||
{ keys: "↑", description: "Move up" },
|
||||
{ keys: "↓", description: "Move down" },
|
||||
{ keys: "←", description: "Move left" },
|
||||
{ keys: "→", description: "Move right" },
|
||||
{ keys: "Enter", description: "Select" },
|
||||
{ keys: "Esc", description: "Close" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Common",
|
||||
shortcuts: [
|
||||
{ key: "Ctrl + p", description: "To create project" },
|
||||
{ key: "Ctrl + i", description: "To create issue" },
|
||||
{ key: "Ctrl + q", description: "To create cycle" },
|
||||
{ key: "Ctrl + h", description: "To open shortcuts guide" },
|
||||
{ keys: "ctrl,p", description: "To create project" },
|
||||
{ keys: "ctrl,i", description: "To create issue" },
|
||||
{ keys: "ctrl,q", description: "To create cycle" },
|
||||
{ keys: "ctrl,h", description: "To open shortcuts guide" },
|
||||
{
|
||||
key: "Ctrl + alt + c",
|
||||
keys: "ctrl,alt,c",
|
||||
description: "To copy issue url when on issue detail page.",
|
||||
},
|
||||
],
|
||||
},
|
||||
].map(({ title, shortcuts }) => (
|
||||
<div className="w-full flex flex-col" key={title}>
|
||||
<div key={title} className="w-full flex flex-col">
|
||||
<p className="font-medium mb-4">{title}</p>
|
||||
<div className="flex flex-col gap-y-3">
|
||||
{shortcuts.map(({ key, description }) => (
|
||||
<div className="flex justify-between" key={key}>
|
||||
{shortcuts.map(({ keys, description }, index) => (
|
||||
<div key={index} className="flex justify-between">
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
<div className="flex gap-x-1">
|
||||
<kbd className="bg-gray-200 text-sm px-1 rounded">{key}</kbd>
|
||||
<div className="flex items-center gap-x-1">
|
||||
{keys.split(",").map((key, index) => (
|
||||
<span key={index} className="flex items-center gap-1">
|
||||
<kbd className="bg-gray-200 text-sm px-1 rounded">
|
||||
{key}
|
||||
</kbd>
|
||||
{/* {index !== keys.split(",").length - 1 ? (
|
||||
<span className="text-xs">+</span>
|
||||
) : null} */}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { FC } from "react";
|
||||
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
|
|
@ -25,12 +24,15 @@ export interface RichTextEditorProps {
|
|||
onChange: (state: string) => void;
|
||||
id: string;
|
||||
value: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
||||
// props
|
||||
const { onChange, value, id } = props;
|
||||
|
||||
const RichTextEditor: React.FC<RichTextEditorProps> = ({
|
||||
onChange,
|
||||
id,
|
||||
value,
|
||||
placeholder = "Enter some text...",
|
||||
}) => {
|
||||
function handleChange(state: EditorState, editor: LexicalEditor) {
|
||||
state.read(() => {
|
||||
onChange(JSON.stringify(state.toJSON()));
|
||||
|
|
@ -54,8 +56,8 @@ const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
|||
}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
placeholder={
|
||||
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||
Enter some text...
|
||||
<div className="absolute top-4 left-3 pointer-events-none select-none text-gray-400">
|
||||
{placeholder}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -21,16 +21,8 @@ import {
|
|||
$isListNode,
|
||||
ListNode,
|
||||
} from "@lexical/list";
|
||||
import {
|
||||
$isParentElementRTL,
|
||||
$isAtNodeEnd,
|
||||
$wrapNodes,
|
||||
} from "@lexical/selection";
|
||||
import {
|
||||
$createHeadingNode,
|
||||
$createQuoteNode,
|
||||
$isHeadingNode,
|
||||
} from "@lexical/rich-text";
|
||||
import { $isParentElementRTL, $isAtNodeEnd, $wrapNodes } from "@lexical/selection";
|
||||
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
||||
import {
|
||||
$createCodeNode,
|
||||
$isCodeNode,
|
||||
|
|
@ -50,15 +42,7 @@ const BLOCK_DATA = [
|
|||
{ type: "ul", name: "Bulleted List" },
|
||||
];
|
||||
|
||||
const supportedBlockTypes = new Set([
|
||||
"paragraph",
|
||||
"quote",
|
||||
"code",
|
||||
"h1",
|
||||
"h2",
|
||||
"ul",
|
||||
"ol",
|
||||
]);
|
||||
const supportedBlockTypes = new Set(["paragraph", "quote", "code", "h1", "h2", "ul", "ol"]);
|
||||
|
||||
const blockTypeToBlockName: any = {
|
||||
code: "Code Block",
|
||||
|
|
@ -84,8 +68,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
|||
// refs
|
||||
const dropDownRef = useRef<any>(null);
|
||||
// states
|
||||
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
|
||||
useState(false);
|
||||
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const toolbar = toolbarRef.current;
|
||||
|
|
@ -205,6 +188,7 @@ export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
|||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 mr-2 text-sm flex items-center"
|
||||
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
|
||||
aria-label="Formatting Options"
|
||||
|
|
|
|||
|
|
@ -25,17 +25,9 @@ import {
|
|||
} from "@lexical/list";
|
||||
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import {
|
||||
$isParentElementRTL,
|
||||
$wrapNodes,
|
||||
$isAtNodeEnd,
|
||||
} from "@lexical/selection";
|
||||
import { $isParentElementRTL, $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
|
||||
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
|
||||
import {
|
||||
$createHeadingNode,
|
||||
$createQuoteNode,
|
||||
$isHeadingNode,
|
||||
} from "@lexical/rich-text";
|
||||
import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
|
||||
// custom elements
|
||||
import { FloatingLinkEditor } from "./floating-link-editor";
|
||||
import { BlockTypeSelect } from "./block-type-select";
|
||||
|
|
@ -67,9 +59,7 @@ export const LexicalToolbar = () => {
|
|||
const [canUndo, setCanUndo] = useState(false);
|
||||
const [canRedo, setCanRedo] = useState(false);
|
||||
const [blockType, setBlockType] = useState("paragraph");
|
||||
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(null);
|
||||
const [isRTL, setIsRTL] = useState(false);
|
||||
const [isLink, setIsLink] = useState(false);
|
||||
const [isBold, setIsBold] = useState(false);
|
||||
|
|
@ -83,9 +73,7 @@ export const LexicalToolbar = () => {
|
|||
if ($isRangeSelection(selection)) {
|
||||
const anchorNode = selection.anchor.getNode();
|
||||
const element =
|
||||
anchorNode.getKey() === "root"
|
||||
? anchorNode
|
||||
: anchorNode.getTopLevelElementOrThrow();
|
||||
anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
|
||||
const elementKey = element.getKey();
|
||||
const elementDOM = editor.getElementByKey(elementKey);
|
||||
if (elementDOM !== null) {
|
||||
|
|
@ -95,9 +83,7 @@ export const LexicalToolbar = () => {
|
|||
const type = parentList ? parentList.getTag() : element.getTag();
|
||||
setBlockType(type);
|
||||
} else {
|
||||
const type = $isHeadingNode(element)
|
||||
? element.getTag()
|
||||
: element.getType();
|
||||
const type = $isHeadingNode(element) ? element.getTag() : element.getType();
|
||||
setBlockType(type);
|
||||
}
|
||||
}
|
||||
|
|
@ -166,11 +152,9 @@ export const LexicalToolbar = () => {
|
|||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
|
||||
ref={toolbarRef}
|
||||
>
|
||||
<div className="flex items-center mb-1 p-1 w-full flex-wrap border-b " ref={toolbarRef}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canUndo}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -195,6 +179,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canRedo}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -218,12 +203,9 @@ export const LexicalToolbar = () => {
|
|||
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<BlockTypeSelect
|
||||
editor={editor}
|
||||
toolbarRef={toolbarRef}
|
||||
blockType={blockType}
|
||||
/>
|
||||
<BlockTypeSelect editor={editor} toolbarRef={toolbarRef} blockType={blockType} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||
|
|
@ -243,6 +225,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||
|
|
@ -262,6 +245,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||
|
|
@ -281,6 +265,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
||||
|
|
@ -300,6 +285,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
||||
|
|
@ -319,6 +305,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={insertLink}
|
||||
className={"p-2 mr-2 " + (isLink ? "active" : "")}
|
||||
aria-label="Insert Link"
|
||||
|
|
@ -335,9 +322,9 @@ export const LexicalToolbar = () => {
|
|||
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
{isLink &&
|
||||
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
||||
{isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
||||
|
|
@ -360,6 +347,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
||||
|
|
@ -382,6 +370,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
|
||||
|
|
@ -404,6 +393,7 @@ export const LexicalToolbar = () => {
|
|||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
|
|||
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
|
||||
/>
|
||||
)}
|
||||
></Controller>
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -97,6 +97,12 @@ const ListView: React.FC<Props> = ({
|
|||
<table className="min-w-full">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
|
||||
>
|
||||
NAME
|
||||
</th>
|
||||
{Object.keys(properties).map(
|
||||
(key) =>
|
||||
properties[key as keyof Properties] && (
|
||||
|
|
@ -155,84 +161,78 @@ const ListView: React.FC<Props> = ({
|
|||
)}
|
||||
onMouseEnter={() => handleHover(issue.id)}
|
||||
>
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 w-[15rem]">
|
||||
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
|
||||
<a className="hover:text-theme duration-300">{issue.name}</a>
|
||||
</Link>
|
||||
</td>
|
||||
{Object.keys(properties).map(
|
||||
(key) =>
|
||||
properties[key as keyof Properties] && (
|
||||
<td
|
||||
key={key}
|
||||
className="px-3 py-4 text-sm font-medium text-gray-900 relative"
|
||||
>
|
||||
{(key as keyof Properties) === "name" ? (
|
||||
<p className="w-[15rem]">
|
||||
<Link
|
||||
href={`/projects/${issue.project}/issues/${issue.id}`}
|
||||
>
|
||||
<a className="hover:text-theme duration-300">
|
||||
{issue.name}
|
||||
</a>
|
||||
</Link>
|
||||
</p>
|
||||
) : (key as keyof Properties) === "key" ? (
|
||||
<p className="text-xs whitespace-nowrap">
|
||||
<React.Fragment key={key}>
|
||||
{(key as keyof Properties) === "key" ? (
|
||||
<td className="px-3 py-4 font-medium text-gray-900 text-xs whitespace-nowrap">
|
||||
{activeProject?.identifier}-{issue.sequence_id}
|
||||
</p>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "description" ? (
|
||||
<p className="truncate text-xs max-w-[15rem]">
|
||||
<td className="px-3 py-4 font-medium text-gray-900 truncate text-xs max-w-[15rem]">
|
||||
{issue.description}
|
||||
</p>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "priority" ? (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.priority}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data }, issue.id);
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="">
|
||||
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
|
||||
<span
|
||||
className={classNames(
|
||||
issue.priority ? "" : "text-gray-900",
|
||||
"hidden truncate capitalize sm:block w-16"
|
||||
)}
|
||||
>
|
||||
{issue.priority ?? "None"}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.priority}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ priority: data }, issue.id);
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="">
|
||||
<Listbox.Button className="inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-1 px-0.5 text-xs font-medium text-gray-500 hover:bg-gray-100 border">
|
||||
<span
|
||||
className={classNames(
|
||||
issue.priority ? "" : "text-gray-900",
|
||||
"hidden truncate capitalize sm:block w-16"
|
||||
)}
|
||||
>
|
||||
{issue.priority ?? "None"}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||
{PRIORITIES?.map((priority) => (
|
||||
<Listbox.Option
|
||||
key={priority}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer capitalize select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={priority}
|
||||
>
|
||||
{priority}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||
{PRIORITIES?.map((priority) => (
|
||||
<Listbox.Option
|
||||
key={priority}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer capitalize select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={priority}
|
||||
>
|
||||
{priority}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "assignee" ? (
|
||||
<>
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.assignees}
|
||||
|
|
@ -328,80 +328,84 @@ const ListView: React.FC<Props> = ({
|
|||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "state" ? (
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ state: data }, issue.id);
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Listbox.Button
|
||||
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
|
||||
style={{
|
||||
border: `2px solid ${issue.state_detail.color}`,
|
||||
backgroundColor: `${issue.state_detail.color}20`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={classNames(
|
||||
issue.state ? "" : "text-gray-900",
|
||||
"hidden capitalize sm:block w-16"
|
||||
)}
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative">
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issue.state}
|
||||
onChange={(data: string) => {
|
||||
partialUpdateIssue({ state: data }, issue.id);
|
||||
}}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Listbox.Button
|
||||
className="inline-flex items-center whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 border"
|
||||
style={{
|
||||
border: `2px solid ${issue.state_detail.color}`,
|
||||
backgroundColor: `${issue.state_detail.color}20`,
|
||||
}}
|
||||
>
|
||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<span
|
||||
className={classNames(
|
||||
issue.state ? "" : "text-gray-900",
|
||||
"hidden capitalize sm:block w-16"
|
||||
)}
|
||||
>
|
||||
{addSpaceIfCamelCase(issue.state_detail.name)}
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
|
||||
{states?.map((state) => (
|
||||
<Listbox.Option
|
||||
key={state.id}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
active ? "bg-indigo-50" : "bg-white",
|
||||
"cursor-pointer select-none px-3 py-2"
|
||||
)
|
||||
}
|
||||
value={state.id}
|
||||
>
|
||||
{addSpaceIfCamelCase(state.name)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</td>
|
||||
) : (key as keyof Properties) === "children" ? (
|
||||
<p>No children.</p>
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900">
|
||||
No children.
|
||||
</td>
|
||||
) : (key as keyof Properties) === "target_date" ? (
|
||||
<p className="whitespace-nowrap">
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">
|
||||
{issue.target_date
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "-"}
|
||||
</p>
|
||||
</td>
|
||||
) : (
|
||||
<p className="capitalize text-sm">
|
||||
<td className="px-3 py-4 text-sm font-medium text-gray-900 relative capitalize">
|
||||
{issue[key as keyof IIssue] ??
|
||||
(issue[key as keyof IIssue] as any)?.name ??
|
||||
"None"}
|
||||
</p>
|
||||
</td>
|
||||
)}
|
||||
</td>
|
||||
</React.Fragment>
|
||||
)
|
||||
)}
|
||||
<td className="px-3">
|
||||
|
|
|
|||
|
|
@ -34,11 +34,13 @@ import {
|
|||
ClipboardDocumentIcon,
|
||||
LinkIcon,
|
||||
ArrowPathIcon,
|
||||
CalendarDaysIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { Control } from "react-hook-form";
|
||||
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
|
||||
import { TwitterPicker } from "react-color";
|
||||
import useToast from "lib/hooks/useToast";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
|
|
@ -56,6 +58,8 @@ const defaultValues: Partial<IIssueLabels> = {
|
|||
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
|
||||
const { activeWorkspace, activeProject, cycles } = useUser();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: states } = useSWR<IState[]>(
|
||||
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
|
||||
activeWorkspace && activeProject
|
||||
|
|
@ -164,7 +168,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||
label: "Due Date",
|
||||
name: "target_date",
|
||||
canSelectMultipleOptions: true,
|
||||
icon: UserIcon,
|
||||
icon: CalendarDaysIcon,
|
||||
},
|
||||
],
|
||||
[
|
||||
|
|
@ -202,6 +206,18 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||
copyTextToClipboard(
|
||||
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
|
||||
)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<LinkIcon className="h-3.5 w-3.5" />
|
||||
|
|
@ -209,7 +225,21 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||
<button
|
||||
type="button"
|
||||
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
|
||||
onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
|
||||
onClick={() =>
|
||||
copyTextToClipboard(`${issueDetail?.id}`)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Copied to clipboard",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Some error occurred",
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
|
|
@ -232,7 +262,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
|
|||
render={({ field: { value, onChange } }) => (
|
||||
<input
|
||||
type="date"
|
||||
value={value ?? new Date().toString()}
|
||||
value={""}
|
||||
onChange={(e: any) => {
|
||||
submitChanges({ target_date: e.target.value });
|
||||
onChange(e.target.value);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {
|
|||
Squares2X2Icon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
|
||||
import { IState } from "types";
|
||||
import { IIssue, IState } from "types";
|
||||
import { Spinner } from "ui";
|
||||
|
||||
type Props = {
|
||||
|
|
@ -15,7 +15,9 @@ type Props = {
|
|||
states: IState[] | undefined;
|
||||
};
|
||||
|
||||
const activityIcons = {
|
||||
const activityIcons: {
|
||||
[key: string]: JSX.Element;
|
||||
} = {
|
||||
state: <Squares2X2Icon className="h-4 w-4" />,
|
||||
priority: <ChartBarIcon className="h-4 w-4" />,
|
||||
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
|
||||
|
|
@ -28,11 +30,11 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||
<>
|
||||
{issueActivities ? (
|
||||
<div className="space-y-3">
|
||||
{issueActivities.map((activity) => {
|
||||
{issueActivities.map((activity, index) => {
|
||||
if (activity.field !== "updated_by")
|
||||
return (
|
||||
<div key={activity.id} className="relative flex gap-x-2 w-full">
|
||||
{issueActivities.length > 1 ? (
|
||||
{issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
|
||||
<span
|
||||
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
|
||||
aria-hidden="true"
|
||||
|
|
@ -70,8 +72,8 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||
<p>
|
||||
<span className="font-medium">
|
||||
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
|
||||
</span>{" "}
|
||||
<span>{activity.verb}</span>{" "}
|
||||
</span>
|
||||
<span> {activity.verb} </span>
|
||||
{activity.verb !== "created" ? (
|
||||
<span>{activity.field ?? "commented"}</span>
|
||||
) : (
|
||||
|
|
@ -90,7 +92,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||
states?.find((s) => s.id === activity.old_value)?.name ?? ""
|
||||
)
|
||||
: "None"
|
||||
: activity.old_value}
|
||||
: activity.old_value ?? "None"}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">To: </span>
|
||||
|
|
@ -100,7 +102,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
|
|||
states?.find((s) => s.id === activity.new_value)?.name ?? ""
|
||||
)
|
||||
: "None"
|
||||
: activity.new_value}
|
||||
: activity.new_value ?? "None"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const ToastAlerts = () => {
|
|||
if (!alerts) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-5 fixed top-8 right-8 w-80 h-full overflow-hidden pointer-events-none z-50">
|
||||
<div className="space-y-5 fixed top-5 right-5 w-80 h-full overflow-hidden pointer-events-none z-50">
|
||||
{alerts.map((alert) => (
|
||||
<div className="relative text-white rounded-md overflow-hidden" key={alert.id}>
|
||||
<div className="absolute top-1 right-1">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue