mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge pull request #959 from makeplane/feat/product_update_modal
feat: product update modal
This commit is contained in:
guru_sainath
GitHub
commit
93fb4fe1e9
@ -20,3 +20,5 @@ export * from "./progress-bar";
|
||||
export * from "./spinner";
|
||||
export * from "./tooltip";
|
||||
export * from "./toggle-switch";
|
||||
export * from "./markdown-to-component";
|
||||
export * from "./product-updates-modal";
|
||||
|
||||
77
apps/app/components/ui/markdown-to-component.tsx
Normal file
77
apps/app/components/ui/markdown-to-component.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import React from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
interface CustomComponentProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
type CustomComponent = React.ComponentType<CustomComponentProps>;
|
||||
|
||||
interface Props {
|
||||
markdown: string;
|
||||
components?: {
|
||||
a?: CustomComponent;
|
||||
blockquote?: CustomComponent;
|
||||
code?: CustomComponent;
|
||||
del?: CustomComponent;
|
||||
em?: CustomComponent;
|
||||
heading?: CustomComponent;
|
||||
hr?: CustomComponent;
|
||||
image?: CustomComponent;
|
||||
inlineCode?: CustomComponent;
|
||||
link?: CustomComponent;
|
||||
list?: CustomComponent;
|
||||
listItem?: CustomComponent;
|
||||
paragraph?: CustomComponent;
|
||||
strong?: CustomComponent;
|
||||
table?: CustomComponent;
|
||||
tableCell?: CustomComponent;
|
||||
tableHead?: CustomComponent;
|
||||
tableRow?: CustomComponent;
|
||||
};
|
||||
options?: any;
|
||||
}
|
||||
|
||||
const HeadingPrimary: CustomComponent = ({ children }) => (
|
||||
<h1 className="text-lg font-semibold text-brand-base">{children}</h1>
|
||||
);
|
||||
|
||||
const HeadingSecondary: CustomComponent = ({ children }) => (
|
||||
<h3 className="text-base font-semibold text-brand-base">{children}</h3>
|
||||
);
|
||||
|
||||
const Paragraph: CustomComponent = ({ children }) => (
|
||||
<p className="text-sm text-brand-secondary">{children}</p>
|
||||
);
|
||||
|
||||
const OrderedList: CustomComponent = ({ children }) => (
|
||||
<ol className="ml-8 mb-4 list-decimal text-sm text-brand-secondary">{children}</ol>
|
||||
);
|
||||
|
||||
const UnorderedList: CustomComponent = ({ children }) => (
|
||||
<ul className="ml-8 mb-4 list-disc text-sm text-brand-secondary">{children}</ul>
|
||||
);
|
||||
|
||||
const Link: CustomComponent = ({ href, children }) => (
|
||||
<a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
|
||||
export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
|
||||
const customComponents = {
|
||||
h1: HeadingPrimary,
|
||||
h3: HeadingSecondary,
|
||||
p: Paragraph,
|
||||
ol: OrderedList,
|
||||
ul: UnorderedList,
|
||||
a: Link,
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactMarkdown components={customComponents} {...options}>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
};
|
||||
99
apps/app/components/ui/product-updates-modal.tsx
Normal file
99
apps/app/components/ui/product-updates-modal.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import React from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// component
|
||||
import { MarkdownRenderer, Spinner } from "components/ui";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/20/solid";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// helper
|
||||
import { renderLongDateFormat } from "helpers/date-time.helper";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
||||
const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={setIsOpen}>
|
||||
<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-brand-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
|
||||
<div className="max-h-[600px] overflow-y-auto bg-brand-surface-2 p-5">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="flex justify-between text-lg font-medium leading-6 text-brand-base"
|
||||
>
|
||||
<span>Product Updates</span>
|
||||
<span>
|
||||
<button type="button" onClick={() => setIsOpen(false)}>
|
||||
<XMarkIcon
|
||||
className="h-6 w-6 text-gray-400 hover:text-brand-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</Dialog.Title>
|
||||
{updates && updates.length > 0 ? (
|
||||
updates.map((item, index: number) => (
|
||||
<>
|
||||
<div className="flex items-center gap-3 text-xs text-brand-secondary">
|
||||
<span className="flex items-center rounded-full border border-brand-base bg-brand-surface-1 px-3 py-1.5 text-xs">
|
||||
{item.tag_name}
|
||||
</span>
|
||||
<span>{renderLongDateFormat(item.published_at)}</span>
|
||||
{index === 0 && (
|
||||
<span className="flex items-center rounded-full border border-brand-base bg-brand-accent px-3 py-1.5 text-xs text-white">
|
||||
New
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<MarkdownRenderer markdown={item.body} />
|
||||
</>
|
||||
))
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
||||
@ -36,6 +36,7 @@
|
||||
"react-dom": "18.2.0",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-hook-form": "^7.38.0",
|
||||
"react-markdown": "^8.0.7",
|
||||
"recharts": "^2.3.2",
|
||||
"remirror": "^2.0.23",
|
||||
"swr": "^1.3.0",
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
IssuesPieChart,
|
||||
IssuesStats,
|
||||
} from "components/workspace";
|
||||
import { ProductUpdatesModal } from "components/ui";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
@ -22,6 +23,7 @@ import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
|
||||
|
||||
const WorkspacePage: NextPage = () => {
|
||||
const [month, setMonth] = useState(new Date().getMonth() + 1);
|
||||
const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
@ -39,6 +41,10 @@ const WorkspacePage: NextPage = () => {
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout noHeader>
|
||||
<ProductUpdatesModal
|
||||
isOpen={isProductUpdatesModalOpen}
|
||||
setIsOpen={setIsProductUpdatesModalOpen}
|
||||
/>
|
||||
<div className="h-full w-full">
|
||||
<div className="flex flex-col gap-8">
|
||||
<div
|
||||
@ -49,9 +55,12 @@ const WorkspacePage: NextPage = () => {
|
||||
Plane is open source, support us by starring us on GitHub.
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* <a href="#" target="_blank" rel="noopener noreferrer">
|
||||
View roadmap
|
||||
</a> */}
|
||||
<button
|
||||
onClick={() => setIsProductUpdatesModalOpen(true)}
|
||||
className="rounded-md border-2 border-brand-base px-3 py-1.5 text-sm font-medium duration-300"
|
||||
>
|
||||
{`What's New?`}
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/makeplane/plane"
|
||||
target="_blank"
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
IWorkspaceMemberInvitation,
|
||||
ILastActiveWorkspaceDetails,
|
||||
IWorkspaceSearchResults,
|
||||
IProductUpdateResponse,
|
||||
} from "types";
|
||||
|
||||
const trackEvent =
|
||||
@ -206,6 +207,13 @@ class WorkspaceService extends APIService {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
async getProductUpdates(): Promise<IProductUpdateResponse[]> {
|
||||
return this.get("/api/release-notes/")
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new WorkspaceService();
|
||||
|
||||
52
apps/app/types/workspace.d.ts
vendored
52
apps/app/types/workspace.d.ts
vendored
@ -82,3 +82,55 @@ export interface IWorkspaceSearchResults {
|
||||
page: IWorkspaceDefaultSearchResult[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface IProductUpdateResponse {
|
||||
url: string;
|
||||
assets_url: string;
|
||||
upload_url: string;
|
||||
html_url: string;
|
||||
id: number;
|
||||
author: {
|
||||
login: string;
|
||||
id: string;
|
||||
node_id: string;
|
||||
avatar_url: string;
|
||||
gravatar_id: "";
|
||||
url: string;
|
||||
html_url: string;
|
||||
followers_url: string;
|
||||
following_url: string;
|
||||
gists_url: string;
|
||||
starred_url: string;
|
||||
subscriptions_url: string;
|
||||
organizations_url: string;
|
||||
repos_url: string;
|
||||
events_url: string;
|
||||
received_events_url: string;
|
||||
type: string;
|
||||
site_admin: false;
|
||||
};
|
||||
node_id: string;
|
||||
tag_name: string;
|
||||
target_commitish: string;
|
||||
name: string;
|
||||
draft: boolean;
|
||||
prerelease: true;
|
||||
created_at: string;
|
||||
published_at: string;
|
||||
assets: [];
|
||||
tarball_url: string;
|
||||
zipball_url: string;
|
||||
body: string;
|
||||
reactions: {
|
||||
url: string;
|
||||
total_count: number;
|
||||
"+1": number;
|
||||
"-1": number;
|
||||
laugh: number;
|
||||
hooray: number;
|
||||
confused: number;
|
||||
heart: number;
|
||||
rocket: number;
|
||||
eyes: number;
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user