From 3b694d16bcdba59a097ebbfe810931332dbcd1ad Mon Sep 17 00:00:00 2001
From: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
Date: Wed, 15 Mar 2023 09:31:07 +0100
Subject: [PATCH] Improve styles and layout of the emails app (#287)

* Use whole width of the screen

* Make template editor responsive

* Use whole screen in configuration view
---
 .changeset/eight-eagles-sin.md                |   5 +
 .../ui/mjml-configuration-form.tsx            |  13 +-
 .../ui/mjml-configuration-tab.tsx             |   1 +
 .../ui/mjml-event-configuration-form.tsx      | 213 +++++++++---------
 .../src/modules/ui/app-columns-layout.tsx     |   8 +-
 .../src/modules/ui/code-editor.tsx            |   3 +-
 .../ui/configuration-page-base-layout.tsx     |  15 +-
 7 files changed, 127 insertions(+), 131 deletions(-)
 create mode 100644 .changeset/eight-eagles-sin.md

diff --git a/.changeset/eight-eagles-sin.md b/.changeset/eight-eagles-sin.md
new file mode 100644
index 0000000..80f7619
--- /dev/null
+++ b/.changeset/eight-eagles-sin.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Improve styles and layout of the emails app configuration views. Make event template editing view responsive.
diff --git a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-form.tsx b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-form.tsx
index 3211b30..4cc484b 100644
--- a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-form.tsx
+++ b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-form.tsx
@@ -21,7 +21,6 @@ const useStyles = makeStyles((theme) => ({
   sectionHeader: {
     marginTop: 20,
   },
-  form: {},
 }));
 
 type Props = {
@@ -35,12 +34,11 @@ export const MjmlConfigurationForm = (props: Props) => {
   const router = useRouter();
   const { appBridge } = useAppBridge();
 
-  const { handleSubmit, control, setValue, getValues, reset, setError } =
-    useForm<MjmlConfiguration>({
-      defaultValues: props.initialData,
-    });
+  const { handleSubmit, control, reset, setError } = useForm<MjmlConfiguration>({
+    defaultValues: props.initialData,
+  });
 
-  const { mutate: createOrUpdateConfiguration, error: createOrUpdateError } =
+  const { mutate: createOrUpdateConfiguration } =
     trpcClient.mjmlConfiguration.updateOrCreateConfiguration.useMutation({
       onSuccess(data, variables) {
         router.replace(mjmlUrls.configuration(data.id));
@@ -97,7 +95,6 @@ export const MjmlConfigurationForm = (props: Props) => {
           ...data,
         });
       })}
-      className={styles.form}
     >
       {isNewConfiguration ? (
         <Typography variant="h2" paragraph>
@@ -268,8 +265,6 @@ export const MjmlConfigurationForm = (props: Props) => {
       <Button type="submit" fullWidth variant="primary">
         Save configuration
       </Button>
-
-      {createOrUpdateError && <span>{createOrUpdateError.message}</span>}
     </form>
   );
 };
diff --git a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-tab.tsx b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-tab.tsx
index 33695c9..f8a1c82 100644
--- a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-tab.tsx
+++ b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-configuration-tab.tsx
@@ -25,6 +25,7 @@ const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
       gap: 20,
+      maxWidth: 600,
     },
   };
 });
diff --git a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-event-configuration-form.tsx b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-event-configuration-form.tsx
index 42698e2..5289f3a 100644
--- a/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-event-configuration-form.tsx
+++ b/apps/emails-and-messages/src/modules/mjml/configuration/ui/mjml-event-configuration-form.tsx
@@ -1,5 +1,5 @@
 import { Controller, useForm } from "react-hook-form";
