From 7f11009c50a30bcff2cc98be9fd97e5f4c86765f Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Wed, 10 Jan 2024 17:45:29 -0500
Subject: [PATCH 1/7] [feat] include stack trace display option in error page

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .changeset/real-grapes-sing.md                |  5 ++
 .../src/layout/ErrorPage/ErrorPage.test.tsx   | 11 +++
 .../src/layout/ErrorPage/ErrorPage.tsx        | 70 ++++++++++++-------
 3 files changed, 59 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/real-grapes-sing.md

diff --git a/.changeset/real-grapes-sing.md b/.changeset/real-grapes-sing.md
new file mode 100644
index 0000000000..80fb9edab0
--- /dev/null
+++ b/.changeset/real-grapes-sing.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Included stack trace display option in ErrorPage component
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
index 2efdc5da33..64a209e4b8 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
@@ -99,4 +99,15 @@ describe('<ErrorPage/>', () => {
       'https://error-page-test-support-url.com',
     );
   });
+
+  it('should render with stack trace if stack is provided', async () => {
+    const { getByText } = await renderInTestApp(
+      <ErrorPage
+        status="500"
+        statusMessage="INTERNAL ERROR"
+        stack="this is my stack trace!"
+      />,
+    );
+    expect(getByText(/this is my stack trace!/i)).toBeInTheDocument();
+  });
 });
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 4639e8de59..830abe6ec3 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -15,11 +15,13 @@
  */
 
 import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Link } from '../../components/Link';
+import { LogViewer } from '../../components';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';
 
@@ -28,6 +30,7 @@ interface IErrorPageProps {
   statusMessage: string;
   additionalInfo?: React.ReactNode;
   supportUrl?: string;
+  stack?: string;
 }
 
 /** @public */
