chore: enable organization page (IN-1174) (#2006)

Signed-off-by: Joana Maia <jmaia@contractor.linuxfoundation.org>

Author: joanagmaia

frontend/app/components/modules/explore/components/top-organizations.vue

@@ -17,8 +17,14 @@ SPDX-License-Identifier: MIT
         v-for="(row, index) in tableData"
         :key="row.id"
         class="lfx-table-row text-inherit"
+        :class="row.slug ? 'cursor-pointer' : ''"
       >
-        <div class="name-col grow !gap-3">
+        <component
+          :is="row.slug ? nuxtLink : 'div'"
+          :to="row.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: row.slug } } : undefined"
+          class="name-col grow !gap-3 text-inherit no-underline"
+          :class="row.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
+        >
           <div class="mr-1 text-neutral-400 text-xs">#{{ index + 1 }}</div>
           <lfx-avatar
             :src="row.logo"
@@ -31,18 +37,19 @@ SPDX-License-Identifier: MIT
           >
             {{ row.displayName }}
           </div>
-        </div>
+        </component>
       </div>
     </div>
   </lfx-project-load-state>
 </template>
 
 <script setup lang="ts">
-import { computed, onServerPrefetch } from 'vue';
+import { computed, resolveComponent, onServerPrefetch } from 'vue';
 import { EXPLORE_API_SERVICE } from '~/components/modules/explore/services/explore.api.service';
 import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
 import { isEmptyData } from '~/components/shared/utils/helper';
 import LfxProjectLoadState from '~/components/modules/project/components/shared/load-state.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
 
 const props = defineProps<{
   isFullList?: boolean;
@@ -52,6 +59,7 @@ const { data, isPending, status, error, suspense } = EXPLORE_API_SERVICE.fetchTo
   props.isFullList ? 100 : 10,
 );
 
+const nuxtLink = resolveComponent('NuxtLink');
 const tableData = computed(() => data.value);
 
 const isEmpty = computed(() => isEmptyData(tableData.value as unknown as Record<string, unknown>[]));

frontend/app/components/modules/leaderboards/components/minimize-row-displays/organization-row.vue

@@ -4,13 +4,16 @@ SPDX-License-Identifier: MIT
 -->
 
 <template>
-  <div class="flex items-center w-full">
+  <div
+    class="flex items-center w-full"
+    :class="item.slug ? 'cursor-pointer' : ''"
+  >
     <!-- Organization info -->
     <component
-      :is="isTeamMember && item.slug ? nuxtLink : 'div'"
-      :to="isTeamMember && item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
+      :is="item.slug ? nuxtLink : 'div'"
+      :to="item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
       class="flex-1 min-w-0 flex gap-3 items-center text-inherit no-underline"
-      :class="isTeamMember && item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
+      :class="item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
     >
       <lfx-avatar
         :src="item.logoUrl"
@@ -35,22 +38,19 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
-import { computed, resolveComponent } from 'vue';
+import { resolveComponent } from 'vue';
 import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
 import NumericDataDisplay from '../data-displays/numeric.vue';
 import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
 import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
-import { useAuth } from '~~/composables/useAuth';
 
 defineProps<{
   item: Leaderboard;
   leaderboardConfig: LeaderboardConfig;
 }>();
 
 const nuxtLink = resolveComponent('NuxtLink');
-const { user } = useAuth();
-const isTeamMember = computed(() => !!user.value?.isLfInsightsTeamMember);
 </script>
 
 <script lang="ts">

frontend/app/components/modules/leaderboards/components/row-displays/organization-row.vue

@@ -4,18 +4,21 @@ SPDX-License-Identifier: MIT
 -->
 
 <template>
-  <div class="flex items-center w-full hover:bg-neutral-50 rounded-lg transition-all duration-300 sm:px-3 px-0 h-15">
+  <div
+    class="flex items-center w-full hover:bg-neutral-50 rounded-lg transition-all duration-300 sm:px-3 px-0 h-15"
+    :class="item.slug ? 'cursor-pointer' : ''"
+  >
     <!-- Rank -->
     <div class="w-10 shrink-0 text-neutral-900 font-secondary overflow-hidden overflow-ellipsis">
       {{ item.rank }}
     </div>
 
     <!-- Organization info -->
     <component
-      :is="isTeamMember && item.slug ? nuxtLink : 'div'"
-      :to="isTeamMember && item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
+      :is="item.slug ? nuxtLink : 'div'"
+      :to="item.slug ? { name: LfxRoutes.ORGANIZATION, params: { orgSlug: item.slug } } : undefined"
       class="flex-1 min-w-0 flex gap-3 items-center text-inherit no-underline"
-      :class="isTeamMember && item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
+      :class="item.slug ? 'hover:text-brand-500 transition-colors cursor-pointer' : ''"
     >
       <lfx-avatar
         :src="item.logoUrl"
@@ -44,23 +47,20 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
-import { computed, resolveComponent } from 'vue';
+import { resolveComponent } from 'vue';
 import type { LeaderboardConfig } from '../../config/types/leaderboard.types';
 import NumericDataDisplay from '../data-displays/numeric.vue';
 import NumericTrends from '../trends/numeric-trends.vue';
 import type { Leaderboard } from '~~/types/leaderboard/leaderboard';
 import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
 import { LfxRoutes } from '~/components/shared/types/routes';
-import { useAuth } from '~~/composables/useAuth';
 
 defineProps<{
   item: Leaderboard;
   leaderboardConfig: LeaderboardConfig;
 }>();
 
 const nuxtLink = resolveComponent('NuxtLink');
-const { user } = useAuth();
-const isTeamMember = computed(() => !!user.value?.isLfInsightsTeamMember);
 </script>
 
 <script lang="ts">

frontend/app/components/modules/organization/components/header.vue

@@ -173,7 +173,7 @@ SPDX-License-Identifier: MIT
                         name="arrow-up-right-from-square"
                         :size="14"
                       />
-                      Open in LFX Self-Serve
+                      Open in LFX
                     </lfx-button>
                   </a>
                   <template #content>

frontend/app/components/modules/organization/components/overview/locked-contributors-section.vue

@@ -20,8 +20,8 @@ SPDX-License-Identifier: MIT
           button-style="pill"
           size="medium"
         >
-          <span class="sm:hidden">Open in LFX Self-Serve</span>
-          <span class="hidden sm:inline">Check your organization data in LFX Self-Serve</span>
+          <span class="sm:hidden">Open in LFX</span>
+          <span class="hidden sm:inline">Check your organization data in LFX</span>
           <lfx-icon
             name="arrow-up-right-from-square"
             :size="12"

frontend/app/components/modules/widget/components/contributors/fragments/organizations-table.vue

@@ -28,6 +28,7 @@ SPDX-License-Identifier: MIT
         v-for="(organization, index) in props.organizations"
         :key="`${organization.name}-${index}`"
         class="lfx-table-row"
+        :class="organization.slug ? 'cursor-pointer' : ''"
       >
         <div class="name-col">
           <div
@@ -37,9 +38,9 @@ SPDX-License-Identifier: MIT
             {{ index + 1 }}
           </div>
           <nuxt-link
-            v-if="isTeamMember && organization.slug"
+            v-if="organization.slug"
             :to="`/organization/${organization.slug}`"
-            class="flex items-center gap-2 min-w-0 overflow-hidden no-underline text-inherit"
+            class="flex items-center gap-2 min-w-0 overflow-hidden no-underline text-inherit cursor-pointer"
           >
             <lfx-avatar
               :src="organization.logo"
@@ -107,7 +108,6 @@ import { formatNumber } from '~/components/shared/utils/formatter';
 import LfxScrollableShadow from '~/components/uikit/scrollable-shadow/scrollable-shadow.vue';
 import LfxSpinner from '~/components/uikit/spinner/spinner.vue';
 import { isElementVisible } from '~/components/shared/utils/helper';
-import { useAuth } from '~~/composables/useAuth';
 
 const emit = defineEmits<{ (e: 'loadMore'): void }>();
 const loadMore = ref(null);
@@ -131,9 +131,6 @@ const props = withDefaults(
 
 const showLoadMore = computed(() => props.hasNextPage && props.showFullList);
 
-const { user } = useAuth();
-const isTeamMember = computed(() => !!user.value?.isLfInsightsTeamMember);
-
 const options = {
   root: null,
   rootMargin: '0px',

frontend/docs/.vitepress/config.ts

@@ -84,6 +84,7 @@ export default defineConfig({
           { text: 'LFX Data Copilot', link: '/features/lfx-data-copilot/index.md' },
           { text: 'Repository Groups', link: '/features/repository-groups/index.md' },
           { text: 'Community Collections', link: '/features/community-collections/index.md' },
+          { text: 'Organization Page', link: '/features/organization-page/index.md' },
         ],
       },
       {

frontend/docs/features/organization-page/index.md

@@ -0,0 +1,35 @@
+# Organization Page
+
+Use the Organization Page to understand how your company contributes to critical open source projects — who is contributing, which projects you're involved in, and how your engagement has changed over time.
+
+## Key Metrics
+
+Three numbers at the top of the page give you an at-a-glance health check of your organization's open source activity over the **last 365 days**:
+
+- **Active contributors** — how many of your employees made at least one code contribution (commit, pull request, or code review). Shows a year-over-year trend so you can see if engagement is growing or declining.
+- **Maintainer roles** — how many maintainer or owner roles your contributors hold across all projects. A higher number signals deeper trust and influence in those communities.
+- **Critical projects** — how many distinct projects your team contributed to. Useful for gauging breadth of involvement.
+
+## Activity Over Time
+
+A bar chart showing your organization's total code contributions per year, from the earliest recorded activity to today. Use it to spot periods of growth, sustained investment, or pullback across your open source program.
+
+## Contributors Over Time
+
+A bar chart showing how many unique contributors your organization had per year. Pair it with the Activity chart to distinguish between a growing team and a shrinking one that's working harder.
+
+## Critical Projects
+
+A ranked table of the projects your contributors were involved in, ordered by **Technical influence** — your organization's share of code contributions relative to what the whole project community produced.
+
+Each project row shows:
+
+- **Technical influence** — one of four levels based on your contribution share:
+  - **Leading** — a large share; your team is a primary driver of the project.
+  - **Contributing** — a meaningful share; consistent and committed involvement.
+  - **Participating** — a small but non-zero share; actively helping.
+  - **Silent** — minimal or no code contribution activity.
+- **Contributors** — number of your employees active in that project.
+- **Activities** — total code contributions your team made.
+
+The table covers an extended rolling window of recent years and counts only code contribution activity types.

frontend/types/explore/organizations.ts

@@ -5,4 +5,5 @@ export interface ExploreOrganizations {
   logo?: string;
   displayName: string;
   activityCount: number;
+  slug?: string;
 }