🪟 Updates to credits page (#15756)

* Removes side menu.

* Removes conditional rendering that is no longer needed.

* Adds bottom margin to the Remaining Credits block.

* Renames credit usage component as per request.

Author: natalyjazzviolin

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx

@@ -1,20 +1,14 @@
-import React, { Suspense } from "react";
+import React from "react";
 import { FormattedMessage } from "react-intl";
-import { Navigate, Route, Routes } from "react-router-dom";
 import styled from "styled-components";
 
 import { PageTitle } from "components";
 import HeadTitle from "components/HeadTitle";
-import LoadingPage from "components/LoadingPage";
 import MainPageWithScroll from "components/MainPageWithScroll";
-import SideMenu from "components/SideMenu";
-import { CategoryItem } from "components/SideMenu/SideMenu";
 
-import useRouter from "hooks/useRouter";
-import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 
-import CreditsUsagePage from "./components/CreditsUsagePage";
+import CreditsUsage from "./components/CreditsUsage";
 import { EmailVerificationHint } from "./components/EmailVerificationHint";
 import RemainingCredits from "./components/RemainingCredits";
 
@@ -23,40 +17,13 @@ const Content = styled.div`
   height: 100%;
 `;
 
-const MainInfo = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-top: 29px;
-`;
-
-const MainView = styled.div`
-  width: 100%;
-  margin-left: 47px;
-`;
-
 const EmailVerificationHintWithMargin = styled(EmailVerificationHint)`
   margin-bottom: 8px;
 `;
 
 const CreditsPage: React.FC = () => {
-  const { push, pathname } = useRouter();
-  const onSelectMenuItem = (newPath: string) => push(newPath);
   const { emailVerified } = useAuthService();
 
-  const menuItems: CategoryItem[] = [
-    {
-      routes: [
-        {
-          path: ``,
-          name: <FormattedMessage id="credits.creditUsage" />,
-          component: CreditsUsagePage,
-        },
-      ],
-    },
-  ];
-
-  const firstRoute = menuItems?.[0].routes?.[0]?.path;
-
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "credits.credits" }]} />}
@@ -65,25 +32,7 @@ const CreditsPage: React.FC = () => {
       <Content>
         {!emailVerified && <EmailVerificationHintWithMargin />}
         <RemainingCredits selfServiceCheckoutEnabled={emailVerified} />
-        <MainInfo>
-          <SideMenu data={menuItems} onSelect={onSelectMenuItem} activeItem={pathname} />
-          <MainView>
-            <Suspense fallback={<LoadingPage />}>
-              <Routes>
-                {menuItems.flatMap((menuItem) =>
-                  menuItem.routes.map(({ path, component: Component }) => (
-                    <Route key={`${path}`} path={`${path}`} element={<Component />} />
-                  ))
-                )}
-
-                <Route
-                  path="*"
-                  element={<Navigate to={firstRoute ? `${menuItems?.[0].routes?.[0]?.path}` : CloudRoutes.Root} />}
-                />
-              </Routes>
-            </Suspense>
-          </MainView>
-        </MainInfo>
+        <CreditsUsage />
       </Content>
     </MainPageWithScroll>
   );

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx renamed to airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx

@@ -31,7 +31,7 @@ const Empty = styled.div`
 
 const LegendLabels = ["value"];
 
-const CreditsUsagePage: React.FC = () => {
+const CreditsUsage: React.FC = () => {
   const { formatMessage, formatDate } = useIntl();
 
   const { workspaceId } = useCurrentWorkspace();
@@ -85,4 +85,4 @@ const CreditsUsagePage: React.FC = () => {
   );
 };
 
-export default CreditsUsagePage;
+export default CreditsUsage;

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx

@@ -30,6 +30,7 @@ const Block = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin: 10px 0px;
 `;
 const CreditView = styled.div`
   text-transform: uppercase;