Merge pull request #861 from sudhanshutech/visibility/sel

feat(visibilitySelector): add visibility selector to change catalog visibility

Author: sudhanshutech

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}>

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

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -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> = ({
@@ -38,7 +40,9 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
   title,
   getUrl,
   handleCopyUrl,
-  handleShare
+  handleShare,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }) => {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -59,8 +63,8 @@ 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]