Merge pull request #2743 from daostack/CW-copy-link-in-2-steps

Link share with 2 rather than 3 steps

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

@@ -8,10 +8,11 @@ import React, {
 import { useDispatch, useSelector } from "react-redux";
 import { useUpdateEffect } from "react-use";
 import { debounce } from "lodash";
+import copyToClipboard from "copy-to-clipboard";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { DiscussionService } from "@/services";
 import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components";
-import { DiscussionMessageOwnerType, EntityTypes, InboxItemType } from "@/shared/constants";
+import { DiscussionMessageOwnerType, EntityTypes, InboxItemType, ShareButtonText } from "@/shared/constants";
 import { useModal, useNotification } from "@/shared/hooks";
 import {
   FeedItemFollowState,
@@ -33,10 +34,9 @@ import {
   PredefinedTypes,
 } from "@/shared/models";
 import { TextEditorValue } from "@/shared/ui-kit";
-import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage } from "@/shared/utils";
+import { StaticLinkType, getUserName, InternalLinkData, generateFirstMessage, generateStaticShareLink } from "@/shared/utils";
 import { useChatContext } from "../ChatComponent";
 import { FeedCard } from "../FeedCard";
-import { FeedCardShare } from "../FeedCard";
 import {
   FeedItemRef,
   GetLastMessageOptions,
@@ -122,11 +122,6 @@ function DiscussionFeedCard(props, ref) {
     onOpen: onReportModalOpen,
     onClose: onReportModalClose,
   } = useModal(false);
-  const {
-    isShowing: isShareModalOpen,
-    onOpen: onShareModalOpen,
-    onClose: onShareModalClose,
-  } = useModal(false);
   const {
     isShowing: isDeleteModalOpen,
     onOpen: onDeleteModalOpen,
@@ -191,10 +186,16 @@ function DiscussionFeedCard(props, ref) {
       getNonAllowedItems,
       feedItemUserMetadata,
       withoutMenu,
+      shareText: ShareButtonText.Stream
     },
     {
       report: onReportModalOpen,
-      share: () => onShareModalOpen(),
+      share: () => {
+        if(discussion) {
+          copyToClipboard(generateStaticShareLink(StaticLinkType.Discussion, discussion, item.id));
+          notify("The link has been copied!");
+        }
+      },
       remove: onDeleteModalOpen,
       linkStream: onLinkStreamModalOpen,
       unlinkStream: onUnlinkStreamModalOpen,
@@ -464,15 +465,6 @@ function DiscussionFeedCard(props, ref) {
           type={EntityTypes.Discussion}
         />
       )}
-      {discussion && (
-        <FeedCardShare
-          isOpen={isShareModalOpen}
-          onClose={onShareModalClose}
-          linkType={StaticLinkType.Discussion}
-          element={discussion}
-          feedItemId={item.id}
-        />
-      )}
       {isDeleteModalOpen && (
         <GlobalOverlay>
           <DeletePrompt

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

@@ -59,6 +59,7 @@ export const useMenuItems = (
     feedItem,
     feedItemFollow,
     feedItemUserMetadata,
+    shareText
   } = options;
   const {
     report,
@@ -92,7 +93,7 @@ export const useMenuItems = (
     },
     {
       id: FeedItemMenuItem.Share,
-      text: "Share",
+      text: shareText ?? "Share",
       onClick: share,
       icon: <Share3Icon />,
     },

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

@@ -9,6 +9,7 @@ import {
   CommonFeedObjectUserUnique,
 } from "@/shared/models";
 import { FeedItemMenuItem } from "./constants";
+import { ShareButtonText } from "@/shared/constants";
 
 export type GetNonAllowedItemsOptions = (
   type: CommonFeedType,
@@ -26,6 +27,7 @@ export interface GetAllowedItemsOptions {
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   feedItemUserMetadata: CommonFeedObjectUserUnique | null;
   withoutMenu?: boolean;
+  shareText?: ShareButtonText;
 }
 
 export type MenuItemOptions = Omit<GetAllowedItemsOptions, "feedItemFollow">;

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

@@ -8,11 +8,12 @@ import React, {
 import { useSelector } from "react-redux";
 import { useUpdateEffect } from "react-use";
 import { debounce } from "lodash";
+import copyToClipboard from "copy-to-clipboard";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { useCommonMember, useProposalUserVote } from "@/pages/OldCommon/hooks";
 import { ProposalService } from "@/services";
 import { DeletePrompt, GlobalOverlay } from "@/shared/components";
-import { InboxItemType } from "@/shared/constants";
+import { InboxItemType, ShareButtonText } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useForceUpdate, useModal, useNotification } from "@/shared/hooks";
 import {
@@ -34,10 +35,10 @@ import {
   PredefinedTypes,
 } from "@/shared/models";
 import { TextEditorValue } from "@/shared/ui-kit";
-import { StaticLinkType, getUserName, InternalLinkData } from "@/shared/utils";
+import { StaticLinkType, getUserName, InternalLinkData, generateStaticShareLink } from "@/shared/utils";
 import { useChatContext } from "../ChatComponent";
 import { useMenuItems } from "../DiscussionFeedCard/hooks";
-import { FeedCard, FeedCardShare } from "../FeedCard";
+import { FeedCard } from "../FeedCard";
 import {
   FeedItemRef,
   GetLastMessageOptions,
@@ -173,11 +174,6 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       setHovering(isMouseEnter);
     };
     const proposalId = item.data.id;
-    const {
-      isShowing: isShareModalOpen,
-      onOpen: onShareModalOpen,
-      onClose: onShareModalClose,
-    } = useModal(false);
     const preloadDiscussionMessagesData = usePreloadDiscussionMessagesById({
       commonId,
       discussionId: discussion?.id,
@@ -199,10 +195,16 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
         getNonAllowedItems,
         feedItemUserMetadata,
         withoutMenu,
+        shareText: ShareButtonText.Stream
       },
       {
         report: () => {},
-        share: () => onShareModalOpen(),
+        share: () => {
+          if(discussion) {
+            copyToClipboard(generateStaticShareLink(StaticLinkType.Proposal, discussion, item.id));
+            notify("The link has been copied!");
+          }
+        },
         remove: onProposalDeleteModalOpen,
         markFeedItemAsSeen,
         markFeedItemAsUnseen,
@@ -457,15 +459,6 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
             />
           )}
         </FeedCard>
-        {discussion && (
-          <FeedCardShare
-            isOpen={isShareModalOpen}
-            onClose={onShareModalClose}
-            linkType={StaticLinkType.Proposal}
-            element={discussion}
-            feedItemId={item.id}
-          />
-        )}
         {isProposalDeleteModalOpen && (
           <GlobalOverlay>
             <DeletePrompt

src/pages/commonFeed/components/HeaderContent/components/ActionsButton/ActionsButton.tsx

@@ -1,12 +1,13 @@
 import React, { FC } from "react";
-import { ShareModal } from "@/shared/components";
-import { useModal } from "@/shared/hooks";
+import copyToClipboard from "copy-to-clipboard";
+import { useNotification } from "@/shared/hooks";
 import { CommonFollowState } from "@/shared/hooks/useCases/useCommonFollow";
 import { CirclesPermissions, Common, CommonMember } from "@/shared/models";
 import { DesktopMenu, MenuButton } from "@/shared/ui-kit";
 import { StaticLinkType, generateStaticShareLink } from "@/shared/utils";
 import { useMenuItems } from "./hooks";
 import { useUpdateCommonSeenState } from "@/shared/hooks/useCases";
+import { ShareButtonText } from "@/shared/constants";
 
 interface ActionsButtonProps {
   common: Common;
@@ -18,37 +19,33 @@ interface ActionsButtonProps {
 
 const ActionsButton: FC<ActionsButtonProps> = (props) => {
   const { common, commonMember, commonFollow, onClick, onSearchClick } = props;
-  const {
-    isShowing: isShareModalOpen,
-    onOpen: onShareModalOpen,
-    onClose: onShareModalClose,
-  } = useModal(false);
+  const { notify } = useNotification();
   const { markCommonAsSeen } = useUpdateCommonSeenState();
+  const shareLink = generateStaticShareLink(StaticLinkType.Common, common);
   const items = useMenuItems(
     {
       common,
       commonMember,
       isFollowInProgress: commonFollow.isFollowInProgress,
       isSearchActionAvailable: Boolean(onSearchClick),
+      shareText: ShareButtonText.Space,
     },
     {
-      share: onShareModalOpen,
+      share: () => {
+        copyToClipboard(shareLink);
+        notify("The link has been copied!");
+      },
       onFollowToggle: commonFollow.onFollowToggle,
       onSearchClick,
       markCommonAsSeen
     },
   );
-  const shareLink = generateStaticShareLink(StaticLinkType.Common, common);
+
   const triggerEl = <MenuButton onClick={onClick} />;
 
   return (
     <>
       {items.length > 0 && <DesktopMenu triggerEl={triggerEl} items={items} />}
-      <ShareModal
-        sourceUrl={shareLink}
-        isShowing={isShareModalOpen}
-        onClose={onShareModalClose}
-      />
     </>
   );
 };

src/pages/commonFeed/components/HeaderContent/components/ActionsButton/hooks/useMenuItems.tsx

@@ -25,7 +25,7 @@ export const useMenuItems = (
   options: GetAllowedItemsOptions,
   actions: Actions,
 ): Item[] => {
-  const { common } = options;
+  const { common, shareText } = options;
   const { share, onFollowToggle, onSearchClick, markCommonAsSeen } = actions;
 
   const items: Item[] = [
@@ -37,7 +37,7 @@ export const useMenuItems = (
     },
     {
       id: CommonFeedMenuItem.Share,
-      text: "Share",
+      text: shareText ?? "Share",
       onClick: share,
       icon: <Share3Icon />,
     },

src/pages/commonFeed/utils/getAllowedItems.ts

@@ -1,12 +1,14 @@
 import { MenuItem as Item } from "@/shared/interfaces";
 import { CirclesPermissions, Common, CommonMember } from "@/shared/models";
 import { CommonFeedMenuItem } from "../constants";
+import { ShareButtonText } from "@/shared/constants";
 
 export interface Options {
   common: Common;
   commonMember: (CommonMember & CirclesPermissions) | null;
   isFollowInProgress: boolean;
   isSearchActionAvailable: boolean;
+  shareText?: ShareButtonText;
 }
 
 const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record<

src/shared/components/Dropdown/index.scss

@@ -89,7 +89,7 @@
 }
 
 .custom-dropdown-wrapper__menu-list {
-  max-height: 16.875rem;
+  max-height: 18rem;
   margin: 0;
   padding: 0;
   overflow-y: auto;

src/shared/components/ElementDropdown/ElementDropdown.tsx

@@ -4,7 +4,7 @@ import classNames from "classnames";
 import copyToClipboard from "copy-to-clipboard";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { MenuButton, ShareModal } from "@/shared/components";
-import { Orientation, EntityTypes } from "@/shared/constants";
+import { Orientation, EntityTypes, ShareButtonText } from "@/shared/constants";
 import { useNotification, useModal } from "@/shared/hooks";
 import {
   CopyIcon,
@@ -165,9 +165,10 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
     }
 
     if (!isChatMessage) {
+      const shareText = isDiscussionMessage ? ShareButtonText.Message : "Share";
       items.push({
-        text: <ElementDropdownItem text="Share" icon={<Share3Icon />} />,
-        searchText: "Share",
+        text: <ElementDropdownItem text={shareText} icon={<Share3Icon />} />,
+        searchText: shareText,
         value: ElementDropdownMenuItems.Share,
       });
     }
@@ -261,7 +262,12 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
 
     switch (selectedItem) {
       case ElementDropdownMenuItems.Share:
-        onOpen();
+        if(isDiscussionMessage) {
+          copyToClipboard(staticShareLink);
+          notify("The link has been copied!");
+        } else {
+          onOpen();
+        }
         break;
       case ElementDropdownMenuItems.Copy:
         copyToClipboard(
@@ -273,7 +279,7 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
         break;
       case ElementDropdownMenuItems.CopyLink:
         copyToClipboard(staticShareLink || "");
-        notify("The link has copied!");
+        notify("The link has been copied!");
         break;
       case ElementDropdownMenuItems.Delete:
         onOpenDelete();
@@ -312,7 +318,7 @@ const ElementDropdown: FC<ElementDropdownProps> = ({
 
   const menuInlineStyle = useMemo(
     () => ({
-      height: `${2.5 * (ElementDropdownMenuItemsList.length || 1)}rem`,
+      height: `${3 * (ElementDropdownMenuItemsList.length || 1)}rem`,
     }),
     [ElementDropdownMenuItemsList],
   );

src/shared/components/ElementDropdown/index.scss

@@ -2,8 +2,8 @@
 
 .element-dropdown__menu-wrapper {
   .element-dropdown__menu {
-    width: 10rem;
-    height: 5.625rem;
+    width: 14rem;
+    height: 9rem;
     right: 0;
     display: flex;
     flex-direction: column;
@@ -16,9 +16,9 @@
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    height: 2.5rem;
+    height: 3rem;
     padding: 0.65625rem 1.5rem;
-    font-size: $small;
+    font-size: $xsmall;
     box-shadow: inset 0 -0.0625rem 0 var(--drop-shadow);
 
     > :first-child {

src/shared/components/ShareModal/ShareModal.tsx

@@ -37,7 +37,7 @@ const ShareModal: FC<PropsWithChildren<ShareModalProps>> = (props) => {
 
   const handleCopyClick = () => {
     copyToClipboard(sourceUrl);
-    notify("The link has copied!");
+    notify("The link has been copied!");
   };
 
   return (

src/shared/constants/index.tsx

@@ -36,3 +36,4 @@ export * from "./docChange";
 export * from "./files";
 export * from "./inboxAction";
 export * from "./featureFlags";
+export * from "./shareText";

src/shared/constants/shareText.ts

@@ -0,0 +1,5 @@
+export enum ShareButtonText {
+    Space = "Copy space link",
+    Stream = "Copy link",
+    Message = "Copy message link"
+}