Skip to content

Commit 6a792e8

Browse files
sudhanshutechsudhanshutech
committed
fix(share): revamp share action and modal
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
1 parent f2edeb6 commit 6a792e8

4 files changed

Lines changed: 75 additions & 47 deletions

File tree

‎src/custom/CatalogDetail/ActionButton.tsx‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { CircularProgress } from '../../base';
3-
import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
3+
import { CopyIcon, EditIcon, KanvasIcon, PublishIcon, ShareIcon } from '../../icons';
44
import Download from '../../icons/Download/Download';
55
import { charcoal, useTheme } from '../../theme';
66
import { Pattern } from '../CustomCatalog/CustomCard';
@@ -21,6 +21,8 @@ interface ActionButtonsProps {
2121
onOpenPlaygroundClick: (designId: string, name: string) => void;
2222
showInfoAction?: boolean;
2323
handleInfoClick?: () => void;
24+
showShareAction?: boolean;
25+
handleShare: () => void;
2426
}
2527

2628
const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -35,7 +37,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
3537
showOpenPlaygroundAction,
3638
onOpenPlaygroundClick,
3739
showInfoAction,
38-
handleInfoClick
40+
handleInfoClick,
41+
showShareAction,
42+
handleShare
3943
}) => {
4044
const cleanedType = type.replace('my-', '').replace(/s$/, '');
4145
const theme = useTheme();
@@ -136,19 +140,34 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
136140
Edit
137141
</ActionButton>
138142
)}
139-
{showUnpublishAction && (
140-
<UnpublishAction
143+
{showShareAction && (
144+
<ActionButton
141145
sx={{
142146
borderRadius: '0.2rem',
143-
gap: '10px'
147+
backgroundColor: 'transparent',
148+
border: `1px solid ${theme.palette.border.normal}`,
149+
gap: '10px',
150+
color: charcoal[10]
144151
}}
145-
onClick={handleUnpublish}
152+
onClick={handleShare}
146153
>
147-
<PublishIcon width={24} height={24} fill={charcoal[100]} />
148-
Unpublish
149-
</UnpublishAction>
154+
<ShareIcon width={24} height={24} fill={charcoal[10]} />
155+
Share
156+
</ActionButton>
150157
)}
151158
</div>
159+
{showUnpublishAction && (
160+
<UnpublishAction
161+
sx={{
162+
borderRadius: '0.2rem',
163+
gap: '10px'
164+
}}
165+
onClick={handleUnpublish}
166+
>
167+
<PublishIcon width={24} height={24} fill={charcoal[100]} />
168+
Unpublish
169+
</UnpublishAction>
170+
)}
152171
</StyledActionWrapper>
153172
);
154173
};

‎src/custom/CatalogDetail/LeftPanel.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ interface LeftPanelProps {
2525
onOpenPlaygroundClick: (designId: string, name: string) => void;
2626
showInfoAction?: boolean;
2727
handleInfoClick?: () => void;
28+
showShareAction?: boolean;
29+
handleShare: () => void;
2830
}
2931

