Notion integration FE #2296

src/pages/OldCommon/interfaces/CreateCommonPayload.ts

@@ -1,5 +1,10 @@
 import { UploadFile } from "@/shared/interfaces";
-import { BaseRule, CommonLink, Roles } from "@/shared/models";
+import {
+  BaseRule,
+  CommonLink,
+  NotionIntegrationIntermediate,
+  Roles,
+} from "@/shared/models";
 import { MemberAdmittanceLimitations } from "@/shared/models/governance/proposals";
 import { TextEditorValue } from "@/shared/ui-kit/TextEditor/types";
 
@@ -59,6 +64,7 @@ export interface IntermediateUpdateCommonData {
   gallery?: UploadFile[];
   links?: CommonLink[];
   roles?: Roles;
+  notion?: NotionIntegrationIntermediate;
 }
 
 export interface UpdateCommonData {

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -23,6 +23,7 @@ import {
   Common,
   CommonFeed,
   CommonMember,
+  CommonNotion,
   DirectParent,
   Governance,
   PredefinedTypes,
@@ -52,6 +53,7 @@ interface DiscussionFeedCardProps {
   commonId?: string;
   commonName: string;
   commonImage: string;
+  commonNotion?: CommonNotion;
   pinnedFeedItems?: Common["pinnedFeedItems"];
   commonMember?: CommonMember | null;
   isProject: boolean;
@@ -79,6 +81,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       commonId,
       commonName,
       commonImage,
+      commonNotion,
       pinnedFeedItems,
       commonMember,
       isProject,
@@ -283,6 +286,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           <FeedCardContent
             description={isHome ? common?.description : discussion?.message}
             images={isHome ? common?.gallery : discussion?.images}
+            notion={discussion?.notion}
             onClick={handleOpenChat}
             onMouseEnter={() => {
               onHover(true);
@@ -334,6 +338,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           ownerId={item.userId}
           discussionPredefinedType={discussion?.predefinedType}
+          notion={discussion?.notion && commonNotion}
           hasUnseenMention={
             isFeedItemUserMetadataFetched &&
             feedItemUserMetadata?.hasUnseenMention

src/pages/common/components/FeedCard/FeedCard.tsx

@@ -11,7 +11,7 @@ import classNames from "classnames";
 import { useFeedItemContext } from "@/pages/common";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ContextMenuItem } from "@/shared/interfaces";
-import { CommonFeedType, PredefinedTypes } from "@/shared/models";
+import { CommonFeedType, CommonNotion, PredefinedTypes } from "@/shared/models";
 import { Loader, TextEditorValue } from "@/shared/ui-kit";
 import { CommonCard } from "../CommonCard";
 import { FeedCardRef } from "./types";
@@ -47,6 +47,7 @@ type FeedCardProps = PropsWithChildren<{
   hasFiles?: boolean;
   hasImages?: boolean;
   hasUnseenMention?: boolean;
+  notion?: CommonNotion;
 }>;
 
 const MOBILE_HEADER_HEIGHT = 52;
@@ -87,6 +88,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     discussionPredefinedType,
     hasImages,
     hasFiles,
+    notion,
   } = props;
   const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isTabletView = useIsTabletView();
@@ -210,6 +212,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
             hasFiles,
             hasImages,
             hasUnseenMention,
+            notion,
           })}
         </div>
       )}

src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.module.scss

@@ -3,6 +3,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  gap: 10px;
   min-height: 4.5rem;
   justify-content: space-between;
   width: 100%;

src/pages/common/components/FeedCard/components/FeedCardContent/FeedCardContent.tsx

@@ -1,12 +1,14 @@
 import React, { ReactNode } from "react";
-import { CommonLink } from "@/shared/models";
+import { CommonLink, DiscussionNotion } from "@/shared/models";
 import { FeedGeneralInfo } from "../FeedGeneralInfo";
+import { FeedNotionInfo } from "../FeedNotionInfo";
 import styles from "./FeedCardContent.module.scss";
 
 export type FeedCardContentProps = JSX.IntrinsicElements["div"] & {
   subtitle?: ReactNode;
   description?: string;
   images?: CommonLink[];
+  notion?: DiscussionNotion;
   onClick: () => void;
 };
 
