Move connection delete notice out of banner

airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss

@@ -7,10 +7,6 @@
   flex-direction: column;
 }
 
-.headerError {
-  padding-top: 25px;
-}
-
 .content {
   overflow-y: auto;
   padding-top: 17px;

airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.tsx

@@ -1,4 +1,3 @@
-import classnames from "classnames";
 import React from "react";
 
 import styles from "./MainPageWithScroll.module.scss";
@@ -8,17 +7,15 @@ import styles from "./MainPageWithScroll.module.scss";
  * @param pageTitle the title shown on the page
  */
 interface MainPageWithScrollProps {
-  error?: React.ReactNode;
   headTitle?: React.ReactNode;
   pageTitle?: React.ReactNode;
   children?: React.ReactNode;
 }
 
-const MainPageWithScroll: React.FC<MainPageWithScrollProps> = ({ error, headTitle, pageTitle, children }) => {
+const MainPageWithScroll: React.FC<MainPageWithScrollProps> = ({ headTitle, pageTitle, children }) => {
   return (
     <div className={styles.page}>
-      {error}
-      <div className={classnames({ [styles.headerError]: !!error })}>
+      <div>
         {headTitle}
         {pageTitle}
       </div>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx

@@ -2,7 +2,6 @@ import React, { Suspense, useState } from "react";
 import { Navigate, Route, Routes, useParams } from "react-router-dom";
 
 import { LoadingPage, MainPageWithScroll } from "components";
-import { AlertBanner } from "components/base/Banner/AlertBanner";
 import HeadTitle from "components/HeadTitle";
 
 import { getFrequencyConfig } from "config/utils";
@@ -70,9 +69,6 @@ const ConnectionItemPage: React.FC = () => {
           onStatusUpdating={setStatusUpdating}
         />
       }
-      error={
-        isConnectionDeleted ? <AlertBanner alertType="connectionDeleted" id="connection.connectionDeletedView" /> : null
-      }
     >
       <Suspense fallback={<LoadingPage />}>
         <Routes>

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.module.scss

@@ -0,0 +1,6 @@
+@use "../../../../../scss/variables" as vars;
+
+.connectionDeleted {
+  max-width: vars.$width-modal-md;
+  margin: vars.$spacing-lg auto;
+}

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx

@@ -1,15 +1,18 @@
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { H6 } from "components";
+import { InfoBox } from "components/InfoBox";
 import StepsMenu from "components/StepsMenu";
 
 import { ConnectionStatus, DestinationRead, SourceRead, WebBackendConnectionRead } from "core/request/AirbyteClient";
 import useRouter from "hooks/useRouter";
 
 import { ConnectionSettingsRoutes } from "../ConnectionSettingsRoutes";
 import ConnectionName from "./ConnectionName";
+import styles from "./ConnectionPageTitle.module.scss";
 import { StatusMainInfo } from "./StatusMainInfo";
 
 interface ConnectionPageTitleProps {
@@ -74,6 +77,11 @@ const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
 
   return (
     <Title>
+      {connection.status === ConnectionStatus.deprecated && (
+        <InfoBox className={styles.connectionDeleted} icon={faTrash}>
+          <FormattedMessage id="connection.connectionDeletedView" />
+        </InfoBox>
+      )}
       <H6 center bold highlighted>
         <FormattedMessage id="connection.title" />
       </H6>