ref(js): Convert acl/access to a FC (#48031)

Author: evanpurkhiser

static/app/components/acl/access.spec.jsx

@@ -16,23 +16,10 @@ describe('Access', function () {
       childrenMock.mockClear();
     });
 
-    it('has access when requireAll is false', function () {
-      render(
-        <Access access={['project:write', 'project:read', 'org:read']} requireAll={false}>
-          {childrenMock}
-        </Access>,
-        {context: routerContext}
-      );
-
-      expect(childrenMock).toHaveBeenCalledWith({
-        hasAccess: true,
-        hasSuperuser: false,
-      });
-    });
-
     it('has access', function () {
       render(<Access access={['project:write', 'project:read']}>{childrenMock}</Access>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -44,6 +31,7 @@ describe('Access', function () {
     it('has no access', function () {
       render(<Access access={['org:write']}>{childrenMock}</Access>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -52,39 +40,10 @@ describe('Access', function () {
       });
     });
 
-    it('calls render function when no access', function () {
-      const noAccessRenderer = jest.fn(() => null);
-      render(
-        <Access access={['org:write']} renderNoAccessMessage={noAccessRenderer}>
-          {childrenMock}
-        </Access>,
-        {context: routerContext}
-      );
-
-      expect(childrenMock).not.toHaveBeenCalled();
-      expect(noAccessRenderer).toHaveBeenCalled();
-    });
-
-    it('can specify org from props', function () {
-      render(
-        <Access
-          organization={TestStubs.Organization({access: ['org:write']})}
-          access={['org:write']}
-        >
-          {childrenMock}
-        </Access>,
-        {context: routerContext}
-      );
-
-      expect(childrenMock).toHaveBeenCalledWith({
-        hasAccess: true,
-        hasSuperuser: false,
-      });
-    });
-
     it('handles no org/project', function () {
       render(<Access access={['org:write']}>{childrenMock}</Access>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith(
@@ -101,7 +60,7 @@ describe('Access', function () {
         user: null,
       };
 
-      render(<Access>{childrenMock}</Access>, {context: routerContext});
+      render(<Access>{childrenMock}</Access>, {context: routerContext, organization});
 
       expect(childrenMock).toHaveBeenCalledWith({
         hasAccess: true,
@@ -115,6 +74,7 @@ describe('Access', function () {
       };
       render(<Access isSuperuser>{childrenMock}</Access>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -129,6 +89,7 @@ describe('Access', function () {
       };
       render(<Access isSuperuser>{childrenMock}</Access>, {
         context: routerContext,
+        organization,
       });
 
       expect(childrenMock).toHaveBeenCalledWith({
@@ -144,7 +105,7 @@ describe('Access', function () {
         <Access access={['project:write']}>
           <p>The Child</p>
         </Access>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.getByText('The Child')).toBeInTheDocument();
@@ -158,7 +119,7 @@ describe('Access', function () {
         <Access isSuperuser>
           <p>The Child</p>
         </Access>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.getByText('The Child')).toBeInTheDocument();
@@ -169,7 +130,7 @@ describe('Access', function () {
         <Access access={['org:write']}>
           <p>The Child</p>
         </Access>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
 
       expect(screen.queryByText('The Child')).not.toBeInTheDocument();
@@ -183,7 +144,7 @@ describe('Access', function () {
         <Access isSuperuser>
           <p>The Child</p>
         </Access>,
-        {context: routerContext}
+        {context: routerContext, organization}
       );
       expect(screen.queryByRole('The Child')).not.toBeInTheDocument();
     });

static/app/components/acl/access.tsx

@@ -1,116 +1,58 @@
-import {Component} from 'react';
+import {Fragment} from 'react';
 
-import {Alert} from 'sentry/components/alert';
-import {t} from 'sentry/locale';
-import {Config, Organization, Scope} from 'sentry/types';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {Scope} from 'sentry/types';
 import {isRenderFunc} from 'sentry/utils/isRenderFunc';
-import withConfig from 'sentry/utils/withConfig';
-import withOrganization from 'sentry/utils/withOrganization';
-
-const DEFAULT_NO_ACCESS_MESSAGE = (
-  <Alert type="error" showIcon>
-    {t('You do not have sufficient permissions to access this.')}
-  </Alert>
-);
+import useOrganization from 'sentry/utils/useOrganization';
 
 // Props that function children will get.
-export type ChildRenderProps = {
+type ChildRenderProps = {
   hasAccess: boolean;
   hasSuperuser: boolean;
 };
 
-type ChildFunction = (props: ChildRenderProps) => React.ReactNode;
+type ChildFunction = (props: ChildRenderProps) => JSX.Element;
 
-type DefaultProps = {
+type Props = {
   /**
    * List of required access levels
    */
-  access: Scope[];
-
+  access?: Scope[];
   /**
-   * Custom renderer function for "no access" message OR `true` to use
-   * default message. `false` will suppress message.
+   * Children can be a node or a function as child.
    */
-  renderNoAccessMessage: ChildFunction | boolean;
-
+  children?: React.ReactNode | ChildFunction;
   /**
    * Requires superuser
    */
   isSuperuser?: boolean;
-
-  /**
-   * Should the component require all access levels or just one or more.
-   */
-  requireAll?: boolean;
-};
-
-const defaultProps: DefaultProps = {
-  renderNoAccessMessage: false,
-  isSuperuser: false,
-  requireAll: true,
-  access: [],
 };
 
-type Props = {
-  /**
-   * Configuration from ConfigStore
-   */
-  config: Config;
-
-  /**
-   * Current Organization
-   */
-  organization: Organization;
-
-  /**
-   * Children can be a node or a function as child.
-   */
-  children?: React.ReactNode | ChildFunction;
-} & Partial<DefaultProps>;
-
 /**
  * Component to handle access restrictions.
  */
-class Access extends Component<Props> {
-  static defaultProps = defaultProps;
-
-  render() {
-    const {
-      organization,
-      config,
-      access,
-      requireAll,
-      isSuperuser,
-      renderNoAccessMessage,
-      children,
-    } = this.props;
+function Access({children, isSuperuser = false, access = []}: Props) {
+  const config = useLegacyStore(ConfigStore);
+  const organization = useOrganization();
 
-    const {access: orgAccess} = organization || {access: []};
-    const method = requireAll ? 'every' : 'some';
+  const {access: orgAccess} = organization || {access: []};
 
-    const hasAccess = !access || access[method](acc => orgAccess.includes(acc));
-    const hasSuperuser = !!(config.user && config.user.isSuperuser);
+  const hasAccess = !access || access.every(acc => orgAccess.includes(acc));
+  const hasSuperuser = !!(config.user && config.user.isSuperuser);
 
-    const renderProps: ChildRenderProps = {
-      hasAccess,
-      hasSuperuser,
-    };
+  const renderProps: ChildRenderProps = {
+    hasAccess,
+    hasSuperuser,
+  };
 
-    const render = hasAccess && (!isSuperuser || hasSuperuser);
+  const render = hasAccess && (!isSuperuser || hasSuperuser);
 
-    if (!render && typeof renderNoAccessMessage === 'function') {
-      return renderNoAccessMessage(renderProps);
-    }
-    if (!render && renderNoAccessMessage) {
-      return DEFAULT_NO_ACCESS_MESSAGE;
-    }
-
-    if (isRenderFunc<ChildFunction>(children)) {
-      return children(renderProps);
-    }
-
-    return render ? children : null;
+  if (isRenderFunc<ChildFunction>(children)) {
+    return children(renderProps);
   }
+
+  return <Fragment>{render ? children : null}</Fragment>;
 }
 
-export default withOrganization(withConfig(Access));
+export default Access;

static/app/views/alerts/rules/issue/details/ruleDetails.spec.jsx

@@ -19,9 +19,9 @@ describe('AlertRuleDetails', () => {
   });
   const member = TestStubs.Member();
 
-  const createWrapper = (props = {}, newContext) => {
+  const createWrapper = (props = {}, newContext, org = organization) => {
     const params = {
-      orgId: organization.slug,
+      orgId: org.slug,
       projectId: project.slug,
       ruleId: rule.id,
     };
@@ -38,7 +38,7 @@ describe('AlertRuleDetails', () => {
           {...props}
         />
       </RuleDetailsContainer>,
-      {context: routerContext, organization}
+      {context: routerContext, organization: org}
     );
   };
 
@@ -232,14 +232,16 @@ describe('AlertRuleDetails', () => {
   });
 
   it('mute button is disabled if no alerts:write permission', async () => {
+    const orgWithoutAccess = {
+      features: ['issue-alert-incompatible-rules', 'mute-alerts'],
+      access: [],
+    };
+
     const contextWithoutAccess = initializeOrg({
-      organization: {
-        features: ['issue-alert-incompatible-rules', 'mute-alerts'],
-        access: [],
-      },
+      organization: orgWithoutAccess,
     });
 
-    createWrapper({}, contextWithoutAccess);
+    createWrapper({}, contextWithoutAccess, orgWithoutAccess);
 
     expect(await screen.findByRole('button', {name: 'Mute'})).toBeDisabled();
   });