3032
const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -44,7 +46,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
4446
showOpenPlaygroundAction = true,
4547
onOpenPlaygroundClick,
4648
showInfoAction = false,
47-
handleInfoClick
49+
handleInfoClick,
50+
showShareAction = false,
51+
handleShare
4852
}) => {
4953
const theme = useTheme();
5054

@@ -89,6 +93,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
8993
onOpenPlaygroundClick={onOpenPlaygroundClick}
9094
showInfoAction={showInfoAction}
9195
handleInfoClick={handleInfoClick}
96+
showShareAction={showShareAction}
97+
handleShare={handleShare}
9298
/>
9399
{showTechnologies && (
94100
<TechnologySection

‎src/custom/CatalogDetail/SocialSharePopper.tsx‎

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useTheme } from '../../theme';
66
import { Pattern } from '../CustomCatalog/CustomCard';
77
import { CustomTooltip } from '../CustomTooltip';
88
import { ErrorBoundary } from '../ErrorBoundary';
9-
import { ActionButton, CopyShareIconWrapper, VisibilityChip } from './style';
9+
import { CopyShareIconWrapper, VisibilityChip } from './style';
1010

1111
interface SocialSharePopperProps {
1212
details: Pattern;
@@ -25,9 +25,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
2525
cardId,
2626
title,
2727
getUrl,
28-
handleCopyUrl,
29-
showShareAction,
30-
handleShare
28+
handleCopyUrl
3129
}) => {
3230
const theme = useTheme();
3331
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -54,27 +52,14 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
5452
{details?.visibility}
5553
</VisibilityChip>
5654

57-
{showShareAction ? (
58-
<CustomTooltip title="Share" placement="top" arrow>
59-
<ActionButton sx={{ borderRadius: '0.2rem', padding: '0.4rem' }} onClick={handleShare}>
60-
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
61-
Share
62-
</ActionButton>
63-
</CustomTooltip>
64-
) : (
65-
<>
66-
{details?.visibility !== 'private' && (
67-
<CustomTooltip title="Copy Link" placement="top" arrow>
68-
<IconButton
69-
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
70-
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
71-
>
72-
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
73-
</IconButton>
74-
</CustomTooltip>
75-
)}
76-
</>
77-
)}
55+
<CustomTooltip title="Copy Link" placement="top" arrow>
56+
<IconButton
57+
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
58+
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
59+
>
60+
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
61+
</IconButton>
62+
</CustomTooltip>
7863

7964
{(details?.visibility === 'published' || details?.visibility === 'public') && (
8065
<>

‎src/custom/ShareModal/ShareModal.tsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
import { ChainIcon, DeleteIcon, LockIcon, PublicIcon } from '../../icons';
1515
import { useTheme } from '../../theme';
1616
import { BLACK, WHITE } from '../../theme/colors';
17+
import { CustomTooltip } from '../CustomTooltip';
1718
import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
1819
import UserShareSearch from '../UserSearchField/UserSearchField';
1920
import {
@@ -97,13 +98,15 @@ const AccessList: React.FC<AccessListProps> = ({
9798
{ownerData.id === actorData.id ? (
9899
<div>Owner</div>
99100
) : (
100-
<IconButton
101-
edge="end"
102-
aria-label="delete"
103-
onClick={() => handleDelete(actorData.email)}
104-
>
105-
<DeleteIcon fill={theme.palette.background.neutral?.default} />
106-
</IconButton>
101+
<CustomTooltip title="Remove Access" placement="top" arrow>
102+
<IconButton
103+
edge="end"
104+
aria-label="delete"
105+
onClick={() => handleDelete(actorData.email)}
106+
>
107+
<DeleteIcon fill={theme.palette.background.neutral?.default} />
108+
</IconButton>
109+
</CustomTooltip>
107110
)}
108111
</ListItemSecondaryAction>
109112
</ListItem>
@@ -185,6 +188,9 @@ const ShareModal: React.FC<ShareModalProps> = ({
185188
const handleMenuClose = () => setMenu(false);
186189

187190
const isShareDisabled = () => {
191+
// Ensure at least one user other than the owner is selected
192+
const otherUsersSelected = shareUserData.some((user) => user.id !== ownerData.id);
193+
188194
const existingAccessIds = shareUserData.map((user) => user.id);
189195
const ownerDataId = ownerData?.id;
190196

@@ -195,10 +201,10 @@ const ShareModal: React.FC<ShareModalProps> = ({
195201
const hasMismatchedUsers = !shareUserData.every((user) => existingAccessIds.includes(user.id));
196202

197203
return (
198-
shareUserData.length === existingAccessIds.length &&
199-
!hasMismatchedUsers &&
200-
(selectedOption === selectedResource?.visibility ||
201-
shareUserData.length !== existingAccessIds.length)
204+
!otherUsersSelected || // Disable if no other users are selected
205+
(shareUserData.length === existingAccessIds.length &&
206+
!hasMismatchedUsers &&
207+
selectedOption === selectedResource?.visibility)
202208
);
203209
};
204210

@@ -216,6 +222,18 @@ const ShareModal: React.FC<ShareModalProps> = ({
216222
}
217223
}, [selectedResource]);
218224

225+
useEffect(() => {
226+
if (selectedResource?.visibility === 'published') {
227+
setOption(SHARE_MODE.PRIVATE); // Force set to private if published
228+
} else {
229+
setOption(selectedResource?.visibility);
230+
}
231+
}, [selectedResource]);
232+
233+
// Filter options dynamically to exclude PUBLIC when visibility is published
234+
const filteredOptions =
235+
selectedResource?.visibility === 'published' ? [SHARE_MODE.PRIVATE] : Object.values(SHARE_MODE);
236+
219237
return (
220238
<div style={{ marginBottom: '1rem' }}>
221239
<Modal
@@ -271,7 +289,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
271289
onChange={handleOptionClick}
272290
disabled={isVisibilitySelectorDisabled}
273291
>
274-
{Object.values(SHARE_MODE).map((option) => (
292+
{filteredOptions.map((option) => (
275293
<MenuItem key={option} selected={option === selectedOption} value={option}>
276294
{option.charAt(0).toUpperCase() + option.slice(1)}
277295
</MenuItem>

0 commit comments

Comments
 (0)