497 edit page related external links #2490

davidtrussler · 2025-01-09T12:00:57Z

This gives the user the ability to add/delete/edit external links to a document. It uses the Add another component, which provides a different UI in JavaScript and non-JavaScript scenarios (shown below).

One aspect of the Acceptance Criteria that is not covered so far is to display an error message when both the "Title" and "URL" fields are blank: it continues to follow the current behaviour of displaying a success message while not saving the changes. This proved problematic because in a non-JS scenario it is in fact acceptable to submit empty fields because these are always provided by the component and may not be used.

View	JS disabled	JS enabled
On page load: document has no existing external links
"Add another link" clicked
"Delete" clicked
"Delete" clicked
"Saved" clicked

- for hidden field tag - for bold labels

ellohez

LGTM! Just one tiny comment

ellohez · 2025-01-10T12:24:24Z

app/helpers/tabbed_nav_helper.rb

@@ -23,6 +23,8 @@ def current_tab_name
      "unpublish"
    when "admin"
      "admin"
+    when "related_external_links"
+      "linking"


Might just be me but the name 'linking' seems a little different to the other tabs. Would 'external_links' be more in keeping with the other tab names and match up more with the name of the property in the Artefact model?

Might just be me but the name 'linking' seems a little different to the other tabs. Would 'external_links' be more in keeping with the other tab names and match up more with the name of the property in the Artefact model?

Yeah that's been bugging me a bit since the start. I took the name from the routes file that appears to redirect related_external_links in the URL to linking in the views but I have no idea why. Happy to hear further opinions on that though.

I guess we can use whatever we want here, as it's not really user-visible. So long as we make sure we update all the places that might reference it.

I've changed linking to related_external_links in all appropriate places. I think it reads better like that.

mtaylorgds

When the external links are invalid, the invalid values are not persisted in the text boxes, the text boxes are simply populated with whatever the currently-saved external links are. This appears to be the existing behaviour…not sure whether we are happy to keep this behaviour for now?

On my machine, the delete button has no space above it:

mtaylorgds · 2025-01-10T10:01:00Z

app/assets/stylesheets/application.scss

@@ -4,6 +4,7 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/govuk_frontend_support';
 @import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/button';
+@import 'govuk_publishing_components/components/add-another';


Very minor, but could we move this up a line to retain alphabetical ordering?

That would make sense but I found that some styles for the gem-c-add-another__remove-button class get over-written by the generic button styles when they are in that order. That seems to explain the spacing issue you have noted elsewhere WRT the delete button as well. It does seem a little bit unsatisfactory though so I wonder if we should make a change to the component stylesheet to fix this because I should think it's bound to happen again somewhere else.

mtaylorgds · 2025-01-10T10:15:07Z

test/functional/editions_controller_test.rb

+      assert_equal "External links is invalid", flash[:danger]
+    end
+
+    should "update related external links and display a success message when succesfully saved" do


Typo in "succesfully".

mtaylorgds · 2025-01-10T10:17:40Z

test/functional/editions_controller_test.rb

+        },
+      }
+
+      artefact.reload


Suggested change

artefact.reload

I don't think this reload is required, since we're not checking the artefact (and we also wouldn't need the first line either then).

mtaylorgds · 2025-01-10T10:18:34Z

test/functional/editions_controller_test.rb

+        },
+      }
+
+      artefact.reload


Suggested change

artefact.reload

Same as above.

mtaylorgds · 2025-01-10T10:40:13Z

test/functional/editions_controller_test.rb

+        },
+      }
+
+      artefact.reload


Suggested change

artefact.reload

Same again.

mtaylorgds · 2025-01-10T10:45:29Z

app/controllers/editions_controller.rb

+        flash[:danger] = artefact.errors.full_messages.join("\n")
+      end
+    else
+      flash[:danger] = "There aren't any external related links yet"


I can't find a test for this branch?

