From 98b56ac23cd1d88bc717a711c28b65d6b3544eaa Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Tue, 29 Oct 2024 06:34:59 +0530
Subject: [PATCH 1/5] fix(error): boundary
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
src/custom/ErrorBoundary/ErrorBoundary.tsx | 53 ++++++++++++++++++++--
1 file changed, 49 insertions(+), 4 deletions(-)
diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx
index 513453070..6858e896d 100644
--- a/src/custom/ErrorBoundary/ErrorBoundary.tsx
+++ b/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,25 @@ const CodeMessage = styled('div')(({ theme }) => ({
interface FallbackComponentProps extends FallbackProps {
resetErrorBoundary: () => void;
children?: React.ReactNode;
+ pageUrl?: string;
+ timestamp?: string;
}
export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
+ const pageUrl = window.location.href;
+ const timestamp = new Date().toLocaleString();
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 />
+ <strong> URL: </strong> {pageUrl}
+ <br />
+ <strong>Logged at:</strong> {timestamp}
</CodeMessage>
<ErrorMessage>
We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
@@ -56,18 +69,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>
);
From cd01819c31d7ed00bdb6966f442015309a15aca2 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Sat, 2 Nov 2024 16:52:04 +0530
Subject: [PATCH 2/5] feat(catalog): unpublish action
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
src/custom/CatalogDetail/ActionButton.tsx | 29 ++++++++++++++++++++---
src/custom/CatalogDetail/style.tsx | 16 +++++++++++++
2 files changed, 42 insertions(+), 3 deletions(-)
diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index ed7ce790f..8d000e1d2 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/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,25 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
</ActionButton>
</LinkUrl>
)}
+ {showUnpublishAction && (
+ <LinkUrl
+ style={{ width: '100%' }}
+ onClick={handleUnpublish}
+ target="_blank"
+ rel="noreferrer"
+ >
+ <UnpublishAction
+ sx={{
+ borderRadius: '0.2rem',
+ gap: '10px',
+ width: '100%'
+ }}
+ >
+ <PublishIcon width={24} height={24} fill={charcoal[10]} />
+ Unpublish
+ </UnpublishAction>
+ </LinkUrl>
+ )}
</StyledActionWrapper>
);
};
diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
index 5d6320255..818674924 100644
--- a/src/custom/CatalogDetail/style.tsx
+++ b/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: theme.palette.border.default,
+ padding: '0.5rem',
+ color: theme.palette.text.default,
+ gap: '0.625rem',
+ flex: '1'
+}));
+
export const ContentDetailsText = styled(Typography)(({ theme }) => ({
fontFamily: 'inherit',
fontSize: '1rem',
From b30a3245e9a3b362bf54b515abe3b7a4cff8cdc5 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 07:20:48 +0530
Subject: [PATCH 3/5] fix(check): add missing props
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
src/custom/CatalogDetail/ActionButton.tsx | 26 +++++++++--------------
src/custom/CatalogDetail/LeftPanel.tsx | 6 ++++++
2 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx
index 8d000e1d2..1cd4ff662 100644
--- a/src/custom/CatalogDetail/ActionButton.tsx
+++ b/src/custom/CatalogDetail/ActionButton.tsx
@@ -17,7 +17,7 @@ interface ActionButtonsProps {
isCloneLoading: boolean;
handleClone: (name: string, id: string) => void;
mode: string;
- handleUnpublish?: () => void;
+ handleUnpublish: () => void;
isCloneDisabled: boolean;
showOpenPlaygroundButton: boolean;
showUnpublishAction: boolean;
@@ -117,23 +117,17 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
</LinkUrl>
)}
{showUnpublishAction && (
- <LinkUrl
- style={{ width: '100%' }}
+ <UnpublishAction
+ sx={{
+ borderRadius: '0.2rem',
+ gap: '10px',
+ width: '100%'
+ }}
onClick={handleUnpublish}
- target="_blank"
- rel="noreferrer"
>
- <UnpublishAction
- sx={{
- borderRadius: '0.2rem',
- gap: '10px',
- width: '100%'
- }}
- >
- <PublishIcon width={24} height={24} fill={charcoal[10]} />
- Unpublish
- </UnpublishAction>
- </LinkUrl>
+ <PublishIcon width={24} height={24} fill={charcoal[10]} />
+ Unpublish
+ </UnpublishAction>
)}
</StyledActionWrapper>
);
diff --git a/src/custom/CatalogDetail/LeftPanel.tsx b/src/custom/CatalogDetail/LeftPanel.tsx
index 30d006072..70ed50d20 100644
--- a/src/custom/CatalogDetail/LeftPanel.tsx
+++ b/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,6 +33,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
actionItems = true,
isCloneLoading,
handleClone,
+ handleUnpublish,
showTechnologies = true,
mode,
filteredAcademyData,
@@ -38,6 +41,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
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}
From 1f4fce9bbb79b514f3394daff2c11adf0f5dcc9b Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 10:25:22 +0530
Subject: [PATCH 4/5] fix(style): add border
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
src/custom/CatalogDetail/style.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx
index 818674924..672137aaa 100644
--- a/src/custom/CatalogDetail/style.tsx
+++ b/src/custom/CatalogDetail/style.tsx
@@ -48,7 +48,7 @@ export const UnpublishAction = styled('div')<ActionButtonProps>(({ disabled = fa
alignItems: 'center',
borderRadius: '0.5rem',
backgroundColor: 'transparent',
- border: theme.palette.border.default,
+ border: `1px solid ${theme.palette.border.normal}`,
padding: '0.5rem',
color: theme.palette.text.default,
gap: '0.625rem',
From a07edba3ac757853603a3217e4436fbc82efc656 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Mon, 4 Nov 2024 16:56:16 +0530
Subject: [PATCH 5/5] fix(error): rm unwanted and add version
Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
src/custom/ErrorBoundary/ErrorBoundary.tsx | 19 +++++++++++++------
1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/custom/ErrorBoundary/ErrorBoundary.tsx b/src/custom/ErrorBoundary/ErrorBoundary.tsx
index 6858e896d..a47c3e8cb 100644
--- a/src/custom/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/custom/ErrorBoundary/ErrorBoundary.tsx
@@ -34,11 +34,16 @@ interface FallbackComponentProps extends FallbackProps {
children?: React.ReactNode;
pageUrl?: string;
timestamp?: string;
+ showPackageInfo?: boolean;
+ version?: string;
}
-export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
- const pageUrl = window.location.href;
- const timestamp = new Date().toLocaleString();
+export function Fallback({
+ error,
+ children,
+ showPackageInfo,
+ version
+}: FallbackComponentProps): JSX.Element {
return (
<div role="alert">
<h2>Uh-oh!😔 Please pardon the mesh.</h2>
@@ -48,9 +53,11 @@ export function Fallback({ error, children }: FallbackComponentProps): JSX.Eleme
{(error as Error).message}
</code>
<br />
- <strong> URL: </strong> {pageUrl}
- <br />
- <strong>Logged at:</strong> {timestamp}
+ {showPackageInfo && (
+ <>
+ <strong>Version:</strong> {version}
+ </>
+ )}
</CodeMessage>
<ErrorMessage>
We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't