Skip to content

Commit

Permalink
Merge pull request #855 from sudhanshutech/re/share
Browse files Browse the repository at this point in the history 
feat(catalog): restructure share action and add delete action
  • Loading branch information
@sudhanshutech
sudhanshutech authored Dec 17, 2024
2 parents 588d510 + 9d97c0a commit d538442
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 105 deletions.
57 changes: 50 additions & 7 deletions src/custom/CatalogDetail/ActionButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React from 'react';
import { CircularProgress } from '../../base';
import { CopyIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
import {
CopyIcon,
DeleteIcon,
EditIcon,
KanvasIcon,
PublishIcon,
ShareLineIcon
} from '../../icons';
import Download from '../../icons/Download/Download';
import { charcoal, useTheme } from '../../theme';
import { Pattern } from '../CustomCatalog/CustomCard';
Expand All @@ -21,6 +28,10 @@ interface ActionButtonsProps {
onOpenPlaygroundClick: (designId: string, name: string) => void;
showInfoAction?: boolean;
handleInfoClick?: () => void;
showShareAction?: boolean;
handleShare: () => void;
showDeleteAction?: boolean;
handleDelete: () => void;
}

const ActionButtons: React.FC<ActionButtonsProps> = ({
Expand All @@ -35,7 +46,11 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
showOpenPlaygroundAction,
onOpenPlaygroundClick,
showInfoAction,
handleInfoClick
handleInfoClick,
showShareAction,
handleShare,
showDeleteAction,
handleDelete
}) => {
const cleanedType = type.replace('my-', '').replace(/s$/, '');
const theme = useTheme();
Expand Down Expand Up @@ -132,23 +147,51 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
}}
onClick={handleInfoClick}
>
<EditIcon width={24} height={24} fill={charcoal[10]} />
<EditIcon width={24} height={24} fill={theme.palette.icon.default} />
Edit
</ActionButton>
)}
{showUnpublishAction && (
{showShareAction && (
<ActionButton
sx={{
borderRadius: '0.2rem',
backgroundColor: 'transparent',
border: `1px solid ${theme.palette.border.normal}`,
gap: '10px',
color: charcoal[10]
}}
onClick={handleShare}
>
<ShareLineIcon width="24" height="24" fill={theme.palette.icon.default} />
Share
</ActionButton>
)}
{showDeleteAction && (
<UnpublishAction
sx={{
borderRadius: '0.2rem',
gap: '10px'
}}
onClick={handleUnpublish}
onClick={handleDelete}
>
<PublishIcon width={24} height={24} fill={charcoal[100]} />
Unpublish
<DeleteIcon width={24} height={24} fill={charcoal[100]} />
Delete
</UnpublishAction>
)}
</div>

{showUnpublishAction && (
<UnpublishAction
sx={{
borderRadius: '0.2rem',
gap: '10px'
}}
onClick={handleUnpublish}
>
<PublishIcon width={24} height={24} fill={charcoal[100]} />
Unpublish
</UnpublishAction>
)}
</StyledActionWrapper>
);
};
Expand Down
14 changes: 13 additions & 1 deletion src/custom/CatalogDetail/LeftPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ interface LeftPanelProps {
onOpenPlaygroundClick: (designId: string, name: string) => void;
showInfoAction?: boolean;
handleInfoClick?: () => void;
showShareAction?: boolean;
handleShare: () => void;
showDeleteAction?: boolean;
handleDelete: () => void;
}

