Read features directly from Config context in GroupFormHeader (#9489)

Author: acelaya

h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -236,11 +236,7 @@ export default function CreateEditGroupForm({
 
   return (
     <FormContainer classes="max-w-[530px] mx-auto">
-      <GroupFormHeader
-        group={group}
-        title={heading}
-        enableMembers={config.features.group_members}
-      />
+      <GroupFormHeader group={group} title={heading} />
       <form onSubmit={onSubmit} data-testid="form">
         <TextField
           type="input"

h/static/scripts/group-forms/components/GroupFormHeader.tsx

@@ -4,7 +4,9 @@ import type { ComponentChildren } from 'preact';
 import { Link as RouterLink, useRoute } from 'wouter-preact';
 
 import type { Group } from '../config';
+import { Config } from '../config';
 import { routes } from '../routes';
+import { useContext } from 'preact/hooks';
 
 type TabLinkProps = {
   href: string;
@@ -32,14 +34,15 @@ function TabLink({ children, href, testId }: TabLinkProps) {
 export type GroupFormHeaderProps = {
   group: Group | null;
   title: string;
-  enableMembers?: boolean;
 };
 
 export default function GroupFormHeader({
-  enableMembers = true,
   group,
   title,
 }: GroupFormHeaderProps) {
+  const config = useContext(Config);
+  const enableMembers = config?.features.group_members;
+
   // This should be replaced with a proper URL generation function that handles
   // escaping etc.
   const editLink = group

h/static/scripts/group-forms/components/test/EditGroupMembersForm-test.js

@@ -99,6 +99,7 @@ describe('EditGroupMembersForm', () => {
           userid: 'acct:jane@localhost',
         },
       },
+      features: {},
     };
 
     dateFormatter = {

h/static/scripts/group-forms/components/test/GroupFormHeader-test.js

@@ -1,9 +1,23 @@
 import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import GroupFormHeader from '../GroupFormHeader';
+import { Config } from '../../config';
 
 describe('GroupFormHeader', () => {
-  const createHeader = (props = {}) => mount(<GroupFormHeader {...props} />);
+  let config;
+
+  beforeEach(() => {
+    config = {
+      features: { group_members: true },
+    };
+  });
+
+  const createHeader = (props = {}) =>
+    mount(
+      <Config.Provider value={config}>
+        <GroupFormHeader {...props} />
+      </Config.Provider>,
+    );
 
   const group = {
     pubid: 'abc123',
@@ -38,7 +52,8 @@ describe('GroupFormHeader', () => {
   });
 
   it('does not show tabs if the members flag is disabled', () => {
-    const header = createHeader({ group, enableMembers: false });
+    config.features.group_members = false;
+    const header = createHeader({ group });
     assert.isTrue(getLink(header, 'activity-link').exists());
     assert.isFalse(getLink(header, 'settings-link').exists());
     assert.isFalse(getLink(header, 'members-link').exists());