Merge pull request #731 from sudhanshutech/yash/addShareModal

Share Modal

Author: sudhanshutech

src/custom/CatalogDetail/OverviewSection.tsx

@@ -23,6 +23,8 @@ interface OverviewSectionProps {
   fontFamily?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   userProfile?: any;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const OverviewSection: React.FC<OverviewSectionProps> = ({
@@ -37,7 +39,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
   classes,
   handleCopyUrl,
   fontFamily,
-  userProfile
+  userProfile,
+  showShareAction,
+  handleShare
 }) => {
   return (
     <OverviewContainer>
@@ -58,6 +62,8 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           title={title}
           getUrl={getUrl}
           handleCopyUrl={handleCopyUrl}
+          showShareAction={showShareAction}
+          handleShare={handleShare}
         />
       </div>
       <Grid container spacing={2}>

src/custom/CatalogDetail/RightPanel.tsx

@@ -26,6 +26,8 @@ interface RightPanelProps {
   technologySVGSubpath: string;
   orgName: string;
   fetchingOrgError: boolean;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -47,7 +49,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
   technologySVGPath,
   technologySVGSubpath,
   orgName,
-  fetchingOrgError
+  fetchingOrgError,
+  showShareAction,
+  handleShare
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -69,6 +73,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
         handleCopyUrl={handleCopyUrl}
         fontFamily={fontFamily}
         userProfile={userProfile}
+        showShareAction={showShareAction}
+        handleShare={handleShare}
       />
       {showCaveats && <CaveatsSection details={details} />}
       <RelatedDesigns

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 { CopyShareIconWrapper, VisibilityChip } from './style';
+import { ActionButton, CopyShareIconWrapper, VisibilityChip } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -15,6 +15,8 @@ interface SocialSharePopperProps {
   title: string;
   getUrl: (type: string, id: string) => string;
   handleCopyUrl: (type: string, name: string, id: string) => void;
+  showShareAction: boolean;
+  handleShare: () => void;
 }
 
 const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
@@ -23,7 +25,9 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl
+  handleCopyUrl,
+  showShareAction,
+  handleShare
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -50,15 +54,26 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
           {details?.visibility}
         </VisibilityChip>
 
-        {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>
+        {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>
+            )}
+          </>
         )}
 
         {(details?.visibility === 'published' || details?.visibility === 'public') && (

src/custom/Modal/index.tsx

@@ -10,8 +10,8 @@ import { CustomTooltip } from '../CustomTooltip';
 interface ModalProps extends DialogProps {
   closeModal: () => void;
   title: string;
-  headerIcon: React.ReactNode;
-  reactNode: React.ReactNode;
+  headerIcon?: React.ReactNode;
+  reactNode?: React.ReactNode;
 }
 
 interface ModalFooterProps {