VACMS-10626: Drupalize new homepage components

[dsasser]

Description

This PR originally started here: #11016. It was decided to move to an integration branch for the homepage updates, so this PR was created.

Closes #10626

Note that permissions, and field guidance text are ticketed separately. This PR addresses the ACs for #10626 only.

New Block Types:
Benefit Promo
News Promo

New Entity Queues:
Home page news spotlight
Home page hero

New Menus:
Other Search Tools
Popular on VA.gov

QA steps

• Create benefit promo block: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/block/add/benefit_promo
• Create news promo block: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov//block/add/news_promo
• Add new benefit promo block to hero entityqueue: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/admin/structure/entityqueue/home_page_hero/home_page_hero?destination=/admin/structure/entityqueue
• Add new news promo block to spotlight entityqueue: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/admin/structure/entityqueue/home_page_news_spotlight/home_page_news_spotlight?destination=/admin/structure/entityqueue
• Add one or more links to other-search-tools menu: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/admin/structure/menu/manage/other-search-tools
• Add one or more links to the popular-on-va-gov menu: https://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/admin/structure/menu/manage/popular-on-va-gov

Run GraphQL queries:
Validate GraphQL queries provide expected output:

query homePageHeroQuery {
  entitySubqueueById(id: "home_page_hero") {
    ... on EntitySubqueueHomePageHero {
      itemsOfEntitySubqueueHomePageHero {
        entity {
          entityId
          ... on BlockContentBenefitPromo {
            entityId
            entityLabel
            fieldPromoHeadline
            fieldPromoText
            fieldPromoCta {
              entity {
                ... on ParagraphButton {
                  fieldButtonLink {
                    url {
                      path
                    }
                  }
                  fieldButtonLabel
                }
              }
            }
          }
        }
      }
    }
  }
}


query homePageNewsSpotlightQuery {
  entitySubqueueById(id: "home_page_news_spotlight") {
    ... on EntitySubqueueHomePageNewsSpotlight {
      itemsOfEntitySubqueueHomePageNewsSpotlight {
        entity {
          entityId
          ... on BlockContentNewsPromo {
            entityId
            entityLabel
            fieldPromoHeadline
            fieldPromoText
            fieldImage {
              entity {
                ... on MediaImage {
                  image {
                    derivative(style: LARGE) {
                      url
                    }
                  }
                }
              }
            }
            fieldLink {
              url {
                path
              }
            }
            fieldLinkLabel
          }
        }
      }
    }
  }
}


query homePageOtherSearchToolsMenuQuery {
  menuByName(name: "other-search-tools") {
    name
    links {
      label
      url {
        path
      }
      links {
        label
        url {
          path
        }
      }
    }
  }
}

query homePagePopularOnVaGovMenuQuery {
  menuByName(name: "popular-on-va-gov") {
    name
    links {
      label
      url {
        path
      }
      links {
        label
        url {
          path
        }
      }
    }
  }
}

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.

Select Team for PR review

• Platform CMS Team
• Sitewide program
• ⭐️ Sitewide CMS
• ⭐️ Public websites
• ⭐️ Facilities
• ⭐️ User support

Is this PR blocked by another PR?

• DO NOT MERGE

Does this PR need review from a Product Owner

• Needs PO review

CMS user-facing annoucement

Is an announcement needed to let editors know of this change?

• Yes, and it's written in issue ____ and queued for publication.
  • Merge and ping the UX writer so they are ready to publish after deployment
• Yes, but it hasn't yet been written
  • Don't merge yet -- ping the UX writer to write and queue content
• No announcement is needed for this code change.
  • Merge & carry on unburdened by announcements

[chri5tia]

@dsasser When running the GraphQL query in the explorer, this pop up comes up. Is that expected and if so, which one should I select?

I get the following for all four so that piece looks like it's working:

{
  "data": {
    "entitySubqueueById": {
      "itemsOfEntitySubqueueHomePageHero": []
    }
  }
}

[dsasser]

@dsasser When running the GraphQL query in the explorer, this pop up comes up. Is that expected and if so, which one should I select?