-import { CircularProgress, TextField, TextFieldProps, Typography } from "@material-ui/core";
+import { CircularProgress, Grid, TextField, TextFieldProps, Typography } from "@material-ui/core";
 import {
   BackSmallIcon,
   Button,
@@ -26,13 +26,15 @@ import { examplePayloads } from "../../../event-handlers/default-payloads";
 const PREVIEW_DEBOUNCE_DELAY = 500;
 
 const useStyles = makeStyles((theme) => ({
+  viewContainer: {
+    padding: theme.spacing(2),
+  },
   header: {
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
-    gap: theme.spacing(1),
-    padding: theme.spacing(3),
-    maxWidth: 1180,
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(2),
     margin: "0 auto",
   },
   previewHeader: {
@@ -40,7 +42,8 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "space-between",
     alignItems: "center",
     gap: theme.spacing(1),
-    marginBottom: theme.spacing(3),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
 
   field: {
@@ -53,15 +56,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(3),
   },
   form: {
-    padding: theme.spacing(3),
-  },
-  formAndPreviewSection: {
-    display: "grid",
-    gridTemplateColumns: "2fr 1fr",
-    alignItems: "start",
-    gap: 32,
-    maxWidth: 1180,
-    margin: "0 auto",
+    maxWidth: 800,
   },
 }));
 
@@ -115,7 +110,7 @@ export const EventConfigurationForm = ({
       },
     });
 
-  const { mutate: updateEventConfiguration, isLoading: isFetchingUpdateEvent } =
+  const { mutate: updateEventConfiguration } =
     trpcClient.mjmlConfiguration.updateEventConfiguration.useMutation({
       onSuccess: (data) => {
         appBridge?.dispatch(
@@ -164,7 +159,7 @@ export const EventConfigurationForm = ({
   }, [debouncedPayload, debouncedSubject, debouncedTemplate, fetchTemplatePreview]);
 
   return (
-    <div>
+    <div className={styles.viewContainer}>
       <div className={styles.header}>
         <IconButton
           variant="secondary"
@@ -178,100 +173,104 @@ export const EventConfigurationForm = ({
           {messageEventTypesLabels[eventType]} event configuration
         </Typography>
       </div>
-      <div className={styles.formAndPreviewSection}>
-        <form
-          onSubmit={handleSubmit((data, event) => {
-            updateEventConfiguration({ ...data, configurationId });
-          })}
-          className={styles.form}
-        >
-          <Controller
-            control={control}
-            name="active"
-            render={({ field: { value, name, onChange } }) => (
-              <div className={styles.field}>
-                {/* TODO: fix types in the MacawUI */}
-                {/* @ts-ignore: MacawUI use wrong type for */}
-                <SwitchSelector key={name} className={styles.field}>
-                  {[
-                    { label: "Active", value: true },
-                    { label: "Disabled", value: false },
-                  ].map((button) => (
-                    // @ts-ignore: MacawUI use wrong type for SwitchSelectorButton
-                    <SwitchSelectorButton
-                      value={button.value.toString()}
-                      onClick={() => onChange(button.value)}
-                      activeTab={value.toString()}
-                      key={button.label}
-                    >
-                      {button.label}
-                    </SwitchSelectorButton>
-                  ))}
-                </SwitchSelector>
-              </div>
-            )}
-          />
+      <Grid container spacing={2}>
+        <Grid item xs={12} lg={7}>
+          <form
+            onSubmit={handleSubmit((data, event) => {
+              updateEventConfiguration({ ...data, configurationId });
+            })}
+            className={styles.form}
+          >
+            <Controller
+              control={control}
+              name="active"
+              render={({ field: { value, name, onChange } }) => (
+                <div className={styles.field}>
+                  {/* TODO: fix types in the MacawUI */}
+                  {/* @ts-ignore: MacawUI use wrong type for */}
+                  <SwitchSelector key={name} className={styles.field}>
+                    {[
+                      { label: "Active", value: true },
+                      { label: "Disabled", value: false },
+                    ].map((button) => (
+                      // @ts-ignore: MacawUI use wrong type for SwitchSelectorButton
+                      <SwitchSelectorButton
+                        value={button.value.toString()}
+                        onClick={() => onChange(button.value)}
+                        activeTab={value.toString()}
+                        key={button.label}
+                      >
+                        {button.label}
+                      </SwitchSelectorButton>
+                    ))}
+                  </SwitchSelector>
+                </div>
+              )}
+            />
 
-          <Controller
-            name="subject"
-            control={control}
-            render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <TextField
-                label="Email subject"
-                value={value}
-                onChange={onChange}
-                error={!!error}
-                helperText={
-                  !error
-                    ? "You can use variables like {{ order.number }} or {{ order.userEmail }}"
-                    : error.message
-                }
-                {...CommonFieldProps}
-              />
-            )}
-          />
+            <Controller
+              name="subject"
+              control={control}
+              render={({ field: { onChange, value }, fieldState: { error } }) => (
+                <TextField
+                  label="Email subject"
+                  value={value}
+                  onChange={onChange}
+                  error={!!error}
+                  helperText={
+                    !error
+                      ? "You can use variables like {{ order.number }} or {{ order.userEmail }}"
+                      : error.message
+                  }
+                  {...CommonFieldProps}
+                />
+              )}
+            />
 
-          <Controller
-            control={control}
-            name="template"
-            render={({ field: { value, onChange } }) => {
-              return (
-                <>
-                  <div className={styles.editor}>
-                    <CodeEditor
-                      initialTemplate={value}
-                      value={value}
-                      onChange={onChange}
-                      language="xml"
-                    />
-                  </div>
-                </>
-              );
-            }}
-          />
-          <Button type="submit" fullWidth variant="primary">
-            Save configuration
-          </Button>
-        </form>
-        <div>
-          <div className={styles.previewHeader}>
-            <Typography variant="h2">Preview</Typography>
-            {isFetchingTemplatePreview && <CircularProgress size="3rem" color="primary" />}
+            <Controller
+              control={control}
+              name="template"
+              render={({ field: { value, onChange } }) => {
+                return (
+                  <>
+                    <div className={styles.editor}>
+                      <CodeEditor
+                        initialTemplate={value}
+                        value={value}
+                        onChange={onChange}
+                        language="xml"
+                      />
+                    </div>
+                  </>
+                );
+              }}
+            />
+            <Button type="submit" fullWidth variant="primary">
+              Save configuration
+            </Button>
+          </form>
+        </Grid>
+        <Grid item xs={12} lg={5}>
+          <div>
+            <div className={styles.previewHeader}>
+              <Typography variant="h2">Preview</Typography>
+              {isFetchingTemplatePreview && <CircularProgress size="3rem" color="primary" />}
+            </div>
+            <Typography variant="h3" paragraph>
+              Subject: {lastValidRenderedSubject}
+            </Typography>
+            <div className={styles.preview}>
+              <MjmlPreview value={lastValidRenderedTemplate} />
+            </div>
+            <CodeEditor
+              initialTemplate={payload}
+              value={payload}
+              onChange={setPayload}
+              language="json"
+            />
           </div>
-          <Typography variant="h3" paragraph>
-            Subject: {lastValidRenderedSubject}
-          </Typography>
-          <div className={styles.preview}>
-            <MjmlPreview value={lastValidRenderedTemplate} />
-          </div>
-          <CodeEditor
-            initialTemplate={payload}
-            value={payload}
-            onChange={setPayload}
-            language="json"
-          />
-        </div>
-      </div>
+        </Grid>
+      </Grid>
     </div>
   );
 };
diff --git a/apps/emails-and-messages/src/modules/ui/app-columns-layout.tsx b/apps/emails-and-messages/src/modules/ui/app-columns-layout.tsx
index 0a08da5..0422a67 100644
--- a/apps/emails-and-messages/src/modules/ui/app-columns-layout.tsx
+++ b/apps/emails-and-messages/src/modules/ui/app-columns-layout.tsx
@@ -1,17 +1,15 @@
 import { makeStyles } from "@saleor/macaw-ui";
 import { PropsWithChildren } from "react";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "grid",
     gridTemplateColumns: "280px auto",
     alignItems: "start",
-    gap: 32,
-    maxWidth: 1180,
-    margin: "0 auto",
+    gap: theme.spacing(3),
     padding: "20px 0",
   },
-});
+}));
 
 type AppColumnsLayoutProps = PropsWithChildren<{}>;
 
