FE add "Link stream" action #2089

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

@@ -44,6 +44,7 @@ import {
   GetLastMessageOptions,
   GetNonAllowedItemsOptions,
 } from "../FeedItem";
+import { LinkSpaceModal } from "./components";
 import { useMenuItems } from "./hooks";
 
 interface DiscussionFeedCardProps {
@@ -65,6 +66,7 @@ interface DiscussionFeedCardProps {
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeData) => void;
   directParent?: DirectParent | null;
+  rootCommonId?: string;
   feedItemFollow: FeedItemFollowState;
   onUserSelect?: (userId: string, commonId?: string) => void;
 }
@@ -93,6 +95,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       getNonAllowedItems,
       onActiveItemDataChange,
       directParent,
+      rootCommonId,
       feedItemFollow,
       onUserSelect,
     } = props;
@@ -111,6 +114,11 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       onOpen: onDeleteModalOpen,
       onClose: onDeleteModalClose,
     } = useModal(false);
+    const {
+      isShowing: isLinkSpaceModalOpen,
+      onOpen: onLinkSpaceModalOpen,
+      onClose: onLinkSpaceModalClose,
+    } = useModal(false);
     const [isDeletingInProgress, setDeletingInProgress] = useState(false);
     const {
       fetchUser: fetchDiscussionCreator,
@@ -145,6 +153,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
         report: onReportModalOpen,
         share: () => onShareModalOpen(),
         remove: onDeleteModalOpen,
+        linkSpace: onLinkSpaceModalOpen,
       },
     );
     const user = useSelector(selectUser());
@@ -343,6 +352,8 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
             isFeedItemUserMetadataFetched &&
             feedItemUserMetadata?.hasUnseenMention
           }
+          originalCommonIdForLinking={discussion?.commonId}
+          linkedCommonIds={discussion?.linkedCommonIds}
         >
           {renderContent()}
         </FeedCard>
@@ -375,6 +386,18 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
             />
           </GlobalOverlay>
         )}
+        {commonId && (
+          <LinkSpaceModal
+            isOpen={isLinkSpaceModalOpen}
+            onClose={onLinkSpaceModalClose}
+            feedItemId={item.id}
+            title={cardTitle || ""}
+            rootCommonId={rootCommonId || commonId}
+            commonId={commonId}
+            originalCommonId={discussion?.commonId || ""}
+            linkedCommonIds={discussion?.linkedCommonIds}
+          />
+        )}
       </>
     );
   },

src/pages/common/components/DiscussionFeedCard/components/LinkSpaceModal/LinkSpaceModal.module.scss

