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

Merge pull request #959 from makeplane/feat/product_update_modal

Browse Source 
feat: product update modal
This commit is contained in:
guru_sainath 2023-04-28 19:38:33 +05:30 committed by GitHub
commit 93fb4fe1e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 251 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/ui/index.ts
View File

@ -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
View 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
View 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>
);
};

1
apps/app/package.json
View File

@ -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
apps/app/pages/[workspaceSlug]/index.tsx
View File

@ -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"

8
apps/app/services/workspace.service.ts
View File

@ -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
View File

@ -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;
};
}