Remove TitleBar from apps and shared package (#209)

* Remove TitleBar from apps and shared package

* Invoices: add manifest homepage and support urls

.changeset/few-fireants-unite.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-invoices": patch
+---
+
+Add homepage and support url to manifest

.changeset/mighty-tigers-scream.md

@@ -0,0 +1,12 @@
+---
+"saleor-app-data-importer": minor
+"saleor-app-products-feed": minor
+"saleor-app-monitoring": minor
+"@saleor/apps-shared": minor
+"saleor-app-invoices": minor
+"saleor-app-klaviyo": minor
+"saleor-app-search": minor
+"saleor-app-slack": minor
+---
+
+Remove TitleBar component from apps, because it is moved to Dashboard, outside of iframe context

apps/data-importer/src/pages/importer.tsx

@@ -5,13 +5,12 @@ import { Button, makeStyles, PageTab, PageTabs, SaleorTheme } from "@saleor/maca
 import { CustomersImporterView } from "../modules/customers/customers-importer-nuvo/customers-importer-view";
 import GraphQLProvider from "../providers/GraphQLProvider";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-import { AppIcon, TitleBar } from "@saleor/apps-shared";
 
 type Tab = "customers";
 
 const useStyles = makeStyles((theme: SaleorTheme) => ({
   wrapper: {
-    minHeight: `100vh`,
+    minHeight: `100%`,
   },
 }));
 
@@ -32,32 +31,6 @@ const ImporterPage: NextPage = () => {
 
   return (
     <div className={styles.wrapper}>
-      <TitleBar
-        bottomMargin
-        icon={<AppIcon theme="#3BD579" icon={<img src="/logo.svg" />} />}
-        name="Data Importer"
-        author="By Saleor Commerce"
-        rightColumnContent={
-          <div style={{ display: "flex", gap: 10 }}>
-            <Button
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/saleor-app-data-importer");
-              }}
-              variant="tertiary"
-            >
-              Repository
-            </Button>
-            <Button
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/apps/discussions");
-              }}
-              variant="tertiary"
-            >
-              Request a feature
-            </Button>
-          </div>
-        }
-      />
       <Container style={{ maxWidth: "unset" }}>
         <PageTabs
           style={{ marginBottom: 20, marginTop: 20 }}

apps/invoices/src/modules/app-configuration/ui/channels-configuration.tsx

@@ -1,5 +1,5 @@
 import { trpcClient } from "../../trpc/trpc-client";
-import { LinearProgress, Link, Paper, Typography } from "@material-ui/core";
+import { Link, Paper, Typography } from "@material-ui/core";
 import React, { useEffect, useMemo, useState } from "react";
 import { makeStyles } from "@saleor/macaw-ui";
 import { AppConfigContainer } from "../app-config-container";
@@ -7,7 +7,6 @@ import { AddressForm } from "./address-form";
 import { ChannelsList } from "./channels-list";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { AppColumnsLayout } from "../../ui/app-columns-layout";
-import { TitleBar } from "@saleor/apps-shared";
 import { Loader } from "../../ui/loader";
 
 const useStyles = makeStyles((theme) => {

apps/invoices/src/pages/api/manifest.ts

@@ -15,6 +15,8 @@ export default createManifestHandler({
       version: packageJson.version,
       webhooks: [invoiceRequestedWebhook.getWebhookManifest(context.appBaseUrl)],
       extensions: [],
+      homepageUrl: "https://github.com/saleor/apps",
+      supportUrl: "https://github.com/saleor/apps/discussions",
     };
 
     return manifest;

apps/invoices/src/pages/configuration.tsx

@@ -3,22 +3,9 @@ import React, { useEffect } from "react";
 import { ChannelsConfiguration } from "../modules/app-configuration/ui/channels-configuration";
 import { trpcClient } from "../modules/trpc/trpc-client";
 import { useRouter } from "next/router";
-import { Button, makeStyles } from "@saleor/macaw-ui";
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-import appIcon from "../app-invoices-icon.svg";
-import Image from "next/image";
-import { AppIcon, TitleBar } from "@saleor/apps-shared";
-
-const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
-  topBar: {
-    marginBottom: 32,
-  },
-});
 
 const ConfigurationPage: NextPage = () => {
-  const styles = useStyles();
   const channels = trpcClient.channels.fetch.useQuery();
   const router = useRouter();
 
@@ -39,44 +26,7 @@ const ConfigurationPage: NextPage = () => {
     }
   }, [channels.data, channels.isSuccess]);
 
