From a10fdf9a97de7d89540e57bc674e762a1f5cb359 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 10 Oct 2024 17:48:10 +0530
Subject: [PATCH] address comments.

---
 src/lib/components/backupDatabaseAlert.svelte |  2 +-
 src/lib/layout/containerHeader.svelte         |  4 +
 .../backups/createPolicy.svelte               | 87 +++++++++++++++----
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/backupDatabaseAlert.svelte b/src/lib/components/backupDatabaseAlert.svelte
index d6fa60365..dd1b30559 100644
--- a/src/lib/components/backupDatabaseAlert.svelte
+++ b/src/lib/components/backupDatabaseAlert.svelte
@@ -22,7 +22,7 @@
         ? 'Upgrade your plan to ensure your data stays safe and backed up'
         : 'Protect your data by quickly adding a backup policy'}
 
-    {@const ctaText = isFreePlan ? 'Upgrade plan' : 'Add backup'}
+    {@const ctaText = isFreePlan ? 'Upgrade plan' : 'Create policy'}
     {@const ctaURL = isFreePlan ? $upgradeURL : `${$page.url.pathname}/backups`}
 
     <HeaderAlert type="warning" title="Your database has no backup policy">
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 404e518fc..f5bdfac37 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -78,6 +78,10 @@
     onMount(() => {
         dispatch('data', { isButtonDisabled, limit, tier });
     });
+
+    // on free plan, if the only db is deleted,
+    // `create database` button needs to be enabled again.
+    $: dispatch('data', { isButtonDisabled, limit, tier });
 </script>
 
 <!-- Show only if on Cloud, alerts are enabled, and it isn't a project limited service -->
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte
index ab5e265a3..f8fb51aa5 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte
@@ -46,12 +46,15 @@
     });
 
     let policyInEdit = null;
+    let policyBeingEdited = null;
+
     let policyRetention = 30;
     let selectedTime = '00:00';
     let policyNameError: boolean;
     let policyFrequency = 'monthly';
     let monthlyBackupFrequency = 'end';
 
+    $: policyInputError = customRetention.number === 0;
     $: daysSelectionArray = [];
     $: backupPolicyName = `${capitalize(policyFrequency)} backup`;
 
@@ -270,12 +273,19 @@
                                                 on:click={() => {
                                                     policyInEdit = policy.id;
                                                     backupPolicyName = policy.label;
-                                                    policyRetention = policy.retained;
                                                     selectedTime = policy.selectedTime;
                                                     policyFrequency = policy.plainTextFrequency;
                                                     monthlyBackupFrequency =
                                                         policy.monthlyBackupFrequency;
                                                     daysSelectionArray = policy.weeklySelectedDays;
+                                                    policyRetention = !backupRetainingOptions.some(
+                                                        (option) => option.value === policy.retained
+                                                    )
+                                                        ? -1 // -1 is for custom policy
+                                                        : policy.retained;
+
+                                                    // re-add if edit is cancelled
+                                                    policyBeingEdited = policy;
 
                                                     // do not show in the list can cause confusion.
                                                     listOfCustomPolicies = [
@@ -388,22 +398,28 @@
                                         options={backupRetainingOptions} />
                                     <span class="u-flex u-flex-vertical u-gap-8">
                                         {#if customRetentionEnabled}
-                                            <div class="u-flex u-gap-8">
-                                                <div class="u-width-150">
-                                                    <InputNumber
-                                                        min={1}
-                                                        id="number"
-                                                        placeholder="11"
-                                                        max={customRetention.max}
-                                                        bind:value={customRetention.number} />
-                                                </div>
+                                            <div class="u-flex-vertical u-gap-2">
+                                                <div class="u-flex u-gap-8">
+                                                    <div class="u-width-150">
+                                                        <InputNumber
+                                                            min={1}
+                                                            id="number"
+                                                            placeholder="11"
+                                                            max={customRetention.max}
+                                                            bind:value={customRetention.number} />
+                                                    </div>
 
-                                                <InputSelect
-                                                    fullWidth
-                                                    id="retention"
-                                                    placeholder="Months"
-                                                    options={customRetainingOptions}
-                                                    bind:value={customRetention.value} />
+                                                    <InputSelect
+                                                        fullWidth
+                                                        id="retention"
+                                                        placeholder="Months"
+                                                        options={customRetainingOptions}
+                                                        bind:value={customRetention.value} />
+                                                </div>
+                                                {#if policyInputError}
+                                                    <Helper type="warning"
+                                                        >Value should be between 1 and {customRetention.max}</Helper>
+                                                {/if}
                                             </div>
                                         {/if}
                                         <span>
@@ -418,10 +434,17 @@
 
                                                 {@const description =
                                                     period === 'Custom'
-                                                        ? `${customRetention.number}  ${customRetention.label}`
+                                                        ? `${customRetention.number} ${
+                                                              customRetention.number === 1
+                                                                  ? customRetention.label.slice(
+                                                                        0,
+                                                                        -1
+                                                                    )
+                                                                  : customRetention.label
+                                                          }`
                                                         : period}
 
-                                                {#if (period === 'Custom' && customRetention.number !== null) || period !== 'Custom'}
+                                                {#if (period === 'Custom' && customRetention.number !== null && customRetention.number !== 0) || period !== 'Custom'}
                                                     Every backup created under this policy will be
                                                     retained for <b>
                                                         {description}
@@ -446,11 +469,19 @@
                                     {/if}
                                 </div>
 
-                                <div class="u-main-end u-flex u-gap-8">
+                                <div class="button-container u-main-end u-flex u-gap-8">
                                     <Button
                                         text
                                         on:click={() => {
+                                            policyInEdit = false;
                                             showCustomPolicy = false;
+
+                                            if (policyBeingEdited) {
+                                                listOfCustomPolicies = [
+                                                    ...listOfCustomPolicies,
+                                                    policyBeingEdited
+                                                ];
+                                            }
                                         }}
                                         >Cancel
                                     </Button>
@@ -463,6 +494,10 @@
                                                 return;
                                             }
 
+                                            if (policyInputError) {
+                                                return;
+                                            }
+
                                             policyNameError = false;
                                             handleSavePolicy();
                                         }}>
@@ -475,6 +510,7 @@
                 {:else}
                     <div class="custom-policy-wrapper u-padding-inline-4 u-width-full-line">
                         <button
+                            type="button"
                             class="custom-policy-text"
                             on:click={() => (showCustomPolicy = true)}
                             >Create custom policy
@@ -544,4 +580,17 @@
             display: none;
         }
     }
+
+    /** the modal, for some reason loses inner padding on smaller devices. */
+    @media (max-width: 409px) {
+        .modal {
+            --p-modal-padding: 0.95rem;
+        }
+    }
+
+    @media (max-width: 315px) {
+        .modal {
+            --p-modal-padding: 0.9rem;
+        }
+    }
 </style>