refactor: new i18n string for data sharing component

packages/hoppscotch-sh-admin/locales/en.json

@@ -16,6 +16,14 @@
     },
     "confirm_changes": "Hoppscotch server must restart to reflect the new changes. Confirm changes made to the server configurations?",
     "input_empty": "Please fill all the fields before updating the configurations",
+    "dataSharing": {
+      "title": "Data Sharing",
+      "description": "Help improve Hoppscotch by sharing anonymous data",
+      "enable": "Enable Data Sharing",
+      "see_shared": "See what is shared",
+      "toggle_description": "Share anonymous data",
+      "update_failure": "Failed to update data sharing configurations!!"
+    },
     "load_error": "Unable to load server configurations",
     "mail_configs": {
       "description": " Configure the smtp configurations",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -17,13 +17,22 @@ declare module '@vue/runtime-core' {
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
     SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
     SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
     SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']

packages/hoppscotch-sh-admin/src/components/settings/DataSharing.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="md:grid md:grid-cols-3 md:gap-4 border-divider border-b py-8">
     <div class="px-8 md:col-span-1">
-      <h3 class="heading">Data Sharing</h3>
+      <h3 class="heading">{{ t('configs.dataSharing.title') }}</h3>
       <p class="my-1 text-secondaryLight">
-        Share anonymous data usage to improve Hoppscotch
+        {{ t('configs.dataSharing.description') }}
       </p>
     </div>
 
     <div class="mt-5 mx-8 md:col-span-2">
       <section v-if="dataSharingConfigs">
-        <h4 class="font-semibold text-secondaryDark">Data Sharing</h4>
+        <h4 class="font-semibold text-secondaryDark">
+          {{ t('configs.dataSharing.title') }}
+        </h4>
 
         <div class="space-y-4 py-4">
           <div class="flex items-center">
@@ -17,24 +19,16 @@
               :on="dataSharingConfigs.enabled"
               @change="dataSharingConfigs.enabled = !dataSharingConfigs.enabled"
             >
-              Share data and make Hoppscotch better
+              {{ t('configs.dataSharing.toggle_description') }}
             </HoppSmartToggle>
           </div>
-
-          <!-- <div class="ml-12">
-            <div class="mt-5">
-              <label>
-                {{ t('configs.site_protection.note') }}
-              </label>
-            </div>
-          </div> -->
         </div>
 
         <HoppButtonSecondary
           outline
           filled
           :icon="IconShieldQuestion"
-          label="See what is shared"
+          :label="t('configs.dataSharing.see_shared')"
           to="http://docs.hoppscotch.io"
           class="w-min my-2"
         />