rename to if and add examples of dynamic cards

Signed-off-by: aramissennyeydd <aramis.sennyey@doordash.com>

packages/frontend-app-api/package.json

@@ -39,7 +39,6 @@
     "@backstage/filter-predicates": "workspace:^",
     "@backstage/frontend-defaults": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",
-    "@backstage/plugin-permission-common": "workspace:^",
     "@backstage/types": "workspace:^",
     "@backstage/version-bridge": "workspace:^",
     "lodash": "^4.17.21",
@@ -49,6 +48,7 @@
     "@backstage/cli": "workspace:^",
     "@backstage/frontend-test-utils": "workspace:^",
     "@backstage/plugin-app": "workspace:^",
+    "@backstage/plugin-permission-common": "workspace:^",
     "@backstage/test-utils": "workspace:^",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",

packages/frontend-app-api/src/tree/instantiateAppNodeTree.test.ts

@@ -1783,9 +1783,9 @@ describe('instantiateAppNodeTree', () => {
     });
   });
 
-  describe('enabled predicate', () => {
+  describe('if predicate', () => {
     function makeNodeWithEnabled(
-      enabled: AppNodeSpec['enabled'],
+      enabled: AppNodeSpec['if'],
       disabled = false,
     ): AppNode {
       const ext = resolveExtensionDefinition(
@@ -1801,7 +1801,7 @@ describe('instantiateAppNodeTree', () => {
           id: ext.id,
           attachTo: ext.attachTo,
           disabled,
-          enabled,
+          if: enabled,
           extension: ext as Extension<unknown, unknown>,
           plugin: createFrontendPlugin({ pluginId: 'app' }),
         },

packages/frontend-app-api/src/tree/instantiateAppNodeTree.ts

@@ -538,8 +538,8 @@ export function instantiateAppNodeTree(
     }
     if (
       options?.predicateContext !== undefined &&
-      node.spec.enabled !== undefined &&
-      !evaluateFilterPredicate(node.spec.enabled, options.predicateContext)
+      node.spec.if !== undefined &&
+      !evaluateFilterPredicate(node.spec.if, options.predicateContext)
     ) {
       return undefined;
     }

packages/frontend-app-api/src/tree/resolveAppNodeSpecs.test.ts

@@ -509,15 +509,15 @@ describe('resolveAppNodeSpecs', () => {
     ]);
   });
 
-  it('should carry enabled predicate through to AppNodeSpec', () => {
+  it('should carry if predicate through to AppNodeSpec', () => {
     const dataRef = createExtensionDataRef<string>().with({ id: 'test.data' });
-    const enabledPredicate = { featureFlags: { $contains: 'my-flag' } };
+    const ifPredicate = { featureFlags: { $contains: 'my-flag' } };
     const plugin = createFrontendPlugin({
       pluginId: 'test-plugin',
       extensions: [
         createExtension({
           attachTo: { id: 'app', input: 'root' },
-          enabled: enabledPredicate,
+          if: ifPredicate,
           output: [dataRef],
           factory: () => [dataRef('value')],
         }),
@@ -530,6 +530,6 @@ describe('resolveAppNodeSpecs', () => {
       collector,
     });
     expect(specs).toHaveLength(1);
-    expect(specs[0].enabled).toEqual(enabledPredicate);
+    expect(specs[0].if).toEqual(ifPredicate);
   });
 });

packages/frontend-app-api/src/tree/resolveAppNodeSpecs.ts

@@ -116,9 +116,9 @@ export function resolveAppNodeSpecs(options: {
           source: plugin,
           attachTo: internalExtension.attachTo,
           disabled: internalExtension.disabled,
-          enabled:
+          if:
             internalExtension.version === 'v2'
-              ? internalExtension.enabled
+              ? internalExtension.if
               : undefined,
           config: undefined as unknown,
         },
@@ -133,9 +133,9 @@ export function resolveAppNodeSpecs(options: {
           plugin: appPlugin,
           attachTo: internalExtension.attachTo,
           disabled: internalExtension.disabled,
-          enabled:
+          if:
             internalExtension.version === 'v2'
-              ? internalExtension.enabled
+              ? internalExtension.if
               : undefined,
           config: undefined as unknown,
         },
@@ -156,10 +156,8 @@ export function resolveAppNodeSpecs(options: {
       configuredExtensions[index].extension = internalExtension;
       configuredExtensions[index].params.attachTo = internalExtension.attachTo;
       configuredExtensions[index].params.disabled = internalExtension.disabled;
-      configuredExtensions[index].params.enabled =
-        internalExtension.version === 'v2'
-          ? internalExtension.enabled
-          : undefined;
+      configuredExtensions[index].params.if =
+        internalExtension.version === 'v2' ? internalExtension.if : undefined;
     } else {
       // Add the extension as a new one when not overriding an existing one
       configuredExtensions.push({
@@ -169,9 +167,9 @@ export function resolveAppNodeSpecs(options: {
           source: extension.plugin,
           attachTo: internalExtension.attachTo,
           disabled: internalExtension.disabled,
-          enabled:
+          if:
             internalExtension.version === 'v2'
-              ? internalExtension.enabled
+              ? internalExtension.if
               : undefined,
           config: undefined,
         },
@@ -251,7 +249,7 @@ export function resolveAppNodeSpecs(options: {
     attachTo: param.params.attachTo,
     extension: param.extension,
     disabled: param.params.disabled,
-    enabled: param.params.enabled,
+    if: param.params.if,
     plugin: param.params.plugin,
     source: param.params.source,
     config: param.params.config,