feat(frontend): setting to force push when time discrepancy occurs (#…

…7931)
rotki · May 14, 2024 · 644c0d5 · 644c0d5
1 parent 7f4a194
commit 644c0d5
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 30 deletions.
diff --git a/docs/changelog.rst b/docs/changelog.rst
@@ -2,8 +2,10 @@
 Changelog
 =========
 
+* :feature:`7570` Users can choose whether to automatically force-push when a time discrepancy warning occurs during automatic database sync.
+
 * :release:`1.33.0 <2024-05-08>`
-* :feature:`7798` rotki now accurately decodes transactions on the Kyber swap aggregator across all supported chains. 
+* :feature:`7798` rotki now accurately decodes transactions on the Kyber swap aggregator across all supported chains.
 * :feature:`-` Users will now be able to delete transactions and the associated events in history events.
 * :feature:`7074` rotki provides a calendar view where users can add and track events related to their activities. Users can also set reminders to perform actions associated with these events.
 * :feature:`-` Claiming the harvest finance hack compensation grain airdrop will be properly shown as airdrop claim in the history events.

diff --git a/frontend/app/src/components/settings/general/AskUserUponSizeDiscrepancySetting.vue b/frontend/app/src/components/settings/general/AskUserUponSizeDiscrepancySetting.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    dialog?: boolean;
+    confirm?: boolean;
+  }>(),
+  { dialog: false, confirm: false },
+);
+
+const value = ref(false);
+const { askUserUponSizeDiscrepancy } = storeToRefs(useGeneralSettingsStore());
+
+watchImmediate(askUserUponSizeDiscrepancy, (askUser) => {
+  set(value, !get(askUser));
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <SettingsOption
+    #default="{ error, success, updateImmediate }"
+    setting="askUserUponSizeDiscrepancy"
+  >
+    <RuiCheckbox
+      v-if="confirm"
+      :value="value"
+      :label="t('sync_indicator.setting.ask_user_upon_size_discrepancy.confirm_label')"
+      color="primary"
+      :success-messages="success"
+      :error-messages="error"
+      @input="updateImmediate(!$event)"
+    />
+    <RuiSwitch
+      v-else
+      :value="value"
+      :size="dialog ? 'sm' : undefined"
+      :class="{ '[&_span]:text-sm [&_span]:mt-0.5': dialog }"
+      :label="t('sync_indicator.setting.ask_user_upon_size_discrepancy.label')"
+      color="primary"
+      :success-messages="success"
+      :error-messages="error"
+      @input="updateImmediate(!$event)"
+    />
+  </SettingsOption>
+</template>
diff --git a/frontend/app/src/components/status/sync/SyncIndicator.vue b/frontend/app/src/components/status/sync/SyncIndicator.vue
@@ -84,6 +84,8 @@ watch(isSyncing, (current, prev) => {
   if (current !== prev && !current)
     cancelSync();
 });
+
+const syncSettingMenuOpen: Ref<boolean> = ref(false);
 </script>
 
 <template>
@@ -93,6 +95,7 @@ watch(isSyncing, (current, prev) => {
         id="balances-saved-dropdown"
         v-model="visible"
         menu-class="z-[215]"
+        :persistent="syncSettingMenuOpen"
       >
         <template #activator="{ on }">
           <MenuTooltipButton
@@ -129,47 +132,56 @@ watch(isSyncing, (current, prev) => {
             </RuiBadge>
           </MenuTooltipButton>
         </template>
-        <div class="p-4 md:w-[250px] w-full">
-          <div class="font-medium">
-            {{ t('sync_indicator.last_data_upload') }}
-          </div>
-          <div class="py-2 text-rui-text-secondary">
-            <DateDisplay
-              v-if="lastDataUpload"
-              :timestamp="lastDataUpload"
-            />
-            <span v-else>
-              {{ t('common.never') }}
-            </span>
+        <div class="p-4 w-[20rem] max-w-[calc(100vw-1rem)] flex flex-col gap-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="font-medium">
+                {{ t('sync_indicator.last_data_upload') }}
+              </div>
+              <div class="text-rui-text-secondary">
+                <DateDisplay
+                  v-if="lastDataUpload"
+                  :timestamp="lastDataUpload"
+                />
+                <span v-else>
+                  {{ t('common.never') }}
+                </span>
+              </div>
+            </div>
+            <SyncSettings v-model="syncSettingMenuOpen" />
           </div>
-          <div
+          <RuiAlert
             v-if="uploadStatus"
-            class="flex flex-col my-2 p-2 gap-2 border border-rui-warning rounded-[0.25rem]"
+            type="warning"
+            outlined
+            class="border border-rui-warning"
           >
-            <div class="flex gap-1">
-              <div class="font-medium leading-5">
-                {{ t('sync_indicator.db_upload_result.title') }}
+            <div class="flex items-start justify-between gap-1">
+              <div>
+                <div class="font-medium leading-5">
+                  {{ t('sync_indicator.db_upload_result.title') }}
+                </div>
+                <div class="text-rui-text-secondary text-sm">
+                  <i18n path="sync_indicator.db_upload_result.message">
+                    <template #reason>
+                      <b class="break-words">
+                        {{ uploadStatus.message }}
+                      </b>
+                    </template>
+                  </i18n>
+                </div>
               </div>
               <RuiButton
                 variant="text"
                 icon
                 size="sm"
+                class="-mt-1 -mr-1"
                 @click="clearUploadStatus()"
               >
                 <RuiIcon name="close-line" />
               </RuiButton>
             </div>
-
-            <div class="text-rui-text-secondary text-sm">
-              <i18n path="sync_indicator.db_upload_result.message">
-                <template #reason>
-                  <b class="break-all">
-                    {{ uploadStatus.message }}
-                  </b>
-                </template>
-              </i18n>
-            </div>
-          </div>
+          </RuiAlert>
           <SyncButtons
             :pending="pending"
             @action="showConfirmation($event)"
@@ -225,10 +237,17 @@ watch(isSyncing, (current, prev) => {
       />
       <RuiCheckbox
         v-model="confirmChecked"
+        class="mt-2"
         color="primary"
+        hide-details
       >
         {{ t('sync_indicator.upload_confirmation.confirm_check') }}
       </RuiCheckbox>
+
+      <AskUserUponSizeDiscrepancySetting
+        v-if="uploadStatus"
+        confirm
+      />
     </ConfirmDialog>
   </Fragment>
 </template>
diff --git a/frontend/app/src/components/status/sync/SyncSettings.vue b/frontend/app/src/components/status/sync/SyncSettings.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useBreakpoint } from '@rotki/ui-library-compat';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'input', value: boolean): void;
+}>();
+
+const vModel = useSimpleVModel(props, emit);
+const { t } = useI18n();
+const { isMdAndUp } = useBreakpoint();
+</script>
+
+<template>
+  <RuiMenu
+    v-model="vModel"
+    :popper="{ placement: isMdAndUp ? 'right-start' : 'bottom-end' }"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ on }">
+      <RuiButton
+        variant="text"
+        icon
+        size="sm"
+        class="!p-2"
+        v-on="on"
+      >
+        <RuiIcon
+          size="20"
+          name="settings-4-line"
+        />
+      </RuiButton>
+    </template>
+    <div class="p-4 w-[18rem] max-w-[calc(100vw-1rem)]">
+      <div>
+        <div class="text-body-1 font-medium mb-3">
+          {{ t('sync_indicator.setting.title') }}
+        </div>
+        <AskUserUponSizeDiscrepancySetting dialog />
+      </div>
+
+      <div class="flex justify-end">
+        <RuiButton
+          color="primary"
+          variant="outlined"
+          @click="vModel = false"
+        >
+          {{ t('common.actions.close') }}
+        </RuiButton>
+      </div>
+    </div>
+  </RuiMenu>
+</template>
diff --git a/frontend/app/src/data/factories.ts b/frontend/app/src/data/factories.ts
@@ -34,6 +34,7 @@ export function defaultGeneralSettings(mainCurrency: Currency): GeneralSettings
     oraclePenaltyDuration: Defaults.DEFAULT_ORACLE_PENALTY_DURATION,
     autoDeleteCalendarEntries: true,
     autoCreateCalendarReminders: true,
+    askUserUponSizeDiscrepancy: true,
   };
 }
 

diff --git a/frontend/app/src/locales/en.json b/frontend/app/src/locales/en.json
@@ -4224,6 +4224,13 @@
     "db_upload_result": {
       "message": "We could not complete the upload because {reason}",
       "title": "Database sync attempt unsuccessful"
+    },
+    "setting": {
+      "title": "Sync setting",
+      "ask_user_upon_size_discrepancy": {
+        "label": "Force-push when a size discrepancy occurs during automatic database sync.",
+        "confirm_label": "Force-push whenever a size discrepancy occurs."
+      }
     }
   },
   "table_filter": {

diff --git a/frontend/app/src/pages/settings/general/index.vue b/frontend/app/src/pages/settings/general/index.vue
@@ -21,6 +21,7 @@ const { t } = useI18n();
         <BtcDerivationGapLimitSetting />
         <TreatEthAsEth2Setting />
         <EvmChainsToIgnoreSettings />
+        <AskUserUponSizeDiscrepancySetting />
       </div>
     </SettingCategory>
 

diff --git a/frontend/app/src/store/settings/general.ts b/frontend/app/src/store/settings/general.ts
@@ -87,6 +87,8 @@ export const useGeneralSettingsStore = defineStore('settings/general', () => {
 
   const autoCreateCalendarReminders: ComputedRef<boolean> = computed(() => settings.autoCreateCalendarReminders);
 
+  const askUserUponSizeDiscrepancy: ComputedRef<boolean> = computed(() => settings.askUserUponSizeDiscrepancy);
+
   const currencySymbol: ComputedRef<SupportedCurrency> = computed(() => {
     const currency = get(mainCurrency);
     return currency.tickerSymbol;
@@ -127,6 +129,7 @@ export const useGeneralSettingsStore = defineStore('settings/general', () => {
     oraclePenaltyDuration,
     autoDeleteCalendarEntries,
     autoCreateCalendarReminders,
+    askUserUponSizeDiscrepancy,
     // return settings on development for state persistence
     ...(checkIfDevelopment() ? { settings } : {}),
     update,

diff --git a/frontend/app/src/types/user.ts b/frontend/app/src/types/user.ts
@@ -59,6 +59,7 @@ const GeneralSettings = z.object({
   oraclePenaltyDuration: z.number().min(1),
   autoDeleteCalendarEntries: z.boolean(),
   autoCreateCalendarReminders: z.boolean(),
+  askUserUponSizeDiscrepancy: z.boolean(),
 });
 
 export type GeneralSettings = z.infer<typeof GeneralSettings>;
@@ -164,6 +165,7 @@ function getGeneralSettings(settings: UserSettings): GeneralSettings {
     oraclePenaltyDuration: settings.oraclePenaltyDuration,
     autoDeleteCalendarEntries: settings.autoDeleteCalendarEntries,
     autoCreateCalendarReminders: settings.autoCreateCalendarReminders,
+    askUserUponSizeDiscrepancy: settings.askUserUponSizeDiscrepancy,
   };
 }
 

diff --git a/frontend/app/tests/unit/fixtures/settings.json b/frontend/app/tests/unit/fixtures/settings.json
@@ -62,7 +62,8 @@
     "last_balance_save": 0,
     "last_data_upload_ts": 0,
     "autoDeleteCalendarEntries": true,
-    "autoCreateCalendarReminders": true
+    "autoCreateCalendarReminders": true,
+    "askUserUponSizeDiscrepancy": true
   },
   "message": ""
 }