@atlaskit/eslint-plugin-platform 0.6.1 → 0.7.0

package/src/rules/no-invalid-feature-flag-usage/index.tsx

@@ -4,132 +4,125 @@ import type { Node, Expression } from 'estree';
 
 const FF_GETTER_BOOLEAN_IDENTIFIER = 'getBooleanFF' as const;
 
-const __isOnlyOneFlagCheckInExpression = (
-  root: Node | Expression,
-  ignoredNode: Node,
-): boolean => {
-  switch (root.type) {
-    case 'IfStatement':
-      return __isOnlyOneFlagCheckInExpression(root.test, ignoredNode);
-    case 'UnaryExpression':
-      return __isOnlyOneFlagCheckInExpression(root.argument, ignoredNode);
+const __isOnlyOneFlagCheckInExpression = (root: Node | Expression, ignoredNode: Node): boolean => {
+	switch (root.type) {
+		case 'IfStatement':
+			return __isOnlyOneFlagCheckInExpression(root.test, ignoredNode);
+		case 'UnaryExpression':
+			return __isOnlyOneFlagCheckInExpression(root.argument, ignoredNode);
 
-    case 'CallExpression':
-      if (root === ignoredNode) {
-        return true;
-      }
-      return !(
-        root.callee.type === 'Identifier' &&
-        root.callee.name === FF_GETTER_BOOLEAN_IDENTIFIER
-      );
+		case 'CallExpression':
+			if (root === ignoredNode) {
+				return true;
+			}
+			return !(
+				root.callee.type === 'Identifier' && root.callee.name === FF_GETTER_BOOLEAN_IDENTIFIER
+			);
 
-    // shouldn't ever get here but just in case
-    case 'Identifier':
-      return root.name !== FF_GETTER_BOOLEAN_IDENTIFIER;
+		// shouldn't ever get here but just in case
+		case 'Identifier':
+			return root.name !== FF_GETTER_BOOLEAN_IDENTIFIER;
 
-    case 'BinaryExpression':
-    case 'LogicalExpression':
-      return (
-        __isOnlyOneFlagCheckInExpression(root.left, ignoredNode) &&
-        __isOnlyOneFlagCheckInExpression(root.right, ignoredNode)
-      );
+		case 'BinaryExpression':
+		case 'LogicalExpression':
+			return (
+				__isOnlyOneFlagCheckInExpression(root.left, ignoredNode) &&
+				__isOnlyOneFlagCheckInExpression(root.right, ignoredNode)
+			);
 
-    default:
-      return true;
-  }
+		default:
+			return true;
+	}
 };
 
 const isOnlyOneFlagCheckInExpression = (node: Rule.Node): boolean => {
-  let root = node.parent;
-  // find the root node of the expression
-  // NOTE: This is not an exhaustive check for all ESTree.Expression types but is good enough
-  while (root.type.endsWith('Expression')) {
-    root = root.parent;
-  }
+	let root = node.parent;
+	// find the root node of the expression
+	// NOTE: This is not an exhaustive check for all ESTree.Expression types but is good enough
+	while (root.type.endsWith('Expression')) {
+		root = root.parent;
+	}
 
-  return __isOnlyOneFlagCheckInExpression(root, node);
+	return __isOnlyOneFlagCheckInExpression(root, node);
 };
 
 const rule: Rule.RuleModule = {
-  meta: {
-    hasSuggestions: false,
-    docs: {
-      recommended: false,
-    },
-    type: 'problem',
-    messages: {
-      onlyInlineIf:
-        "Only call feature flags as part of an expression, don't assign to a variable! See http://go/pff-eslint for more details",
-      onlyStringLiteral:
-        "Only get feature flags by string literal, don't use variables! See http://go/pff-eslint for more details",
-      multipleFlagCheckInExpression: `Only check one flag per expression! See http://go/pff-eslint for more details`,
-      noModuleScope: `Don't use platform feature flags in module scope! See http://go/pff-eslint for more details`,
-    },
-  },
-  create(context) {
-    return {
-      [`CallExpression[callee.name=/${FF_GETTER_BOOLEAN_IDENTIFIER}/]`]: (
-        node: Rule.Node,
-      ) => {
-        // to make typescript happy
-        if (node.type === 'CallExpression') {
-          const args = node.arguments;
+	meta: {
+		hasSuggestions: false,
+		docs: {
+			recommended: false,
+		},
+		type: 'problem',
+		messages: {
+			onlyInlineIf:
+				"Only call feature flags as part of an expression, don't assign to a variable! See http://go/pff-eslint for more details",
+			onlyStringLiteral:
+				"Only get feature flags by string literal, don't use variables! See http://go/pff-eslint for more details",
+			multipleFlagCheckInExpression: `Only check one flag per expression! See http://go/pff-eslint for more details`,
+			noModuleScope: `Don't use platform feature flags in module scope! See http://go/pff-eslint for more details`,
+		},
+	},
+	create(context) {
+		return {
+			[`CallExpression[callee.name=/${FF_GETTER_BOOLEAN_IDENTIFIER}/]`]: (node: Rule.Node) => {
+				// to make typescript happy
+				if (node.type === 'CallExpression') {
+					const args = node.arguments;
 
-          if (args.length === 1 && args[0].type !== 'Literal') {
-            return context.report({
-              node,
-              messageId: 'onlyStringLiteral',
-            });
-          }
+					if (args.length === 1 && args[0].type !== 'Literal') {
+						return context.report({
+							node,
+							messageId: 'onlyStringLiteral',
+						});
+					}
 
-          switch (node.parent?.type) {
-            case 'IfStatement':
-              break;
-            case 'ConditionalExpression':
-              switch (node.parent?.parent.type) {
-                case 'ExportDefaultDeclaration':
-                  // handles "export default getBooleanFF('test-flag') ? "this is" : "not good";"
-                  context.report({
-                    node,
-                    messageId: 'noModuleScope',
-                  });
-                  break;
-                case 'VariableDeclarator':
-                  // handles "export const foo = getBooleanFF('test-flag') ? 'this is' : 'not good';"
-                  if (
-                    node.parent.parent.parent.type === 'VariableDeclaration' &&
-                    node.parent.parent.parent.parent.type ===
-                      'ExportNamedDeclaration'
-                  ) {
-                    context.report({
-                      node,
-                      messageId: 'noModuleScope',
-                    });
-                  }
-                  break;
-              }
-              break;
-            case 'UnaryExpression':
-            case 'LogicalExpression':
-              if (!isOnlyOneFlagCheckInExpression(node)) {
-                context.report({
-                  node,
-                  messageId: 'multipleFlagCheckInExpression',
-                });
-              }
-              break;
-            default:
-              return context.report({
-                node,
-                messageId: 'onlyInlineIf',
-              });
-          }
-        }
+					switch (node.parent?.type) {
+						case 'IfStatement':
+							break;
+						case 'ConditionalExpression':
+							switch (node.parent?.parent.type) {
+								case 'ExportDefaultDeclaration':
+									// handles "export default getBooleanFF('test-flag') ? "this is" : "not good";"
+									context.report({
+										node,
+										messageId: 'noModuleScope',
+									});
+									break;
+								case 'VariableDeclarator':
+									// handles "export const foo = getBooleanFF('test-flag') ? 'this is' : 'not good';"
+									if (
+										node.parent.parent.parent.type === 'VariableDeclaration' &&
+										node.parent.parent.parent.parent.type === 'ExportNamedDeclaration'
+									) {
+										context.report({
+											node,
+											messageId: 'noModuleScope',
+										});
+									}
+									break;
+							}
+							break;
+						case 'UnaryExpression':
+						case 'LogicalExpression':
+							if (!isOnlyOneFlagCheckInExpression(node)) {
+								context.report({
+									node,
+									messageId: 'multipleFlagCheckInExpression',
+								});
+							}
+							break;
+						default:
+							return context.report({
+								node,
+								messageId: 'onlyInlineIf',
+							});
+					}
+				}
 
-        return {};
-      },
-    };
-  },
+				return {};
+			},
+		};
+	},
 };
 
 export default rule;

package/src/rules/no-invalid-storybook-decorator-usage/__tests__/unit/rule.test.tsx

@@ -2,17 +2,17 @@ import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../../index';
 
 describe('no-invalid-storybook-decorator-usage tests', () => {
-  tester.run('no-invalid-storybook-decorator-usage', rule, {
-    valid: [
-      {
-        code: `withPlatformFeatureFlags({})(<SampleComponent/>)`,
-      },
-    ],
-    invalid: [
-      {
-        code: `const flags = {'uip.sample.color': true}; withPlatformFeatureFlags(flags)(<SampleComponent/>)`,
-        errors: [{ messageId: 'onlyObjectExpression' }],
-      },
-    ],
-  });
+	tester.run('no-invalid-storybook-decorator-usage', rule, {
+		valid: [
+			{
+				code: `withPlatformFeatureFlags({})(<SampleComponent/>)`,
+			},
+		],
+		invalid: [
+			{
+				code: `const flags = {'uip.sample.color': true}; withPlatformFeatureFlags(flags)(<SampleComponent/>)`,
+				errors: [{ messageId: 'onlyObjectExpression' }],
+			},
+		],
+	});
 });

package/src/rules/no-invalid-storybook-decorator-usage/index.tsx

@@ -4,38 +4,36 @@ import type { Rule } from 'eslint';
 const STORYBOOK_DECORATOR_IDENTIFIER = 'withPlatformFeatureFlags' as const;
 
 const rule: Rule.RuleModule = {
-  meta: {
-    hasSuggestions: false,
-    docs: {
-      recommended: false,
-    },
-    type: 'problem',
-    messages: {
-      onlyObjectExpression:
-        'Only object literals allowed in the storybook decorator! See http://go/pff-eslint for more details',
-    },
-  },
-  create(context) {
-    return {
-      [`CallExpression[callee.name=/${STORYBOOK_DECORATOR_IDENTIFIER}/]`]: (
-        node: Rule.Node,
-      ) => {
-        // to make typescript happy
-        if (node.type === 'CallExpression') {
-          const args = node.arguments;
+	meta: {
+		hasSuggestions: false,
+		docs: {
+			recommended: false,
+		},
+		type: 'problem',
+		messages: {
+			onlyObjectExpression:
+				'Only object literals allowed in the storybook decorator! See http://go/pff-eslint for more details',
+		},
+	},
+	create(context) {
+		return {
+			[`CallExpression[callee.name=/${STORYBOOK_DECORATOR_IDENTIFIER}/]`]: (node: Rule.Node) => {
+				// to make typescript happy
+				if (node.type === 'CallExpression') {
+					const args = node.arguments;
 
-          if (args.length === 1 && args[0].type !== 'ObjectExpression') {
-            return context.report({
-              node,
-              messageId: 'onlyObjectExpression',
-            });
-          }
-        }
+					if (args.length === 1 && args[0].type !== 'ObjectExpression') {
+						return context.report({
+							node,
+							messageId: 'onlyObjectExpression',
+						});
+					}
+				}
 
-        return {};
-      },
-    };
-  },
+				return {};
+			},
+		};
+	},
 };
 
 export default rule;

package/src/rules/no-module-level-eval/README.md

@@ -0,0 +1,53 @@
+# Avoid using feature flags at module level (feature-flags/no-module-level-eval)
+
+Disallow usage of feature flags in global/module scope. Due to JFE using SSR, feature flags should
+not be called/initialised before components have mounted as it could cause errors.
+
+## Examples
+
+👎 Examples of **incorrect** code for this rule: ff is called in module scope
+
+```tsx
+import { ff } from '@atlassian/jira-feature-flagging';
+import { OldComponent } from './old';
+import { NewComponent } from './new';
+
+const isEnabled = ff('is_enabled');
+
+export const Component = ff('is_redesign') ? NewComponent : OldComponent;
+```
+
+👍 Examples of **correct** code to feature flag components: use ComponentWithFF
+
+```tsx
+import { ff } from '@atlassian/jira-feature-flagging';
+import { ComponentWithFF } from '@atlassian/jira-feature-flagging-utils';
+
+export const Container = () => {
+	const isEnabled = ff('is_enabled');
+};
+
+export const Component = ComponentWithFF('is_redesign', NewComponent, OldComponent);
+```
+
+👍 Examples of **correct** code to feature flag functions: use functionWithCondition
+
+```tsx
+import { ff } from '@atlassian/jira-feature-flagging';
+import { functionWithCondition } from '@atlassian/jira-feature-flagging-utils';
+
+const selectorOld = createSelector(
+	permissionsSelector,
+	(permissions: Permissions): boolean => permissions.canCreateChildren,
+);
+
+// Change the signature of the selector by adding new arguments
+const selectorNew = createSelector(
+	permissionsSelector,
+	supportedChildIssueTypesSelector,
+	(permissions: Permissions, supportedChildIssueTypes: IssueTypeForHierarchyLevel[]): boolean =>
+		permissions.canCreateChildren && !!supportedChildIssueTypes.length,
+);
+
+export const selector = functionWithCondition(() => ff('is_enabled'), selectorNew, selectorOld);
+```

package/src/rules/no-module-level-eval/__tests__/test.tsx

@@ -0,0 +1,133 @@
+import outdent from 'outdent';
+import { tester } from '../../../__tests__/utils/_tester';
+import rule from '../index';
+
+tester.run('feature-flags/no-module-level-eval', rule, {
+	valid: [
+		{
+			name: 'Variable declaration within arrow function',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                const Component = () => {
+                    const ff1 = ff('flag');
+                }
+            `,
+		},
+		{
+			name: 'Boolean within arrow function',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                const someFunction = () => {
+                    if(ff('flag')) {
+                        return true;
+                    }
+                }
+            `,
+		},
+		{
+			name: 'Immediate call within a function',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                function someFunction() {
+                    return ff('flag');
+                }
+            `,
+		},
+
+		{
+			name: 'Does not affect other function calls in global scope',
+			code: outdent`
+                import { foo } from 'foo-lib'
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                foo();
+            `,
+		},
+		{
+			name: 'Variable declaration within an arrow function with different import source',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging-using-meta';
+
+                const Component = () => {
+                    const ff1 = ff('flag');
+                }
+            `,
+		},
+		{
+			name: 'Class field',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                export class Component {
+                    value = ff('flag') ? 'newValue' : 'oldValue';
+                }
+            `,
+		},
+	],
+	invalid: [
+		{
+			name: 'Immediate call',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                ff('flag');
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level storage into a variable',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                const flag = ff('flag');
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level collection',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                const collection = [ff('flag') ? 0 : 1];
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level object',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+
+                const object = {
+                    isEnabled: ff('flag')
+                }
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		{
+			name: 'Module level with boolean',
+			code: outdent`
+                import { ff } from '@atlassian/jira-feature-flagging';
+                import { NewComp } from 'new';
+                import { OldComp } from 'old';
+
+                export const Component = ff('flag') ? NewComp : OldComp;
+            `,
+			errors: [{ messageId: 'noModuleLevelEval' }],
+		},
+		// This test fails unsure what the environment difference is between Jira + Platform.
+		// {
+		// 	name: 'Static class field',
+		// 	code: outdent`
+		//             import { ff } from '@atlassian/jira-feature-flagging';
+
+		//             export class Component {
+		//                 static value = ff('flag') ? 'newValue' : 'oldValue';
+		//             }
+		//         `,
+		// 	errors: [{ messageId: 'noModuleLevelEval' }],
+		// },
+	],
+});

package/src/rules/no-module-level-eval/index.tsx

@@ -0,0 +1,52 @@
+import type { Rule } from 'eslint';
+import { isAPIimport, type Node } from '../utils';
+
+const isInFunctionLevel = (context: Rule.RuleContext) => {
+	let scope: any = context.getScope();
+
+	while (scope?.type !== 'module' && scope?.type !== 'global') {
+		if (scope.type === 'function') {
+			return true;
+		}
+
+		if (scope.type === 'class-field-initializer') {
+			return !scope.block.parent.static;
+		}
+
+		scope = scope.upper;
+	}
+
+	return false;
+};
+
+const rule: Rule.RuleModule = {
+	meta: {
+		docs: {
+			description: 'Disallow feature flag usage at module level',
+			url: 'https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/platform/eslint-plugin/src/rules/ff/no-module-level-eval/README.md',
+		},
+		messages: {
+			noModuleLevelEval:
+				'Do not evaluate feature flags at module level, it will always resolve to false when server side rendered.',
+		},
+	},
+	create(context) {
+		return {
+			'CallExpression[callee.type="Identifier"]': (node: Node<any>) => {
+				if (
+					node.type === 'CallExpression' &&
+					node.callee.type === 'Identifier' &&
+					isAPIimport(node.callee.name, context) &&
+					!isInFunctionLevel(context)
+				) {
+					context.report({
+						messageId: 'noModuleLevelEval',
+						node,
+					});
+				}
+			},
+		};
+	},
+};
+
+export default rule;

package/src/rules/no-pre-post-installs/__tests__/unit/rule.test.ts

@@ -2,40 +2,40 @@ import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../../index';
 
 describe('test no-pre-post-installs rule', () => {
-  tester.run('no-pre-post-installs', rule, {
-    valid: [
-      {
-        code: `const foo = { "scripts": { "preinstall": 1, "postinstall": 2 }}`,
-        filename: 'hello/foo.ts',
-      },
-      {
-        code: `const foo = { "scripts": { "preinstall": 1, "postinstall": 2 }}`,
-        filename: 'foo/dummy.json',
-      },
-      {
-        code: `const foo = { "scripts": { "bar": 1, "dummy": 'echo 1' }}`,
-        filename: 'foo/package.json',
-      },
-      {
-        code: `module.exports = { "scripts": { "fakePreinstall": 1 }};`,
-        filename: 'bar/package.json',
-      },
-      {
-        code: `module.exports = { "scripts": { "fakePostinstall": 1 }};`,
-        filename: 'bar/package.json',
-      },
-    ],
-    invalid: [
-      {
-        code: `module.exports = { "scripts": { "preinstall": 1 }};`,
-        filename: 'bar/package.json',
-        errors: [{ messageId: 'prePostInstallScriptsNotAllowed' }],
-      },
-      {
-        code: `const foo = { "scripts": { "postinstall": 1 }}`,
-        filename: 'baz/package.json',
-        errors: [{ messageId: 'prePostInstallScriptsNotAllowed' }],
-      },
-    ],
-  });
+	tester.run('no-pre-post-installs', rule, {
+		valid: [
+			{
+				code: `const foo = { "scripts": { "preinstall": 1, "postinstall": 2 }}`,
+				filename: 'hello/foo.ts',
+			},
+			{
+				code: `const foo = { "scripts": { "preinstall": 1, "postinstall": 2 }}`,
+				filename: 'foo/dummy.json',
+			},
+			{
+				code: `const foo = { "scripts": { "bar": 1, "dummy": 'echo 1' }}`,
+				filename: 'foo/package.json',
+			},
+			{
+				code: `module.exports = { "scripts": { "fakePreinstall": 1 }};`,
+				filename: 'bar/package.json',
+			},
+			{
+				code: `module.exports = { "scripts": { "fakePostinstall": 1 }};`,
+				filename: 'bar/package.json',
+			},
+		],
+		invalid: [
+			{
+				code: `module.exports = { "scripts": { "preinstall": 1 }};`,
+				filename: 'bar/package.json',
+				errors: [{ messageId: 'prePostInstallScriptsNotAllowed' }],
+			},
+			{
+				code: `const foo = { "scripts": { "postinstall": 1 }}`,
+				filename: 'baz/package.json',
+				errors: [{ messageId: 'prePostInstallScriptsNotAllowed' }],
+			},
+		],
+	});
 });