cms v1 - notice about deprecation (#787)

.changeset/eleven-students-cheer.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-cms": minor
+---
+
+Added warning bar that informs that app is no longer maintained

apps/cms/README.md

@@ -1,7 +1,13 @@
+# Deprecated
+
+This is v1 version of the CMS app. It's no longer maintained and will be removed.
+
+Please check [v2](../cms-v2/)
+
 ![CMS](https://user-images.githubusercontent.com/249912/71523206-4e45f800-28c8-11ea-84ba-345a9bfc998a.png)
 
 <div align="center">
-  <h1>CMS</h1>
+  <h1>CMS v1</h1>
 </div>
 
 # Overview

apps/cms/src/modules/ui/error-no-longer-maintained.tsx

@@ -0,0 +1,18 @@
+export const ErrorNoLongerMaintained = () => (
+  <div
+    style={{
+      padding: "20px",
+      backgroundColor: "#ff000055",
+      marginBottom: "40px",
+    }}
+  >
+    <h1
+      style={{
+        margin: "10px auto",
+      }}
+    >
+      Warning
+    </h1>
+    <p>The app is no longer maintained. Please install CMS V2 app from the Saleor App Store</p>
+  </div>
+);

apps/cms/src/pages/home.tsx

@@ -6,6 +6,7 @@ import { ReactElement } from "react";
 import { AppTabNavButton } from "../modules/ui/app-tab-nav-button";
 import { makeStyles } from "@saleor/macaw-ui";
 import { Box, Typography } from "@material-ui/core";
+import { ErrorNoLongerMaintained } from "../modules/ui/error-no-longer-maintained";
 
 const useStyles = makeStyles({
   section: {
@@ -70,6 +71,7 @@ const HomePage: NextPageWithLayout = () => {
 HomePage.getLayout = function getLayout(page: ReactElement) {
   return (
     <main>
+      <ErrorNoLongerMaintained />
       <AppLayout>{page}</AppLayout>
     </main>
   );

apps/cms/src/pages/index.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useIsMounted } from "usehooks-ts";
 import { isInIframe } from "@saleor/apps-shared";
+import { ErrorNoLongerMaintained } from "../modules/ui/error-no-longer-maintained";
 
 /**
  * This is page publicly accessible from your app.
@@ -26,6 +27,7 @@ const IndexPage: NextPage = () => {
 
   return (
     <div>
+      <ErrorNoLongerMaintained />
       <h1>Saleor CMS Hub</h1>
       <p>This is Saleor App that allows to use external cms providers to sync products data.</p>
       <p>Install the app in your Saleor instance and open it in Dashboard.</p>