@@ -35,12 +38,18 @@ export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
 
 const useStyles = makeStyles(
   theme => ({
-    container: {
+    parent: {
       padding: theme.spacing(8),
       [theme.breakpoints.down('xs')]: {
         padding: theme.spacing(2),
       },
     },
+    container: {
+      marginBottom: theme.spacing(5),
+      [theme.breakpoints.down('xs')]: {
+        marginBottom: theme.spacing(4),
+      },
+    },
     title: {
       paddingBottom: theme.spacing(5),
       [theme.breakpoints.down('xs')]: {
@@ -62,37 +71,44 @@ const useStyles = makeStyles(
  *
  */
 export function ErrorPage(props: IErrorPageProps) {
-  const { status, statusMessage, additionalInfo, supportUrl } = props;
+  const { status, statusMessage, additionalInfo, supportUrl, stack } = props;
   const classes = useStyles();
   const navigate = useNavigate();
   const support = useSupportConfig();
 
   return (
-    <Grid container spacing={0} className={classes.container}>
-      <Grid item xs={12} sm={8} md={4}>
-        <Typography
-          data-testid="error"
-          variant="body1"
-          className={classes.subtitle}
-        >
-          ERROR {status}: {statusMessage}
-        </Typography>
-        <Typography variant="body1" className={classes.subtitle}>
-          {additionalInfo}
-        </Typography>
-        <Typography variant="h2" className={classes.title}>
-          Looks like someone dropped the mic!
-        </Typography>
-        <Typography variant="h6">
-          <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
-            Go back
-          </Link>
-          ... or please{' '}
-          <Link to={supportUrl || support.url}>contact support</Link> if you
-          think this is a bug.
-        </Typography>
+    <Box className={classes.parent}>
+      <Grid container className={classes.container}>
+        <Grid item xs={12} sm={8} md={4}>
+          <Typography
+            data-testid="error"
+            variant="body1"
+            className={classes.subtitle}
+          >
+            ERROR {status}: {statusMessage}
+          </Typography>
+          <Typography variant="body1" className={classes.subtitle}>
+            {additionalInfo}
+          </Typography>
+          <Typography variant="h2" className={classes.title}>
+            Looks like someone dropped the mic!
+          </Typography>
+          <Typography variant="h6">
+            <Link
+              to="#"
+              data-testid="go-back-link"
+              onClick={() => navigate(-1)}
+            >
+              Go back
+            </Link>
+            ... or please{' '}
+            <Link to={supportUrl || support.url}>contact support</Link> if you
+            think this is a bug.
+          </Typography>
+        </Grid>
+        <MicDrop />
       </Grid>
-      <MicDrop />
-    </Grid>
+      {stack && <LogViewer text={stack} />}
+    </Box>
   );
 }

From 589006c37d75cbb7055aa4ebf3533709278f211f Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Thu, 11 Jan 2024 16:09:14 -0500
Subject: [PATCH 2/7] [feat] include stack trace in accordion by default and
 update existing error refs

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .../app-defaults/src/defaults/components.tsx  |  2 +-
 .../src/layout/ErrorPage/ErrorPage.tsx        | 33 +++++++++++++++++--
 .../components/PlaylistPage/PlaylistPage.tsx  |  1 +
 .../components/ActionsPage/ActionsPage.tsx    |  1 +
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/app-defaults/src/defaults/components.tsx b/packages/app-defaults/src/defaults/components.tsx
index 1e2fddca07..9b58694f2b 100644
--- a/packages/app-defaults/src/defaults/components.tsx
+++ b/packages/app-defaults/src/defaults/components.tsx
@@ -49,7 +49,7 @@ const DefaultBootErrorPage = ({ step, error }: BootErrorPageProps) => {
   // TODO: figure out a nicer way to handle routing on the error page, when it can be done.
   return (
     <OptionallyWrapInRouter>
-      <ErrorPage statusMessage={message} />
+      <ErrorPage statusMessage={message} stack={error.stack} />
     </OptionallyWrapInRouter>
   );
 };
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 830abe6ec3..823571d8b3 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -21,7 +21,7 @@ import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Link } from '../../components/Link';
-import { LogViewer } from '../../components';
+import { CopyTextButton, WarningPanel } from '../../components';
 import { useSupportConfig } from '../../hooks';
 import { MicDrop } from './MicDrop';
 
@@ -60,6 +60,17 @@ const useStyles = makeStyles(
     subtitle: {
       color: theme.palette.textSubtle,
     },
+    text: {
+      fontFamily: 'monospace',
+      whiteSpace: 'pre',
+      overflowX: 'auto',
+      marginRight: theme.spacing(2),
+    },
+    copyTextContainer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    },
   }),
   { name: 'BackstageErrorPage' },
 );
@@ -108,7 +119,25 @@ export function ErrorPage(props: IErrorPageProps) {
         </Grid>
         <MicDrop />
       </Grid>
-      {stack && <LogViewer text={stack} />}
+      {stack && (
+        <WarningPanel severity="error" title={statusMessage}>
+          <Grid container className={classes.container}>
+            <Grid item xs={10} sm={8}>
+              <Typography variant="subtitle1">Stack Trace</Typography>
+              <Typography
+                className={classes.text}
+                color="error"
+                variant="body1"
+              >
+                {stack}
+              </Typography>
+            </Grid>
+            <Grid item xs={2} sm={4} className={classes.copyTextContainer}>
+              <CopyTextButton text={stack} />
+            </Grid>
+          </Grid>
+        </WarningPanel>
+      )}
     </Box>
   );
 }
diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx
index 4c9a0edbb7..b17fbd2fb7 100644
--- a/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx
+++ b/plugins/playlist/src/components/PlaylistPage/PlaylistPage.tsx
@@ -84,6 +84,7 @@ export const PlaylistPage = () => {
       <ErrorPage
         status={(error as ResponseError).response?.status.toString()}
         statusMessage={error.toString()}
+        stack={error.stack}
       />
     );
   }
diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 9957d22456..9c0276fa28 100644
--- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
+++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
@@ -142,6 +142,7 @@ export const ActionsPage = () => {
       <ErrorPage
         statusMessage="Failed to load installed actions"
         status="500"
+        stack={error.stack}
       />
     );
   }

