Merge pull request #927 from amitamrutiya/fix-visiblity

feat: change the position of visiblity button

Author: amitamrutiya

src/custom/CatalogDetail/OverviewSection.tsx

@@ -69,8 +69,6 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           handleCopyUrl={handleCopyUrl}
           showShareAction={showShareAction}
           handleShare={handleShare}
-          isVisibilityEnabled={isVisibilityEnabled}
-          handleVisibilityChange={handleVisibilityChange}
         />
       </div>
       <Grid container spacing={2}>
@@ -85,7 +83,13 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
                   />
                 </ContentRow>
               )}
-              <UserInfo details={details} showVersion={showVersion} userProfile={userProfile} />
+              <UserInfo
+                details={details}
+                showVersion={showVersion}
+                userProfile={userProfile}
+                isVisibilityEnabled={isVisibilityEnabled}
+                handleVisibilityChange={handleVisibilityChange}
+              />
             </Grid>
           </Grid>
         </Grid>

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -1,23 +1,11 @@
 import React, { useState } from 'react';
-
-import {
-  ChainIcon,
-  FacebookIcon,
-  LinkedinIcon,
-  LockIcon,
-  PublicIcon,
-  ShareIcon,
-  TwitterIcon
-} from '../../icons';
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { Box, IconButton, Menu, MenuItem, Typography } from '../../base';
+import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
 import { useTheme } from '../../theme';
 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, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
 
 interface SocialSharePopperProps {
@@ -29,8 +17,6 @@ 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> = ({
@@ -40,9 +26,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   title,
   getUrl,
   handleCopyUrl,
-  handleShare,
-  isVisibilityEnabled,
-  handleVisibilityChange
+  handleShare
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -61,16 +45,6 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   return (
     <ErrorBoundary>
       <CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
-        <VisibilityChipMenu
-          value={details?.visibility as VIEW_VISIBILITY}
-          onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
-          enabled={isVisibilityEnabled}
-          options={[
-            [VIEW_VISIBILITY.PUBLIC, PublicIcon],
-            [VIEW_VISIBILITY.PRIVATE, LockIcon]
-          ]}
-        />
-
         <ShareButtonGroup variant="contained">
           <CustomTooltip title="Change access and visibility">
             <ShareButton variant="contained" onClick={handleShare}>

src/custom/CatalogDetail/UserInfo.tsx

@@ -1,7 +1,10 @@
 import { Avatar } from '../../base';
 import { CLOUD_URL } from '../../constants/constants';
+import { LockIcon, PublicIcon } from '../../icons';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { getVersion } from '../CustomCatalog/Helper';
+import { VisibilityChipMenu } from '../VisibilityChipMenu';
+import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
 import { formatDate } from './helper';
 import { ContentDetailsPoints, ContentDetailsText, ContentRow, RedirectLink } from './style';
 import { UserProfile } from './types';
@@ -10,9 +13,17 @@ interface UserInfoProps {
   details: Pattern;
   showVersion?: boolean;
   userProfile?: UserProfile;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: (visibility: VIEW_VISIBILITY) => void;
 }
 
-const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userProfile }) => {
+const UserInfo: React.FC<UserInfoProps> = ({
+  details,
+  showVersion = true,
+  userProfile,
+  isVisibilityEnabled,
+  handleVisibilityChange
+}) => {
   return (
     <>
       <ContentRow>
@@ -57,6 +68,18 @@ const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userPr
           <ContentDetailsText>{getVersion(details)}</ContentDetailsText>
         </ContentRow>
       )}
+      <ContentRow>
+        <ContentDetailsPoints>VISIBILITY</ContentDetailsPoints>
+        <VisibilityChipMenu
+          value={details?.visibility as VIEW_VISIBILITY}
+          onChange={(value) => handleVisibilityChange(value as VIEW_VISIBILITY)}
+          enabled={isVisibilityEnabled}
+          options={[
+            [VIEW_VISIBILITY.PUBLIC, PublicIcon],
+            [VIEW_VISIBILITY.PRIVATE, LockIcon]
+          ]}
+        />
+      </ContentRow>
     </>
   );
 };

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -46,8 +46,7 @@ const StyledMenu = styled(Menu)(({ theme }) => ({
 }));
 
 const StyledButton = styled(Button)(() => ({
-  padding: '0px',
-  width: '100%'
+  padding: '0px'
 }));
 
 const StyledDiv = styled('div')(