-  return (
-    <div>
-      <TitleBar
-        icon={
-          <AppIcon
-            theme={`rgb(227, 149, 60)`}
-            icon={<Image width={30} height={30} alt="icon" src={appIcon} />}
-          />
-        }
-        className={styles.topBar}
-        name="Saleor Invoices"
-        author="By Saleor Commerce"
-        rightColumnContent={
-          <div className={styles.buttonsGrid}>
-            <Button
-              variant="secondary"
-              startIcon={<GitHub />}
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/saleor-app-invoices");
-              }}
-            >
-              Repository
-            </Button>
-            <Button
-              startIcon={<OfflineBoltOutlined />}
-              variant="secondary"
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/apps/discussions");
-              }}
-            >
-              Request a feature
-            </Button>
-          </div>
-        }
-      />
-      <ChannelsConfiguration />
-    </div>
-  );
+  return <ChannelsConfiguration />;
 };
 
 export default ConfigurationPage;

apps/klaviyo/pages/configuration.tsx

@@ -2,7 +2,7 @@ import { Link, List, ListItem, Paper, PaperProps, TextField, Typography } from "
 import Skeleton from "@material-ui/lab/Skeleton";
 import { useAppBridge, withAuthorization } from "@saleor/app-sdk/app-bridge";
 import { SALEOR_API_URL_HEADER, SALEOR_AUTHORIZATION_BEARER_HEADER } from "@saleor/app-sdk/const";
-import { AppIcon, TitleBar } from "@saleor/apps-shared";
+
 import { ConfirmButton, ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { ChangeEvent, SyntheticEvent, useEffect, useState } from "react";
 
@@ -217,39 +217,31 @@ function Configuration() {
   }
 
   return (
-    <div>
-      <TitleBar
-        icon={<AppIcon theme="rgb(58, 86, 199)" text="K" />}
-        bottomMargin
-        name="Saleor Klaviyo App"
-        author="By Saleor Commerce"
-      />
-      <AppColumnsLayout>
-        <div />
-        <Section>
-          <form onSubmit={handleSubmit}>
-            {configuration!.map(({ key, value }) => (
-              <div key={key} className={classes.fieldContainer}>
-                <TextField label={key} name={key} fullWidth onChange={onChange} value={value} />
-              </div>
-            ))}
-            <div>
-              <ConfirmButton
-                type="submit"
-                variant="primary"
-                transitionState={transitionState}
-                labels={{
-                  confirm: "Save",
-                  error: "Error",
-                }}
-                className={classes.confirmButton}
-              />
+    <AppColumnsLayout>
+      <div />
+      <Section>
+        <form onSubmit={handleSubmit}>
+          {configuration!.map(({ key, value }) => (
+            <div key={key} className={classes.fieldContainer}>
+              <TextField label={key} name={key} fullWidth onChange={onChange} value={value} />
             </div>
-          </form>
-        </Section>
-        <Instructions />
-      </AppColumnsLayout>
-    </div>
+          ))}
+          <div>
+            <ConfirmButton
+              type="submit"
+              variant="primary"
+              transitionState={transitionState}
+              labels={{
+                confirm: "Save",
+                error: "Error",
+              }}
+              className={classes.confirmButton}
+            />
+          </div>
+        </form>
+      </Section>
+      <Instructions />
+    </AppColumnsLayout>
   );
 }
 

apps/monitoring/src/pages/configuration/[[...path]].tsx

@@ -3,7 +3,6 @@ import { AppColumnsLayout } from "../../ui/app-columns-layout";
 import React, { useEffect } from "react";
 import { IntegrationsList } from "../../ui/providers-list";
 import { NoProvidersConfigured } from "../../ui/no-providers-configured";
