From 2b27c0c463816b3d0fa4b1746d4be2434b7f7584 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 22 Jun 2023 10:47:39 +0200
Subject: [PATCH] Rewrtirren Slack to the new macaw

---
 .changeset/plenty-mayflies-enjoy.md           |  5 ++
 .../AccessWarning/AccessWarning.tsx           |  8 +--
 .../AppColumnsLayout/AppColumnsLayout.tsx     |  8 ++-
 apps/slack/src/pages/_app.tsx                 |  5 +-
 apps/slack/src/pages/configuration.tsx        | 51 +++++++++----------
 5 files changed, 46 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/plenty-mayflies-enjoy.md

diff --git a/.changeset/plenty-mayflies-enjoy.md b/.changeset/plenty-mayflies-enjoy.md
new file mode 100644
index 0000000..b40c7f5
--- /dev/null
+++ b/.changeset/plenty-mayflies-enjoy.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-slack": minor
+---
+
+Rewritten UI to use modern macaw UI, instead legacy one with Material UI. There are slight changes in typography and spacings, but no new changes were introduced.
diff --git a/apps/slack/src/components/AccessWarning/AccessWarning.tsx b/apps/slack/src/components/AccessWarning/AccessWarning.tsx
index df494a2..ae3dc24 100644
--- a/apps/slack/src/components/AccessWarning/AccessWarning.tsx
+++ b/apps/slack/src/components/AccessWarning/AccessWarning.tsx
@@ -20,9 +20,11 @@ const warnings: Record<WarningCause, string> = {
 
 export function AccessWarning({ cause = "unknown_cause" }: AccessWarningProps) {
   return (
-    <div suppressHydrationWarning>
-      <Text variant="heading">App can&apos;t be accessed outside of the Saleor Dashboard</Text>
-      <Text variant="heading" style={{ marginTop: "2rem" }}>
+    <div>
+      <Text as={"h2"} variant="heading">
+        App can&apos;t be accessed outside of the Saleor Dashboard
+      </Text>
+      <Text variant="body" style={{ marginTop: "2rem" }}>
         ❌ {warnings[cause]}
       </Text>
     </div>
diff --git a/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx b/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
index 6551eb8..381bea6 100644
--- a/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
+++ b/apps/slack/src/components/AppColumnsLayout/AppColumnsLayout.tsx
@@ -5,7 +5,13 @@ type Props = PropsWithChildren<{}>;
 
 export const AppColumnsLayout = ({ children }: Props) => {
   return (
-    <Box display={"grid"} __maxWidth={"1180px"} __gridTemplateColumns={"280px auto 280px"} gap={4}>
+    <Box
+      display={"grid"}
+      marginTop={8}
+      __maxWidth={"1180px"}
+      __gridTemplateColumns={"280px auto 280px"}
+      gap={8}
+    >
       {children}
     </Box>
   );
diff --git a/apps/slack/src/pages/_app.tsx b/apps/slack/src/pages/_app.tsx
index a50a676..e6b4da8 100644
--- a/apps/slack/src/pages/_app.tsx
+++ b/apps/slack/src/pages/_app.tsx
@@ -13,12 +13,15 @@ import { ThemeSynchronizer } from "../hooks/theme-synchronizer";
 export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
 
 function SaleorApp({ Component, pageProps }: AppProps) {
+  // @ts-ignore todo refactor
+  const getLayout = Component.getLayout ?? ((page) => page);
+
   return (
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <ThemeProvider>
           <ThemeSynchronizer />
-          <Component {...pageProps} />
+          {getLayout(<Component {...pageProps} />)}
         </ThemeProvider>
       </AppBridgeProvider>
     </NoSSRWrapper>
diff --git a/apps/slack/src/pages/configuration.tsx b/apps/slack/src/pages/configuration.tsx
index eb883b3..9ebc512 100644
--- a/apps/slack/src/pages/configuration.tsx
+++ b/apps/slack/src/pages/configuration.tsx
@@ -71,18 +71,22 @@ function Configuration() {
     <form onSubmit={handleSubmit}>
       {configuration!.map(({ key, value }) => (
         <div key={key}>
-          <Input label={key} name={key} onChange={onChange} value={value} />
+          <Input
+            label={key}
+            name={key}
+            onChange={onChange}
+            value={value}
+            helperText={
+              "This webhook will be called when new order is created and `order_created` event is triggered."
+            }
+          />
         </div>
       ))}
-      <p>
-        This webhook will be called when new order is created and `order_created` event is
-        triggered.
-      </p>
-      <div>
+      <Box marginTop={4}>
         <Button type="submit" variant="primary">
           Save
         </Button>
-      </div>
+      </Box>
     </form>
   );
 }
@@ -112,7 +116,7 @@ function Instructions() {
 
   return (
     <>
-      <Text>How to configure</Text>
+      <Text variant={"bodyStrong"}>How to configure</Text>
       <ul>
         <li>
           <a
@@ -122,28 +126,19 @@ function Instructions() {
             }}
             href={slackUrl.href}
           >
-            Install Slack application
+            <Text>Install Slack application</Text>
           </a>
         </li>
         <li>
-          Copy incoming Webhook URL from Slack app configuration and paste it below into
-          `WEBHOOK_URL` field
+          <Text>
+            Copy incoming Webhook URL from Slack app configuration and paste it below into
+            `WEBHOOK_URL` field
+          </Text>
         </li>
         <li>Save configuration</li>
       </ul>
-      <Text>Useful links</Text>
+      <Text variant={"bodyStrong"}>Useful links</Text>
       <ul>
-        <li>
-          <a
-            onClick={(e) => {
-              e.preventDefault();
-              openExternalUrl("https://github.com/saleor/saleor-app-slack");
-            }}
-            href="https://github.com/saleor/saleor-app-slack"
-          >
-            Visit repository & readme
-          </a>
-        </li>
         <li>
           <a
             onClick={(e) => {
@@ -152,7 +147,7 @@ function Instructions() {
             }}
             href="https://api.slack.com/messaging/webhooks"
           >
-            Read about Slack apps that use incoming webhooks
+            <Text>Read about Slack apps that use incoming webhooks</Text>
           </a>
         </li>
       </ul>
@@ -171,11 +166,15 @@ ConfigurationWithAuth.getLayout = (page: ReactElement) => (
   <AppColumnsLayout>
     <div />
     <Box>
-      <Text>Configuration</Text>
+      <Text as={"h2"} marginBottom={4} variant={"heading"}>
+        Configuration
+      </Text>
       <Box>{page}</Box>
     </Box>
     <Box marginBottom={4}>
-      <Text>Instructions</Text>
+      <Text as={"h2"} marginBottom={4} variant={"heading"}>
+        Instructions
+      </Text>
       <Box>
         <Instructions />
       </Box>