diff --git a/apps/emails-and-messages/src/modules/ui/code-editor.tsx b/apps/emails-and-messages/src/modules/ui/code-editor.tsx
index c9a7c4d..d8d0947 100644
--- a/apps/emails-and-messages/src/modules/ui/code-editor.tsx
+++ b/apps/emails-and-messages/src/modules/ui/code-editor.tsx
@@ -29,8 +29,7 @@ export const CodeEditor = ({ initialTemplate, onChange, value, language }: Props
   return (
     <>
       <Editor
-        height="40vh"
-        width="100%"
+        height="600px"
         value={value}
         theme={themeType === "dark" ? "vs-dark" : "vs-light"}
         defaultLanguage={language}
diff --git a/apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx b/apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx
index cd2bdc3..2bca2fd 100644
--- a/apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx
+++ b/apps/emails-and-messages/src/modules/ui/configuration-page-base-layout.tsx
@@ -2,9 +2,12 @@ import React, { PropsWithChildren } from "react";
 import { makeStyles, PageTab, PageTabs } from "@saleor/macaw-ui";
 import { useRouter } from "next/router";
 
-const useStyles = makeStyles({
-  appContainer: { marginTop: 20 },
-});
+const useStyles = makeStyles((theme) => ({
+  appContainer: {
+    marginTop: theme.spacing(3),
+    marginLeft: theme.spacing(3),
+  },
+}));
 
 type Props = PropsWithChildren<{}>;
 
@@ -37,11 +40,7 @@ export const ConfigurationPageBaseLayout = ({ children }: Props) => {
   };
   return (
     <div className={styles.appContainer}>
-      <PageTabs
-        value={activePath}
-        onChange={navigateToTab}
-        style={{ maxWidth: 1180, margin: "0 auto" }}
-      >
+      <PageTabs value={activePath} onChange={navigateToTab}>
         {tabs.map((tab) => (
           <PageTab key={tab.key} value={tab.key} label={tab.label} disabled={tab.disabled} />
         ))}