const LeftPanel: React.FC<LeftPanelProps> = ({
Expand All @@ -44,7 +48,11 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
showOpenPlaygroundAction = true,
onOpenPlaygroundClick,
showInfoAction = false,
handleInfoClick
handleInfoClick,
showShareAction = false,
handleShare,
showDeleteAction = false,
handleDelete
}) => {
const theme = useTheme();

Expand Down Expand Up @@ -89,6 +97,10 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
onOpenPlaygroundClick={onOpenPlaygroundClick}
showInfoAction={showInfoAction}
handleInfoClick={handleInfoClick}
showShareAction={showShareAction}
handleShare={handleShare}
showDeleteAction={showDeleteAction}
handleDelete={handleDelete}
/>
{showTechnologies && (
<TechnologySection
Expand Down
64 changes: 24 additions & 40 deletions src/custom/CatalogDetail/SocialSharePopper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import { Lock, Public } from '@mui/icons-material';
import { Box, IconButton, Menu, MenuItem } from '@mui/material';
import React, { useState } from 'react';
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
import { Typography } from '../../base';
import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';

import {
ChainIcon,
FacebookIcon,
LinkedinIcon,
LockIcon,
PublicIcon,
ShareIcon,
TwitterIcon
} from '../../icons';
import { useTheme } from '../../theme';
import { Pattern } from '../CustomCatalog/CustomCard';
import { CustomTooltip } from '../CustomTooltip';
import { ErrorBoundary } from '../ErrorBoundary';

import { VisibilityChipMenu } from '../VisibilityChipMenu';
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
import { CopyShareIconWrapper } from './style';

interface SocialSharePopperProps {
details: Pattern;
Expand All @@ -29,9 +37,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
cardId,
title,
getUrl,
handleCopyUrl,
showShareAction,
handleShare
handleCopyUrl
}) => {
const theme = useTheme();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
Expand All @@ -55,41 +61,19 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
onChange={() => {}}
enabled={false}
options={[
[VIEW_VISIBILITY.PUBLIC, Public],
[VIEW_VISIBILITY.PRIVATE, Lock]
[VIEW_VISIBILITY.PUBLIC, PublicIcon],
[VIEW_VISIBILITY.PRIVATE, LockIcon]
]}
/>
{showShareAction ? (
<ShareButtonGroup variant="contained">
<CustomTooltip title="Change access and visibility">
<ShareButton variant="contained" onClick={handleShare}>
<Typography>Share</Typography>
</ShareButton>
</CustomTooltip>
<CustomTooltip title="Copy link to design">
<ShareSideButton
variant="contained"
size="small"
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
>
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
</ShareSideButton>
</CustomTooltip>
</ShareButtonGroup>
) : (
<>
{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') && (
<>
Expand Down
128 changes: 71 additions & 57 deletions src/custom/ShareModal/ShareModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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;

Expand All @@ -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)
);
};

Expand Down Expand Up @@ -238,52 +244,60 @@ const ShareModal: React.FC<ShareModalProps> = ({
}
fetchSuggestions={fetchSuggestions}
/>
<CustomListItemText>
<Typography variant="h6">General Access</Typography>
</CustomListItemText>
<CustomDialogContentText>
<FormControlWrapper size="small">
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}>
<VisibilityIconWrapper>
{selectedOption === SHARE_MODE.PUBLIC ? (
<PublicIcon
width={24}
height={24}
stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
/>
) : (
<LockIcon
width={24}
height={24}
stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
/>
)}
</VisibilityIconWrapper>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<CustomSelect
variant="outlined"
defaultValue={selectedOption}
labelId="share-menu-select"
id="share-menu"
open={openMenu}
onClose={handleMenuClose}
onOpen={() => setMenu(true)}
onChange={handleOptionClick}
disabled={isVisibilitySelectorDisabled}
>
{Object.values(SHARE_MODE).map((option) => (
<MenuItem key={option} selected={option === selectedOption} value={option}>
{option.charAt(0).toUpperCase() + option.slice(1)}
</MenuItem>
))}
</CustomSelect>
<Typography component="span" variant="body2">
{selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
</Typography>
</div>
</div>
</FormControlWrapper>
</CustomDialogContentText>
{selectedResource?.visibility !== 'published' && (
<>
<CustomListItemText>
<Typography variant="h6">General Access</Typography>
</CustomListItemText>
<CustomDialogContentText>
<FormControlWrapper size="small">
<div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center' }}>
<VisibilityIconWrapper>
{selectedOption === SHARE_MODE.PUBLIC ? (
<PublicIcon
width={24}
height={24}
stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
/>
) : (
<LockIcon
width={24}
height={24}
stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
/>
)}
</VisibilityIconWrapper>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<CustomSelect
variant="outlined"
defaultValue={selectedOption}
labelId="share-menu-select"
id="share-menu"
open={openMenu}
onClose={handleMenuClose}
onOpen={() => setMenu(true)}
onChange={handleOptionClick}
disabled={isVisibilitySelectorDisabled}
>
{Object.values(SHARE_MODE).map((option) => (
<MenuItem
key={option}
selected={option === selectedOption}
value={option}
>
{option.charAt(0).toUpperCase() + option.slice(1)}
</MenuItem>
))}
</CustomSelect>
<Typography component="span" variant="body2">
{selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
</Typography>
</div>
</div>
</FormControlWrapper>
</CustomDialogContentText>
</>
)}
</ModalBody>

<ModalFooter
Expand Down

0 comments on commit d538442

Please sign in to comment.