-import { AppMainBar } from "../../ui/app-main-bar";
 import { useRouter } from "next/router";
 import { DatadogConfig } from "../../ui/datadog/datadog-config";
 import { DatadogSite, useConfigQuery } from "../../../generated/graphql";
@@ -11,13 +10,8 @@ import { LinearProgress, Link, Typography } from "@material-ui/core";
 import { Section } from "../../ui/sections";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { Done, Error } from "@material-ui/icons";
-import { makeStyles } from "@saleor/macaw-ui";
 import { DATADOG_SITES_LINKS } from "../../datadog-urls";
 
-const useStyles = makeStyles((theme) => ({
-  wrapper: {},
-}));
-
 const useActiveProvider = () => {
   const router = useRouter();
 
@@ -99,17 +93,13 @@ const Content = () => {
 };
 
 const ConfigurationPage: NextPage = () => {
-  const styles = useStyles();
   const selectedProvider = useActiveProvider();
 
   return (
-    <div className={styles.wrapper}>
-      <AppMainBar />
-      <AppColumnsLayout>
-        <IntegrationsList activeProvider={selectedProvider} />
-        <Content />
-      </AppColumnsLayout>
-    </div>
+    <AppColumnsLayout>
+      <IntegrationsList activeProvider={selectedProvider} />
+      <Content />
+    </AppColumnsLayout>
   );
 };
 

apps/monitoring/src/ui/app-icon.tsx

@@ -1,28 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-
-const useStyles = makeStyles({
-  appIconContainer: {
-    background: "rgb(58, 86, 199)",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "50%",
-    color: "#fff",
-    width: 50,
-    height: 50,
-  },
-});
-
-export function AppIcon() {
-  const styles = useStyles();
-
-  return (
-    <div className={styles.appIconContainer}>
-      <div>
-        <Typography variant="h2">M</Typography>
-      </div>
-    </div>
-  );
-}

apps/monitoring/src/ui/app-main-bar.tsx

@@ -1,56 +0,0 @@
-import { MainBar } from "./main-bar";
-import { AppIcon } from "./app-icon";
-import React from "react";
-import { Button, makeStyles } from "@saleor/macaw-ui";
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
-import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-
-const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
-});
-
-export const AppMainBar = () => {
-  const styles = useStyles();
-
-  const { appBridge } = useAppBridge();
-
-  const openInNewTab = (url: string) => {
-    appBridge?.dispatch(
-      actions.Redirect({
-        to: url,
-        newContext: true,
-      })
-    );
-  };
-
-  return (
-    <MainBar
-      name="Monitoring"
-      author="By Saleor Commerce"
-      icon={<AppIcon />}
-      bottomMargin
-      rightColumnContent={
-        <div className={styles.buttonsGrid}>
-          <Button
-            variant="secondary"
-            startIcon={<GitHub />}
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/apps");
-            }}
-          >
-            Repository
-          </Button>
-          <Button
-            startIcon={<OfflineBoltOutlined />}
-            variant="secondary"
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/apps/discussions");
-            }}
-          >
-            Request a feature
-          </Button>
-        </div>
-      }
-    />
-  );
-};

apps/monitoring/src/ui/main-bar.tsx

