Skip to content

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

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

Merged
sriramveeraghanta merged 2 commits into from
Sep 4, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00c8c4c
fix: copy issue link from the peek overview
aaryan610 Sep 4, 2023
a588ecc
refactor: peek overview layout
aaryan610 Sep 4, 2023
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
9 changes: 2 additions & 7 deletions space/components/issues/peek-overview/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React from "react";

import { useRouter } from "next/router";

// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
Expand Down Expand Up @@ -48,15 +46,12 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {

const { issueDetails: issueDetailStore }: RootStore = useMobxStore();

const router = useRouter();
const { workspace_slug } = router.query;

const { setToastAlert } = useToast();

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({
type: "success",
title: "Link copied!",
Expand Down
23 changes: 5 additions & 18 deletions space/components/issues/peek-overview/issue-properties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
// headless ui
import { Disclosure } from "@headlessui/react";
// import { getStateGroupIcon } from "components/icons";
// hooks
import useToast from "hooks/use-toast";
// icons
import { Icon } from "components/ui";
import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { renderDateFormat } from "constants/helpers";
// types
import { IIssue } from "types/issue";
import { IPeekMode } from "store/issue_details";
// constants
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 = {
issueDetails: IIssue;
Expand All @@ -37,11 +31,6 @@ const validDate = (date: any, state: string): string => {
export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
const { setToastAlert } = useToast();

const { issueDetails: issueDetailStore }: RootStore = useMobxStore();

const router = useRouter();
const { workspaceSlug } = router.query;

const startDate = issueDetails.start_date;
const targetDate = issueDetails.target_date;

Expand All @@ -57,11 +46,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;

const handleCopyLink = () => {
const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
const urlToCopy = window.location.href;

copyTextToClipboard(
`${originURL}/${workspaceSlug}/projects/${issueDetails.project}/issues/${issueDetails.id}`
).then(() => {
copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",
Expand Down
82 changes: 39 additions & 43 deletions space/components/issues/peek-overview/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,26 +65,24 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
return (
<>
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<Transition.Child
as={React.Fragment}
enter="transition-transform duration-300"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition-transform duration-200"
leaveFrom="translate-x-0"
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">
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
</Dialog.Panel>
</Transition.Child>
</div>
<Dialog as="div" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="transition-transform duration-300"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition-transform duration-200"
leaveFrom="translate-x-0"
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">
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
</Dialog.Panel>
</Transition.Child>
</Dialog>
</Transition.Root>
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Dialog as="div" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
Expand All @@ -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" />
</Transition.Child>
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
<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"
>
<Dialog.Panel>
<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 ${
issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
}`}
>
{issueDetailStore.peekMode === "modal" && (
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
{issueDetailStore.peekMode === "full" && (
<FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
<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"
>
<Dialog.Panel>
<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 ${
issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
}`}
>
{issueDetailStore.peekMode === "modal" && (
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
{issueDetailStore.peekMode === "full" && (
<FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
)}
</div>
</Dialog.Panel>
</Transition.Child>
</Dialog>
</Transition.Root>
</>
Expand Down
26 changes: 14 additions & 12 deletions space/layouts/project-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,20 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
<IssueNavbar />
</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 className="p-1 px-2 flex items-center gap-1" target="_blank">
<div className="w-[24px] h-[24px] relative flex justify-center items-center">
<Image src={planeLogo} alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
</div>
<div className="text-xs">
Powered by <b>Plane Deploy</b>
</div>
</a>
</Link>
</div>

<a
href="https://plane.so"
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"
target="_blank"
rel="noreferrer noopener"
>
<div className="w-6 h-6 relative grid place-items-center">
<Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
</div>
<div className="text-xs">
Powered by <span className="font-semibold">Plane Deploy</span>
</div>
</a>
</div>
);

Expand Down
7 changes: 2 additions & 5 deletions web/components/issues/peek-overview/issue-properties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
maxDate?.setDate(maxDate.getDate());

const handleCopyLink = () => {
const originURL =
typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
const urlToCopy = window.location.href;

copyTextToClipboard(
`${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
).then(() => {
copyTextToClipboard(urlToCopy).then(() => {
setToastAlert({
type: "success",
title: "Link copied!",
Expand Down