fix(sandbox): fix page title (#765)

* fix page title
---------

Co-authored-by: Devtools <devtools@redhat.com>

Author: mfrancisc

workspaces/sandbox/plugins/sandbox/src/api/RegistrationBackendClient.tsx

@@ -140,9 +140,15 @@ export class RegistrationBackendClient implements RegistrationService {
     });
 
     if (!response.ok) {
-      throw new Error(
-        'Invalid phone number. Please verify the country code and number format, then try again.',
-      );
+      const error: CommonResponse = await response.json();
+      // handle backend error messages and make it more user-friendly
+      if (error?.message.includes("Invalid 'To' Phone Number")) {
+        throw new Error(
+          'Invalid phone number. Please verify the country code and number format, then try again.',
+        );
+      } else {
+        throw new Error(error?.message);
+      }
     }
   };
 

workspaces/sandbox/plugins/sandbox/src/components/SandboxActivities/SandboxActivitiesGrid.tsx

@@ -29,6 +29,7 @@ const FeaturedArticles: React.FC = () => {
       sx={{
         alignItems: 'center',
         justifyContent: 'space-between',
+        backgroundColor: theme.palette.background.paper,
         padding: '36px 60px 48px 60px',
       }}
     >

workspaces/sandbox/plugins/sandbox/src/components/SandboxHeader.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SandboxHeader } from './SandboxHeader';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { wrapInTestApp } from '@backstage/test-utils';
+
+test('renders the modal with the correct title', () => {
+  const theme = createTheme();
+  render(
+    wrapInTestApp(
+      <ThemeProvider theme={theme}>
+        <SandboxHeader pageTitle="My Page Title" />
+      </ThemeProvider>,
+    ),
+  );
+  expect(screen.getByText('My Page Title')).toBeInTheDocument();
+});

workspaces/sandbox/plugins/sandbox/src/components/SandboxHeader.tsx

@@ -30,6 +30,7 @@ export const SandboxHeader: React.FC<SandboxHeaderProps> = ({ pageTitle }) => {
   const theme = useTheme();
   return (
     <Header
+      pageTitleOverride={pageTitle}
       title={
         <Typography
           color="textPrimary"