Merge ~ilasc/launchpad:multiple-tracks-charm-recipe into launchpad:master

[Ioana Lasc]

Enable multiple tracks for a single charm recipe

[Colin Watson (cjwatson)]

This would probably deal with the API side, but another significant piece here is the web UI. In `lib/lp/snappy/browser/widgets/storechannels.py`, there's a field structure with single text lines for track and branch and a list of choices for risk, and `setRenderedValue` has a similar constraint on single tracks/branches. What's your plan for dealing with this? The UI will likely need to be rearranged in order to cope with more disparate channels, and I don't think we should land just the validation separately because any charm recipes that took advantage of it via the API would probably end up with a crashing or unusable web UI.

review: Needs Information

[Ioana Lasc (ilasc)]

Committed a stripped down version that shows only the new buttons to add rows with store channel data in a table above the StoreChannelWidget. Took out all the data parsing and the table and only left in the buttons as the current design suffers from a problem when attempting to submit the new store channel row: it submits the entire form and results in an "required input is missing" on the charm recipe name (unit test added to reflect this).

What we're trying to do here is different from the Git permissions view or the OCI Credentials view where the new row table is added by submitting the entire form. Here we would need a form inside a form to be able to add multiple rows before submitting the entire recipe creation form (https://chat.canonical.com/canonical/pl/79ec8q9gjideieczn7k8y9j83h).

[Ioana Lasc (ilasc)]

Still some layout things to work out for the Edit Charm Recipe screen but otherwise ready for a first review:

1: removing labels from the Risks widgets in the edit existing channels table - current method (setting the 'display_label' to false) fails to completely remove the label - semicolon still visible.

2: deciding on whether to make the existing channels table a subordinate or align it under "Automatically upload to store" ? Current layout suffers from the fact that it is now emphasizing the different spacing / alignment between the cells of the edit table and the subwidgets of the StoreChannelsWidget used to add a new widget.

3: Are we also allowing different branches as input to the same recipe ? (if not I need to add validation as it is currently possible to edit that way after which the screen crashes with "Channels belong to different branches")

Screenshot of current layout state:
https://chat.canonical.com/canonical/pl/cozosq98f7n89nzfsyjgb5pory

[Ioana Lasc (ilasc)]

Managed to remove the labels (issue 1 in comments above) and align everything in the table (issue 2) that leaves only the third issue as an open question for this.

Current layout of the screen:
https://chat.canonical.com/canonical/pl/h79gm5c4o7n38binpxc5kn637a

[Colin Watson (cjwatson)]

Make sure to rebase this onto master and run something like `pre-commit run --files $(git diff --name-only master)` to force all the `pre-commit` hooks to run on all the files you've changed, since you started this before we reformatted everything using `black`.

This is definitely looking better than the last time I reviewed it; sorry for taking so very long to get back to you! I have a few general comments which don't really fit into any one place.

Widget usage
============

The idea of widgets is to encapsulate common bits of web UI and form machinery that are used by multiple views - they essentially work like sub-views and are responsible for their own subtree of the HTML form data, rooted at whatever `self.name` says. One of the things you've done here is to pull much of the handling of store channels out of the widget and put it directly in the views and templates for charm recipes. I think that's the wrong direction. I realize that the particular bug you're working on here only talks about charm recipes, but where possible we should keep the two in sync.

Here's the rough design I'd like to see implemented here:

`StoreChannelsWidget`'s current job is to select a list of store channels. Its `setRenderedValue` method currently takes a list of channel strings and sets up a single set of track/risks/branch subwidgets to match (with risks being a multi-checkbox widget), while its `getInputValue` method looks at the HTML form data associated with those widgets and parses it back into a list of channel strings. Unless I've missed something, I believe that this basic contract can stay as it is.

Instead of just having three subwidgets, `StoreChannelsWidget` should now have track/risk/branch/delete subwidgets for each item in the context's `store_channels` list, plus a set of "add" subwidgets; those should be bound to something like `0.{track,risk,branch,delete}`, `1.{track,risk,branch,delete}`, etc. in the HTML form data. This would be much like what you've done in the charm recipe views, but pushed down into code that we can reuse across snap and charm recipes.

The template changes would go in `lib/lp/snappy/browser/widgets/templates/storechannels.pt`.

If done correctly, I think there's a good chance that the snap and charm recipe views and templates could remain entirely unchanged, although the view tests would need some minor adjustments for the new HTML form data structure. Most of the test changes, however, should be specific to the widget, and would go in `lp.snappy.browser.widgets.tests.test_storechannelswidget`.

UI layout
=========

The risk checkboxes are reasonably compact now, which is a definite improvement. However, I think we could do better.

Firstly, now that we have a structure that explicitly allows for selecting multiple channels, there isn't really a good reason to allow selecting multiple risks for each channel. As such, each "risks" field should be simply "risk", and it should be a radio button widget rather than a multi-checkbox widget.

Secondly, it would be well worth our time for the web UI to progressively enhance each "risk" radio button field into a pop-up choice selection widget if JavaScript is av...

review: Needs Fixing

[Ioana Lasc (ilasc)]

Thanks Colin!
Changes are now contained within the StoreChannelsWidget that is usable for Create & Edit Snap and Charm recipes and ready to be reviewed.
The layout issue (around widget labels) noted during pulse review is still on my To Do list for this but they might be easier to make once we get this to a functionally stable state.

[Colin Watson (cjwatson)]

review: Approve

[Ioana Lasc (ilasc)]

Thanks Colin!

By enforcing a default value on the Risk dropdown widget we caused the Edit Recipe (Snap & Charm) to add a new channel with the default risk (Edge) when the Update Recipe button is clicked. We need to give the user the ability to just edit existing channels on these edit forms, for this reason we want to allow the drop down to contain the "Nothing selected" option. This resulted in 2 types of validation necessary for the Add widgets row:
1: on the Add screens the Risk widget is required
2: on the Edit screens the Risk is required only if any of Track or Branch are filled in.

MP ready for another review.

[Colin Watson (cjwatson)]

Great. Just a few non-blocking remarks now, as far as I can see. Thanks!

review: Approve

diff --git a/lib/lp/app/templates/launchpad-widget-macros.pt b/lib/lp/app/templates/launchpad-widget-macros.pt
index f50f4fd..c25d6fc 100644
--- a/lib/lp/app/templates/launchpad-widget-macros.pt
+++ b/lib/lp/app/templates/launchpad-widget-macros.pt
@@ -28,12 +28,14 @@
             <div tal:attributes="class python:error and 'error' or None"
                  tal:define="error widget/error">
 
-              <label tal:attributes="for widget/name"
-                     tal:content="string:${widget/label}:">Label</label>
-
-              <span tal:condition="widget/required"
-                    class="fieldRequired"
-                    title="Required">(Required)</span>
+              <tal:label condition="display_label|widget/display_label|python:True">
+                <label tal:attributes="for widget/name"
+                       tal:content="string:${widget/label}:">Label</label>
+
+                <span tal:condition="widget/required"
+                      class="fieldRequired"
+                      title="Required">(Required)</span>
+              </tal:label>
 
               <div tal:content="structure widget">
                   <input type="text" style="width:100%"/>
diff --git a/lib/lp/charms/browser/tests/test_charmrecipe.py b/lib/lp/charms/browser/tests/test_charmrecipe.py
index 0a0a377..7db9c4c 100644
--- a/lib/lp/charms/browser/tests/test_charmrecipe.py
+++ b/lib/lp/charms/browser/tests/test_charmrecipe.py
@@ -325,8 +325,12 @@ class TestCharmRecipeAddView(BaseTestCharmRecipeView):
         browser.getControl("Automatically upload to store").selected = True
         browser.getControl("Registered store name").value = "charmhub-name"
         self.assertFalse(browser.getControl("Stable").selected)