@@ -1,69 +0,0 @@
-import { Paper, PaperProps } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import clsx from "clsx";
-import { ReactNode } from "react";
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 96,
-    padding: "0 32px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    borderBottom: `1px solid ${theme.palette.grey.A100} `,
-  },
-  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,
-  },
-  bottomMargin: {
-    marginBottom: 32,
-  },
-}));
-
-type Props = {
-  name: string;
-  author: string;
-  rightColumnContent?: ReactNode;
-  icon?: ReactNode;
-  bottomMargin?: boolean;
-} & PaperProps;
-
-export function MainBar({
-  name,
-  author,
-  rightColumnContent,
-  className,
-  icon,
-  bottomMargin,
-}: Props) {
-  const styles = useStyles();
-
-  return (
-    <Paper
-      square
-      elevation={0}
-      className={clsx(styles.root, className, {
-        [styles.bottomMargin]: bottomMargin,
-      })}
-    >
-      {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/products-feed/src/modules/ui/main-bar.tsx

@@ -1,51 +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",
-  },
-  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 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/products-feed/src/pages/configuration.tsx

@@ -3,43 +3,9 @@ import React, { useEffect } from "react";
 import { ChannelsConfiguration } from "../modules/app-configuration/ui/channels-configuration";
 import { trpcClient } from "../modules/trpc/trpc-client";
 import { useRouter } from "next/router";
-import { MainBar } from "../modules/ui/main-bar";
-import { Button, makeStyles } from "@saleor/macaw-ui";
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-import { Typography } from "@material-ui/core";
-
-const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
-  topBar: {
-    marginBottom: 32,
-  },
-  appIconContainer: {
-    background: `rgb(12, 197, 155)`,
-    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}>
-      <Typography variant="h2">PF</Typography>
-    </div>
-  );
-};
 
 const ConfigurationPage: NextPage = () => {
-  const styles = useStyles();
   const channels = trpcClient.channels.fetch.useQuery();
   const router = useRouter();
 
@@ -60,39 +26,7 @@ const ConfigurationPage: NextPage = () => {
     }
   }, [channels.data, channels.isSuccess]);
 
-  return (
-    <div>
-      <MainBar
-        icon={<AppIcon />}
-        className={styles.topBar}
-        name="Products Feed"
-        author="By Saleor Commerce"
-        rightColumnContent={
-          <div className={styles.buttonsGrid}>
-            <Button
-              variant="secondary"
-              startIcon={<GitHub />}
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/apps");
-              }}
-            >
-              Repository
-            </Button>
-            <Button
-              startIcon={<OfflineBoltOutlined />}
-              variant="secondary"
-              onClick={() => {
-                openInNewTab("https://github.com/saleor/apps/discussions");
-              }}
-            >
-              Request a feature
-            </Button>
-          </div>
-        }
-      />
-      <ChannelsConfiguration />
-    </div>
-  );
+  return <ChannelsConfiguration />;
 };
 
 export default ConfigurationPage;

apps/search/src/components/ConfigurationView.tsx

@@ -6,7 +6,6 @@ import { useRouter } from "next/router";
 import Instructions from "./Instructions";
 
 import { AppColumnsLayout } from "./AppColumnsLayout";
-import { SearchAppMainBar } from "./SearchAppMainBar";
 
 const useStyles = makeStyles((theme) => ({
   buttonsGrid: { display: "flex", gap: 10 },
@@ -17,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 10,
   },
   wrapper: {
-    minHeight: "100vh",
+    minHeight: "100%",
     paddingBottom: 50,
   },
   tabs: { marginLeft: 32, marginBottom: 32 },
@@ -30,7 +29,6 @@ export const ConfigurationView = () => {
   const handleClick = (val: string) => router.push("/" + val);
   return (
     <div className={styles.wrapper}>
-      <SearchAppMainBar />
       <PageTabs className={styles.tabs} value="" onChange={handleClick}>
         <PageTab label={"Configuration"} value="" />
         <PageTab label={"Preview"} value="search" />

apps/search/src/components/SearchAppMainBar.tsx

@@ -1,62 +0,0 @@
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
-import { Button, makeStyles } from "@saleor/macaw-ui";
-
-import { useAppBridge, actions } from "@saleor/app-sdk/app-bridge";
-import appIcon from "./AppIcon.svg";
-import { AppIcon, TitleBar } from "@saleor/apps-shared";
-import Image from "next/image";
-
-const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
-  topBar: {
-    marginBottom: 32,
-  },
-  indexActions: {
-    marginTop: 10,
-  },
-});
-
-export const SearchAppMainBar = () => {
-  const { appBridge } = useAppBridge();
-  const styles = useStyles();
-
-  const openInNewTab = (url: string) => {
-    appBridge?.dispatch(
-      actions.Redirect({
-        to: url,
-        newContext: true,
-      })
-    );
-  };
-
-  return (
-    <TitleBar
-      icon={<AppIcon theme={`rgb(199, 58, 63)`} icon={<Image src={appIcon} alt="Search App" />} />}
-      className={styles.topBar}
-      name="Saleor Search"
-      author="By Saleor Commerce"
-      rightColumnContent={
-        <div className={styles.buttonsGrid}>
-          <Button
-            variant="secondary"
-            startIcon={<GitHub />}
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/saleor-app-search");
-            }}
-          >
-            Repository
-          </Button>
-          <Button
-            startIcon={<OfflineBoltOutlined />}
-            variant="secondary"
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/apps/discussions");
-            }}
-          >
-            Request a feature
-          </Button>
-        </div>
-      }
-    />
-  );
-};

