Merge branch 'master' into component-filter

Author: amitamrutiya

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',

src/custom/ErrorBoundary/ErrorBoundary.tsx

@@ -20,6 +20,8 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }));
 
 const CodeMessage = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
   backgroundColor: theme.palette.background.code,
   color: theme.palette.text.tertiary,
   padding: '.85rem',
@@ -30,14 +32,32 @@ const CodeMessage = styled('div')(({ theme }) => ({
 interface FallbackComponentProps extends FallbackProps {
   resetErrorBoundary: () => void;
   children?: React.ReactNode;
+  pageUrl?: string;
+  timestamp?: string;
+  showPackageInfo?: boolean;
+  version?: string;
 }
 
-export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
+export function Fallback({
+  error,
+  children,
+  showPackageInfo,
+  version
+}: FallbackComponentProps): JSX.Element {
   return (
     <div role="alert">
       <h2>Uh-oh!😔 Please pardon the mesh.</h2>
       <CodeMessage>
-        <code>{(error as Error).message}</code>
+        <code>
+          <strong>Error: </strong>
+          {(error as Error).message}
+        </code>
+        <br />
+        {showPackageInfo && (
+          <>
+            <strong>Version:</strong> {version}
+          </>
+        )}
       </CodeMessage>
       <ErrorMessage>
         We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
@@ -56,18 +76,50 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
 }
 
 const reportError = (error: Error, info: React.ErrorInfo): void => {
+  const pageUrl = window.location.href;
+  const timestamp = new Date().toLocaleString();
   // This is where you'd send the error to Sentry, etc
-  console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
+  console.log(
+    'Error Caught Inside Boundary --reportError',
+    error,
+    'Info',
+    info,
+    'Page URL:',
+    pageUrl,
+    'Timestamp:',
+    timestamp
+  );
 };
 
 interface ErrorBoundaryProps {
   customFallback?: React.ComponentType<FallbackProps>;
   children: React.ReactNode;
+  onErrorCaught?: (error: string) => void;
 }
 
-export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ customFallback, children }) => {
+export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({
+  customFallback,
+  children,
+  onErrorCaught
+}) => {
+  const pageUrl = window.location.href;
+  const timestamp = new Date().toLocaleString();
+
+  const handleError = (error: Error, info: React.ErrorInfo) => {
+    // Pass error message to onErrorCaught
+    onErrorCaught?.(error.message);
+    reportError(error, info);
+  };
+
   return (
-    <ReactErrorBoundary FallbackComponent={customFallback ?? Fallback} onError={reportError}>
+    <ReactErrorBoundary
+      FallbackComponent={
+        customFallback
+          ? customFallback
+          : (props) => <Fallback {...props} pageUrl={pageUrl} timestamp={timestamp} />
+      }
+      onError={handleError}
+    >
       {children}
     </ReactErrorBoundary>
   );