Hmm, yes, that's a good point. I've added a test but it might need more thinking about because that scenario never occurs with the new interface because it always presents the user with fields even if they are left blank (there's no equivalent to this in the legacy version). Maybe that whole branch isn't really necessary any more. This also relates to the problem of validating the two blank fields which currently doesn't happen but returns a success message even though nothing has changed. 🤔

mtaylorgds · 2025-01-10T12:14:09Z

test/integration/edition_edit_test.rb

+    end
+  end
+
+  without_javascript do


This breaks the pattern used elsewhere in the integration tests, where we usually inherit from either IntegrationTest or JavascriptIntegrationTest depending on whether we're testing with or without Javascript.

Yes, wondered about that. I've added a new test file to test the JS scenarios within this test and removed them from here. As an aside it's worth noting that if we run the current tests inheriting from JavascriptIntegrationTest then we get a few failures in its current state.

mtaylorgds · 2025-01-10T12:26:05Z

test/integration_test_helper.rb

@@ -64,6 +64,26 @@ def filter_by_content_type(option, from: "Content type")
  end
 end

+def with_javascript


I don't know we need (or want these). We already have a way to have integration tests with or without javascript (by inheriting from either IntegrationTest or JavascriptIntegrationTest)—I'm not sure we want to add a second way of doing this.

Yes, after the change above I have reverted this. 👍

… save

davidtrussler added 17 commits January 9, 2025 11:52

Create basic UI

6516d52

Prepopulate form on initial load

e4f96f5

Update view for multiple fields display

2051914

Update controller to add update_related_external_links action

a3e932d

Update routes for update_related_external_links action

e990e40

Add checkbox partial

d848b72

Add hidden id to each form set

5e6f89c

Only render hidden field if id is sent

91a8762

Update controller test for update_related_external_links method (WIP)

5654ef4

Update view to show empty fields where no external links exist

9eb0701

Update edition_edit test for related external links tab (WIP)

3074cc7

Update view for rendering empty field

da8e5f3

Update integration test for empty form

5d9baf6

Update integration test for pre-populated form (WIP)

152cc15

Update controller and test

eb4c58d

Tidy up integration test

8fc0d20

Update UI

2013220

- for hidden field tag - for bold labels

davidtrussler force-pushed the 497_Edit-page_Related-external-links branch 4 times, most recently from 0e3c825 to 30a73c3 Compare January 9, 2025 13:02

davidtrussler added 3 commits January 9, 2025 15:24

Update controller test

28ecf3c

Update integration test for non-JS scenarios

4e7e002

Update integration test for JS scenarios

61b158b

davidtrussler force-pushed the 497_Edit-page_Related-external-links branch from 30a73c3 to 61b158b Compare January 9, 2025 15:24

davidtrussler marked this pull request as ready for review January 10, 2025 09:47

ellohez reviewed Jan 10, 2025

View reviewed changes

mtaylorgds reviewed Jan 10, 2025

View reviewed changes

davidtrussler added 2 commits January 10, 2025 16:17

Add controller test for scenario where there are no external links to…

ce070ed

… save

Rename linking to related_external_links

0ed49c8

davidtrussler added 4 commits January 10, 2025 17:15

Update controller test to remove unecesary artefact.reload

8b4b482

Update controller test for typo

e269831

Remove JS tests from integration test

7e210a3

Add new integration test for JS scenario

4baa904

davidtrussler force-pushed the 497_Edit-page_Related-external-links branch from 51e97e3 to 4baa904 Compare January 10, 2025 17:50

Revert helper to remove JS test methods

36b21e9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

497 edit page related external links #2490

497 edit page related external links #2490

davidtrussler commented Jan 9, 2025 •

edited

Loading

ellohez left a comment

ellohez Jan 10, 2025

davidtrussler Jan 10, 2025

mtaylorgds Jan 10, 2025

davidtrussler Jan 10, 2025

mtaylorgds left a comment

mtaylorgds Jan 10, 2025

davidtrussler Jan 10, 2025

mtaylorgds Jan 10, 2025

mtaylorgds Jan 10, 2025

mtaylorgds Jan 10, 2025

mtaylorgds Jan 10, 2025

mtaylorgds Jan 10, 2025

davidtrussler Jan 10, 2025

mtaylorgds Jan 10, 2025

davidtrussler Jan 10, 2025

mtaylorgds Jan 10, 2025

davidtrussler Jan 10, 2025

497 edit page related external links #2490

Are you sure you want to change the base?

497 edit page related external links #2490

Conversation

davidtrussler commented Jan 9, 2025 • edited Loading

ellohez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtaylorgds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidtrussler commented Jan 9, 2025 •

edited

Loading