Prevent conditional availability variables from being used at runtime (#21110)

Fixes https://github.com/twentyhq/twenty/issues/21094 Conditional availability variables (`objectMetadataItem`, `numberOfSelectedRecords`, `objectPermissions`, operators like `everyEquals`/`none`, etc.) are compile-time-only constructs used in `conditionalAvailabilityExpression`. They were previously exported from `twenty-sdk/front-component`, which let developers mistakenly import them into runtime component code where they have no value. - Move conditional availability variables from `twenty-sdk/front-component` to `twenty-sdk/define`. - Add a build-time manifest validation (validate-conditional-availability-usage) that fails the build if these variables are imported/used outside of `conditionalAvailabilityExpression`. - Update the github-connector example app to register commands via dedicated *.command-menu-item.ts files instead of inline command config in front components. - Update docs (all locales) and test mocks to reflect the new import paths.
2026-06-02 13:22:38 +02:00
parent 2375c2f59c
commit b2539f5b6a
52 changed files with 872 additions and 249 deletions
@@ -0,0 +1,11 @@
+import { defineCommandMenuItem, objectMetadataItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+  universalIdentifier: '7d3f2b9e-5c0a-4e8b-ad6e-2f9c3b4d5e6a',
+  frontComponentUniversalIdentifier: '6c2f1a8d-4b9e-4f7a-9c5d-1e8b2a3d4c5f',
+  label: 'Contributor Stats',
+  icon: 'IconChartBar',
+  isPinned: false,
+  conditionalAvailabilityExpression:
+    objectMetadataItem.nameSingular === 'contributor',
+});
@@ -0,0 +1,11 @@
+import { defineCommandMenuItem, objectMetadataItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+  universalIdentifier: '4640992f-c2c9-4bba-b5df-9c8f05dc9e80',
+  frontComponentUniversalIdentifier: '08f40f82-24ed-4f3e-8c99-695151e90e38',
+  label: 'Fetch Contributors',
+  icon: 'IconUsers',
+  isPinned: false,
+  conditionalAvailabilityExpression:
+    objectMetadataItem.nameSingular === 'contributor',
+});
@@ -1,10 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
-import {
-  enqueueSnackbar,
-  objectMetadataItem,
-  useRecordId,
-} from 'twenty-sdk/front-component';
+import { enqueueSnackbar, useRecordId } from 'twenty-sdk/front-component';

 import { THEME } from 'src/modules/github/contributor/components/theme';
 import { callAppRoute } from 'src/modules/shared/call-app-route';
@@ -682,12 +678,4 @@ export default defineFrontComponent({
  description:
    'Displays time-bucketed charts of PRs authored (merged only), merged and reviewed by a contributor over the last week, month, 3 months or year.',
  component: ContributorStats,
-  command: {
-    universalIdentifier: '7d3f2b9e-5c0a-4e8b-ad6e-2f9c3b4d5e6a',
-    label: 'Contributor Stats',
-    icon: 'IconChartBar',
-    isPinned: false,
-    conditionalAvailabilityExpression:
-      objectMetadataItem.nameSingular === 'contributor',
-  },
 });
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import {
  enqueueSnackbar,
-  objectMetadataItem,
  unmountFrontComponent,
  updateProgress,
 } from 'twenty-sdk/front-component';
@@ -95,12 +94,4 @@ export default defineFrontComponent({
    'Fetches contributors from every configured GitHub repo (GITHUB_REPOS) and upserts them as Contributor records.',
  isHeadless: true,
  component: FetchContributors,
-  command: {
-    universalIdentifier: '4640992f-c2c9-4bba-b5df-9c8f05dc9e80',
-    label: 'Fetch Contributors',
-    icon: 'IconUsers',
-    isPinned: false,
-    conditionalAvailabilityExpression:
-      objectMetadataItem.nameSingular === 'contributor',
-  },
 });
@@ -0,0 +1,11 @@
+import { defineCommandMenuItem, objectMetadataItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+  universalIdentifier: 'c34f56aa-ff65-43a4-9db2-774945dbcc53',
+  frontComponentUniversalIdentifier: '9430e4fc-9ecb-428d-9bde-2babeb1f452f',
+  label: 'Fetch Issues',
+  icon: 'IconBug',
+  isPinned: false,
+  conditionalAvailabilityExpression:
+    objectMetadataItem.nameSingular === 'issue',
+});
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import {
  enqueueSnackbar,
-  objectMetadataItem,
  unmountFrontComponent,
  updateProgress,
 } from 'twenty-sdk/front-component';
@@ -98,12 +97,4 @@ export default defineFrontComponent({
  description: 'Fetches issues from GitHub repos',
  isHeadless: true,
  component: FetchIssues,
-  command: {
-    universalIdentifier: 'c34f56aa-ff65-43a4-9db2-774945dbcc53',
-    label: 'Fetch Issues',
-    icon: 'IconBug',
-    isPinned: false,
-    conditionalAvailabilityExpression:
-      objectMetadataItem.nameSingular === 'issue',
-  },
 });
@@ -0,0 +1,11 @@
+import { defineCommandMenuItem, objectMetadataItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+  universalIdentifier: '719cfe1c-d570-4c8c-89e6-88671c6ba1ea',
+  frontComponentUniversalIdentifier: '7c397b0c-8b19-4fac-924a-8f6aa1dece78',
+  label: 'Fetch Project Items',
+  icon: 'IconLayoutKanban',
+  isPinned: false,
+  conditionalAvailabilityExpression:
+    objectMetadataItem.nameSingular === 'projectItem',
+});
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import {
  enqueueSnackbar,
-  objectMetadataItem,
  unmountFrontComponent,
  updateProgress,
 } from 'twenty-sdk/front-component';
@@ -97,12 +96,4 @@ export default defineFrontComponent({
  description: 'Fetches project items from GitHub Projects V2',
  isHeadless: true,
  component: FetchProjectItems,
-  command: {
-    universalIdentifier: '719cfe1c-d570-4c8c-89e6-88671c6ba1ea',
-    label: 'Fetch Project Items',
-    icon: 'IconLayoutKanban',
-    isPinned: false,
-    conditionalAvailabilityExpression:
-      objectMetadataItem.nameSingular === 'projectItem',
-  },
 });
@@ -0,0 +1,11 @@
+import { defineCommandMenuItem, objectMetadataItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+  universalIdentifier: '0b24e6d6-da0c-4c0e-8d88-5bfd7f3cd75a',
+  frontComponentUniversalIdentifier: '5e2ba8df-1db5-4964-94d3-44cccfd791a0',
+  label: 'Fetch Pull Requests',
+  icon: 'IconGitPullRequest',
+  isPinned: false,
+  conditionalAvailabilityExpression:
+    objectMetadataItem.nameSingular === 'pullRequest',
+});
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { defineFrontComponent } from 'twenty-sdk/define';
 import {
  enqueueSnackbar,
-  objectMetadataItem,
  unmountFrontComponent,
  updateProgress,
 } from 'twenty-sdk/front-component';
@@ -101,12 +100,4 @@ export default defineFrontComponent({
  description: 'Fetches pull requests and reviews from GitHub repos',
  isHeadless: true,
  component: FetchPrs,
-  command: {
-    universalIdentifier: '0b24e6d6-da0c-4c0e-8d88-5bfd7f3cd75a',
-    label: 'Fetch Pull Requests',
-    icon: 'IconGitPullRequest',
-    isPinned: false,
-    conditionalAvailabilityExpression:
-      objectMetadataItem.nameSingular === 'pullRequest',
-  },
 });