fix(share): revamp share action and modal

Signed-off-by: Sudhanshu Dasgupta <[email protected]>
layer5io · Dec 17, 2024 · 6a792e8 · 6a792e8
1 parent f2edeb6
commit 6a792e8
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 47 deletions.
diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
+import { CopyIcon, EditIcon, KanvasIcon, PublishIcon, ShareIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -21,6 +21,8 @@ interface ActionButtonsProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
+  showShareAction?: boolean;
+  handleShare: () => void;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -35,7 +37,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   showOpenPlaygroundAction,
   onOpenPlaygroundClick,
   showInfoAction,
-  handleInfoClick
+  handleInfoClick,
+  showShareAction,
+  handleShare
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const theme = useTheme();
@@ -136,19 +140,34 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             Edit
           </ActionButton>
         )}
-        {showUnpublishAction && (
-          <UnpublishAction
+        {showShareAction && (
+          <ActionButton
             sx={{
               borderRadius: '0.2rem',
-              gap: '10px'
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
+              gap: '10px',
+              color: charcoal[10]
             }}
-            onClick={handleUnpublish}
+            onClick={handleShare}
           >
-            <PublishIcon width={24} height={24} fill={charcoal[100]} />
-            Unpublish
-          </UnpublishAction>
+            <ShareIcon width={24} height={24} fill={charcoal[10]} />
+            Share
+          </ActionButton>
         )}
       </div>
+      {showUnpublishAction && (
+        <UnpublishAction
+          sx={{
+            borderRadius: '0.2rem',
+            gap: '10px'
+          }}
+          onClick={handleUnpublish}
+        >
+          <PublishIcon width={24} height={24} fill={charcoal[100]} />
+          Unpublish
+        </UnpublishAction>
+      )}
     </StyledActionWrapper>
   );
 };

diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -25,6 +25,8 @@ interface LeftPanelProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
+  showShareAction?: boolean;
+  handleShare: () => void;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -44,7 +46,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   showOpenPlaygroundAction = true,
   onOpenPlaygroundClick,
   showInfoAction = false,
-  handleInfoClick
+  handleInfoClick,
+  showShareAction = false,
+  handleShare
 }) => {
   const theme = useTheme();
 
@@ -89,6 +93,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         onOpenPlaygroundClick={onOpenPlaygroundClick}
         showInfoAction={showInfoAction}
         handleInfoClick={handleInfoClick}
+        showShareAction={showShareAction}
+        handleShare={handleShare}
       />
       {showTechnologies && (
         <TechnologySection

diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -6,7 +6,7 @@ import { useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { ActionButton, CopyShareIconWrapper, VisibilityChip } from './style';
+import { CopyShareIconWrapper, VisibilityChip } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -25,9 +25,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl,
-  showShareAction,
-  handleShare
+  handleCopyUrl
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -54,27 +52,14 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
           {details?.visibility}
         </VisibilityChip>
 
-        {showShareAction ? (
-          <CustomTooltip title="Share" placement="top" arrow>
-            <ActionButton sx={{ borderRadius: '0.2rem', padding: '0.4rem' }} onClick={handleShare}>
-              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
-              Share
-            </ActionButton>
-          </CustomTooltip>
-        ) : (
-          <>
-            {details?.visibility !== 'private' && (
-              <CustomTooltip title="Copy Link" placement="top" arrow>
-                <IconButton
-                  sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
-                  onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
-                >
-                  <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
-                </IconButton>
-              </CustomTooltip>
-            )}
-          </>
-        )}
+        <CustomTooltip title="Copy Link" placement="top" arrow>
+          <IconButton
+            sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
+            onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
+          >
+            <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
+          </IconButton>
+        </CustomTooltip>
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (
           <>

diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx
@@ -14,6 +14,7 @@ import {
 import { ChainIcon, DeleteIcon, LockIcon, PublicIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BLACK, WHITE } from '../../theme/colors';
+import { CustomTooltip } from '../CustomTooltip';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import UserShareSearch from '../UserSearchField/UserSearchField';
 import {
@@ -97,13 +98,15 @@ const AccessList: React.FC<AccessListProps> = ({
                 {ownerData.id === actorData.id ? (
                   <div>Owner</div>
                 ) : (
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => handleDelete(actorData.email)}
-                  >
-                    <DeleteIcon fill={theme.palette.background.neutral?.default} />
-                  </IconButton>
+                  <CustomTooltip title="Remove Access" placement="top" arrow>
+                    <IconButton
+                      edge="end"
+                      aria-label="delete"
+                      onClick={() => handleDelete(actorData.email)}
+                    >
+                      <DeleteIcon fill={theme.palette.background.neutral?.default} />
+                    </IconButton>
+                  </CustomTooltip>
                 )}
               </ListItemSecondaryAction>
             </ListItem>
@@ -185,6 +188,9 @@ const ShareModal: React.FC<ShareModalProps> = ({
   const handleMenuClose = () => setMenu(false);
 
   const isShareDisabled = () => {
+    // Ensure at least one user other than the owner is selected
+    const otherUsersSelected = shareUserData.some((user) => user.id !== ownerData.id);
+
     const existingAccessIds = shareUserData.map((user) => user.id);
     const ownerDataId = ownerData?.id;
 
@@ -195,10 +201,10 @@ const ShareModal: React.FC<ShareModalProps> = ({
     const hasMismatchedUsers = !shareUserData.every((user) => existingAccessIds.includes(user.id));
 
     return (
-      shareUserData.length === existingAccessIds.length &&
-      !hasMismatchedUsers &&
-      (selectedOption === selectedResource?.visibility ||
-        shareUserData.length !== existingAccessIds.length)
+      !otherUsersSelected || // Disable if no other users are selected
+      (shareUserData.length === existingAccessIds.length &&
+        !hasMismatchedUsers &&
+        selectedOption === selectedResource?.visibility)
     );
   };
 
@@ -216,6 +222,18 @@ const ShareModal: React.FC<ShareModalProps> = ({
     }
   }, [selectedResource]);
 
+  useEffect(() => {
+    if (selectedResource?.visibility === 'published') {
+      setOption(SHARE_MODE.PRIVATE); // Force set to private if published
+    } else {
+      setOption(selectedResource?.visibility);
+    }
+  }, [selectedResource]);
+
+  // Filter options dynamically to exclude PUBLIC when visibility is published
+  const filteredOptions =
+    selectedResource?.visibility === 'published' ? [SHARE_MODE.PRIVATE] : Object.values(SHARE_MODE);
+
   return (
     <div style={{ marginBottom: '1rem' }}>
       <Modal
@@ -271,7 +289,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
                     onChange={handleOptionClick}
                     disabled={isVisibilitySelectorDisabled}
                   >
-                    {Object.values(SHARE_MODE).map((option) => (
+                    {filteredOptions.map((option) => (
                       <MenuItem key={option} selected={option === selectedOption} value={option}>
                         {option.charAt(0).toUpperCase() + option.slice(1)}
                       </MenuItem>