Merge pull request #792 from sudhanshutech/unpublish/action

Add unpublish action in details page

Author: sudhanshutech

src/custom/CatalogDetail/ActionButton.tsx

@@ -1,12 +1,12 @@
 import _ from 'lodash';
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, KanvasIcon } from '../../icons';
+import { CopyIcon, KanvasIcon, PublishIcon } from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { downloadFilter, downloadYaml, slugify } from './helper';
-import { ActionButton, LinkUrl, StyledActionWrapper } from './style';
+import { ActionButton, LinkUrl, StyledActionWrapper, UnpublishAction } from './style';
 import { RESOURCE_TYPES } from './types';
 
 interface ActionButtonsProps {
@@ -17,8 +17,10 @@ interface ActionButtonsProps {
   isCloneLoading: boolean;
   handleClone: (name: string, id: string) => void;
   mode: string;
+  handleUnpublish: () => void;
   isCloneDisabled: boolean;
   showOpenPlaygroundButton: boolean;
+  showUnpublishAction: boolean;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -30,7 +32,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   handleClone,
   mode,
   isCloneDisabled,
-  showOpenPlaygroundButton
+  showOpenPlaygroundButton,
+  showUnpublishAction,
+  handleUnpublish
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const resourcePlaygroundType = Object.values({
@@ -112,6 +116,19 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
           </ActionButton>
         </LinkUrl>
       )}
+      {showUnpublishAction && (
+        <UnpublishAction
+          sx={{
+            borderRadius: '0.2rem',
+            gap: '10px',
+            width: '100%'
+          }}
+          onClick={handleUnpublish}
+        >
+          <PublishIcon width={24} height={24} fill={charcoal[10]} />
+          Unpublish
+        </UnpublishAction>
+      )}
     </StyledActionWrapper>
   );
 };

src/custom/CatalogDetail/LeftPanel.tsx

@@ -22,6 +22,8 @@ interface LeftPanelProps {
   technologySVGSubpath: string;
   fontFamily?: string;
   showOpenPlaygroundButton?: boolean;
+  handleUnpublish: () => void;
+  showUnpublishAction?: boolean;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -31,13 +33,15 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   actionItems = true,
   isCloneLoading,
   handleClone,
+  handleUnpublish,
   showTechnologies = true,
   mode,
   filteredAcademyData,
   isCloneDisabled,
   technologySVGPath,
   technologySVGSubpath,
   fontFamily,
+  showUnpublishAction = false,
   showOpenPlaygroundButton = true
 }) => {
   const theme = useTheme();
@@ -77,6 +81,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         cardId={cardId}
         isCloneLoading={isCloneLoading}
         handleClone={handleClone}
+        showUnpublishAction={showUnpublishAction}
+        handleUnpublish={handleUnpublish}
         mode={mode}
         isCloneDisabled={isCloneDisabled}
         showOpenPlaygroundButton={showOpenPlaygroundButton}

src/custom/CatalogDetail/style.tsx

@@ -39,6 +39,22 @@ export const ActionButton = styled('div')<ActionButtonProps>(({ disabled = false
   flex: '1'
 }));
 
+export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = false, theme }) => ({
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? '0.5' : '1',
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '0.5rem',
+  backgroundColor: 'transparent',
+  border: `1px solid ${theme.palette.border.normal}`,
+  padding: '0.5rem',
+  color: theme.palette.text.default,
+  gap: '0.625rem',
+  flex: '1'
+}));
+
 export const ContentDetailsText = styled(Typography)(({ theme }) => ({
   fontFamily: 'inherit',
   fontSize: '1rem',