There are 4 distinct queries. When you add all of them to the Graphql explorer and try to run them, it prompts you to select which query you are running. It is very buggy when doing this, I recommend adding in one query at a time as a result.

[chri5tia]

I didn't have any issues running through the steps to add the new components and the output of the graphql queries was healthy, see output of my test items:

{
  "data": {
    "entitySubqueueById": {
      "itemsOfEntitySubqueueHomePageHero": [
        {
          "entity": {
            "entityId": "200",
            "entityLabel": "test",
            "fieldPromoHeadline": "test",
            "fieldPromoText": "test",
            "fieldPromoCta": {
              "entity": {
                "fieldButtonLink": {
                  "url": {
                    "path": "/disability/eligibility/hazardous-materials-exposure/agent-orange/testing-storage-areas"
                  }
                },
                "fieldButtonLabel": "test"
              }
            }
          }
        }
      ]
    }
  }
}

{
  "data": {
    "entitySubqueueById": {
      "itemsOfEntitySubqueueHomePageNewsSpotlight": [
        {
          "entity": {
            "entityId": "201",
            "entityLabel": "test test",
            "fieldPromoHeadline": "tests",
            "fieldPromoText": "test",
            "fieldImage": {
              "entity": {
                "image": {
                  "derivative": {
                    "url": "http://pr11114-zsu5hscui7bhz5wkd4vteyr3eskornyf.ci.cms.va.gov/sites/default/files/styles/large/public/2022-10/IMG_4190.jpg"
                  }
                }
              }
            },
            "fieldLink": {
              "url": {
                "path": "/pittsburgh-health-care/legionella-water-testing"
              }
            },
            "fieldLinkLabel": "Read the full article"
          }
        }
      ]
    }
  }
}

{
  "data": {
    "menuByName": {
      "name": "Other Search Tools",
      "links": [
        {
          "label": "Test event",
          "url": {
            "path": "/health-care/view-test-and-lab-results"
          },
          "links": []
        }
      ]
    }
  }
}

{
  "data": {
    "menuByName": {
      "name": "Popular on VA.gov",
      "links": [
        {
          "label": "test test 4",
          "url": {
            "path": "/resources/test-registry-exam-checklist"
          },
          "links": []
        }
      ]
    }
  }
}

This looks good to me.

[chri5tia]

All the testing steps worked and I don't see any issues.

[swirtSJW]

This looks great.
I just want to declare what we talked about on zoom.

• Design review and ux guidance all that will come later
• user permissions will also happen later.
• The primary focus here is to get the fields in to the CMS, to unblock FE.

Also for archival purposes: we had talked about condensing the two block types into one, since they are both the same right now, but had discussed the likelihood/risk that the two blocks would need to diverge from each other. So this PR is hedging that bet.

[swirtSJW]

Assuming this formatting is the default formatting coming directly out of the spec tool?

[dsasser]

Yes it appears so, unfortunately. I poked around in phpstorm and didn't see any auto-format for behat feature files, but it could be that I just missed it. In the future I'll double check with a text editor.

[swirtSJW]

Nice work on the QA steps

[swirtSJW]

This PR originally started here: #11016. It was decided to move to an integration branch for the homepage updates, so this PR was created.

Next time around, it is easy enough to change the target branch after the fact. The old PR could have been fine, no need to close. That would have kept all the comments and other history.

Full disclosure, github makes it hard to find the option to change the target.
You have to click "edit" which looks like it is just for the PR title

Then you are presented with the destination UI

[dsasser]

This PR originally started here: #11016. It was decided to move to an integration branch for the homepage updates, so this PR was created.

Next time around, it is easy enough to change the target branch after the fact. The old PR could have been fine, no need to close. That would have kept all the comments and other history.

Full disclosure, github makes it hard to find the option to change the target. You have to click "edit" which looks like it is just for the PR title

Then you are presented with the destination UI

Thanks so much Steve. I thought this was possible, but it wasn't apparent how, and I avoided looking it up for some reason.