feat(sh-admin): introducing data analytics and newsletter configurations (#3845)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

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,66 @@
+<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">{{ t('configs.data_sharing.title') }}</h3>
+      <p class="my-1 text-secondaryLight">
+        {{ t('configs.data_sharing.description') }}
+      </p>
+    </div>
+
+    <div class="mx-8 md:col-span-2">
+      <h4 class="font-semibold text-secondaryDark">
+        {{ t('configs.data_sharing.title') }}
+      </h4>
+
+      <div class="flex items-center space-y-4 py-4">
+        <HoppSmartToggle
+          :on="dataSharingConfigs.enabled"
+          @change="dataSharingConfigs.enabled = !dataSharingConfigs.enabled"
+        >
+          {{ t('configs.data_sharing.toggle_description') }}
+        </HoppSmartToggle>
+      </div>
+
+      <!-- TODO: Update the link below -->
+      <HoppButtonSecondary
+        outline
+        filled
+        :icon="IconShieldQuestion"
+        :label="t('configs.data_sharing.see_shared')"
+        to="http://docs.hoppscotch.io"
+        blank
+        class="w-min my-2"
+      />
+    </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';
+import IconShieldQuestion from '~icons/lucide/shield-question';
+
+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>

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

@@ -22,6 +22,7 @@ import {
   EnableAndDisableSsoDocument,
   ResetInfraConfigsDocument,
   UpdateInfraConfigsDocument,
+  ToggleAnalyticsCollectionDocument,
 } from '~/helpers/backend/graphql';
 
 const t = useI18n();
@@ -43,10 +44,17 @@ const updateInfraConfigsMutation = useMutation(UpdateInfraConfigsDocument);
 const updateAllowedAuthProviderMutation = useMutation(
   EnableAndDisableSsoDocument
 );
+const toggleDataSharingMutation = useMutation(
+  ToggleAnalyticsCollectionDocument
+);
 
 // Mutation handlers
-const { updateInfraConfigs, updateAuthProvider, resetInfraConfigs } =
-  useConfigHandler(props.workingConfigs);
+const {
+  updateInfraConfigs,
+  updateAuthProvider,
+  resetInfraConfigs,
+  updateDataSharingConfigs,
+} = useConfigHandler(props.workingConfigs);
 
 // Call relevant mutations on component mount and initiate server restart
 const duration = ref(30);
@@ -80,6 +88,12 @@ onMounted(async () => {
       updateAllowedAuthProviderMutation
     );
     if (!authResult) return;
+
+    const dataSharingResult = await updateDataSharingConfigs(
+      toggleDataSharingMutation
+    );
+
+    if (!dataSharingResult) return;
   }
 
   restart.value = true;