Merge branch 'master' into fix/forwardRef

capricorn-32 · web-flow · commit 2424cb782d97 · 2024-12-25T18:46:57.000+05:30
diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import {
-  CopyIcon,
-  DeleteIcon,
-  EditIcon,
-  KanvasIcon,
-  PublishIcon,
-  ShareLineIcon
-} from '../../icons';
+import { CopyIcon, DeleteIcon, EditIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -28,8 +21,6 @@ interface ActionButtonsProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
-  showShareAction?: boolean;
-  handleShare: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
 }
@@ -47,8 +38,6 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   onOpenPlaygroundClick,
   showInfoAction,
   handleInfoClick,
-  showShareAction,
-  handleShare,
   showDeleteAction,
   handleDelete
 }) => {
@@ -151,47 +140,31 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             Edit
           </ActionButton>
         )}
-        {showShareAction && (
-          <ActionButton
+        {showDeleteAction && (
+          <UnpublishAction
             sx={{
               borderRadius: '0.2rem',
-              backgroundColor: 'transparent',
-              border: `1px solid ${theme.palette.border.normal}`,
-              gap: '10px',
-              color: charcoal[10]
+              gap: '10px'
             }}
-            onClick={handleShare}
+            onClick={handleDelete}
           >
-            <ShareLineIcon width="24" height="24" fill={theme.palette.icon.default} />
-            Share
-          </ActionButton>
+            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
+            Delete
+          </UnpublishAction>
         )}
-        {showDeleteAction && (
+        {showUnpublishAction && (
           <UnpublishAction
             sx={{
               borderRadius: '0.2rem',
               gap: '10px'
             }}
-            onClick={handleDelete}
+            onClick={handleUnpublish}
           >
-            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
-            Delete
+            <PublishIcon width={24} height={24} fill={charcoal[100]} />
+            Unpublish
           </UnpublishAction>
         )}
       </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,8 +25,6 @@ interface LeftPanelProps {
   onOpenPlaygroundClick: (designId: string, name: string) => void;
   showInfoAction?: boolean;
   handleInfoClick?: () => void;
-  showShareAction?: boolean;
-  handleShare: () => void;
   showDeleteAction?: boolean;
   handleDelete: () => void;
 }
@@ -49,8 +47,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   onOpenPlaygroundClick,
   showInfoAction = false,
   handleInfoClick,
-  showShareAction = false,
-  handleShare,
   showDeleteAction = false,
   handleDelete
 }) => {
@@ -97,8 +93,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         onOpenPlaygroundClick={onOpenPlaygroundClick}
         showInfoAction={showInfoAction}
         handleInfoClick={handleInfoClick}
-        showShareAction={showShareAction}
-        handleShare={handleShare}
         showDeleteAction={showDeleteAction}
         handleDelete={handleDelete}
       />
diff --git a/src/custom/CatalogDetail/OverviewSection.tsx b/src/custom/CatalogDetail/OverviewSection.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Grid } from '../../base';
 import { Pattern } from '../CustomCatalog/CustomCard';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import ContentClassInfo from './ContentClassInfo';
 import MetricsDisplay from './MetricsDisplay';
 import PatternInfo from './PatternInfo';
@@ -25,6 +26,8 @@ interface OverviewSectionProps {
   userProfile?: any;
   showShareAction: boolean;
   handleShare: () => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
 const OverviewSection: React.FC<OverviewSectionProps> = ({
@@ -41,7 +44,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
   fontFamily,
   userProfile,
   showShareAction,
-  handleShare
+  handleShare,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }) => {
   return (
     <OverviewContainer>
@@ -64,6 +69,8 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           handleCopyUrl={handleCopyUrl}
           showShareAction={showShareAction}
           handleShare={handleShare}
+          isVisibilityEnabled={isVisibilityEnabled}
+          handleVisibilityChange={handleVisibilityChange}
         />
       </div>
       <Grid container spacing={2}>
diff --git a/src/custom/CatalogDetail/RightPanel.tsx b/src/custom/CatalogDetail/RightPanel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pattern } from '../CustomCatalog/CustomCard';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import CaveatsSection from './CaveatsSection';
 import OverviewSection from './OverviewSection';
 import RelatedDesigns, { PatternsPerUser } from './RelatedDesigns';
@@ -28,6 +29,8 @@ interface RightPanelProps {
   fetchingOrgError: boolean;
   showShareAction: boolean;
   handleShare: () => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -51,7 +54,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
   orgName,
   fetchingOrgError,
   showShareAction,
-  handleShare
+  handleShare,
+  isVisibilityEnabled = false,
+  handleVisibilityChange
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -75,6 +80,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
         userProfile={userProfile}
         showShareAction={showShareAction}
         handleShare={handleShare}
+        isVisibilityEnabled={isVisibilityEnabled}
+        handleVisibilityChange={handleVisibilityChange}
       />
       {showCaveats && <CaveatsSection details={details} />}
       <RelatedDesigns
diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -1,6 +1,4 @@
-import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
-import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
 
 import {
   ChainIcon,
@@ -16,9 +14,11 @@ import { Pattern } from '../CustomCatalog/CustomCard';
 import { CustomTooltip } from '../CustomTooltip';
 import { ErrorBoundary } from '../ErrorBoundary';
 
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { Box, IconButton, Menu, MenuItem, Typography } from '../../base';
 import { VisibilityChipMenu } from '../VisibilityChipMenu';
 import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
-import { CopyShareIconWrapper } from './style';
+import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
 
 interface SocialSharePopperProps {
   details: Pattern;
@@ -29,6 +29,8 @@ interface SocialSharePopperProps {
   handleCopyUrl: (type: string, name: string, id: string) => void;
   showShareAction: boolean;
   handleShare: () => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
 const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
@@ -37,7 +39,10 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   cardId,
   title,
   getUrl,
-  handleCopyUrl
+  handleCopyUrl,
+  handleShare,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -58,22 +63,30 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
       <CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
         <VisibilityChipMenu
           value={details?.visibility as VIEW_VISIBILITY}
-          onChange={() => {}}
-          enabled={false}
+          onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
+          enabled={isVisibilityEnabled}
           options={[
             [VIEW_VISIBILITY.PUBLIC, PublicIcon],
             [VIEW_VISIBILITY.PRIVATE, LockIcon]
           ]}
         />
 
-        <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>
+        <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 === 'published' || details?.visibility === 'public') && (
           <>
diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
@@ -126,11 +126,29 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
     typography: {
       fontFamily: theme.typography.fontFamily
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    palette: {
+      text: {
+        primary: theme.palette.text.default,
+        secondary: theme.palette.text.secondary
+      },
+      background: {
+        default: backgroundColor || theme.palette.background.constant?.table,
+        paper: backgroundColor || theme.palette.background.constant?.table
+      }
+    },
     components: {
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottom: `1px solid ${theme.palette.border.default}`
+          }
+        }
+      },
       MuiPaper: {
         styleOverrides: {
           root: {
-            background: backgroundColor || theme.palette.background.default,
             maxWidth: '-moz-available'
           }
         }
@@ -141,24 +159,19 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
             width: '-webkit-fill-available',
             '@media (max-width: 500px)': {
               wordWrap: 'break-word'
-            },
-            background: backgroundColor || theme.palette.background.constant?.table,
-            color: theme.palette.text.default
+            }
           }
         }
       },
       MUIDataTableHeadCell: {
         styleOverrides: {
           data: {
             fontWeight: 'bold',
-            textTransform: 'uppercase',
-            color: theme.palette.text.default
+            textTransform: 'uppercase'
           },
           root: {
             fontWeight: 'bold',
-            textTransform: 'uppercase',
-            color: theme.palette.text.default,
-            backgroundColor: backgroundColor || theme.palette.background.constant?.table
+            textTransform: 'uppercase'
           }
         }
       },
@@ -177,7 +190,6 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
             intermediate: false,
             color: 'transparent',
             '&.Mui-checked': {
-              color: theme.palette.text.default,
               '& .MuiSvgIcon-root': {
                 width: '1.25rem',
                 height: '1.25rem',
@@ -207,30 +219,6 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
           }
         }
       },
-      MuiTableCell: {
-        styleOverrides: {
-          body: {
-            color: theme.palette.text.default
-          },
-          root: {
-            borderBottom: `1px solid ${theme.palette.border.default}`
-          }
-        }
-      },
-      MUIDataTablePagination: {
-        styleOverrides: {
-          toolbar: {
-            color: theme.palette.text.default
-          }
-        }
-      },
-      MUIDataTableSelectCell: {
-        styleOverrides: {
-          headerCell: {
-            background: backgroundColor || theme.palette.background.constant?.table
-          }
-        }
-      },
       MuiInput: {
         styleOverrides: {
           root: {
diff --git a/src/icons/Chain/ChainIcon.tsx b/src/icons/Chain/ChainIcon.tsx
@@ -12,12 +12,12 @@ const ChainIcon: React.FC<ChainIconProps> = ({ width, height, style, fill = '#3C
   <svg
     width={width}
     height={height}
-    viewBox="0 0 34 18"
+    viewBox="0 0 24 24"
     fill={fill}
     xmlns="http://www.w3.org/2000/svg"
     style={style}
   >
-    <path d="M3.95098 9.00094C3.95098 6.16576 6.2556 3.86114 9.09078 3.86114H15.7228V0.710938H9.09078C4.5147 0.710938 0.800781 4.42486 0.800781 9.00094C0.800781 13.577 4.5147 17.2909 9.09078 17.2909H15.7228V14.1407H9.09078C6.2556 14.1407 3.95098 11.8361 3.95098 9.00094ZM10.7488 10.6589H24.0128V7.34294H10.7488V10.6589ZM25.6708 0.710938H19.0388V3.86114H25.6708C28.506 3.86114 30.8106 6.16576 30.8106 9.00094C30.8106 11.8361 28.506 14.1407 25.6708 14.1407H19.0388V17.2909H25.6708C30.2469 17.2909 33.9608 13.577 33.9608 9.00094C33.9608 4.42486 30.2469 0.710938 25.6708 0.710938Z" />
+    <path d="M10,17.55,8.23,19.27a2.47,2.47,0,0,1-3.5-3.5l4.54-4.55a2.46,2.46,0,0,1,3.39-.09l.12.1a1,1,0,0,0,1.4-1.43A2.75,2.75,0,0,0,14,9.59a4.46,4.46,0,0,0-6.09.22L3.31,14.36a4.48,4.48,0,0,0,6.33,6.33L11.37,19A1,1,0,0,0,10,17.55ZM20.69,3.31a4.49,4.49,0,0,0-6.33,0L12.63,5A1,1,0,0,0,14,6.45l1.73-1.72a2.47,2.47,0,0,1,3.5,3.5l-4.54,4.55a2.46,2.46,0,0,1-3.39.09l-.12-.1a1,1,0,0,0-1.4,1.43,2.75,2.75,0,0,0,.23.21,4.47,4.47,0,0,0,6.09-.22l4.55-4.55A4.49,4.49,0,0,0,20.69,3.31Z" />
   </svg>
 );
 