apps/search/src/pages/search/index.tsx

@@ -13,7 +13,7 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { useConfiguration } from "../../lib/configuration";
 import { useMemo, useState } from "react";
 import { useQuery } from "react-query";
-import { SearchAppMainBar } from "../../components/SearchAppMainBar";
+
 import { AppColumnsLayout } from "../../components/AppColumnsLayout";
 
 const useStyles = makeStyles((theme) => ({
@@ -62,7 +62,6 @@ function Search() {
 
   return (
     <div className={classes.wrapper}>
-      <SearchAppMainBar />
       <PageTabs className={styles.tabs} value="search" onChange={handleClick}>
         <PageTab label={"Configuration"} value="" />
         <PageTab label={"Preview"} value="search" />

apps/search/src/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

apps/slack/src/components/SlackAppMainBar/SlackAppMainBar.tsx

@@ -1,60 +0,0 @@
-import { GitHub, OfflineBoltOutlined } from "@material-ui/icons";
-import { Button, makeStyles } from "@saleor/macaw-ui";
-import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-
-import { AppIcon, TitleBar } from "@saleor/apps-shared";
-
-const useStyles = makeStyles({
-  buttonsGrid: { display: "flex", gap: 10 },
-  topBar: {
-    marginBottom: 32,
-  },
-  indexActions: {
-    marginTop: 10,
-  },
-});
-
-export const SlackAppMainBar = () => {
-  const { appBridge } = useAppBridge();
-  const styles = useStyles();
-
-  const openInNewTab = (url: string) => {
-    appBridge?.dispatch(
-      actions.Redirect({
-        to: url,
-        newContext: true,
-      })
-    );
-  };
-
-  return (
-    <TitleBar
-      icon={<AppIcon theme={`rgb(95, 58, 199)`} text="S" />}
-      className={styles.topBar}
-      name="Saleor Slack"
-      author="By Saleor Commerce"
-      rightColumnContent={
-        <div className={styles.buttonsGrid}>
-          <Button
-            variant="secondary"
-            startIcon={<GitHub />}
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/saleor-app-slack");
-            }}
-          >
-            Repository
-          </Button>
-          <Button
-            startIcon={<OfflineBoltOutlined />}
-            variant="secondary"
-            onClick={() => {
-              openInNewTab("https://github.com/saleor/apps/discussions");
-            }}
-          >
-            Request a feature
-          </Button>
-        </div>
-      }
-    />
-  );
-};

apps/slack/src/pages/configuration.tsx

@@ -18,7 +18,6 @@ import AccessWarning from "../components/AccessWarning/AccessWarning";
 import { ConfigurationError } from "../components/ConfigurationError/ConfigurationError";
 import useAppApi from "../hooks/useAppApi";
 import useDashboardNotifier from "../utils/useDashboardNotifier";
-import { SlackAppMainBar } from "../components/SlackAppMainBar/SlackAppMainBar";
 import { AppColumnsLayout } from "../components/AppColumnsLayout/AppColumnsLayout";
 
 interface ConfigurationField {
@@ -209,22 +208,19 @@ const ConfigurationWithAuth = withAuthorization({
 })(Configuration);
 
 ConfigurationWithAuth.getLayout = (page: ReactElement) => (
-  <div>
-    <SlackAppMainBar />
-    <AppColumnsLayout>
-      <div />
-      <Card>
-        <CardHeader title="Configuration" />
-        <CardContent>{page}</CardContent>
-      </Card>
-      <Card style={{ marginBottom: 40 }}>
-        <CardHeader title="Instructions" />
-        <CardContent>
-          <Instructions />
-        </CardContent>
-      </Card>
-    </AppColumnsLayout>
-  </div>
+  <AppColumnsLayout>
+    <div />
+    <Card>
+      <CardHeader title="Configuration" />
+      <CardContent>{page}</CardContent>
+    </Card>
+    <Card style={{ marginBottom: 40 }}>
+      <CardHeader title="Instructions" />
+      <CardContent>
+        <Instructions />
+      </CardContent>
+    </Card>
+  </AppColumnsLayout>
 );
 
 export default ConfigurationWithAuth;

packages/shared/index.ts

@@ -1,5 +1,3 @@
 export * from "./src/is-in-iframe";
-export * from "./src/title-bar/title-bar";
-export * from "./src/app-icon/app-icon";
 export * from "./src/macaw-theme-provider/macaw-theme-provider";
 export * from "./src/no-ssr-wrapper";

packages/shared/src/app-icon/app-icon.tsx

@@ -1,40 +0,0 @@
-import { Typography } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { HTMLProps, ReactNode } from "react";
-import clsx from "clsx";
-
-const useStyles = makeStyles({
-  appIconContainer: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "50%",
-    color: "#fff",
-    width: 50,
-    height: 50,
-  },
-});
-
-type Props = HTMLProps<HTMLDivElement> & {
-  theme: string;
-  text?: string;
-  icon?: ReactNode;
-};
-
-export function AppIcon({ className, children, text, icon, theme, ...props }: Props) {
-  const styles = useStyles();
-
-  return (
-    <div
-      className={clsx(styles.appIconContainer, className)}
-      style={{
-        background: theme,
-      }}
-      {...props}
-    >
-      {text && <Typography variant="h2">{text}</Typography>}
-      {icon && icon}
-    </div>
-  );
-}

packages/shared/src/title-bar/title-bar.module.css

@@ -1,52 +0,0 @@
-.container {
-  --title-bar-height: 96px; /* TODO use design token */
-
-  position: relative;
-  height: var(--title-bar-height);
-}
-
-.root {
-  z-index: 300;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: var(--title-bar-height);
-  padding: 0 32px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  /* Override MUI. Remove with the new Macaw */
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-  border-radius: 0;
-}
-
-.leftColumn {
-  margin-right: auto;
-}
-
-.rightColumn {
-}
-
-.iconColumn {
-  margin-right: 24px;
-}
-
-.appName {
-  font-size: 24px;
-  margin: 0;
-}
-
-.appAuthor {
-  font-size: 12px;
-  text-transform: uppercase;
-  color: rgba(0, 0, 0, 0.4); /* TODO use design token */
-  font-weight: 500;
-  margin: 0;
-}
-
-.bottomMargin {
-  margin-bottom: 32px;
-}

packages/shared/src/title-bar/title-bar.tsx

@@ -1,44 +0,0 @@
-import { Paper, PaperProps } from "@material-ui/core";
-import styles from "./title-bar.module.css";
-import clsx from "clsx";
-import { ReactNode } from "react";
-
-const height = 96;
-
-type Props = {
-  name: string;
-  author: string;
-  rightColumnContent?: ReactNode;
-  icon?: ReactNode;
-  bottomMargin?: boolean;
-} & PaperProps;
-
-export function TitleBar({
-  name,
-  author,
-  rightColumnContent,
-  className,
-  icon,
-  bottomMargin,
-}: Props) {
-  return (
-    <div className={styles.container}>
-      <Paper
-        square
-        elevation={0}
-        className={clsx(styles.root, className, {
-          [styles.bottomMargin]: bottomMargin,
-        })}
-      >
-        {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>
-    </div>
-  );
-}
-
-TitleBar.height = height;