Skip to content

Commit

Permalink
Merge branch 'master' into component-filter
Browse files Browse the repository at this point in the history
  • Loading branch information
amitamrutiya authored Nov 5, 2024
2 parents 15bf9d8 + 7a83103 commit 5ba18c0
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 8 deletions.
23 changes: 20 additions & 3 deletions src/custom/CatalogDetail/ActionButton.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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> = ({
Expand All @@ -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({
Expand Down Expand Up @@ -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>
);
};
Expand Down
6 changes: 6 additions & 0 deletions src/custom/CatalogDetail/LeftPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ interface LeftPanelProps {
technologySVGSubpath: string;
fontFamily?: string;
showOpenPlaygroundButton?: boolean;
handleUnpublish: () => void;
showUnpublishAction?: boolean;
}

const LeftPanel: React.FC<LeftPanelProps> = ({
Expand All @@ -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();
Expand Down Expand Up @@ -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}
Expand Down
16 changes: 16 additions & 0 deletions src/custom/CatalogDetail/style.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
62 changes: 57 additions & 5 deletions src/custom/ErrorBoundary/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand All @@ -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>
);
Expand Down

0 comments on commit 5ba18c0

Please sign in to comment.