From ab56fceaae3d6cbfe3fef2f2f5bbe044d4cda684 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 25 May 2021 15:25:56 +0200
Subject: [PATCH] fix double page component issue in email section

---
 .../builder/portal/manage/_layout.svelte      |   8 +-
 .../portal/manage/email/[template].svelte     | 124 +++++++++---------
 .../builder/portal/manage/email/index.svelte  | 122 +++++++++--------
 3 files changed, 127 insertions(+), 127 deletions(-)
diff --git a/packages/builder/src/pages/builder/portal/manage/_layout.svelte b/packages/builder/src/pages/builder/portal/manage/_layout.svelte
index bb09efb6f2..98ae140b25 100644
--- a/packages/builder/src/pages/builder/portal/manage/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/_layout.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Page } from "@budibase/bbui"
   import { auth } from "stores/portal"
-  import { redirect } from "@roxi/routify"
+  import { page, redirect } from "@roxi/routify"
 
   // Only admins allowed here
   $: {
@@ -9,8 +9,12 @@
       $redirect("../")
     }
   }
+
+  $: console.log($page)
 </script>
 
 {#if $auth.isAdmin}
-  <slot />
+  <Page wide={$page.path.includes("email/:template")}>
+    <slot />
+  </Page>
 {/if}
diff --git a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
index 182201d2ba..d1001b2d76 100644
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@@ -69,71 +69,69 @@
   }
 </script>
 
-<Page wide>
-  <Layout gap="XS" noPadding>
-    <div class="back">
-      <ActionButton
-        on:click={() => $goto("./")}
-        quiet
-        size="S"
-        icon="BackAndroid"
-      >
-        Back to email settings
-      </ActionButton>
-    </div>
-    <header>
-      <Heading>
-        Email Template: {template}
-      </Heading>
-      <Button cta on:click={saveTemplate}>Save</Button>
-    </header>
-    <Body
-      >Change the email template here. Add dynamic content by using the bindings
-      menu on the right.</Body
+<Layout gap="XS" noPadding>
+  <div class="back">
+    <ActionButton
+      on:click={() => $goto("./")}
+      quiet
+      size="S"
+      icon="BackAndroid"
     >
