Only show the "Targeted Tags Field" when the selected placement area is "Below the comment section" (#18644)

* feat: Add a pack file that pulls in the MultiSelect Component

* feat: move the tags to its own component

* save tags

* refactor: create a getCSRFToken function in the packs files so that it can be used in the admin

* feat: import the new module in request.js

* feat: remove unnecessary id

* feat: first pass of csrf token test

* chore: update the test

* fix: csrf token

* feat: hide the enw functionality behinda  feature flag

* fix: loading form twice

* refactor: import for csrftoken

* chore: update the description of the function

* feat: use acts_on_taggable to craete a relationship between display_ad and tag

* feat: add a tag field to the display_ad form

* feat: add the selected tags from the multiselect autocomplete component to the input text field that references the tag_list

* feat: add the tag_list to the controller so that we can save it to the db with the display ad parameters

* feat: pull out the tag validation from the article and the display_ads into a concern

* feat: write soem tests for validating the tag on the display_ads model

* feat: add the tag_list as a hidden field

* feat: set the selected tags on edit

* feat: add a js class for the placement area

* feat: use the change in the dropdown to determine whether we show the tags field dropdown

* refactor: rename and brak up fucntions

* feat: show the tags field if the value of the placement area is already set

* fix: move if statement out of the change event

* feat: hide tags field and clear the tag list

* refactor: delete the display ads

* tests: ensure that we test the toggle

* fix:ensure that the tags on the hidden field show up as a string in the input field

* feat: update the jsdoc

* fix: no need to replace space with comma since we showing as string in form

* feat: update the name of the label

* fix: add hidden back

app/javascript/packs/admin/displayAds.jsx

@@ -9,32 +9,89 @@ Document.prototype.ready = new Promise((resolve) => {
   return null;
 });
 
+/**
+ * A callback that sets the hidden 'js-tags-textfield' with the selection string that was chosen via the
+ * MultiSelectAutocomplete component.
+ *
+ * @param {String} selectionString The selected tags represented as a string (e.g. "webdev, git, career")
+ */
 function saveTags(selectionString) {
   document.getElementsByClassName('js-tags-textfield')[0].value =
     selectionString;
 }
 
-function loadTagsField() {
-  let defaultValue = '';
-  const hiddenTagsField =
-    document.getElementsByClassName('js-tags-textfield')[0];
-
-  if (hiddenTagsField) {
-    defaultValue = hiddenTagsField.value.replaceAll(' ', ', ');
-  }
-
+/**
+ * Shows and Renders a Tags preact component for the Targeted Tag(s) field
+ */
+function showTagsField() {
   const displayAdsTargetedTags = document.getElementById(
     'display-ad-targeted-tags',
   );
 
   if (displayAdsTargetedTags) {
+    displayAdsTargetedTags.classList.remove('hidden');
     render(
-      <Tags onInput={saveTags} defaultValue={defaultValue} />,
+      <Tags onInput={saveTags} defaultValue={defaultTagValues()} />,
       displayAdsTargetedTags,
     );
   }
 }
 
+/**
+ * Hides the Targeted Tag(s) field
+ */
+function hideTagsField() {
+  const displayAdsTargetedTags = document.getElementById(
+    'display-ad-targeted-tags',
+  );
+
+  displayAdsTargetedTags?.classList.add('hidden');
+}
+
+/**
+ * Clears the content (i.e. value) of the hidden tags textfield
+ */
+function clearTagList() {
+  const hiddenTagsField =
+    document.getElementsByClassName('js-tags-textfield')[0];
+
+  hiddenTagsField.value = ' ';
+}
+
+/**
+ * Returns the value of the hidden text field to eventually pass as
+ * default values to the MultiSelectAutocomplete component.
+ */
+function defaultTagValues() {
+  let defaultValue = '';
+  const hiddenTagsField =
+    document.getElementsByClassName('js-tags-textfield')[0];
+
+  if (hiddenTagsField) {
+    defaultValue = hiddenTagsField.value;
+  }
+
+  return defaultValue;
+}
+
+/**
+ * Shows and sets up the Targeted Tag(s) field if the placement area value is "post_comments".
+ * Listens for change events on the select placement area dropdown
+ * and shows and hides the Targeted Tag(s) appropriately.
+ */
 document.ready.then(() => {
-  loadTagsField();
+  const select = document.getElementsByClassName('js-placement-area')[0];
+
+  if (select.value === 'post_comments') {
+    showTagsField();
+  }
+
+  select.addEventListener('change', (event) => {
+    if (event.target.value === 'post_comments') {
+      showTagsField();
+    } else {
+      hideTagsField();
+      clearTagList();
+    }
+  });
 });

app/views/admin/display_ads/_form.html.erb

@@ -17,18 +17,19 @@
 
     <div class="crayons-field">
       <%= label_tag :placement_area, "Placement Area:", class: "crayons-field__label" %>
-      <%= select_tag :placement_area, options_for_select(display_ads_placement_area_options_array, selected: @display_ad.placement_area), include_blank: "Select...", class: "crayons-select" %>
+      <%= select_tag :placement_area, options_for_select(display_ads_placement_area_options_array, selected: @display_ad.placement_area), include_blank: "Select...", class: "crayons-select js-placement-area" %>
     </div>
 
     <% if FeatureFlag.enabled?(:display_ad_tags) %>
-      <div class="crayons-field">
-        <div id="display-ad-targeted-tags"></div>
-      </div>
 
-      <div class="crayons-field hidden">
-        <%= label_tag :tag_list, "tag_list:", class: "crayons-field__label" %>
-        <%= text_field_tag :tag_list, @display_ad.tag_list, class: "crayons-textfield js-tags-textfield" %>
-      </div>
+        <div class="crayons-field">
+          <div id="display-ad-targeted-tags"></div>
+        </div>
+
+        <div class="crayons-field hidden">
+          <%= label_tag :tag_list, "Tag List:", class: "crayons-field__label" %>
+          <%= text_field_tag :tag_list, @display_ad.tag_list.to_s, class: "crayons-textfield js-tags-textfield" %>
+        </div>
     <% end %>
 
     <div class="crayons-field">

cypress/e2e/seededFlows/adminFlows/displayAds/createDisplayAds.spec.js

@@ -0,0 +1,37 @@
+// These assertions are currently skipped because we have the display_ad_tags Feature Flag in place right now.
+// We've tried to incorporate feature flags in Cypress tests previously, but there isn't an easy way to do it via an API.
+// Hence, for that reason and a couple of other db requirements we went with a separate db and script in the past.
+// This is not feasible for every use case.
+
+// Since these feature flags are temporary, I'll skip these cypress tests for now and add the tests back and remove these comments
+// once the feature flags have been removed.
+
+xdescribe('Create Display Ads', () => {
+  context('when creating a new display ad', () => {
+    beforeEach(() => {
+      cy.testSetup();
+      cy.fixture('users/adminUser.json').as('user');
+
+      cy.get('@user').then((user) => {
+        cy.loginAndVisit(user, '/admin/customization/display_ads');
+        cy.findByRole('link', { name: 'Make A New Display Ad' }).click({
+          force: true,
+        });
+      });
+    });
+
+    it('should not show the tags field if the placement is not "Below the comment section"', () => {
+      cy.findByRole('combobox', { name: 'Placement Area:' }).select(
+        'Sidebar Right',
+      );
+      cy.findByRole('input', { name: 'Targeted Tag(s)' }).should('not.exist');
+    });
+
+    it('should show the tags field if the placement is "Below the comment section"', () => {
+      cy.findByRole('combobox', { name: 'Placement Area:' }).select(
+        'Below the comment section',
+      );
+      cy.findByLabelText('Targeted Tag(s)').should('exist');
+    });
+  });
+});

cypress/e2e/seededFlows/adminFlows/displayAds/deleteDisplayAds.spec.js

@@ -1,4 +1,4 @@
-describe('Display Ads', () => {
+describe('Delete Display Ads', () => {
   beforeEach(() => {
     cy.testSetup();
     cy.fixture('users/adminUser.json').as('user');