@@ -16,6 +18,7 @@ export const FeedCardContent: React.FC<FeedCardContentProps> = (props) => {
     description,
     subtitle,
     images,
+    notion,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -28,6 +31,7 @@ export const FeedCardContent: React.FC<FeedCardContentProps> = (props) => {
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
+      {!!notion && <FeedNotionInfo notion={notion} />}
       <FeedGeneralInfo
         description={description}
         subtitle={subtitle}

src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss

@@ -89,6 +89,9 @@
 }
 
 .title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   color: var(--title-color);
   font-size: $moderate-xsmall;
   line-height: 1.5rem;
@@ -156,3 +159,14 @@
   display: flex;
   align-items: center;
 }
+
+.tooltipTriggerContainer {
+  display: inline-flex;
+}
+
+.tooltipContent {
+  display: flex;
+  flex-direction: column;
+  max-width: 20rem;
+  z-index: 3;
+}

src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx

@@ -1,12 +1,16 @@
 import React, { FC, MouseEventHandler, useRef, useState } from "react";
 import classNames from "classnames";
 import { useLongPress } from "use-long-press";
+import { NotionIcon } from "@/shared/icons";
 import {
   checkIsTextEditorValueEmpty,
   ContextMenu,
   ContextMenuRef,
   TextEditorWithReinitialization as TextEditor,
   TimeAgo,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@/shared/ui-kit";
 import { FeedItemBaseContentProps } from "../../../FeedItem";
 import { FeedCardTags } from "../FeedCardTags";
@@ -36,6 +40,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isLoading = false,
     shouldHideBottomContent = false,
     hasUnseenMention,
+    notion,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
@@ -109,15 +114,28 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
       {renderLeftContent?.()}
       <div className={styles.content}>
         <div className={styles.topContent}>
-          <p
+          <div
             className={classNames(
               styles.text,
               styles.title,
               titleWrapperClassName,
             )}
           >
-            {isLoading || !title ? "Loading..." : title}
-          </p>
+            <span>{isLoading || !title ? "Loading..." : title}</span>
+            {Boolean(notion) && (
+              <Tooltip placement="top-start">
+                <TooltipTrigger asChild>
+                  <div className={styles.tooltipTriggerContainer}>
+                    <NotionIcon />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent className={styles.tooltipContent}>
+                  <span>Notion sync</span>
+                  <span>Database: {notion?.title}</span>
+                </TooltipContent>
+              </Tooltip>
+            )}
+          </div>
           <p
             className={classNames(styles.text, styles.lastActivity, {
               [styles.lastActivityActive]:

src/pages/common/components/FeedCard/components/FeedNotionInfo/FeedNotionInfo.module.scss

@@ -0,0 +1,13 @@
+.notionInfo {
+  display: flex;
+  gap: 10px;
+}
+
+.link {
+  color: var(--primary-fill);
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.9;
+  }
+}

src/pages/common/components/FeedCard/components/FeedNotionInfo/FeedNotionInfo.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { NotionIcon } from "@/shared/icons";
+import { DiscussionNotion } from "@/shared/models";
+import styles from "./FeedNotionInfo.module.scss";
+
+interface FeedNotionInfoProps {
+  notion: DiscussionNotion;
+}
+
+export const FeedNotionInfo: React.FC<FeedNotionInfoProps> = (props) => {
+  const { notion } = props;
+
+  const linkToNotionPageEl = (
+    <a
+      className={styles.link}
+      href={`https://www.notion.so/${notion?.pageId.split("-").join("")}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Notion pageID: {notion?.pageId}
+    </a>
+  );
+
+  return (
+    <div className={styles.notionInfo}>
+      <NotionIcon width={24} height={24} />
+      {linkToNotionPageEl}
+    </div>
+  );
+};

src/pages/common/components/FeedCard/components/FeedNotionInfo/index.ts

@@ -0,0 +1 @@
+export * from "./FeedNotionInfo";

src/pages/common/components/FeedCard/components/index.ts

@@ -7,3 +7,4 @@ export * from "./FeedGeneralInfo";
 export * from "./FeedInfoHeader";
 export * from "./FeedItemBaseContent";
 export * from "./FeedCardTags";
+export * from "./FeedNotionInfo";

src/pages/common/components/FeedItem/FeedItem.tsx

@@ -8,6 +8,7 @@ import {
   CommonFeed,
   CommonFeedType,
   CommonMember,
+  CommonNotion,
   DirectParent,
 } from "@/shared/models";
 import { checkIsItemVisibleForUser } from "@/shared/utils";
@@ -23,6 +24,7 @@ interface FeedItemProps {
   commonName: string;
   commonMember?: (CommonMember & CirclesPermissions) | null;
   commonImage: string;
+  commonNotion?: CommonNotion;
   pinnedFeedItems?: Common["pinnedFeedItems"];
   isProject?: boolean;
   isPinned?: boolean;
@@ -48,6 +50,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     commonId,
     commonName,
     commonImage,
+    commonNotion,
     pinnedFeedItems,
     commonMember,
     isProject = false,
@@ -112,6 +115,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     commonId,
     commonName,
     commonImage,
+    commonNotion,
     pinnedFeedItems,
     isActive,
     isExpanded,

src/pages/common/components/FeedItem/context.ts

@@ -3,6 +3,7 @@ import { ContextMenuItem } from "@/shared/interfaces";
 import {
   CommonFeed,
   CommonFeedType,
+  CommonNotion,
   Discussion,
   PredefinedTypes,
 } from "@/shared/models";
@@ -45,6 +46,7 @@ export interface FeedItemBaseContentProps {
   shouldHideBottomContent?: boolean;
   dmUserId?: string;
   hasUnseenMention?: boolean;
+  notion?: CommonNotion;
 }
 
 export interface GetLastMessageOptions {

src/pages/common/components/FeedItems/FeedItems.tsx

@@ -74,6 +74,7 @@ const FeedItems: FC<FeedItemsProps> = (props) => {
                 commonId={common.id}
                 commonName={common.name}
                 commonImage={common.image}
+                commonNotion={common.notion}
                 pinnedFeedItems={common.pinnedFeedItems}
                 isPinned={isPinned}
                 isProject={checkIsProject(common)}

src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx

@@ -23,6 +23,7 @@ import { FeedLayoutItemChangeData } from "@/shared/interfaces";
 import {
   Common,
   CommonFeed,
+  CommonNotion,
   Governance,
   PredefinedTypes,
   ResolutionType,
@@ -68,6 +69,7 @@ interface ProposalFeedCardProps {
   commonId?: string;
   commonName: string;
   commonImage: string;
+  commonNotion?: CommonNotion;
   pinnedFeedItems?: Common["pinnedFeedItems"];
   isProject: boolean;
   isPinned: boolean;
@@ -91,6 +93,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       commonId,
       commonName,
       commonImage,
+      commonNotion,
       pinnedFeedItems,
       isProject,
       isPinned,
@@ -371,6 +374,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
               proposal.data.args.description,
               proposal.type,
             )}
+            notion={discussion?.notion}
             images={discussion?.images}
             onClick={handleOpenChat}
             onMouseEnter={() => {
@@ -459,6 +463,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           menuItems={menuItems}
           ownerId={item.userId}
           commonId={commonId}
+          notion={discussion?.notion && commonNotion}
           hasUnseenMention={
             isFeedItemUserMetadataFetched &&
             feedItemUserMetadata?.hasUnseenMention

src/pages/commonCreation/components/CreationForm/components/Item/Item.tsx

@@ -6,6 +6,7 @@ import {
   TextField,
   UploadFiles,
   RolesArrayWrapper,
+  NotionIntegration,
 } from "@/shared/components/Form/Formik";
 import { CreationFormItemType } from "../../constants";
 import { CreationFormItem } from "../../types";
@@ -79,6 +80,8 @@ const Item: FC<ItemProps> = (props) => {
           disabled={disabled ?? item.props.disabled}
         />
       );
+    case CreationFormItemType.NotionIntegration:
+      return <NotionIntegration {...item.props} className={className} />;
     default:
       return null;
   }

src/pages/commonCreation/components/CreationForm/constants/creationFormItemType.ts

@@ -4,4 +4,5 @@ export enum CreationFormItemType {
   UploadFiles = "UploadFiles",
   Links = "Links",
   Roles = "Roles",
+  NotionIntegration = "NotionIntegration",
 }