[update] use code snippet component, remove warning panel

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>

.changeset/real-grapes-sing.md

@@ -1,5 +1,8 @@
 ---
 '@backstage/core-components': patch
+'@backstage/app-defaults': minor
+'@backstage/playlist': patch
+'@backstage/scaffolder': minor
 ---
 
-Included stack trace display option in ErrorPage component
+Added stack trace display to `ErrorPage` and updated existing refs

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -20,9 +20,9 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Link } from '../../components/Link';
-import { CopyTextButton, WarningPanel } from '../../components';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';
+import { StackDetails } from './StackDetails';
 
 interface IErrorPageProps {
   status?: string;
@@ -53,26 +53,6 @@ const useStyles = makeStyles(
     subtitle: {
       color: theme.palette.textSubtle,
     },
-    goBackTitle: {
-      color: theme.palette.textSubtle,
-      marginBottom: theme.spacing(5),
-      [theme.breakpoints.down('xs')]: {
-        marginBottom: theme.spacing(4),
-      },
-    },
-    stackTraceText: {
-      maxHeight: '30vh',
-      overflow: 'scroll',
-      fontFamily: 'monospace',
-      whiteSpace: 'pre',
-      overflowX: 'auto',
-      marginRight: theme.spacing(2),
-    },
-    copyTextContainer: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'flex-start',
-    },
   }),
   { name: 'BackstageErrorPage' },
 );
@@ -91,7 +71,7 @@ export function ErrorPage(props: IErrorPageProps) {
 
   return (
     <Grid container className={classes.container}>
-      <Grid item xs={12} md={5}>
+      <Grid item xs={12} sm={8} md={4}>
         <Typography
           data-testid="error"
           variant="body1"
@@ -105,7 +85,7 @@ export function ErrorPage(props: IErrorPageProps) {
         <Typography variant="h2" className={classes.title}>
           Looks like someone dropped the mic!
         </Typography>
-        <Typography variant="h6" className={classes.goBackTitle}>
+        <Typography variant="h6" className={classes.title}>
           <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
             Go back
           </Link>
@@ -113,29 +93,9 @@ export function ErrorPage(props: IErrorPageProps) {
           <Link to={supportUrl || support.url}>contact support</Link> if you
           think this is a bug.
         </Typography>
-        {stack && (
-          <WarningPanel severity="error" title={statusMessage}>
-            <Grid container>
-              <Grid item xs={11}>
-                <Typography variant="subtitle1">Stack Trace</Typography>
-                <Typography
-                  className={classes.stackTraceText}
-                  color="textSecondary"
-                  variant="body2"
-                >
-                  {stack}
-                </Typography>
-              </Grid>
-              <Grid item xs={1} className={classes.copyTextContainer}>
-                <CopyTextButton text={stack} />
-              </Grid>
-            </Grid>
-          </WarningPanel>
-        )}
-      </Grid>
-      <Grid item xs={12} md={7}>
-        <MicDrop />
+        {stack && <StackDetails stack={stack} />}
       </Grid>
+      <MicDrop />
     </Grid>
   );
 }

packages/core-components/src/layout/ErrorPage/MicDrop.tsx

@@ -21,7 +21,7 @@ import MicDropSvgUrl from './mic-drop.svg';
 const useStyles = makeStyles(
   theme => ({
     micDrop: {
-      maxWidth: '80%',
+      maxWidth: '60%',
       bottom: theme.spacing(2),
       right: theme.spacing(2),
       [theme.breakpoints.down('xs')]: {

packages/core-components/src/layout/ErrorPage/StackDetails.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+import { useState } from 'react';
+import { Link } from '../../components/Link';
+import { CodeSnippet } from '../../components';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface IStackDetailsProps {
+  stack: string;
+}
+
+const useStyles = makeStyles(
+  theme => ({
+    title: {
+      paddingBottom: theme.spacing(5),
+      [theme.breakpoints.down('xs')]: {
+        paddingBottom: theme.spacing(4),
+        fontSize: theme.typography.h3.fontSize,
+      },
+    },
+  }),
+  { name: 'BackstageErrorPageStackDetails' },
+);
+
+/**
+ * Error page details with stack trace
+ *
+ * @public
+ *
+ */
+export function StackDetails(props: IStackDetailsProps) {
+  const { stack } = props;
+  const classes = useStyles();
+
+  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
+
+  if (!detailsOpen) {
+    return (
+      <Typography variant="h6" className={classes.title}>
+        <Link to="#" onClick={() => setDetailsOpen(true)}>
+          Show more details
+        </Link>
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <Typography variant="h6" className={classes.title}>
+        <Link to="#" onClick={() => setDetailsOpen(false)}>
+          Show less details
+        </Link>
+      </Typography>
+      <CodeSnippet
+        text={stack}
+        language="text"
+        showCopyCodeButton
+        showLineNumbers
+      />
+    </>
+  );
+}