feat: show octolens mention platforms in cdp and fix the activity type filter

frontend/src/config/identities/bluesky/config.ts

@@ -0,0 +1,19 @@
+import type { IdentityConfig } from '@/config/identities';
+
+const image = new URL('@/assets/images/identities/bluesky.svg', import.meta.url).href;
+
+const bluesky: IdentityConfig = {
+  key: 'bluesky',
+  name: 'Bluesky',
+  image,
+  member: {
+    urlPrefix: 'bsky.app/profile/',
+    url: ({ identity }) =>
+      identity.value ? `https://bsky.app/profile/${identity.value.replace(/^@/, '')}` : null,
+  },
+  activity: {
+    showLink: true,
+  },
+};
+
+export default bluesky;

frontend/src/config/identities/facebook/config.ts

@@ -1,9 +1,6 @@
 import type { IdentityConfig } from '@/config/identities';
 
-const image = new URL(
-  '@/assets/images/identities/facebook.png',
-  import.meta.url,
-).href;
+const image = new URL('@/assets/images/identities/facebook.png', import.meta.url).href;
 
 const facebook: IdentityConfig = {
   key: 'facebook',

frontend/src/config/identities/index.ts

@@ -3,6 +3,7 @@ import type {
   ContributorIdentity,
 } from '@/modules/contributor/types/Contributor';
 import type { OrganizationIdentity } from '@/modules/organization/types/Organization';
+import bluesky from './bluesky/config';
 import confluence from './confluence/config';
 import crunchbase from './crunchbase/config';
 import cvent from './cvent/config';
@@ -16,6 +17,7 @@ import github from './github/config';
 import gitlab from './gitlab/config';
 import groupsio from './groupsio/config';
 import hackernews from './hackernews/config';
+import instagram from './instagram/config';
 import jira from './jira/config';
 import lfid from './lfx/config';
 import linkedin from './linkedin/config';
@@ -24,8 +26,10 @@ import n8n from './n8n/config';
 import reddit from './reddit/config';
 import slack from './slack/config';
 import stackoverflow from './stackoverflow/config';
+import tiktok from './tiktok/config';
 import tnc from './tnc/config';
 import twitter from './twitter/config';
+import youtube from './youtube/config';
 import zapier from './zapier/config';
 
 export interface IdentityConfig {
@@ -86,4 +90,8 @@ export const lfIdentities: Record<string, IdentityConfig> = {
   n8n,
   training_cert: tnc,
   zapier,
+  youtube,
+  bluesky,
+  tiktok,
+  instagram,
 };

frontend/src/config/identities/instagram/config.ts

@@ -0,0 +1,19 @@
+import type { IdentityConfig } from '@/config/identities';
+
+const image = new URL('@/assets/images/identities/instagram.svg', import.meta.url).href;
+
+const instagram: IdentityConfig = {
+  key: 'instagram',
+  name: 'Instagram',
+  image,
+  member: {
+    urlPrefix: 'instagram.com/',
+    url: ({ identity }) =>
+      identity.value ? `https://www.instagram.com/${identity.value.replace(/^@/, '')}` : null,
+  },
+  activity: {
+    showLink: true,
+  },
+};
+
+export default instagram;

frontend/src/config/identities/tiktok/config.ts

@@ -0,0 +1,19 @@
+import type { IdentityConfig } from '@/config/identities';
+
+const image = new URL('@/assets/images/identities/tiktok.svg', import.meta.url).href;
+
+const tiktok: IdentityConfig = {
+  key: 'tiktok',
+  name: 'TikTok',
+  image,
+  member: {
+    urlPrefix: 'tiktok.com/@',
+    url: ({ identity }) =>
+      identity.value ? `https://www.tiktok.com/@${identity.value.replace(/^@/, '')}` : null,
+  },
+  activity: {
+    showLink: true,
+  },
+};
+
+export default tiktok;

frontend/src/config/identities/youtube/config.ts

@@ -0,0 +1,19 @@
+import type { IdentityConfig } from '@/config/identities';
+
+const image = new URL('@/assets/images/identities/youtube.svg', import.meta.url).href;
+
+const youtube: IdentityConfig = {
+  key: 'youtube',
+  name: 'YouTube',
+  image,
+  member: {
+    urlPrefix: 'youtube.com/channel/',
+    url: ({ identity }) =>
+      identity.value ? `https://www.youtube.com/channel/${identity.value}` : null,
+  },
+  activity: {
+    showLink: true,
+  },
+};
+
+export default youtube;

frontend/src/config/integrations/integrations.helpers.ts

@@ -1,15 +1,21 @@
-import { mapGetters } from '@/shared/vuex/vuex.helpers';
+import { useStore } from 'vuex';
+import type { IntegrationConfig } from '@/config/integrations/index';
 import { lfIntegrations } from '@/config/integrations/index';
+import type { Integration } from '@/modules/admin/modules/integration/types/Integration';
+
+type StoredIntegration = Pick<Integration<unknown>, 'status'> & { platform: string };
 
 const useIntegrationsHelpers = () => {
-  const getActiveIntegrations = () => {
-    const { findByPlatform }: any = mapGetters('integrations');
+  const store = useStore();
+
+  const getActiveIntegrations = (): IntegrationConfig[] => {
+    const integrations: StoredIntegration[] = store.getters['integration/array'] ?? [];
 
-    return Object.values(lfIntegrations()).map((config) => ({
-      ...config,
-      ...(findByPlatform ? findByPlatform(config.key) : {}),
-    }))
-      .filter((integration) => integration.status);
+    return Object.values(lfIntegrations()).filter((config) =>
+      integrations.some(
+        (integration) => integration.platform === config.key && !!integration.status,
+      ),
+    );
   };
 
   return {

frontend/src/config/integrations/octolens/config.ts

@@ -2,12 +2,26 @@ import type { IntegrationConfig } from '@/config/integrations';
 
 const image = new URL('@/assets/images/integrations/octolens.png', import.meta.url).href;
 
+// Must match ENABLED_PLATFORMS in services/libs/connectors/src/connectors/octolens/mapper.ts.
+export const octolensMentionPlatforms: readonly string[] = [
+  'github',
+  'twitter',
+  'linkedin',
+  'reddit',
+  'devto',
+  'hackernews',
+  'bluesky',
+  'tiktok',
+  'instagram',
+  'youtube',
+];
+
 const octolens: IntegrationConfig = {
   key: 'octolens',
   name: 'Octolens',
   image,
   description:
-    'Mentions of LF projects on GitHub, X/Twitter, LinkedIn and more, matched to projects automatically.',
+    'Mentions of LF projects on GitHub, X/Twitter, LinkedIn, Reddit, Bluesky and more, matched to projects automatically.',
   showProgress: false,
   autoManaged: true,
 };

frontend/src/shared/modules/filters/components/filterTypes/ActivityTypeFilter.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import {
-  computed, onMounted, watch,
+  computed, watch,
 } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useStore } from 'vuex';
@@ -23,6 +23,7 @@ import { useActivityTypeStore } from '@/modules/activity/store/type';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { lfIdentities } from '@/config/identities';
 import useIntegrationsHelpers from '@/config/integrations/integrations.helpers';
+import octolens, { octolensMentionPlatforms } from '@/config/integrations/octolens/config';
 
 interface FilterData { options?: MultiSelectFilterOptionGroup[] }
 
@@ -65,13 +66,30 @@ const toOptionGroup = (platform: string, activityTypes: Record<string, ActivityT
   })),
 });
 