-        browser.getControl(name="field.store_channels.track").value = "track"
-        browser.getControl("Edge").selected = True
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "track"
+        browser.getControl(name="field.store_channels.add_risk").value = [
+            "edge"
+        ]
         root_macaroon = Macaroon(version=2)
         root_macaroon.add_third_party_caveat(
             "https://candid.test/", "", "identity"
@@ -468,6 +472,80 @@ class TestCharmRecipeAddView(BaseTestCharmRecipeView):
             ),
         )
 
+    def test_create_new_recipe_multiple_tracks_missing_recipe_name(self):
+        # Missing charm recipe will result in error in browser
+        self.factory.makeProduct(
+            name="test-project", displayname="Test Project"
+        )
+        [git_ref] = self.factory.makeGitRefs()
+        view_url = canonical_url(git_ref, view_name="+new-charm-recipe")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(name="field.project").value = "test-project"
+        browser.getControl("Automatically upload to store").selected = True
+        browser.getControl("Registered store name").value = "charmhub-name"
+        self.assertFalse(browser.getControl("Stable").selected)
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "track"
+        browser.getControl("Edge").selected = True
+        browser.getControl(
+            name="field.store_channels.add_branch"
+        ).value = "branch"
+
+        browser.getControl("Create charm recipe").click()
+
+        self.assertIn("Required input is missing.", browser.contents)
+
+    def test_create_new_recipe_missing_channel_risk(self):
+        # No track or branch selected
+        self.factory.makeProduct(
+            name="test-project", displayname="Test Project"
+        )
+        [git_ref] = self.factory.makeGitRefs()
+        view_url = canonical_url(git_ref, view_name="+new-charm-recipe")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(name="field.project").value = "test-project"
+        browser.getControl("Automatically upload to store").selected = True
+        browser.getControl(name="field.name").value = "test-recipe-name"
+        browser.getControl("Registered store name").value = "charmhub-name"
+
+        browser.getControl("Create charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
+        # Entering only the track is not enough
+        view_url = canonical_url(git_ref, view_name="+new-charm-recipe")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(name="field.project").value = "test-project"
+        browser.getControl("Automatically upload to store").selected = True
+        browser.getControl(name="field.name").value = "test-recipe-name"
+        browser.getControl("Registered store name").value = "charmhub-name"
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "new-track"
+
+        browser.getControl("Create charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
+        # Entering only the track and branch will error
+        view_url = canonical_url(git_ref, view_name="+new-charm-recipe")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(name="field.project").value = "test-project"
+        browser.getControl("Automatically upload to store").selected = True
+        browser.getControl(name="field.name").value = "test-recipe-name"
+        browser.getControl("Registered store name").value = "charmhub-name"
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "new-track"
+        browser.getControl(
+            name="field.store_channels.add_branch"
+        ).value = "new-branch"
+
+        browser.getControl("Create charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
 
 class TestCharmRecipeAdminView(BaseTestCharmRecipeView):
     def test_unauthorized(self):
@@ -528,7 +606,10 @@ class TestCharmRecipeEditView(BaseTestCharmRecipeView):
     def test_edit_recipe(self):
         [old_git_ref] = self.factory.makeGitRefs()
         recipe = self.factory.makeCharmRecipe(
-            registrant=self.person, owner=self.person, git_ref=old_git_ref
+            registrant=self.person,
+            owner=self.person,
+            git_ref=old_git_ref,
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"],
         )
         self.factory.makeTeam(
             name="new-team", displayname="New Team", members=[self.person]
@@ -573,6 +654,241 @@ class TestCharmRecipeEditView(BaseTestCharmRecipeView):
             MatchesTagText(content, "store_upload"),
         )
 
+    @responses.activate
+    def test_edit_recipe_add_store_channel(self):
+        self.pushConfig("charms", charmhub_url="http://charmhub.example/")
+        self.pushConfig(
+            "launchpad",
+            candid_service_root="https://candid.test/",
+            csrf_secret="test secret",
+        )
+        [git_ref] = self.factory.makeGitRefs()
+        recipe = self.factory.makeCharmRecipe(
+            registrant=self.person,
+            owner=self.person,
+            git_ref=git_ref,
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"],
+            store_name="Store name",
+            store_upload=True,
+        )
+        self.factory.makeTeam(
+            name="new-team", displayname="New Team", members=[self.person]
+        )
+        view_url = canonical_url(recipe, view_name="+edit")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "new-track"
+        browser.getControl(
+            name="field.store_channels.add_branch"
+        ).value = "new-branch"
+        browser.getControl(name="field.store_channels.add_risk").value = [
+            "edge"
+        ]
+        root_macaroon = Macaroon(version=2)
+        root_macaroon.add_third_party_caveat(
+            "https://candid.test/", "", "identity"
+        )
+        root_macaroon_raw = root_macaroon.serialize(JsonSerializer())
+        responses.add(
+            "POST",
+            "http://charmhub.example/v1/tokens",
+            json={"macaroon": root_macaroon_raw},
+        )
+        responses.add(
+            "POST",
+            "https://candid.test/discharge",
+            status=401,
+            json={
+                "Code": "interaction required",
+                "Message": (
+                    "macaroon discharge required: authentication required"
+                ),
+                "Info": {
+                    "InteractionMethods": {
+                        "browser-redirect": {
+                            "LoginURL": "https://candid.test/login-redirect",
+                        },
+                    },
+                },
+            },
+        )
+
+        browser.getControl("Update charm recipe").click()
+
+        self.assertEqual(303, int(browser.headers["Status"].split(" ", 1)[0]))
+
+        browser = self.getViewBrowser(recipe, user=self.person)
+        content = find_main_content(browser.contents)
+        self.assertThat(
+            "Store channels:\n"
+            "track1/stable/branch1, "
+            "track2/edge/branch1, new-track/edge/new-branch"
+            "\nEdit charm recipe",
+            MatchesTagText(content, "store_channels"),
+        )
+
+    @responses.activate
+    def test_edit_recipe_edit_store_channel_list(self):
+        # Verify we can edit the first store channel defined for this recipe
+        # from "track1/stable/branch1" to "new-track/candidate/new-branch"
+        self.pushConfig("charms", charmhub_url="http://charmhub.example/")
+        self.pushConfig(
+            "launchpad",
+            candid_service_root="https://candid.test/",
+            csrf_secret="test secret",
+        )
+        [git_ref] = self.factory.makeGitRefs()
+        recipe = self.factory.makeCharmRecipe(
+            registrant=self.person,
+            owner=self.person,
+            git_ref=git_ref,
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"],
+            store_name="Store name",
+            store_upload=True,
+        )
+        self.factory.makeTeam(
+            name="new-team", displayname="New Team", members=[self.person]
+        )
+        view_url = canonical_url(recipe, view_name="+edit")
+        browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
+        browser.getControl(
+            name="field.store_channels.track_0"
+        ).value = "new-track"
+        browser.getControl(
+            name="field.store_channels.branch_0"
+        ).value = "new-branch"
+        browser.getControl(name="field.store_channels.risk_0").value = [
+            "candidate"
+        ]
+        root_macaroon = Macaroon(version=2)
+        root_macaroon.add_third_party_caveat(
+            "https://candid.test/", "", "identity"
+        )
+        root_macaroon_raw = root_macaroon.serialize(JsonSerializer())
+        responses.add(
+            "POST",
+            "http://charmhub.example/v1/tokens",
+            json={"macaroon": root_macaroon_raw},
+        )
+        responses.add(
+            "POST",
+            "https://candid.test/discharge",
+            status=401,
+            json={
+                "Code": "interaction required",
+                "Message": (
+                    "macaroon discharge required: authentication required"
+                ),
+                "Info": {
+                    "InteractionMethods": {
+                        "browser-redirect": {
+                            "LoginURL": "https://candid.test/login-redirect",
+                        },
+                    },
+                },
+            },
+        )
+
+        browser.getControl("Update charm recipe").click()
+
+        self.assertEqual(303, int(browser.headers["Status"].split(" ", 1)[0]))
+
+        browser = self.getViewBrowser(recipe, user=self.person)
+        content = find_main_content(browser.contents)
+        self.assertThat(
+            "Store channels:\n"
+            "new-track/candidate/new-branch, track2/edge/branch1"
+            "\nEdit charm recipe",
+            MatchesTagText(content, "store_channels"),
+        )
+
+    def test_edit_recipe_delete_store_channel_list(self):
+        # Verify we can edit the first store channel defined for this recipe
+        # from "track1/stable/branch1" to "new-track/candidate/new-branch"
+        [git_ref] = self.factory.makeGitRefs()
+        recipe = self.factory.makeCharmRecipe(
+            registrant=self.person,
+            owner=self.person,
+            git_ref=git_ref,
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"],
+            store_name="Store name",
+            store_upload=True,
+        )
+        self.factory.makeTeam(
+            name="new-team", displayname="New Team", members=[self.person]
+        )
+        browser = self.getViewBrowser(recipe, user=self.person)
+        browser.getLink("Edit charm recipe").click()
+        browser.getControl(name="field.store_channels.delete_0").value = 1
+
+        browser.getControl("Update charm recipe").click()
+
+        content = find_main_content(browser.contents)
+        self.assertThat(
+            "Store channels:\n" "track2/edge/branch1" "\nEdit charm recipe",
+            MatchesTagText(content, "store_channels"),
+        )
+
+    def test_edit_recipe_missing_channel_risk(self):
+        # On the edit form we can also add a new channel.
+        # The only valid combination for the
+        # new channel entry on this form are:
+        # 1: nothing selected - allows the user to edit existent channels,
+        # without adding a new empty channel row when pressing Update Recipe.
+        # 2: Risk selected and any combination of track / branch entered
+        [git_ref] = self.factory.makeGitRefs()
+        recipe = self.factory.makeCharmRecipe(
+            registrant=self.person,
+            owner=self.person,
+            git_ref=git_ref,
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"],
+            store_name="Store name",
+            store_upload=True,
+        )
+        self.factory.makeTeam(
+            name="new-team", displayname="New Team", members=[self.person]
+        )
+        browser = self.getViewBrowser(recipe, user=self.person)
+        browser.getLink("Edit charm recipe").click()
+
+        # If the user entered only Track for the new channel entry,
+        # ensure we error with missing Risk message.
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "new-track"
+
+        browser.getControl("Update charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
+        # If the user entered only Branch for the new channel entry,
+        # ensure we error with missing Risk message.
+        browser = self.getViewBrowser(recipe, user=self.person)
+        browser.getLink("Edit charm recipe").click()
+        browser.getControl(
+            name="field.store_channels.add_branch"
+        ).value = "new-branch"
+
+        browser.getControl("Update charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
+        # For Track and Branch entered but no Risk selected,
+        # ensure we error with missing Risk message.
+        browser = self.getViewBrowser(recipe, user=self.person)
+        browser.getLink("Edit charm recipe").click()
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "new-track"
+        browser.getControl(
+            name="field.store_channels.add_branch"
+        ).value = "new-branch"
+
+        browser.getControl("Update charm recipe").click()
+
+        self.assertIn("You must select a risk.", browser.contents)
+
     def test_edit_recipe_sets_date_last_modified(self):
         # Editing a charm recipe sets the date_last_modified property.
         date_created = datetime(2000, 1, 1, tzinfo=pytz.UTC)
diff --git a/lib/lp/charms/templates/charmrecipe-edit.pt b/lib/lp/charms/templates/charmrecipe-edit.pt
index 81172b8..a68bd40 100644
--- a/lib/lp/charms/templates/charmrecipe-edit.pt
+++ b/lib/lp/charms/templates/charmrecipe-edit.pt
@@ -11,6 +11,24 @@
   <style type="text/css">
     .subordinate {
       margin: 0.5em 0 0.5em 4em;
+      max-width: 80%;
+      margin-bottom: 1em;
+    }
+    table.subordinate tr.even {
+      background-color: #eee;
+    }
+    /* These add up to 100%. */
+    tr .channel-row-track {
+      width: 35%;
+    }
+    tr .channel-row-risk {
+      width: 25%;
+    }
+    tr .channel-row-branch {
+      width: 35%;
+    }
+    tr .channel-row-delete {
+      width: 5%;
     }
   </style>
 </metal:block>
@@ -55,8 +73,7 @@
               <tal:widget define="widget nocall:view/widgets/store_name">
                 <metal:block use-macro="context/@@launchpad_form/widget_row" />
               </tal:widget>
-              <tal:widget define="widget nocall:view/widgets/store_channels"
-                          condition="widget/has_risks_vocabulary">
+              <tal:widget define="widget nocall:view/widgets/store_channels">
                 <metal:block use-macro="context/@@launchpad_form/widget_row" />
               </tal:widget>
             </table>
diff --git a/lib/lp/charms/templates/charmrecipe-new.pt b/lib/lp/charms/templates/charmrecipe-new.pt
index f5e9a0a..6946d59 100644
--- a/lib/lp/charms/templates/charmrecipe-new.pt
+++ b/lib/lp/charms/templates/charmrecipe-new.pt
@@ -64,8 +64,7 @@
               <tal:widget define="widget nocall:view/widgets/store_name">
                 <metal:block use-macro="context/@@launchpad_form/widget_row" />
               </tal:widget>
-              <tal:widget define="widget nocall:view/widgets/store_channels"
-                          condition="widget/has_risks_vocabulary">
+              <tal:widget define="widget nocall:view/widgets/store_channels">
                 <metal:block use-macro="context/@@launchpad_form/widget_row" />
               </tal:widget>
             </table>
diff --git a/lib/lp/snappy/browser/tests/test_snap.py b/lib/lp/snappy/browser/tests/test_snap.py
index 10af3a1..4089efc 100644
--- a/lib/lp/snappy/browser/tests/test_snap.py
+++ b/lib/lp/snappy/browser/tests/test_snap.py
@@ -629,8 +629,12 @@ class TestSnapAddView(BaseTestSnapView):
             "Registered store package name"
         ).value = "store-name"
         self.assertFalse(browser.getControl("Stable").selected)
-        browser.getControl(name="field.store_channels.track").value = "track"
-        browser.getControl("Edge").selected = True
+        browser.getControl(
+            name="field.store_channels.add_track"
+        ).value = "track"
+        browser.getControl(name="field.store_channels.add_risk").value = [
+            "edge"
+        ]
         root_macaroon = Macaroon()
         root_macaroon.add_third_party_caveat(
             urlsplit(config.launchpad.openid_provider_root).netloc, "", "dummy"
@@ -1678,10 +1682,18 @@ class TestSnapEditView(BaseTestSnapView):
         view_url = canonical_url(snap, view_name="+edit")
         browser = self.getNonRedirectingBrowser(url=view_url, user=self.person)
         browser.getControl("Registered store package name").value = "two"
-        self.assertEqual("track", browser.getControl("Track").value)
-        self.assertTrue(browser.getControl("Edge").selected)
-        browser.getControl("Track").value = ""
-        browser.getControl("Stable").selected = True
+        self.assertEqual(
+            "track",
+            browser.getControl(name="field.store_channels.track_0").value,
+        )
+        self.assertEqual(
+            ["edge"],
+            browser.getControl(name="field.store_channels.risk_0").value,
+        )
+        browser.getControl(name="field.store_channels.track_0").value = ""
+        browser.getControl(name="field.store_channels.risk_0").value = [
+            "stable"
+        ]
         root_macaroon = Macaroon()
         root_macaroon.add_third_party_caveat(
             urlsplit(config.launchpad.openid_provider_root).netloc, "", "dummy"
@@ -1700,7 +1712,7 @@ class TestSnapEditView(BaseTestSnapView):
             MatchesStructure.byEquality(
                 store_name="two",
                 store_secrets={"root": root_macaroon_raw},
-                store_channels=["stable", "edge"],
+                store_channels=["stable"],
             ),
         )
         [call] = responses.calls
diff --git a/lib/lp/snappy/browser/widgets/storechannels.py b/lib/lp/snappy/browser/widgets/storechannels.py
index 271eac0..af23ff5 100644
--- a/lib/lp/snappy/browser/widgets/storechannels.py
+++ b/lib/lp/snappy/browser/widgets/storechannels.py
@@ -8,19 +8,14 @@ __all__ = [
 from zope.browserpage import ViewPageTemplateFile
 from zope.formlib.interfaces import IInputWidget, WidgetInputError
 from zope.formlib.utility import setUpWidget
-from zope.formlib.widget import (
-    BrowserWidget,
-    CustomWidgetFactory,
-    InputErrors,
-    InputWidget,
-)
+from zope.formlib.widget import BrowserWidget, InputErrors, InputWidget
 from zope.interface import implementer
-from zope.schema import Choice, List, TextLine
+from zope.schema import Bool, Choice, TextLine
 
-from lp import _
 from lp.app.errors import UnexpectedFormData
 from lp.app.validators import LaunchpadValidationError
-from lp.app.widgets.itemswidgets import LabeledMultiCheckBoxWidget
+from lp.charms.interfaces.charmrecipe import ICharmRecipe
+from lp.registry.enums import StoreRisk
 from lp.services.channels import (
     CHANNEL_COMPONENTS_DELIMITER,
     channel_list_to_string,
@@ -30,6 +25,7 @@ from lp.services.webapp.interfaces import (
     IAlwaysSubmittedWidget,
     ISingleLineWidgetLayout,
 )
+from lp.snappy.interfaces.snap import ISnap
 
 
 @implementer(ISingleLineWidgetLayout, IAlwaysSubmittedWidget, IInputWidget)
@@ -45,87 +41,125 @@ class StoreChannelsWidget(BrowserWidget, InputWidget):
         # disable help_text for the global widget
         self.hint = None
 
+    def _getFieldName(self, name, channel_index):
+        return "%s_%d" % (name, channel_index)
+
+    @property
+    def show_edit(self):
+        channels = getattr(self.context.context, "store_channels", None)
+        if channels and len(channels) >= 1:
+            return True
+        return False
+
+    @property
+    def is_edit(self):
+        # XXX ilasc 2022-10-10: Both this and is_add are layering violations
+        # that could make it difficult to reuse this widget in other contexts.
+        # These two checks will disappear when we move to the Javascript
+        # approach for adding a new row.
+        return bool(self.request.get("field.actions.update"))
+
+    @property
+    def is_add(self):
+        add_operation = self.request.get("field.actions.create")
+        with_upload = self.request.get("field.store_upload")
+        if add_operation and with_upload:
+            if with_upload == "on":
+                return True
+        return False
+
+    @property
+    def number_of_channels(self):
+        if ICharmRecipe.providedBy(self.context.context) or ISnap.providedBy(
+            self.context.context
+        ):
+            return len(self.context.context.store_channels)
+        return 0
+
     def setUpSubWidgets(self):
         if self._widgets_set_up:
             return
-        fields = [
-            TextLine(
-                __name__="track",
-                title="Track",
-                required=False,
-                description=_(
-                    "Track defines a series for your software. "
-                    "If not specified, the default track ('latest') is "
-                    "assumed."
+        fields = []
+        channels = getattr(self.context.context, "store_channels", None)
+        if channels:
+            for index in range(len(channels)):
+                fields.extend(
+                    [
+                        TextLine(
+                            __name__=self._getFieldName("track", index),
+                            required=False,
+                        ),
+                        Choice(
+                            __name__=self._getFieldName("risk", index),
+                            required=False,
+                            default=StoreRisk.EDGE,
+                            vocabulary="SnapStoreChannel",
+                        ),
+                        TextLine(
+                            __name__=self._getFieldName("branch", index),
+                            required=False,
+                        ),
+                        Bool(
+                            __name__=self._getFieldName("delete", index),
+                            required=False,
+                            default=False,
+                        ),
+                    ]
+                )
+        fields.extend(
+            [
+                TextLine(
+                    __name__="add_track",
+                    title="Track",
+                    required=False,
+                ),
+                Choice(
+                    __name__="add_risk",
+                    title="Risk",
+                    required=False,
+                    default=StoreRisk.EDGE,
+                    vocabulary="SnapStoreChannel",
                 ),
-            ),
-            List(
-                __name__="risks",
-                title="Risk",
-                required=False,
-                value_type=Choice(vocabulary="SnapStoreChannel"),
-                description=_("Risks denote the stability of your software."),
-            ),
-            TextLine(
-                __name__="branch",
-                title="Branch",
-                required=False,
-                description=_(
-                    "Branches provide users with an easy way to test bug "
-                    "fixes.  They are temporary and created on demand.  If "
-                    "not specified, no branch is used."
+                TextLine(
+                    __name__="add_branch",
+                    title="Branch",
+                    required=False,
                 ),
-            ),
-        ]
+            ]
+        )
 
-        self.risks_widget = CustomWidgetFactory(LabeledMultiCheckBoxWidget)
         for field in fields:
             setUpWidget(
                 self, field.__name__, field, IInputWidget, prefix=self.name
             )
-        self.risks_widget.orientation = "horizontal"
-        self._widgets_set_up = True
+            widget = getattr(self, "%s_widget" % field.__name__)
+            widget.display_label = False
+            widget.hint = None
 
-    @property
-    def has_risks_vocabulary(self):
-        risks_widget = getattr(self, "risks_widget", None)
-        return risks_widget and bool(risks_widget.vocabulary)
+        self._widgets_set_up = True
 
     def setRenderedValue(self, value):
         """See `IWidget`."""
         self.setUpSubWidgets()
         if value:
-            # NOTE: atm target channels must belong to the same track and
-            # branch
-            tracks = set()
-            branches = set()
-            risks = []
-            for channel in value:
-                track, risk, branch = channel_string_to_list(channel)
-                tracks.add(track)
-                risks.append(risk)
-                branches.add(branch)
-            if len(tracks) != 1:
-                raise ValueError(
-                    "Channels belong to different tracks: %r" % value
-                )
-            if len(branches) != 1:
-                raise ValueError(
-                    "Channels belong to different branches: %r" % value
-                )
-            track = tracks.pop()
-            self.track_widget.setRenderedValue(track)
-            self.risks_widget.setRenderedValue(risks)
-            branch = branches.pop()
-            self.branch_widget.setRenderedValue(branch)
+            for i in range(0, len(value)):
+                track, risk, branch = channel_string_to_list(value[i])
+                track_widget = getattr(self, "track_%s_widget" % i)
+                track_widget.setRenderedValue(track)
+                risk_widget = getattr(self, "risk_%s_widget" % i)
+                risk_widget.setRenderedValue(risk)
+                branch_widget = getattr(self, "branch_%s_widget" % i)
+                branch_widget.setRenderedValue(branch)
+                delete_widget = getattr(self, "delete_%s_widget" % i)
+                delete_widget.setRenderedValue(False)
         else:
-            self.track_widget.setRenderedValue(None)
-            self.risks_widget.setRenderedValue(None)
-            self.branch_widget.setRenderedValue(None)
+            self.add_track_widget.setRenderedValue(None)
+            self.add_risk_widget.setRenderedValue(None)
+            self.add_branch_widget.setRenderedValue(None)
 
     def hasInput(self):
         """See `IInputWidget`."""
-        return ("%s.risks" % self.name) in self.request.form
+        return ("%s.add_risk" % self.name) in self.request.form
 
     def hasValidInput(self):
         """See `IInputWidget`."""
@@ -137,12 +171,7 @@ class StoreChannelsWidget(BrowserWidget, InputWidget):
         except UnexpectedFormData:
             return False
 
-    def getInputValue(self):
-        """See `IInputWidget`."""
-        self.setUpSubWidgets()
-        track = self.track_widget.getInputValue()
-        risks = self.risks_widget.getInputValue()
-        branch = self.branch_widget.getInputValue()
+    def get_list(self, track, risk, branch, operation):
         if track and CHANNEL_COMPONENTS_DELIMITER in track:
             error_msg = "Track name cannot include '%s'." % (
                 CHANNEL_COMPONENTS_DELIMITER
@@ -157,10 +186,53 @@ class StoreChannelsWidget(BrowserWidget, InputWidget):
             raise WidgetInputError(
                 self.name, self.label, LaunchpadValidationError(error_msg)
             )
-        channels = [
-            channel_list_to_string(track, risk, branch) for risk in risks
-        ]
-        return channels
+        if not risk:
+            error_msg = "You must select a risk."
+            if operation == "add":
+                raise WidgetInputError(
+                    "add_risk_widget",
+                    self.label,
+                    LaunchpadValidationError(error_msg),
+                )
+            if operation == "edit":
+                if track or branch:
+                    raise WidgetInputError(
+                        "add_risk_widget",
+                        self.label,
+                        LaunchpadValidationError(error_msg),
+                    )
+        return channel_list_to_string(track, risk, branch)
+
+    def getInputValue(self):
+        """See `IInputWidget`."""
+        self.setUpSubWidgets()
+        store_channels = []
+        track = self.add_track_widget.getInputValue()
+        risk = self.add_risk_widget.getInputValue()
+        branch = self.add_branch_widget.getInputValue()
+        add_row = None
+        if self.is_edit:
+            add_row = self.get_list(track, risk, branch, "edit")
+            for index in range(len(self.context.context.store_channels)):
+                track = getattr(
+                    self, "track_%s_widget" % index
+                ).getInputValue()
+                risk = getattr(self, "risk_%s_widget" % index).getInputValue()
+                branch = getattr(
+                    self, "branch_%s_widget" % index
+                ).getInputValue()
+                delete = getattr(
+                    self, "delete_%s_widget" % index
+                ).getInputValue()
+                if not delete:
+                    store_channels.append(
+                        self.get_list(track, risk, branch, "edit")
+                    )
+        if self.is_add:
+            add_row = self.get_list(track, risk, branch, "add")
+        if add_row:
+            store_channels.append(add_row)
+        return store_channels
 
     def error(self):
         """See `IBrowserWidget`."""
diff --git a/lib/lp/snappy/browser/widgets/templates/storechannels.pt b/lib/lp/snappy/browser/widgets/templates/storechannels.pt
index ade718a..248f33c 100644
--- a/lib/lp/snappy/browser/widgets/templates/storechannels.pt
+++ b/lib/lp/snappy/browser/widgets/templates/storechannels.pt
@@ -18,38 +18,76 @@
     </td>
   </tr>
   <tr>
-    <td>
-      <table class="subordinate">
+    <table class="listing subordinate">
+      <thead>
         <tr>
-          <td>
-            <tal:widget define="widget nocall:view/risks_widget"
-                        condition="widget/context/value_type/vocabulary">
-              <metal:block
-                use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
-            </tal:widget>
-          </td>
+          <th class="channel-row-track">Track</th>
+          <th class="channel-row-risk">Risk</th>
+          <th class="channel-row-branch">Branch</th>
+          <th class="channel-row-delete">Delete?</th>
         </tr>
-        <tr>
-          <td>
-            <tal:widget define="widget nocall:view/track_widget">
-              <metal:block
-                  use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
-            </tal:widget>
-            <p class="formHelp">
+      </thead>
+      <tbody>
+        <tal:channel tal:condition="view/show_edit" repeat="channel view/context/context/store_channels">
+          <tal:channel_widgets
+              define="parity python:'even' if repeat['channel'].even() else 'odd';
+                      edit_track string:track_${repeat/channel/index}_widget;
+                      edit_branch string:branch_${repeat/channel/index}_widget;
+                      edit_risk string:risk_${repeat/channel/index}_widget;
+                      delete string:delete_${repeat/channel/index}_widget">
+            <tr tal:attributes="class string:channel-row ${parity}">
+              <td class="channel-row-track"
+                  tal:define="widget nocall:view/?edit_track">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </td>
+              <td class="channel-row-risk"
+                  tal:define="widget nocall:view/?edit_risk">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </td>
+              <td class="channel-row-branch"
+                  tal:define="widget nocall:view/?edit_branch">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </td>
+              <td class="channel-row-delete"
+                  tal:define="widget nocall:view/?delete">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </td>
+            </tr>
+          </tal:channel_widgets>
+        </tal:channel>
+        <tal:new-channel
+            define="parity python:'odd' if view.number_of_channels % 2 else 'even'">
+          <tr tal:attributes="class string:channel-row ${parity}">
+            <td class="channel-row-track">
+              <tal:widget define="widget nocall:view/add_track_widget">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </tal:widget>
+              <p class="formHelp">
                 To open a new track, <a href="https://snapcraft.io/community">ask the store admins</a>.
-            </p>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <tal:widget define="widget nocall:view/branch_widget">
-              <metal:block
-                  use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
-            </tal:widget>
-          </td>
-        </tr>
-      </table>
-    </td>
+              </p>
+            </td>
+            <td class="channel-row-risk">
+              <tal:widget define="widget nocall:view/add_risk_widget">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </tal:widget>
+            </td>
+            <td class="channel-row-branch">
+              <tal:widget define="widget nocall:view/add_branch_widget">
+                <metal:block
+                    use-macro="context/@@launchpad_widget_macros/launchpad_widget_row" />
+              </tal:widget>
+            </td>
+            <td class="channel-row-delete" />
+          </tr>
+        </tal:new-channel>
+      </tbody>
+    </table>
   </tr>
 </table>
 
diff --git a/lib/lp/snappy/browser/widgets/tests/test_storechannelswidget.py b/lib/lp/snappy/browser/widgets/tests/test_storechannelswidget.py
index 83d42be..0acdca7 100644
--- a/lib/lp/snappy/browser/widgets/tests/test_storechannelswidget.py
+++ b/lib/lp/snappy/browser/widgets/tests/test_storechannelswidget.py
@@ -16,239 +16,285 @@ from lp.services.beautifulsoup import BeautifulSoup
 from lp.services.webapp.escaping import html_escape
 from lp.services.webapp.servers import LaunchpadTestRequest
 from lp.snappy.browser.widgets.storechannels import StoreChannelsWidget
-from lp.snappy.vocabularies import SnapStoreChannelVocabulary
 from lp.testing import TestCaseWithFactory, verifyObject
 from lp.testing.layers import DatabaseFunctionalLayer
 
 
 class TestStoreChannelsWidget(TestCaseWithFactory):
-
     layer = DatabaseFunctionalLayer
 
     def setUp(self):
         super().setUp()
         field = List(__name__="channels", title="Store channels")
-        self.context = self.factory.makeSnap()
-        field = field.bind(self.context)
+        self.new_snap = self.factory.makeSnap(store_channels=[])
+        field = field.bind(self.new_snap)
         request = LaunchpadTestRequest()
-        self.widget = StoreChannelsWidget(field, None, request)
+        self.new_widget = StoreChannelsWidget(field, None, request)
+
+        self.edit_snap = self.factory.makeSnap(
+            store_channels=["track1/stable/branch1", "track2/edge/branch1"]
+        )
+        field = field.bind(self.edit_snap)
+        self.edit_widget = StoreChannelsWidget(field, None, request)
 
     def test_implements(self):
-        self.assertTrue(verifyObject(IBrowserWidget, self.widget))
-        self.assertTrue(verifyObject(IInputWidget, self.widget))
+        self.assertTrue(verifyObject(IBrowserWidget, self.new_widget))
+        self.assertTrue(verifyObject(IInputWidget, self.new_widget))
 
     def test_template(self):
         self.assertTrue(
-            self.widget.template.filename.endswith("storechannels.pt"),
+            self.new_widget.template.filename.endswith("storechannels.pt"),
             "Template was not set up.",
         )
 
     def test_setUpSubWidgets_first_call(self):
         # The subwidgets are set up and a flag is set.
-        self.widget.setUpSubWidgets()
-        self.assertTrue(self.widget._widgets_set_up)
-        self.assertIsNotNone(getattr(self.widget, "track_widget", None))
-        self.assertIsInstance(
-            self.widget.risks_widget.vocabulary, SnapStoreChannelVocabulary
+        self.new_widget.setUpSubWidgets()
+        self.assertTrue(self.new_widget._widgets_set_up)
+        self.assertIsNotNone(
+            getattr(self.new_widget, "add_track_widget", None)
+        )
+        self.assertIsNotNone(
+            getattr(self.new_widget, "add_branch_widget", None)
         )
-        self.assertTrue(self.widget.has_risks_vocabulary)
-        self.assertIsNotNone(getattr(self.widget, "branch_widget", None))
 
     def test_setUpSubWidgets_second_call(self):
         # The setUpSubWidgets method exits early if a flag is set to
         # indicate that the widgets were set up.
-        self.widget._widgets_set_up = True
-        self.widget.setUpSubWidgets()
-        self.assertIsNone(getattr(self.widget, "track_widget", None))
-        self.assertIsNone(getattr(self.widget, "risks_widget", None))
-        self.assertIsNone(getattr(self.widget, "branch_widget", None))
-        self.assertIsNone(self.widget.has_risks_vocabulary)
+        self.new_widget._widgets_set_up = True
+        self.new_widget.setUpSubWidgets()
+        self.assertIsNone(getattr(self.new_widget, "add_track_widget", None))
+        self.assertIsNone(getattr(self.new_widget, "add_risk_widget", None))
+        self.assertIsNone(getattr(self.new_widget, "add_branch_widget", None))
 
     def test_setRenderedValue_empty(self):
-        self.widget.setRenderedValue([])
-        self.assertIsNone(self.widget.track_widget._getCurrentValue())
-        self.assertIsNone(self.widget.risks_widget._getCurrentValue())
+        self.new_widget.setRenderedValue([])
+        self.assertIsNone(self.new_widget.add_track_widget._getCurrentValue())
+        self.assertIsNone(self.new_widget.add_risk_widget._getCurrentValue())
 
     def test_setRenderedValue_no_track_or_branch(self):
-        # Channels do not include a track or branch
-        risks = ["candidate", "edge"]
-        self.widget.setRenderedValue(risks)
-        self.assertIsNone(self.widget.track_widget._getCurrentValue())
-        self.assertEqual(risks, self.widget.risks_widget._getCurrentValue())
-        self.assertIsNone(self.widget.branch_widget._getCurrentValue())
+        # Channel does not include a track or branch
+        channels = ["/edge/"]
+        self.edit_widget.setRenderedValue(channels)
+        self.assertIsNone(self.edit_widget.add_track_widget._getCurrentValue())
+        self.assertEqual(
+            StoreRisk.EDGE, self.edit_widget.add_risk_widget._getCurrentValue()
+        )
+        self.assertIsNone(
+            self.edit_widget.add_branch_widget._getCurrentValue()
+        )
 
     def test_setRenderedValue_with_track(self):
         # Channels including a track
         channels = ["2.2/candidate", "2.2/edge"]
-        self.widget.setRenderedValue(channels)
-        self.assertEqual("2.2", self.widget.track_widget._getCurrentValue())
+        self.edit_widget.setRenderedValue(channels)
         self.assertEqual(
-            ["candidate", "edge"], self.widget.risks_widget._getCurrentValue()
+            "2.2", self.edit_widget.track_0_widget._getCurrentValue()
         )
-        self.assertIsNone(self.widget.branch_widget._getCurrentValue())
+        self.assertEqual(
+            "candidate", self.edit_widget.risk_0_widget._getCurrentValue()
+        )
+        self.assertIsNone(self.edit_widget.branch_0_widget._getCurrentValue())
+
+        self.assertEqual(
+            "2.2", self.edit_widget.track_1_widget._getCurrentValue()
+        )
+        self.assertEqual(
+            "edge", self.edit_widget.risk_1_widget._getCurrentValue()
+        )
+        self.assertIsNone(self.edit_widget.branch_1_widget._getCurrentValue())
 
     def test_setRenderedValue_with_branch(self):
         # Channels including a branch
         channels = ["candidate/fix-123", "edge/fix-123"]
-        self.widget.setRenderedValue(channels)
-        self.assertIsNone(self.widget.track_widget._getCurrentValue())
+        self.edit_widget.setRenderedValue(channels)
+        self.assertIsNone(self.edit_widget.track_0_widget._getCurrentValue())
+        self.assertEqual(
+            "candidate", self.edit_widget.risk_0_widget._getCurrentValue()
+        )
+        self.assertEqual(
+            "fix-123", self.edit_widget.branch_0_widget._getCurrentValue()
+        )
+
+        self.assertIsNone(self.edit_widget.track_1_widget._getCurrentValue())
         self.assertEqual(
-            ["candidate", "edge"], self.widget.risks_widget._getCurrentValue()
+            "edge", self.edit_widget.risk_1_widget._getCurrentValue()
         )
         self.assertEqual(
-            "fix-123", self.widget.branch_widget._getCurrentValue()
+            "fix-123", self.edit_widget.branch_1_widget._getCurrentValue()
         )
 
     def test_setRenderedValue_with_track_and_branch(self):
         # Channels including a track and branch
         channels = ["2.2/candidate/fix-123", "2.2/edge/fix-123"]
-        self.widget.setRenderedValue(channels)
-        self.assertEqual("2.2", self.widget.track_widget._getCurrentValue())
+        self.edit_widget.setRenderedValue(channels)
+        self.assertEqual(
+            "2.2", self.edit_widget.track_0_widget._getCurrentValue()
+        )
+        self.assertEqual(
+            "candidate", self.edit_widget.risk_0_widget._getCurrentValue()
+        )
+        self.assertEqual(
+            "fix-123", self.edit_widget.branch_0_widget._getCurrentValue()
+        )
         self.assertEqual(
-            ["candidate", "edge"], self.widget.risks_widget._getCurrentValue()
+            "2.2", self.edit_widget.track_1_widget._getCurrentValue()
         )
         self.assertEqual(
-            "fix-123", self.widget.branch_widget._getCurrentValue()
+            "edge", self.edit_widget.risk_1_widget._getCurrentValue()
+        )
+        self.assertEqual(
+            "fix-123", self.edit_widget.branch_1_widget._getCurrentValue()
         )
 
     def test_setRenderedValue_invalid_value(self):
-        # Multiple channels, different tracks or branches, unsupported
-        self.assertRaisesWithContent(
-            ValueError,
-            "Channels belong to different tracks: "
-            "['2.2/candidate', '2.1/edge']",
-            self.widget.setRenderedValue,
-            ["2.2/candidate", "2.1/edge"],
-        )
-        self.assertRaisesWithContent(
-            ValueError,
-            "Channels belong to different branches: "
-            "['candidate/fix-123', 'edge/fix-124']",
-            self.widget.setRenderedValue,
-            ["candidate/fix-123", "edge/fix-124"],
-        )
-        self.assertRaisesWithContent(
-            ValueError,
-            "Channels belong to different tracks: "
-            "['2.2/candidate', 'edge/fix-123']",
-            self.widget.setRenderedValue,
-            ["2.2/candidate", "edge/fix-123"],
+        # We allow multiple channels, different tracks or branches.
+        # We don't raise ValueError exceptions on these.
+        self.edit_widget.setRenderedValue(["2.2/candidate", "2.1/edge"])
+        self.edit_widget.setRenderedValue(
+            ["candidate/fix-123", "edge/fix-124"]
         )
+        self.edit_widget.setRenderedValue(["2.2/candidate", "edge/fix-123"])
 
     def test_hasInput_false(self):
         # hasInput is false when there is no risk set in the form data.
-        self.widget.request = LaunchpadTestRequest(
+        self.new_widget.request = LaunchpadTestRequest(
             form={"field.channels.track": "track"}
         )
-        self.assertFalse(self.widget.hasInput())
+        self.assertFalse(self.new_widget.hasInput())
 
     def test_hasInput_true(self):
         # hasInput is true if there are risks set in the form data.
-        self.widget.request = LaunchpadTestRequest(
-            form={"field.channels.risks": ["beta"]}
+        self.new_widget.request = LaunchpadTestRequest(
+            form={"field.channels.add_risk": ["beta"]}
         )
-        self.assertTrue(self.widget.hasInput())
+        self.assertTrue(self.new_widget.hasInput())
 
     def test_hasValidInput_false(self):
         # The field input is invalid if any of the submitted parts are
         # invalid.
         form = {
-            "field.channels.track": "",
-            "field.channels.risks": ["invalid"],
-            "field.channels.branch": "",
+            "field.channels.add_track": "",
+            "field.channels.add_risk": ["invalid"],
+            "field.channels.add_branch": "",
         }
-        self.widget.request = LaunchpadTestRequest(form=form)
-        self.assertFalse(self.widget.hasValidInput())
+        self.new_widget.request = LaunchpadTestRequest(form=form)
+        self.assertFalse(self.new_widget.hasValidInput())
 
     def test_hasValidInput_true(self):
+        field = List(__name__="channels", title="Store channels")
+        self.context = self.new_snap
+        field.bind(self.context)
+
         # The field input is valid when all submitted parts are valid.
         form = {
-            "field.channels.track": "track",
-            "field.channels.risks": ["stable", "beta"],
-            "field.channels.branch": "branch",
+            "field.channels.add_track": "track",
+            "field.channels.add_risk": "stable",
+            "field.channels.add_branch": "branch",
         }
-        self.widget.request = LaunchpadTestRequest(form=form)
-        self.assertTrue(self.widget.hasValidInput())
+
+        request = LaunchpadTestRequest(form=form)
+        self.new_widget = StoreChannelsWidget(field, None, request)
+        self.assertTrue(self.new_widget.hasValidInput())
 
     def assertGetInputValueError(self, form, message):
-        self.widget.request = LaunchpadTestRequest(form=form)
-        e = self.assertRaises(WidgetInputError, self.widget.getInputValue)
+        extra = {
+            "field.actions.create": "Create snap package",
+            "field.store_upload": "on",
+        }
+        self.new_widget.request = LaunchpadTestRequest(form=form, **extra)
+        e = self.assertRaises(WidgetInputError, self.new_widget.getInputValue)
         self.assertEqual(LaunchpadValidationError(message), e.errors)
-        self.assertEqual(html_escape(message), self.widget.error())
+        self.assertEqual(html_escape(message), self.new_widget.error())
 
     def test_getInputValue_invalid_track(self):
         # An error is raised when the track includes a '/'.
         form = {
-            "field.channels.track": "tra/ck",
-            "field.channels.risks": ["beta"],
-            "field.channels.branch": "",
+            "field.channels.add_track": "tra/ck",
+            "field.channels.add_risk": "beta",
+            "field.channels.add_branch": "",
         }
         self.assertGetInputValueError(form, "Track name cannot include '/'.")
 
     def test_getInputValue_invalid_branch(self):
         # An error is raised when the branch includes a '/'.
         form = {
-            "field.channels.track": "",
-            "field.channels.risks": ["beta"],
-            "field.channels.branch": "bra/nch",
+            "field.channels.add_track": "",
+            "field.channels.add_risk": "beta",
+            "field.channels.add_branch": "bra/nch",
         }
         self.assertGetInputValueError(form, "Branch name cannot include '/'.")
 
     def test_getInputValue_no_track_or_branch(self):
-        self.widget.request = LaunchpadTestRequest(
-            form={
-                "field.channels.track": "",
-                "field.channels.risks": ["beta", "edge"],
-                "field.channels.branch": "",
-            }
-        )
-        expected = ["beta", "edge"]
-        self.assertEqual(expected, self.widget.getInputValue())
+        form = {
+            "field.channels.add_track": "",
+            "field.channels.add_risk": "edge",
+            "field.channels.add_branch": "",
+        }
+        extra = {
+            "field.actions.create": "Create snap package",
+            "field.store_upload": "on",
+        }
+        self.new_widget.request = LaunchpadTestRequest(form=form, **extra)
+        expected = ["edge"]
+        self.assertEqual(expected, self.new_widget.getInputValue())
 
     def test_getInputValue_with_track(self):
-        self.widget.request = LaunchpadTestRequest(
-            form={
-                "field.channels.track": "track",
-                "field.channels.risks": ["beta", "edge"],
-                "field.channels.branch": "",
-            }
-        )
-        expected = ["track/beta", "track/edge"]
-        self.assertEqual(expected, self.widget.getInputValue())
+        form = {
+            "field.channels.add_track": "track",
+            "field.channels.add_risk": "beta",
+            "field.channels.add_branch": "",
+        }
+        extra = {
+            "field.actions.create": "Create snap package",
+            "field.store_upload": "on",
+        }
+        self.new_widget.request = LaunchpadTestRequest(form=form, **extra)
+        expected = ["track/beta"]
+        self.assertEqual(expected, self.new_widget.getInputValue())
 
     def test_getInputValue_with_branch(self):
-        self.widget.request = LaunchpadTestRequest(
-            form={
-                "field.channels.track": "",
-                "field.channels.risks": ["beta", "edge"],
-                "field.channels.branch": "fix-123",
-            }
-        )
-        expected = ["beta/fix-123", "edge/fix-123"]
-        self.assertEqual(expected, self.widget.getInputValue())
+        form = {
+            "field.channels.add_track": "",
+            "field.channels.add_risk": "beta",
+            "field.channels.add_branch": "fix-123",
+        }
+        extra = {
+            "field.actions.create": "Create snap package",
+            "field.store_upload": "on",
+        }
+        self.new_widget.request = LaunchpadTestRequest(form=form, **extra)
+        expected = ["beta/fix-123"]
+        self.assertEqual(expected, self.new_widget.getInputValue())
 
     def test_getInputValue_with_track_and_branch(self):
-        self.widget.request = LaunchpadTestRequest(
-            form={
-                "field.channels.track": "track",
-                "field.channels.risks": ["beta", "edge"],
-                "field.channels.branch": "fix-123",
-            }
-        )
-        expected = ["track/beta/fix-123", "track/edge/fix-123"]
-        self.assertEqual(expected, self.widget.getInputValue())
+        form = {
+            "field.channels.add_track": "track",
+            "field.channels.add_risk": "beta",
+            "field.channels.add_branch": "fix-123",
+        }
+        extra = {
+            "field.actions.create": "Create snap package",
+            "field.store_upload": "on",
+        }
+        self.new_widget.request = LaunchpadTestRequest(form=form, **extra)
+        expected = ["track/beta/fix-123"]
+        self.assertEqual(expected, self.new_widget.getInputValue())
 
     def test_call(self):
         # The __call__ method sets up the widgets.
-        markup = self.widget()
-        self.assertIsNotNone(self.widget.track_widget)
-        self.assertIsNotNone(self.widget.risks_widget)
+        markup = self.new_widget()
+        self.assertIsNotNone(self.new_widget.add_track_widget)
+        self.assertIsNotNone(self.new_widget.add_risk_widget)
+        self.assertIsNotNone(self.new_widget.add_branch_widget)
+
         soup = BeautifulSoup(markup)
-        fields = soup.find_all(["input"], {"id": re.compile(".*")})
+        fields = soup.find_all(["input", "select"], {"id": re.compile(".*")})
         expected_ids = [
-            "field.channels.risks.%d" % i for i in range(len(StoreRisk))
+            "field.channels.add_risk",
+            "field.channels.add_track",
+            "field.channels.add_branch",
         ]
-        expected_ids.append("field.channels.track")
-        expected_ids.append("field.channels.branch")
+
         ids = [field["id"] for field in fields]
         self.assertContentEqual(expected_ids, ids)
diff --git a/lib/lp/snappy/templates/snap-edit.pt b/lib/lp/snappy/templates/snap-edit.pt
index eb9bc9e..ad92312 100644
--- a/lib/lp/snappy/templates/snap-edit.pt
+++ b/lib/lp/snappy/templates/snap-edit.pt
@@ -11,6 +11,24 @@
   <style type="text/css">
     .subordinate {
       margin: 0.5em 0 0.5em 4em;
+      max-width: 80%;
+      margin-bottom: 1em;
+    }
+    table.subordinate tr.even {
+      background-color: #eee;
+    }
+    /* These add up to 100%. */
+    tr .channel-row-track {
+      width: 35%;
+    }
+    tr .channel-row-risk {
+      width: 25%;
+    }
+    tr .channel-row-branch {
+      width: 35%;
+    }
+    tr .channel-row-delete {
+      width: 5%;
     }
   </style>
 </metal:block>
@@ -99,8 +117,7 @@
                 <tal:widget define="widget nocall:view/widgets/store_name">
                   <metal:block use-macro="context/@@launchpad_form/widget_row" />
                 </tal:widget>
-                <tal:widget define="widget nocall:view/widgets/store_channels"
-                            condition="widget/has_risks_vocabulary">
+                <tal:widget define="widget nocall:view/widgets/store_channels">
                   <metal:block use-macro="context/@@launchpad_form/widget_row" />
                 </tal:widget>
               </table>
diff --git a/lib/lp/snappy/templates/snap-new.pt b/lib/lp/snappy/templates/snap-new.pt
index 480d51c..29e8f64 100644
--- a/lib/lp/snappy/templates/snap-new.pt
+++ b/lib/lp/snappy/templates/snap-new.pt
@@ -112,8 +112,7 @@
                 <tal:widget define="widget nocall:view/widgets/store_name">
                   <metal:block use-macro="context/@@launchpad_form/widget_row" />
                 </tal:widget>
-                <tal:widget define="widget nocall:view/widgets/store_channels"
-                            condition="widget/has_risks_vocabulary">
+                <tal:widget define="widget nocall:view/widgets/store_channels">
                   <metal:block use-macro="context/@@launchpad_form/widget_row" />
                 </tal:widget>
               </table>
diff --git a/lib/lp/snappy/validators/channels.py b/lib/lp/snappy/validators/channels.py
index 07757d9..811667c 100644
--- a/lib/lp/snappy/validators/channels.py
+++ b/lib/lp/snappy/validators/channels.py
@@ -29,15 +29,4 @@ def channels_validator(channels):
         tracks.add(track)
         branches.add(branch)
 
-    # XXX cjwatson 2018-05-08: These are slightly arbitrary restrictions,
-    # but they make the UI much simpler.
-
-    if len(tracks) != 1:
-        message = _("Channels must belong to the same track.")
-        raise LaunchpadValidationError(structured(message))
-
-    if len(branches) != 1:
-        message = _("Channels must belong to the same branch.")
-        raise LaunchpadValidationError(structured(message))
-
     return True
diff --git a/lib/lp/snappy/validators/tests/test_channels.py b/lib/lp/snappy/validators/tests/test_channels.py
index 61e160f..a9d9e5e 100644
--- a/lib/lp/snappy/validators/tests/test_channels.py
+++ b/lib/lp/snappy/validators/tests/test_channels.py
@@ -20,18 +20,10 @@ class TestChannelsValidator(TestCaseWithFactory):
         self.assertTrue(channels_validator(["beta", "edge"]))
 
     def test_channels_validator_multiple_tracks(self):
-        self.assertRaises(
-            LaunchpadValidationError,
-            channels_validator,
-            ["1.1/stable", "2.1/edge"],
-        )
+        self.assertTrue(channels_validator(["1.1/stable", "2.1/edge"]))
 
     def test_channels_validator_multiple_branches(self):
-        self.assertRaises(
-            LaunchpadValidationError,
-            channels_validator,
-            ["stable/fix-123", "edge/fix-124"],
-        )
+        self.assertTrue(channels_validator(["stable/fix-123", "edge/fix-124"]))
 
     def test_channels_validator_invalid_channel(self):
         self.assertRaises(