feat: new data sharing component

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

@@ -24,6 +24,8 @@ declare module '@vue/runtime-core' {
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
+    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
@@ -31,10 +33,12 @@ declare module '@vue/runtime-core' {
     HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['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']
     SettingsReset: typeof import('./components/settings/Reset.vue')['default']
     SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']
     SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']

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

@@ -2,6 +2,7 @@
   <div>
     <SettingsAuthProvider v-model:config="workingConfigs" />
     <SettingsSmtpConfiguration v-model:config="workingConfigs" />
+    <SettingsDataSharing v-model:config="workingConfigs" />
     <SettingsReset />
   </div>
 </template>

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

@@ -0,0 +1,64 @@
+<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>
+      <p class="my-1 text-secondaryLight">
+        Share anonymous data usage to improve Hoppscotch
+      </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>
+
+        <div class="space-y-4 py-4">
+          <div class="flex items-center">
+            <HoppSmartToggle
+              :on="dataSharingConfigs.enabled"
+              @change="dataSharingConfigs.enabled = !dataSharingConfigs.enabled"
+            >
+              Share data and make Hoppscotch better
+            </HoppSmartToggle>
+          </div>
+
+          <!-- <div class="ml-12">
+            <div class="mt-5">
+              <label>
+                {{ t('configs.site_protection.note') }}
+              </label>
+            </div>
+          </div> -->
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+import { useI18n } from '~/composables/i18n';
+import { Config } from '~/composables/useConfigHandler';
+
+const t = useI18n();
+
+const props = defineProps<{
+  config: Config;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:config', v: Config): void;
+}>();
+
+const workingConfigs = useVModel(props, 'config', emit);
+
+// Data Sharing Configs
+const dataSharingConfigs = computed({
+  get() {
+    return workingConfigs.value?.dataSharingConfigs;
+  },
+  set(value) {
+    workingConfigs.value.dataSharingConfigs = value;
+  },
+});
+</script>