@@ -0,0 +1,70 @@
+@import "../../../../../../constants";
+@import "../../../../../../styles/sizes";
+
+.modal {
+  max-width: 31.875rem;
+  width: 100%;
+  max-height: 33.75rem;
+  min-height: 24rem;
+  border-radius: 0;
+  box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
+
+  :global(.modal__header-wrapper--with-modal-padding) {
+    .modalHeader {
+      justify-content: flex-start;
+    }
+
+    .modalTitle {
+      margin: 0;
+      font-family: PoppinsSans, sans-serif;
+      font-weight: 600;
+      font-size: 1.25rem;
+      color: var(--primary-text);
+      text-align: left;
+      word-break: break-word;
+    }
+  }
+
+  .modalContent {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .modalCloseWrapper {
+    top: 1.7rem;
+    margin: 0;
+
+    @include tablet {
+      top: 1.1rem;
+    }
+  }
+
+  @include tablet {
+    max-width: unset;
+    max-height: unset;
+  }
+}
+
+.submitButtonWrapper {
+  margin-top: auto;
+  padding-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.submitButton {
+  --btn-w: 100%;
+
+  max-width: 9.75rem;
+
+  @include tablet {
+    max-width: 100%;
+  }
+}
+
+.loader {
+  margin: 0 auto;
+}

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

@@ -0,0 +1,110 @@
+import React, { FC, ReactElement, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { selectUser } from "@/pages/Auth/store/selectors";
+import { Modal } from "@/shared/components";
+import { useNotification } from "@/shared/hooks";
+import { useStreamLinking } from "@/shared/hooks/useCases";
+import { Button, ButtonVariant, Loader } from "@/shared/ui-kit";
+import { emptyFunction } from "@/shared/utils";
+import { Projects } from "./components";
+import styles from "./LinkSpaceModal.module.scss";
+
+interface DirectMessageModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  feedItemId: string;
+  title: string;
+  rootCommonId: string;
+  commonId: string;
+  originalCommonId: string;
+  linkedCommonIds?: string[];
+}
+
+const LinkSpaceModal: FC<DirectMessageModalProps> = (props) => {
+  const {
+    isOpen,
+    onClose,
+    feedItemId,
+    title,
+    rootCommonId,
+    commonId,
+    originalCommonId,
+    linkedCommonIds = [],
+  } = props;
+  const { notify } = useNotification();
+  const { isStreamLinking, isStreamLinked, linkStream } = useStreamLinking();
+  const [activeItemId, setActiveItemId] = useState("");
+  const user = useSelector(selectUser());
+  const userId = user?.uid;
+
+  const handleSubmit = () => {
+    if (!userId) {
+      return;
+    }
+
+    linkStream({
+      userId,
+      feedObjectId: feedItemId,
+      sourceCommonId: commonId,
+      targetCommonId: activeItemId,
+    });
+  };
+
+  const renderContent = (): ReactElement => {
+    if (isStreamLinking) {
+      return <Loader className={styles.loader} />;
+    }
+
+    return (
+      <>
+        <Projects
+          rootCommonId={rootCommonId}
+          commonId={commonId}
+          activeItemId={activeItemId}
+          onActiveItemId={setActiveItemId}
+          originalCommonId={originalCommonId}
+          linkedCommonIds={linkedCommonIds}
+        />
+        <div className={styles.submitButtonWrapper}>
+          <Button
+            className={styles.submitButton}
+            variant={ButtonVariant.PrimaryPink}
+            disabled={!activeItemId}
+            onClick={handleSubmit}
+          >
+            Apply
+          </Button>
+        </div>
+      </>
+    );
+  };
+
+  useEffect(() => {
+    if (isStreamLinked) {
+      notify("Stream is successfully linked");
+      onClose();
+    }
+  }, [isStreamLinking, isStreamLinked]);
+
+  return (
+    <Modal
+      className={styles.modal}
+      isShowing={isOpen}
+      onClose={isStreamLinking ? emptyFunction : onClose}
+      title={`Link “${title}“`}
+      isHeaderSticky
+      hideCloseButton={isStreamLinking}
+      mobileFullScreen
+      styles={{
+        header: styles.modalHeader,
+        title: styles.modalTitle,
+        content: styles.modalContent,
+        closeWrapper: styles.modalCloseWrapper,
+      }}
+    >
+      {renderContent()}
+    </Modal>
+  );
+};
+
+export default LinkSpaceModal;

src/pages/common/components/DiscussionFeedCard/components/LinkSpaceModal/components/Projects/Projects.module.scss

@@ -0,0 +1,57 @@
+@import "../../../../../../../../constants";
+@import "../../../../../../../../styles/sizes";
+
+.projectsTree {
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.projectsTreeItemTriggerClassName {
+  --item-pl-per-level: 1.25rem;
+  --item-arrow-pl: 0.5rem;
+
+  height: 3rem;
+  border-radius: 0;
+
+  &:hover {
+    --bg-color: #{var(--secondary-text)};
+    --item-text-color: #{$c-shades-white};
+  }
+}
+.projectsTreeItemTriggerActiveClassName {
+  --bg-color: #{var(--primary-fill)};
+  --item-text-color: #{$c-shades-white};
+
+  &:hover {
+    --bg-color: #{var(--primary-fill)};
+  }
+}
+
+.projectsTreeItemTriggerNameClassName {
+  font-family: PoppinsSans, sans-serif;
+  font-weight: 500;
+}
+
+.projectsTreeItemTriggerImageClassName {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.875rem;
+}
+.projectsTreeItemTriggerImageNonRoundedClassName {
+  border-radius: 0.375rem;
+}
+
+.loader {
+  margin: 1rem auto 0;
+  display: block;
+}
+
+.createCommonButton {
+  width: 100%;
+  padding-left: 2.125rem;
+  padding-right: 0.875rem;
+}
+
+.commonsMenuClassName {
+  max-height: 15rem;
+}

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

@@ -0,0 +1,85 @@
+import React, { FC, ReactNode, useEffect, useMemo, useState } from "react";
+import { LOADER_APPEARANCE_DELAY } from "@/shared/constants";
+import { TreeItemTriggerStyles } from "@/shared/layouts";
+import { ProjectsTree } from "@/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/ProjectsTree";
+import { Loader } from "@/shared/ui-kit";
+import { useProjectsData } from "./hooks";
+import styles from "./Projects.module.scss";
+
+interface ProjectsProps {
+  rootCommonId: string;
+  commonId: string;
+  activeItemId: string;
+  onActiveItemId: (activeItemId: string) => void;
+  originalCommonId: string;
+  linkedCommonIds: string[];
+  renderNoItemsInfo?: () => ReactNode;
+}
+
+const Projects: FC<ProjectsProps> = (props) => {
+  const {
+    activeItemId,
+    onActiveItemId,
+    renderNoItemsInfo,
+    originalCommonId,
+    linkedCommonIds,
+  } = props;
+  const [currentCommonId, setCurrentCommonId] = useState(props.rootCommonId);
+  const {
+    parentItem,
+    areCommonsLoading,
+    areProjectsLoading,
+    commons,
+    items,
+    activeItem,
+    parentItemIds,
+  } = useProjectsData({
+    currentCommonId,
+    activeItemId,
+    originalCommonId,
+    linkedCommonIds,
+  });
+  const treeItemTriggerStyles = useMemo<TreeItemTriggerStyles>(
+    () => ({
+      container: styles.projectsTreeItemTriggerClassName,
+      containerActive: styles.projectsTreeItemTriggerActiveClassName,
+      name: styles.projectsTreeItemTriggerNameClassName,
+      image: styles.projectsTreeItemTriggerImageClassName,
+      imageNonRounded: styles.projectsTreeItemTriggerImageNonRoundedClassName,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    onActiveItemId("");
+  }, [currentCommonId]);
+
+  if (!parentItem) {
+    return areCommonsLoading ? (
+      <Loader className={styles.loader} delay={LOADER_APPEARANCE_DELAY} />
+    ) : (
+      <>{renderNoItemsInfo?.() || null}</>
+    );
+  }
+
+  return (
+    <ProjectsTree
+      className={styles.projectsTree}
+      treeItemTriggerStyles={treeItemTriggerStyles}
+      parentItem={parentItem}
+      commons={commons}
+      items={items}
+      activeItem={activeItem}
+      parentItemIds={parentItemIds}
+      currentCommonId={currentCommonId}
+      onCommonClick={setCurrentCommonId}
+      isLoading={areProjectsLoading}
+      withScrollbar={false}
+      commonsMenuClassName={styles.commonsMenuClassName}
+      loaderDelay={0}
+      onItemClick={onActiveItemId}
+    />
+  );
+};
+
+export default Projects;