From e5117941859506885885b830d0bb8fcb9427bd85 Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Thu, 11 Jan 2024 23:10:00 -0500
Subject: [PATCH 3/7] [feat] reposition stack trace accordion below content
 grid item and adjust colors

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .../src/layout/ErrorPage/ErrorPage.tsx        | 110 +++++++++---------
 .../src/layout/ErrorPage/MicDrop.tsx          |   2 +-
 2 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 823571d8b3..9bbf600aee 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -15,7 +15,6 @@
  */
 
 import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
@@ -38,18 +37,12 @@ export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
 
 const useStyles = makeStyles(
   theme => ({
-    parent: {
+    container: {
       padding: theme.spacing(8),
       [theme.breakpoints.down('xs')]: {
         padding: theme.spacing(2),
       },
     },
-    container: {
-      marginBottom: theme.spacing(5),
-      [theme.breakpoints.down('xs')]: {
-        marginBottom: theme.spacing(4),
-      },
-    },
     title: {
       paddingBottom: theme.spacing(5),
       [theme.breakpoints.down('xs')]: {
@@ -60,6 +53,13 @@ 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),
+      },
+    },
     text: {
       fontFamily: 'monospace',
       whiteSpace: 'pre',
@@ -88,56 +88,52 @@ export function ErrorPage(props: IErrorPageProps) {
   const support = useSupportConfig();
 
   return (
-    <Box className={classes.parent}>
-      <Grid container className={classes.container}>
-        <Grid item xs={12} sm={8} md={4}>
-          <Typography
-            data-testid="error"
-            variant="body1"
-            className={classes.subtitle}
-          >
-            ERROR {status}: {statusMessage}
-          </Typography>
-          <Typography variant="body1" className={classes.subtitle}>
-            {additionalInfo}
-          </Typography>
-          <Typography variant="h2" className={classes.title}>
-            Looks like someone dropped the mic!
-          </Typography>
-          <Typography variant="h6">
-            <Link
-              to="#"
-              data-testid="go-back-link"
-              onClick={() => navigate(-1)}
-            >
-              Go back
-            </Link>
-            ... or please{' '}
-            <Link to={supportUrl || support.url}>contact support</Link> if you
-            think this is a bug.
-          </Typography>
-        </Grid>
+    <Grid container className={classes.container}>
+      <Grid item xs={12} md={5}>
+        <Typography
+          data-testid="error"
+          variant="body1"
+          className={classes.subtitle}
+        >
+          ERROR {status}: {statusMessage}
+        </Typography>
+        <Typography variant="body1" className={classes.subtitle}>
+          {additionalInfo}
+        </Typography>
+        <Typography variant="h2" className={classes.title}>
+          Looks like someone dropped the mic!
+        </Typography>
+        <Typography variant="h6" className={classes.goBackTitle}>
+          <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
+            Go back
+          </Link>
+          ... or please{' '}
+          <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.text}
+                  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 />
       </Grid>
-      {stack && (
-        <WarningPanel severity="error" title={statusMessage}>
-          <Grid container className={classes.container}>
-            <Grid item xs={10} sm={8}>
-              <Typography variant="subtitle1">Stack Trace</Typography>
-              <Typography
-                className={classes.text}
-                color="error"
-                variant="body1"
-              >
-                {stack}
-              </Typography>
-            </Grid>
-            <Grid item xs={2} sm={4} className={classes.copyTextContainer}>
-              <CopyTextButton text={stack} />
-            </Grid>
-          </Grid>
-        </WarningPanel>
-      )}
-    </Box>
+    </Grid>
   );
 }
diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
index d55c50bd29..a16de3f5e6 100644
--- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
+++ b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
@@ -21,7 +21,7 @@ import MicDropSvgUrl from './mic-drop.svg';
 const useStyles = makeStyles(
   theme => ({
     micDrop: {
-      maxWidth: '60%',
+      maxWidth: '80%',
       bottom: theme.spacing(2),
       right: theme.spacing(2),
       [theme.breakpoints.down('xs')]: {

From 969daf7d6b0a754430cd68875b7ecfb586c74bd1 Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Thu, 11 Jan 2024 23:49:44 -0500
Subject: [PATCH 4/7] [feat] add overflow scroll with fixed max accordion
 height

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 packages/core-components/src/layout/ErrorPage/ErrorPage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 9bbf600aee..9b10067fa6 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
@@ -60,7 +60,9 @@ const useStyles = makeStyles(
         marginBottom: theme.spacing(4),
       },
     },
-    text: {
+    stackTraceText: {
+      maxHeight: '30vh',
+      overflow: 'scroll',
       fontFamily: 'monospace',
       whiteSpace: 'pre',
       overflowX: 'auto',
@@ -117,7 +119,7 @@ export function ErrorPage(props: IErrorPageProps) {
               <Grid item xs={11}>
                 <Typography variant="subtitle1">Stack Trace</Typography>
                 <Typography
-                  className={classes.text}
+                  className={classes.stackTraceText}
                   color="textSecondary"
                   variant="body2"
                 >

From 39579f03b74972f17b505b96f20b7c61ca06522d Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Mon, 22 Jan 2024 16:18:24 -0500
Subject: [PATCH 5/7] [update] use code snippet component, remove warning panel

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .changeset/real-grapes-sing.md                |  5 +-
 .../src/layout/ErrorPage/ErrorPage.tsx        | 50 ++----------
 .../src/layout/ErrorPage/MicDrop.tsx          |  2 +-
 .../src/layout/ErrorPage/StackDetails.tsx     | 77 +++++++++++++++++++
 4 files changed, 87 insertions(+), 47 deletions(-)
 create mode 100644 packages/core-components/src/layout/ErrorPage/StackDetails.tsx

diff --git a/.changeset/real-grapes-sing.md b/.changeset/real-grapes-sing.md
index 80fb9edab0..4656d57a2d 100644
--- a/.changeset/real-grapes-sing.md
+++ b/.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
diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
index 9b10067fa6..131df3da3a 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx
+++ b/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>
   );
 }
diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
index a16de3f5e6..d55c50bd29 100644
--- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
+++ b/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')]: {
diff --git a/packages/core-components/src/layout/ErrorPage/StackDetails.tsx b/packages/core-components/src/layout/ErrorPage/StackDetails.tsx
new file mode 100644
index 0000000000..b46a937485
--- /dev/null
+++ b/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
+      />
+    </>
+  );
+}

From 6fc1ed6b012b9c78f309ccf471ebb1c5427314c1 Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Mon, 22 Jan 2024 16:28:38 -0500
Subject: [PATCH 6/7] [update] update show details test case

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .../core-components/src/layout/ErrorPage/ErrorPage.test.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
index 64a209e4b8..d7036d0a5b 100644
--- a/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
+++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.test.tsx
@@ -100,7 +100,7 @@ describe('<ErrorPage/>', () => {
     );
   });
 
-  it('should render with stack trace if stack is provided', async () => {
+  it('should render show details if stack is provided', async () => {
     const { getByText } = await renderInTestApp(
       <ErrorPage
         status="500"
@@ -108,6 +108,6 @@ describe('<ErrorPage/>', () => {
         stack="this is my stack trace!"
       />,
     );
-    expect(getByText(/this is my stack trace!/i)).toBeInTheDocument();
+    expect(getByText(/Show more details/i)).toBeInTheDocument();
   });
 });

From c70ab42a31f16b4f76e9923068d5fa16f8b7fc36 Mon Sep 17 00:00:00 2001
From: Jithen Shriyan <shriyanjithen@gmail.com>
Date: Fri, 26 Jan 2024 20:05:58 -0500
Subject: [PATCH 7/7] [fix] changeset package names

Signed-off-by: Jithen Shriyan <shriyanjithen@gmail.com>
---
 .changeset/real-grapes-sing.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/real-grapes-sing.md b/.changeset/real-grapes-sing.md
index 4656d57a2d..484fc7969a 100644
--- a/.changeset/real-grapes-sing.md
+++ b/.changeset/real-grapes-sing.md
@@ -1,8 +1,8 @@
 ---
 '@backstage/core-components': patch
 '@backstage/app-defaults': minor
-'@backstage/playlist': patch
-'@backstage/scaffolder': minor
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-scaffolder': minor
 ---
 
 Added stack trace display to `ErrorPage` and updated existing refs