From 6a792e8adb9ad9aa26e4b406965cc28e0370d3c2 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Tue, 17 Dec 2024 13:15:08 +0530
Subject: [PATCH 1/3] fix(share): revamp share action and modal

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx     | 37 ++++++++++++----
 src/custom/CatalogDetail/LeftPanel.tsx        |  8 +++-
 .../CatalogDetail/SocialSharePopper.tsx       | 35 +++++-----------
 src/custom/ShareModal/ShareModal.tsx          | 42 +++++++++++++------
 4 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index ee6cb48ce..72dd6f149 100644
--- 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
index 82d7fe995..fa7beeedd 100644
--- 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
index f89ff4d77..a8e22c558 100644
--- 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
index fd8213d94..76ca1c125 100644
--- 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>

From d67c4316b6bb1175117b2228f8e5913fc133dbef Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Tue, 17 Dec 2024 17:13:38 +0530
Subject: [PATCH 2/3] fix(icon): use other share icon

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx |   4 +-
 src/custom/ShareModal/ShareModal.tsx      | 112 +++++++++++-----------
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 72dd6f149..ac2ef1bb6 100644
--- 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, ShareIcon } from '../../icons';
+import { CopyIcon, EditIcon, KanvasIcon, PublishIcon, ShareLineIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -151,7 +151,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             }}
             onClick={handleShare}
           >
-            <ShareIcon width={24} height={24} fill={charcoal[10]} />
+            <ShareLineIcon width="24" height="24" fill={charcoal[10]} />
             Share
           </ActionButton>
         )}
diff --git a/src/custom/ShareModal/ShareModal.tsx b/src/custom/ShareModal/ShareModal.tsx
index 76ca1c125..6150249cd 100644
--- a/src/custom/ShareModal/ShareModal.tsx
+++ b/src/custom/ShareModal/ShareModal.tsx
@@ -222,18 +222,6 @@ 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
@@ -256,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}
-                  >
-                    {filteredOptions.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

From 9d97c0ab7d274427a07942e374a968f09accdbf2 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Tue, 17 Dec 2024 17:46:57 +0530
Subject: [PATCH 3/3] feat(delete): add delelte action

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/CatalogDetail/ActionButton.tsx | 28 +++++++++++++++++++++--
 src/custom/CatalogDetail/LeftPanel.tsx    |  8 ++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 3be499b93..d1fa71490 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, EditIcon, KanvasIcon, PublishIcon, ShareLineIcon } 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';
@@ -23,6 +30,8 @@ interface ActionButtonsProps {
   handleInfoClick?: () => void;
   showShareAction?: boolean;
   handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -39,7 +48,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   showInfoAction,
   handleInfoClick,
   showShareAction,
-  handleShare
+  handleShare,
+  showDeleteAction,
+  handleDelete
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const theme = useTheme();
@@ -155,7 +166,20 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             Share
           </ActionButton>
         )}
+        {showDeleteAction && (
+          <UnpublishAction
+            sx={{
+              borderRadius: '0.2rem',
+              gap: '10px'
+            }}
+            onClick={handleDelete}
+          >
+            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
+            Delete
+          </UnpublishAction>
+        )}
       </div>
+
       {showUnpublishAction && (
         <UnpublishAction
           sx={{
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index fa7beeedd..57d2d6981 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/src/custom/CatalogDetail/LeftPanel.tsx
@@ -27,6 +27,8 @@ interface LeftPanelProps {
   handleInfoClick?: () => void;
   showShareAction?: boolean;
   handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -48,7 +50,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   showInfoAction = false,
   handleInfoClick,
   showShareAction = false,
-  handleShare
+  handleShare,
+  showDeleteAction = false,
+  handleDelete
 }) => {
   const theme = useTheme();
 
@@ -95,6 +99,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         handleInfoClick={handleInfoClick}
         showShareAction={showShareAction}
         handleShare={handleShare}
+        showDeleteAction={showDeleteAction}
+        handleDelete={handleDelete}
       />
       {showTechnologies && (
         <TechnologySection