+const platformOptionGroup = (
+  platform: string,
+  activityTypes: Record<string, ActivityTypeDefinition>,
+  activeIntegrationsValue: string[],
+): MultiSelectFilterOptionGroup | null => {
+  if (activeIntegrationsValue.includes(platform)) {
+    return toOptionGroup(platform, activityTypes);
+  }
+  if (
+    activeIntegrationsValue.includes(octolens.key)
+    && octolensMentionPlatforms.includes(platform)
+    && activityTypes.mention
+  ) {
+    return toOptionGroup(platform, { mention: activityTypes.mention });
+  }
+  return null;
+};
+
 watch([types, activeIntegrations], ([typesValue, activeIntegrationsValue]) => {
-  const platformsOptions = Object.entries(typesValue.default)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    .filter(([platform, _]) => activeIntegrationsValue.includes(platform))
-    .map(([platform, activityTypes]) => toOptionGroup(platform, activityTypes));
+  const platformsOptions = Object.entries(typesValue.default ?? {})
+    .map(([platform, activityTypes]) => platformOptionGroup(platform, activityTypes, activeIntegrationsValue))
+    .filter((group): group is MultiSelectFilterOptionGroup => group !== null);
 
-  const customOptions = Object.entries(typesValue.custom)
+  const customOptions = Object.entries(typesValue.custom ?? {})
     .map(([platform, activityTypes]) => toOptionGroup(platform, activityTypes));
 
   data.value.options = [
@@ -80,9 +98,10 @@ watch([types, activeIntegrations], ([typesValue, activeIntegrationsValue]) => {
   ];
 }, {
   deep: true,
+  immediate: true,
 });
 
-onMounted(async () => {
-  await store.dispatch('integration/doFetch', selectedProjectGroup.value?.id ? [selectedProjectGroup.value.id] : []);
-});
+watch(() => selectedProjectGroup.value?.id, async (projectGroupId) => {
+  await store.dispatch('integration/doFetch', projectGroupId ? [projectGroupId] : []);
+}, { immediate: true });
 </script>

frontend/src/shared/modules/filters/components/filterTypes/multiselect/MultiSelectTagsFilter.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type {
   MultiSelectFilterOptions,
   MultiSelectFilterConfig, MultiSelectFilterOptionGroup,
@@ -58,17 +58,17 @@ const form = computed<string[]>({
 });
 
 const filteredOptions = ref<MultiSelectFilterOptionGroup[]>(props.options);
+const searchQuery = ref('');
 
 const searchOptions = (query: string) => {
+  searchQuery.value = query;
   filteredOptions.value = props.options.map((g) => ({
     ...g,
     options: g.options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),
   }));
 };
 
-onMounted(() => {
-  searchOptions('');
-});
+watch(() => props.options, () => searchOptions(searchQuery.value), { immediate: true, deep: true });
 </script>
 
 <script lang="ts">