Add feature flag for group type selection in group creation form

Add a feature flag for the upcoming changes to the group creation form described
in #8898.

In this commit the only effects of the flag are to change the page title and
heading.

h/models/feature.py

@@ -15,6 +15,7 @@
  "pdf_custom_text_layer": "Use custom text layer in PDFs for improved text selection",
  "styled_highlight_clusters": "Style different clusters of highlights in the client",
  "client_user_profile": "Enable client-side user profile and preferences management",
+ "group_type": "Allow users to choose group type in group creation form",
 }
 
 

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

@@ -216,10 +216,19 @@ export default function CreateEditGroupForm() {
  onSubmit = createGroup;
  }
 
+ let heading;
+ if (group) {
+ heading = 'Edit group';
+ } else if (config.features.group_type) {
+ heading = 'Create a new group';
+ } else {
+ heading = 'Create a new private group';
+ }
+
  return (
  <div className="text-grey-6 text-sm/relaxed">
  <h1 className="mt-14 mb-8 text-grey-7 text-xl/none" data-testid="header">
- {group ? 'Edit group' : 'Create a new private group'}
+ {heading}
  </h1>
 
  <form onSubmit={onSubmit} data-testid="form">

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

@@ -28,6 +28,9 @@ describe('CreateEditGroupForm', () => {
  context: {
  group: null,
  },
+ features: {
+ group_type: false,
+ },
  };
 
  fakeCallAPI = sinon.stub();
@@ -187,21 +190,34 @@ describe('CreateEditGroupForm', () => {
  });
  });
 
- it('displays a create-new-group form', async () => {
- const { wrapper, elements } = createWrapper();
- const headerEl = elements.header.element;
- const nameEl = elements.name.fieldEl;
- const descriptionEl = elements.description.fieldEl;
- const submitButtonEl = elements.submitButton.element;
-
- assert.equal(headerEl.text(), 'Create a new private group');
- assert.equal(nameEl.getDOMNode().value, '');
- assert.equal(descriptionEl.getDOMNode().value, '');
- assert.equal(submitButtonEl.text(), 'Create group');
- assert.isFalse(wrapper.exists('[data-testid="back-link"]'));
- assert.isFalse(wrapper.exists('[data-testid="error-message"]'));
- await assertInLoadingState(wrapper, false);
- assert.isFalse(savedConfirmationShowing(wrapper));
+ [
+ {
+ groupTypesFlag: true,
+ heading: 'Create a new group',
+ },
+ {
+ groupTypesFlag: false,
+ heading: 'Create a new private group',
+ },
+ ].forEach(({ groupTypesFlag, heading }) => {
+ it('displays a create-new-group form', async () => {
+ config.features.group_type = groupTypesFlag;
+
+ const { wrapper, elements } = createWrapper();
+ const headerEl = elements.header.element;
+ const nameEl = elements.name.fieldEl;
+ const descriptionEl = elements.description.fieldEl;
+ const submitButtonEl = elements.submitButton.element;
+
+ assert.equal(headerEl.text(), heading);
+ assert.equal(nameEl.getDOMNode().value, '');
+ assert.equal(descriptionEl.getDOMNode().value, '');
+ assert.equal(submitButtonEl.text(), 'Create group');
+ assert.isFalse(wrapper.exists('[data-testid="back-link"]'));
+ assert.isFalse(wrapper.exists('[data-testid="error-message"]'));
+ await assertInLoadingState(wrapper, false);
+ assert.isFalse(savedConfirmationShowing(wrapper));
+ });
  });
 
  it('does not warn when leaving page if there are unsaved changes', () => {

h/static/scripts/group-forms/config.ts

@@ -19,6 +19,9 @@ export type ConfigObject = {
  link: string;
  } | null;
  };
+ features: {
+ group_type: boolean;
+ };
 };
 
 /** Return the frontend config from the page's <script class="js-config">. */

h/views/groups.py

@@ -20,8 +20,14 @@ def __init__(self, context, request):
  @view_config(route_name="group_create", request_method="GET")
  def create(self):
  """Render the page for creating a new group."""
+
+ if self.request.feature("group_type"):
+ page_title = "Create a new group"
+ else:
+ page_title = "Create a new private group"
+
  return {
- "page_title": "Create a new private group",
+ "page_title": page_title,
  "js_config": self._js_config(),
  }
 
@@ -48,6 +54,9 @@ def _js_config(self):
  },
  },
  "context": {"group": None},
+ "features": {
+ "group_type": self.request.feature("group_type"),
+ },
  }
 
  if group := getattr(self.context, "group", None):

tests/unit/h/views/groups_test.py

@@ -10,7 +10,9 @@
 
 @pytest.mark.usefixtures("annotation_stats_service")
 class TestGroupCreateEditController:
- def test_create(self, pyramid_request, assets_env, mocker):
+ @pytest.mark.parametrize("group_type_flag", [True, False])
+ def test_create(self, pyramid_request, assets_env, mocker, group_type_flag):
+ pyramid_request.feature.flags["group_type"] = group_type_flag
  mocker.spy(views, "get_csrf_token")
 
  controller = views.GroupCreateEditController(sentinel.context, pyramid_request)
@@ -22,7 +24,11 @@ def test_create(self, pyramid_request, assets_env, mocker):
  pyramid_request
  )
  assert result == {
- "page_title": "Create a new private group",
+ "page_title": (
+ "Create a new group"
+ if group_type_flag
+ else "Create a new private group"
+ ),
  "js_config": {
  "styles": assets_env.urls.return_value,
  "api": {
@@ -35,6 +41,9 @@ def test_create(self, pyramid_request, assets_env, mocker):
  }
  },
  "context": {"group": None},
+ "features": {
+ "group_type": group_type_flag,
+ },
  },
  }
 
@@ -88,6 +97,9 @@ def test_edit(
  "num_annotations": annotation_stats_service.total_group_annotation_count.return_value,
  }
  },
+ "features": {
+ "group_type": pyramid_request.feature.flags["group_type"],
+ },
  },
  }
 
@@ -100,6 +112,11 @@ def pyramid_config(self, pyramid_config, assets_env):
  pyramid_config.registry["assets_env"] = assets_env
  return pyramid_config
 
+ @pytest.fixture(autouse=True)
+ def pyramid_request(self, pyramid_request):
+ pyramid_request.feature.flags["group_type"] = True
+ return pyramid_request
+
 
 @pytest.mark.usefixtures("routes")
 def test_read_noslug_redirects(pyramid_request, factories):