Remove the top header in favor of dashboard build in

apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx

@@ -1,56 +1,15 @@
 import React, { PropsWithChildren } from "react";
-import { Button, makeStyles, PageTab, PageTabs } from "@saleor/macaw-ui";
+import { makeStyles, PageTab, PageTabs } from "@saleor/macaw-ui";
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
-import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-import { MainBar } from "../../modules/ui/main-bar";
-import { appBrandColor, appName } from "../../const";
-import Image from "next/image";
-import appIcon from "../../public/notification-hub.svg";
 import { useRouter } from "next/router";
 
 const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
+  appContainer: { marginTop: 20 },
-  topBar: {
-    marginBottom: 32,
-  },
-  appIconContainer: {
-    background: appBrandColor,
-    padding: 10,
-    borderRadius: "50%",
-    width: 50,
-    height: 50,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    color: "#fff",
-  },
 });
 
-const AppIcon = () => {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.appIconContainer}>
-      <Image width={30} height={30} alt="icon" src={appIcon} />
-    </div>
-  );
-};
-
 type Props = PropsWithChildren<{}>;
 
 export const ConfigurationPageBaseLayout = ({ children }: Props) => {
   const styles = useStyles();
-  const { appBridge } = useAppBridge();
-
-  const openInNewTab = (url: string) => {
-    appBridge?.dispatch(
-      actions.Redirect({
-        to: url,
-        newContext: true,
-      })
-    );
-  };
 
   const router = useRouter();
   const tabs = [
@@ -77,35 +36,7 @@ export const ConfigurationPageBaseLayout = ({ children }: Props) => {
     }
   };
   return (
-    <div>
+    <div className={styles.appContainer}>
-      <MainBar
-        icon={<AppIcon />}
-        className={styles.topBar}
-        name={appName}
-        author="By Saleor Commerce"
-        rightColumnContent={
-          <div className={styles.buttonsGrid}>
-            <Button
-              variant="secondary"
-              startIcon={<GitHub />}
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/saleor-emails-and-messages");
-              }}
-            >
-              Repository
-            </Button>
-            <Button
-              startIcon={<OfflineBoltOutlined />}
-              variant="secondary"
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/apps/discussions");
-              }}
-            >
-              Request a feature
-            </Button>
-          </div>
-        }
-      />
       <PageTabs
         value={activePath}
         onChange={navigateToTab}

apps/emails-and-messages/src/modules/ui/main-bar.tsx

@@ -1,54 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-import { ReactNode } from "react";
-import { Paper, PaperProps } from "@material-ui/core";
-import clsx from "clsx";
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 96,
-    padding: "0 32px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderLeft: "none",
-    borderRight: "none",
-    borderTop: "none",
-  },
-  leftColumn: {
-    marginRight: "auto",
-  },
-  rightColumn: {},
-  iconColumn: {
-    marginRight: 24,
-  },
-  appName: { fontSize: 24, margin: 0 },
-  appAuthor: {
-    fontSize: 12,
-    textTransform: "uppercase",
-    color: theme.palette.text.secondary,
-    fontWeight: 500,
-    margin: 0,
-  },
-}));
-
-type Props = {
-  name: string;
-  author: string;
-  rightColumnContent?: ReactNode;
-  icon?: ReactNode;
-} & PaperProps;
-
-export const MainBar = ({ name, author, rightColumnContent, className, icon }: Props) => {
-  const styles = useStyles();
-
-  return (
-    <Paper square variant="outlined" elevation={0} className={clsx(styles.root, className)}>
-      {icon && <div className={styles.iconColumn}>{icon}</div>}
-      <div className={styles.leftColumn}>
-        <h1 className={styles.appName}>{name}</h1>
-        <h1 className={styles.appAuthor}>{author}</h1>
-      </div>
-      <div className={styles.rightColumn}>{rightColumnContent}</div>
-    </Paper>
-  );
-};

apps/emails-and-messages/src/pages/api/manifest.ts

@@ -32,6 +32,8 @@ export default createManifestHandler({
          * https://docs.saleor.io/docs/3.x/developer/extending/apps/extending-dashboard-with-apps
          */
       ],
+      homepageUrl: "https://github.com/saleor/apps",
+      supportUrl: "https://github.com/saleor/apps/discussions",
     };
 
     return manifest;