thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: copy link button not working on the peek overview (#2075)

Browse Source 
* fix: copy issue link from the peek overview

* refactor: peek overview layout
This commit is contained in:
Aaryan Khandelwal 2023-09-04 14:47:28 +05:30 committed by GitHub
parent 58e23304a7
commit 8f46492c42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
space/components/issues/peek-overview/header.tsx
View File

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import { useRouter } from "next/router";
// headless ui // headless ui
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
// hooks // hooks
@ -48,15 +46,12 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
const { issueDetails: issueDetailStore }: RootStore = useMobxStore(); const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
const router = useRouter();
const { workspace_slug } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const handleCopyLink = () => { const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; const urlToCopy = window.location.href;
copyTextToClipboard(`${originURL}/${workspace_slug}/projects/${issueDetails?.project}/`).then(() => { copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Link copied!", title: "Link copied!",

23
space/components/issues/peek-overview/issue-properties.tsx
View File

@ -1,21 +1,15 @@
// headless ui
import { Disclosure } from "@headlessui/react";
// import { getStateGroupIcon } from "components/icons";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// icons // icons
import { Icon } from "components/ui"; import { Icon } from "components/ui";
import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper"; import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { renderDateFormat } from "constants/helpers";
// types // types
import { IIssue } from "types/issue"; import { IIssue } from "types/issue";
import { IPeekMode } from "store/issue_details";
// constants // constants
import { issueGroupFilter, issuePriorityFilter } from "constants/data"; import { issueGroupFilter, issuePriorityFilter } from "constants/data";
import { useEffect } from "react";
import { renderDateFormat } from "constants/helpers";
import { IPeekMode } from "store/issue_details";
import { useRouter } from "next/router";
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
type Props = { type Props = {
issueDetails: IIssue; issueDetails: IIssue;
@ -37,11 +31,6 @@ const validDate = (date: any, state: string): string => {
export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => { export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
const startDate = issueDetails.start_date; const startDate = issueDetails.start_date;
const targetDate = issueDetails.target_date; const targetDate = issueDetails.target_date;
@ -57,11 +46,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null; const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
const handleCopyLink = () => { const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; const urlToCopy = window.location.href;
copyTextToClipboard( copyTextToClipboard(urlToCopy).then(() => {
`${originURL}/${workspaceSlug}/projects/${issueDetails.project}/issues/${issueDetails.id}`
).then(() => {
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Link copied!", title: "Link copied!",

82
space/components/issues/peek-overview/layout.tsx
View File

@ -65,26 +65,24 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
return ( return (
<> <>
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}> <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <Dialog as="div" onClose={handleClose}>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto"> <Transition.Child
<Transition.Child as={React.Fragment}
as={React.Fragment} enter="transition-transform duration-300"
enter="transition-transform duration-300" enterFrom="translate-x-full"
enterFrom="translate-x-full" enterTo="translate-x-0"
enterTo="translate-x-0" leave="transition-transform duration-200"
leave="transition-transform duration-200" leaveFrom="translate-x-0"
leaveFrom="translate-x-0" leaveTo="translate-x-full"
leaveTo="translate-x-full" >
> <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
<Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm"> <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} /> </Dialog.Panel>
</Dialog.Panel> </Transition.Child>
</Transition.Child>
</div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}> <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <Dialog as="div" onClose={handleClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -96,32 +94,30 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
> >
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto"> <Transition.Child
<Transition.Child as={React.Fragment}
as={React.Fragment} enter="ease-out duration-300"
enter="ease-out duration-300" enterFrom="opacity-0"
enterFrom="opacity-0" enterTo="opacity-100"
enterTo="opacity-100" leave="ease-in duration-200"
leave="ease-in duration-200" leaveFrom="opacity-100"
leaveFrom="opacity-100" leaveTo="opacity-0"
leaveTo="opacity-0" >
> <Dialog.Panel>
<Dialog.Panel> <div
<div className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${ issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]" }`}
}`} >
> {issueDetailStore.peekMode === "modal" && (
{issueDetailStore.peekMode === "modal" && ( <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} /> )}
)} {issueDetailStore.peekMode === "full" && (
{issueDetailStore.peekMode === "full" && ( <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
<FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} /> )}
)} </div>
</div> </Dialog.Panel>
</Dialog.Panel> </Transition.Child>
</Transition.Child>
</div>
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
</> </>

26
space/layouts/project-layout.tsx
View File

@ -13,18 +13,20 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
<IssueNavbar /> <IssueNavbar />
</div> </div>
<div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div> <div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
<div className="absolute z-[99999] bottom-[10px] right-[10px] bg-custom-background-100 rounded-sm shadow-lg border border-custom-border-300">
<Link href="https://plane.so" as="https://plane.so"> <a
<a className="p-1 px-2 flex items-center gap-1" target="_blank"> href="https://plane.so"
<div className="w-[24px] h-[24px] relative flex justify-center items-center"> className="fixed !z-[999999] bottom-2.5 right-5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border border-custom-border-200 py-1 px-2 flex items-center gap-1"
<Image src={planeLogo} alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" /> target="_blank"
</div> rel="noreferrer noopener"
<div className="text-xs"> >
Powered by <b>Plane Deploy</b> <div className="w-6 h-6 relative grid place-items-center">
</div> <Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
</a> </div>
</Link> <div className="text-xs">
</div> Powered by <span className="font-semibold">Plane Deploy</span>
</div>
</a>
</div> </div>
); );

7
web/components/issues/peek-overview/issue-properties.tsx
View File

@ -50,12 +50,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
maxDate?.setDate(maxDate.getDate()); maxDate?.setDate(maxDate.getDate());
const handleCopyLink = () => { const handleCopyLink = () => {
const originURL = const urlToCopy = window.location.href;
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
copyTextToClipboard( copyTextToClipboard(urlToCopy).then(() => {
`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
).then(() => {
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Link copied!", title: "Link copied!",