feat(visibility): add visibility selector to change its visibility

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>

Author: sudhanshutech

src/custom/CatalogDetail/OverviewSection.tsx

@@ -25,6 +25,8 @@ interface OverviewSectionProps {
   userProfile?: any;
   showShareAction: boolean;
   handleShare: () => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: () => void;
 }
 
 const OverviewSection: React.FC<OverviewSectionProps> = ({
@@ -41,7 +43,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
   fontFamily,
   userProfile,
   showShareAction,
-  handleShare
+  handleShare,
+  isVisibilityEnabled,
+  handleVisibilityChange
 }) => {
   return (
     <OverviewContainer>
@@ -64,6 +68,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

@@ -28,6 +28,8 @@ interface RightPanelProps {
   fetchingOrgError: boolean;
   showShareAction: boolean;
   handleShare: () => void;
+  isVisibilityEnabled: boolean;
+  handleVisibilityChange: () => void;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({
@@ -51,7 +53,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 +79,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: () => 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={handleVisibilityChange}
+          enabled={isVisibilityEnabled}
           options={[
             [VIEW_VISIBILITY.PUBLIC, PublicIcon],
             [VIEW_VISIBILITY.PRIVATE, LockIcon]