-  </Layout>
-  <Tabs selected="Edit" on:select={fixMountBug}>
-    <Tab title="Edit">
-      <div class="template-editor">
-        <Editor
-          editorHeight={800}
-          bind:this={htmlEditor}
-          mode="handlebars"
-          on:change={e => {
-            selectedTemplate.contents = e.detail.value
-          }}
-          value={selectedTemplate?.contents}
-        />
-        <div class="bindings-editor">
-          <Detail size="L">Bindings</Detail>
-          {#if mounted}
-            <Tabs selected="Template">
-              <Tab title="Template">
-                <TemplateBindings
-                  title="Template Bindings"
-                  bindings={templateBindings}
-                  onBindingClick={setTemplateBinding}
-                />
-              </Tab>
-              <Tab title="Common">
-                <TemplateBindings
-                  title="Common Bindings"
-                  bindings={$email?.definitions?.bindings?.common}
-                  onBindingClick={setTemplateBinding}
-                />
-              </Tab>
-            </Tabs>
-          {/if}
-        </div>
+      Back to email settings
+    </ActionButton>
+  </div>
+  <header>
+    <Heading>
+      Email Template: {template}
+    </Heading>
+    <Button cta on:click={saveTemplate}>Save</Button>
+  </header>
+  <Body
+    >Change the email template here. Add dynamic content by using the bindings
+    menu on the right.</Body
+  >
+</Layout>
+<Tabs selected="Edit" on:select={fixMountBug}>
+  <Tab title="Edit">
+    <div class="template-editor">
+      <Editor
+        editorHeight={800}
+        bind:this={htmlEditor}
+        mode="handlebars"
+        on:change={e => {
+          selectedTemplate.contents = e.detail.value
+        }}
+        value={selectedTemplate?.contents}
+      />
+      <div class="bindings-editor">
+        <Detail size="L">Bindings</Detail>
+        {#if mounted}
+          <Tabs selected="Template">
+            <Tab title="Template">
+              <TemplateBindings
+                title="Template Bindings"
+                bindings={templateBindings}
+                onBindingClick={setTemplateBinding}
+              />
+            </Tab>
+            <Tab title="Common">
+              <TemplateBindings
+                title="Common Bindings"
+                bindings={$email?.definitions?.bindings?.common}
+                onBindingClick={setTemplateBinding}
+              />
+            </Tab>
+          </Tabs>
+        {/if}
       </div>
-    </Tab>
-    <Tab title="Preview">
-      <div class="preview">
-        <iframe srcdoc={previewContent} />
-      </div>
-    </Tab>
-  </Tabs>
-</Page>
+    </div>
+  </Tab>
+  <Tab title="Preview">
+    <div class="preview">
+      <iframe srcdoc={previewContent} />
+    </div>
+  </Tab>
+</Tabs>
 
 <style>
   .template-editor {
diff --git a/packages/builder/src/pages/builder/portal/manage/email/index.svelte b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
index 0e2e2e98fd..44442767a8 100644
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@@ -76,71 +76,69 @@
   fetchSmtp()
 </script>
 
-<Page>
-  <Layout>
-    <Layout noPadding gap="XS">
-      <Heading size="M">Email</Heading>
-      <Body>
-        Sending email is not required, but highly recommended for processes such
-        as password recovery. To setup automated auth emails, simply add the
-        values below and click activate.
+<Layout>
+  <Layout noPadding gap="XS">
+    <Heading size="M">Email</Heading>
+    <Body>
+      Sending email is not required, but highly recommended for processes such
+      as password recovery. To setup automated auth emails, simply add the
+      values below and click activate.
+    </Body>
+  </Layout>
+  <Divider />
+  {#if smtpConfig}
+    <Layout gap="XS" noPadding>
+      <Heading size="S">SMTP</Heading>
+      <Body size="S">
+        To allow your app to benefit from automated auth emails, add your SMTP
+        details below.
       </Body>
     </Layout>
-    <Divider />
-    {#if smtpConfig}
-      <Layout gap="XS" noPadding>
-        <Heading size="S">SMTP</Heading>
-        <Body size="S">
-          To allow your app to benefit from automated auth emails, add your SMTP
-          details below.
-        </Body>
-      </Layout>
-      <Layout gap="XS" noPadding>
-        <div class="form-row">
-          <Label size="L">Host</Label>
-          <Input bind:value={smtpConfig.config.host} />
-        </div>
-        <div class="form-row">
-          <Label size="L">Port</Label>
-          <Input type="number" bind:value={smtpConfig.config.port} />
-        </div>
-        <div class="form-row">
-          <Label size="L">User</Label>
-          <Input bind:value={smtpConfig.config.auth.user} />
-        </div>
-        <div class="form-row">
-          <Label size="L">Password</Label>
-          <Input type="password" bind:value={smtpConfig.config.auth.pass} />
-        </div>
-        <div class="form-row">
-          <Label size="L">From email address</Label>
-          <Input type="email" bind:value={smtpConfig.config.from} />
-        </div>
-      </Layout>
-      <div>
-        <Button cta on:click={saveSmtp}>Save</Button>
+    <Layout gap="XS" noPadding>
+      <div class="form-row">
+        <Label size="L">Host</Label>
+        <Input bind:value={smtpConfig.config.host} />
       </div>
-      <Divider />
-      <Layout gap="XS" noPadding>
-        <Heading size="S">Templates</Heading>
-        <Body size="S">
-          Budibase comes out of the box with ready-made email templates to help
-          with user onboarding. Please refrain from changing the links.
-        </Body>
-      </Layout>
-      <Table
-        {customRenderers}
-        data={$email.templates}
-        schema={templateSchema}
-        {loading}
-        on:click={({ detail }) => $goto(`./${detail.purpose}`)}
-        allowEditRows={false}
-        allowSelectRows={false}
-        allowEditColumns={false}
-      />
-    {/if}
-  </Layout>
-</Page>
+      <div class="form-row">
+        <Label size="L">Port</Label>
+        <Input type="number" bind:value={smtpConfig.config.port} />
+      </div>
+      <div class="form-row">
+        <Label size="L">User</Label>
+        <Input bind:value={smtpConfig.config.auth.user} />
+      </div>
+      <div class="form-row">
+        <Label size="L">Password</Label>
+        <Input type="password" bind:value={smtpConfig.config.auth.pass} />
+      </div>
+      <div class="form-row">
+        <Label size="L">From email address</Label>
+        <Input type="email" bind:value={smtpConfig.config.from} />
+      </div>
+    </Layout>
+    <div>
+      <Button cta on:click={saveSmtp}>Save</Button>
+    </div>
+    <Divider />
+    <Layout gap="XS" noPadding>
+      <Heading size="S">Templates</Heading>
+      <Body size="S">
+        Budibase comes out of the box with ready-made email templates to help
+        with user onboarding. Please refrain from changing the links.
+      </Body>
+    </Layout>
+    <Table
+      {customRenderers}
+      data={$email.templates}
+      schema={templateSchema}
+      {loading}
+      on:click={({ detail }) => $goto(`./${detail.purpose}`)}
+      allowEditRows={false}
+      allowSelectRows={false}
+      allowEditColumns={false}
+    />
+  {/if}
+</Layout>
 
 <style>
   .form-row {
