Twitter feature flags (#1858)

Author: garrrikkotua

frontend/src/integrations/twitter/components/twitter-connect-2.vue

@@ -1,22 +1,88 @@
 <template>
-  <app-twitter-connect-modal
-    v-model="modalVisible"
+  <app-twitter-connect-drawer
+    v-if="hasSettings && drawerVisible"
+    v-model="drawerVisible"
+    :hashtags="hashtags"
+    :connect-url="connectUrl"
   />
   <slot
-    :connect="connect"
+    :connect="isTwitterEnabled ? connect : upgradePlan"
+    :settings="settings"
+    :has-settings="true"
+    :has-integration="isTwitterEnabled"
   />
 </template>
 
 <script setup>
+import { useStore } from 'vuex';
 import {
-  ref,
+  defineProps, computed, ref, onMounted,
 } from 'vue';
-import AppTwitterConnectModal from '@/integrations/twitter/components/twitter-connect-modal.vue';
+import { useRouter, useRoute } from 'vue-router';
+import config from '@/config';
+import { AuthToken } from '@/modules/auth/auth-token';
+import Message from '@/shared/message/message';
+import AppTwitterConnectDrawer from '@/integrations/twitter/components/twitter-connect-drawer.vue';
+import { FeatureFlag } from '@/utils/featureFlag';
 
-const modalVisible = ref(false);
+const route = useRoute();
+const router = useRouter();
+const isTwitterEnabled = ref(false);
+
+const props = defineProps({
+  integration: {
+    type: Object,
+    default: () => {},
+  },
+});
+const store = useStore();
+const drawerVisible = ref(false);
+
+onMounted(() => {
+  const isConnectionSuccessful = route.query.success;
+
+  if (isConnectionSuccessful) {
+    router.replace({ query: null });
+    Message.success('Integration updated successfuly');
+  }
+});
+
+onMounted(async () => {
+  isTwitterEnabled.value = FeatureFlag.isFlagEnabled(
+    FeatureFlag.flags.twitter,
+  );
+});
+
+// Only render twitter drawer and settings button, if integration has settings
+const hasSettings = computed(() => !!props.integration.settings);
+const hashtags = computed(() => props.integration.settings?.hashtags || []);
+
+// Create an url for the connection without the hashtags
+// This will allow to be reused by the twitter drawer component
+// and override the current configured hashtag
+const connectUrl = computed(() => {
+  const redirectUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}?success=true`;
+
+  return `${config.backendUrl}/twitter/${
+    store.getters['auth/currentTenant'].id
+  }/connect?redirectUrl=${redirectUrl}&crowdToken=${AuthToken.get()}`;
+});
 
 const connect = () => {
-  modalVisible.value = true;
+  // Add the already configured hashtags to the connectUrl
+  const encodedHashtags = hashtags.value.length > 0
+    ? `&hashtags[]=${hashtags.value[hashtags.value.length - 1]}`
+    : '';
+
+  window.open(`${connectUrl.value}${encodedHashtags}`, '_self');
+};
+
+const upgradePlan = () => {
+  router.push('/settings?activeTab=plans');
+};
+
+const settings = () => {
+  drawerVisible.value = true;
 };
 </script>
 

frontend/src/integrations/twitter/components/twitter-connect.vue

@@ -1,5 +1,3 @@
-import config from '@/config';
-import TwitterConnect2 from './components/twitter-connect-2.vue';
 import TwitterConnect from './components/twitter-connect.vue';
 
 export default {
@@ -11,8 +9,9 @@ export default {
     'Connect X/Twitter to sync profile information, followers, and relevant tweets.',
   image:
     '/images/integrations/twitter-x.svg',
-  connectComponent: config.isTwitterIntegrationEnabled ? TwitterConnect2 : TwitterConnect,
+  connectComponent: TwitterConnect,
   url: ({ username }) => (username ? `https://twitter.com/${username}` : null),
+  scale: true,
   chartColor: '#1D9BF0',
   showProfileLink: true,
   activityDisplay: {

frontend/src/integrations/twitter/config.js

@@ -14,6 +14,7 @@ export const FEATURE_FLAGS = {
   logRocket: 'log-rocket',
   developerMode: 'developer-mode',
   quickstartV2: 'quickstart-v2',
+  twitter: 'twitter',
 };
 
 class FeatureFlagService {