Version 1.10.0 #1542
Merged
Version 1.10.0 #1542
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit replaces all data-component="IconComponent" usages with iconPartial instead. As a result, we... 1. cut down the number of data- attributes scanned by the SDK 2. remove a majority of the components tracked by the ComponentManager, which by extension will 3. reduce the number of component lifecycles that need to be run J=SLAP-1297 TEST=manual smoke tested that the page loads as expected, can run searches and things like filters, navigation, and pagination icons look as expected tested that I could access the icons/iconPartial partial from a component using a custom template (to make sure it will work with the theme) tried setting a custom icon for the searchbar check that the animated search icon keyframes are still namespaced correctly by the searchbar's component name (both the default of "SearchBar" and setting a custom name) hooked up my local SDK to the theme, before this change on a vertical-full-page-map there were 50 icon components after this change there were only 40 these 40 icons come from the 20 results cards that were rendered, each having 2 cta buttons updating the theme will remove these remaining ones
This PR replaces all icon usages that only are meant to use a
baked in icon with the icons/bakedInIcon partial.
The issue with just using iconPartial for everything is that, some icons are intended
to always use a baked in icon instead of switch between an iconName
(for built in icons) and an iconUrl (for custom icons).
However, handlebars partials operate on the context on which they are called, not only
on the variables passed into it. So, if an iconUrl exists on the scope somebody calls
`{{> icons/iconPartial iconName='chevron'}}`, an iconUrl will be passed into the partial
even though none was explicitly passed in.
Since iconUrl has higher priority than iconName, this can cause undesired behavior.
I think the best workaround is just creating a separate partial when we want an icon
that is built into the SDK.
J=SLAP-1297
TEST=manual
test that baked in icons display as expected and do not have this
behavior
see the animated search icon working as expected
manually check that all iconPartial usages have a specified iconUrl
* Added universalLimit to universal searches. J=SLAP-1267 TEST=manual/auto Checked test site to make sure change went through. * added test and other stuff * generate notices * changed name of SearchConfig.limit to limitForVertical * added validate * added clarity to error message
Originally I thought builtInIcon was hard on the eyes to read, so I called it bakedInIcon instead. I still think it's a little hard on the eyes, but builtInIcon definitely is more accurate and professional. J=SLAP-1297 TEST=manual see filterbox and searchbar icons show up
The package-lock.json is a unique identifier for the node module dependencies for a repo. The package.json is not, so we shouldn't use its hash as part of the circleci cache key. TEST=manual J=none saw that the circleci build still saves a cache and uses it in subsequent builds
This way the theme's test-site can point to canary/latest and have i18n snapshots work. I was wrong, and the i18n build will build ALL the locales, not just the languages. On the other hand, this still shouldn't cost too much storage since it's only a single branch. J=SLAP-1423 TEST=manual use this branch's name (dev/i18n-develop) instead of develop in the circleci config, see the i18n build run
* Properly implemented sessionTrackingEnabled J=SLAP-1408 TEST=manual Checked on test page to make sure that session_id and cookies are being passed as expected. When sessionTrackingEnabled is true, the sessionID is passed to the test site and no cookie for sessionID is dropped. When sessionTrackingEnabled is false, the sessionID is generated by the API and no cookie is dropped. When no sessionID is passed and sessionTrackingEnabled is true, a cookie is dropped. * nits and new version of core * unmerge * third party notices
Add support for loading indicator and related style changes to SDK - Update searchBarComponent's animation cycle to include loading indicator and support for custom icon url, if provided in the config data. - Add loading indicator animation css, magnifying glass and yext animation icon now have static version without transitions - Add opacity to results section on page during loading state (regardless of the use of loading indicator) - Update SearchBar template to include default and custom loading indicator html - Update universalComponent to not change results during loading state - Move searchBar icon related handlebars into its own partial J=SLAP-1335 TEST=manual Serve test page in SDk dist/ with the new changes in bundle and tested in universal and vertical page: - default initial search show loading indicator and switch to magifying glass/Yext icon - During loading, universal result section have opacity set to 0.5 - hitting enter or apply filter change icon to loading indicator, and change back to magnifying glass after loading - Click on submit button will change icon to loading indicator, and change back to Yext icon after loading - Icon is not frozen during loading state transition to non loading state - Default loading indicator works with custom non-loading icons based on tests above - Custom loading indicator works with default non-loading icons based on tests above - Custom loading indicator works with custom non-loading icons based on tests above - smoke test on ios mobile
Convert a spellcheck acceptance test into integration tests This test coverage has two parts. In the first part, our test coverage confirms that the spellcheck components renders with the correct query params in the hyperlink. To accomplish this, I converted the previous spellcheck tests to more of an integration test by mounting the component with the enzyme adapter. In the second part, I confirm that when ANSWERS initializes with the spellcheck params in the URL, a search is fired with those spellcheck params. To make this possible, this PR sets up integration testing for answers-umd which previously did not exist in our jest tests. This PR mocks the core library so that we don't actually fire HTTP requests when running these tests. J=SLAP-1062 TEST=auto Add integration test coverage
Add ability to set the querySource at runtime with a call to `ANSWERS.setQuerySource()` J=SLAP-1438 TEST=manual Use the setter and observe the updated query param in subsequent network requests
J=SLAP-1409 TEST=automatic ran tests and they work as expected.
Update testCafe acceptance test - Add waitOnSearchComplete functionality in verticalResults and UniversalResults component to wait for query response(s) and searchComplete state appears on page. - Register requestLogger to each test to track vertical/universal requests and response to Answers API endpoint - Update acceptance tests to wait for results on search J=SLAP-1425 TEST= auto ran testCafe locally, verify logger requests and wait time in tests
Add opacity to DirectAnswer while search is loading - Update DirectAnswer to have searchState - add the corresponding css class to container based on searchState for opacity styling J=SLAP-1445 TEST=auto&manual - added jest test to verify the right css class is set for different loading state - Launched test site and verified that opacity is added to direct answer on universal page
async function `isLoggerResultsPresent` returns a promise<boolean> on query response, added the missing `await` keyword when invoking the function.
Ran npx browserslist@latest --update-db Right now running tests locally spams a warning to bump it. J=SLAP-1451 TEST=manual run build and test, see page load
Slash division is deprecated and throws annoying warnings during the build. J=SLAP-1454 TEST=manual open dev tools, see that the css variables that use the changed scss variables ($line-height-xlg and $line-height-md-sm) still have the correct values
- update hook registration to use `requestHook` on fixture instead of `beforeEach` for each test - update waitOnSearchComplete to use current testInstance from test suite instead of the imported testInstance reference from testcafe
…1468) This commit adds a method to handle locale defaulting on microsoft edge. Chrome and Safari both have nice handling for strange locales like en_FAKE. Edge is more sensitive, and will throw an error if the locale is not one of its specific supported ones, or if the locale uses underscores instead of dashes. The list of locales supported in edge was generated programmatically using a script. There is documentation for the list of locales supported by Azure's Speech service, but I could not find anything saying that the SpeechRecognition implementation on Edge uses this service directly (though it seems to be the case). J=SLAP-1441 TEST=manual,auto tested the isMicrosoftEdge() function on different browsers by exposing it on ANSWERS did the same thing with transformSpeechRecognitionLocaleForEdge()
When I was trying to get arabic to work the SDK (it was hard to even tell it was the SDK) was throwing a very unhelpful error message regarding translations. The issue was that our translation processor was trying to access a plural form that did not exist in the arabic po file, since we only received translations for the SDK and not the theme. The method would then return undefined, and break later on. I chose to display the original msgid instead of trying to find the "closest" english plural form, for simplicity. J=SLAP-1394 TEST=manual see that the error is handled gracefully now
Add the voice search icon for voice search support There are two voice search icon SVGs. One is the microphone and the other are the listening dots. The animations are stored in the SVGs and they are activated by the VoiceSearchController. Both the microphone and the listening icon can be swapped out with custom icons. When a custom icon is supplied, it will simply fade in or fade out with CSS animations. This is a little different than the built-in icons which use SVG animations. In a future PR, the animated dots will be modified to move when listening to sound. When the listening state is change, the screen reader text is updated to be either "Start Voice Search" or "Stop Voice Search". Translations will be added once we receive them. A focus state is also present for keyboard WCAG support. J=SLAP-1442 TEST=manual Load a test site with voice search enabled in the config and see the icon appear. See that the transitions work properly when clicking on the icon. Also try specifying custom mic and custom listening icons and see them properly fade in and out during the click. Observe the screen reader text change when the button is clicked.
We cannot use testcafe to testcafe to create a no-unsafe-eval test, because testcafe internals rely on eval. Instead, this commit adds a percy snapshot which tests the same thing - that the page loads even with a CSP that disables unsafe-eval. Note we only guarantee no unsafe-eval's for the SearchBar component. J=SLAP-1440 TEST=auto
regenerator-runtime got unpinned from 0.13.1, probably because I originally wanted to also pin our devDependency of regenerator-runtime that we use in jest, but unfortunately that broke our tests. Also bump the actions/setup-node to v2. we are already using v2 in the npm_publish github action.
Add the POT file to the repo so that we can easily access it Also update the translation verification script to throw an error if the extracted translations are out of date NOTE: The translation test is failing because we don't have all the translations in yet. J=none TEST=manual See that when the messages.pot file in the repo is out of date, the test fails
Move logic around searchBar icons to a state machine system - Added a general state machine model and state class - Added a searchBarIconController that holds a state machine and manages all events and behavior surrounding the search bar icons. - Added 3 states for different behavior in search bar icon (loading, search, and default) - Removed related search bar icon code from searchBarComponent - Removed RequestAnimationFrame calls since we are relying on CSS animations J=SLAP-1437 TEST=manual & auto - serve page from sdk dist/ and verified icon changes during search, click outside of search bar, type query, and click submit. Verified that custom icons for default and loading states work. - Added Jest tests for the controller
- update core version to 1.3.0-beta.2 - include feature/DirectAnswer-in-Vertical changes - update core.js file: vertical search set StorageKeys.DIRECT_ANSWERS to loading state at the beginning of the search for opacity styling
Support map options specific to the map provider This can be used for things such as styling the mapbox map J=SLAP-1449 TEST=manual Use the hitchhikers theme to build a site and see that the provider options on the map vertical also affects the universal map. Test a custom style for Mapbox, and test a custom background color for Google.
…1485) Update the config so that the translation verification is no longer required in order to deploy assets for develop and dev branches We still run the test so that we have visibility into whether or not translations are present, but they shouldn't prevent a deploy J=SLAP-1476 TEST=manual See that this PR deploys despite the translation verification failing. Check the Circle CI workflow graph and see that the translation verification runs but is not required for a deploy
Update testcafe concurrency and browser type when running acceptance test - update testcafe command to use a config file, including `--app` or `appCommand` option to start server instead of starting/shutting down server per fixture - update run_browserstack_acceptance script to spin up 2 browserstack instances of ie11 only on dev branch. Will only test safari as well when run on master and release branches. Chrome and firefox is tested in headless acceptance test with concurrency of 3. - overall time is reduced by half (~4mins) with 2 instances of ie11. J=SLAP-1426 TEST=auto - ran acceptance tests from circleCI workflow multiple times. See that number of instance of the expected browser type is setup in browserStack. See that the time, for the most part, is reduced by ~4 mins. - tested script locally: change the CIRCLE_BRANCH var to different branch names and see what command line is called - tested script through circleCI from pr: made a push to pr with a hardcoded CIRCLE_BRANCH value (hotfix/test-something) and see that it spin up 2 ie11 instance in browserstack. made a push without hardcoded value (which will take this pr name dev/testcafe-browsers) and see that 1 instance of ie11 and safari is up in browserstack.
Add an RTL CSS bundle The RTL bundle does a few things including putting the filter checkboxes on the right side. We probably don't need to build the RTL bundle unless we are building for all languages or locales, however it is so quick that I think it makes sense to just build it during dev mode since it makes developing RTL styling much faster. J=SLAP-1465 TEST=manual Build a site with the RTL styling and see the filter checkboxes on the right side
Flip chevrons for RTL J=SLAP-1460 TEST=SLAP-1460 See that chevrons appear are reversed when using the rtl bundle
Add listening dot css classes so that the dots colors can be changed with CSS
example:
```
.yxt-SearchBar-dot1 { fill: red }
.yxt-SearchBar-dot2 { fill: yellow }
.yxt-SearchBar-dot3 { fill: blue }
.yxt-SearchBar-dot4 { fill: green }
```
J=none
TEST=manual
Add some CSS to a search bar page and confirm the colors appear
Don't run the dots animation when voice search is not active. This improves performance and prevents icon flickering when clicking on and off of the search bar I also removed some SVG animations which weren't doing anything because all of the values were set to -0 J=SLAP-1473 TEST=manual Enable voice search and see that the yext logo icon doesn't flicker when clicking on and off of the icon. Test clicking the voice search icon really fast and see that I'm unable to get the icon animations into a broken state.
Set an explicit custom icon width so that the voice and clear button don't shift around when the loading indicator appears J=SLAP-1473 TEST=manual Enable the loading indicator and set a custom icon. See that the voice icon and the clear button stay in the same spot
Disable the loading icon when it is inactive in order to prevent the icon from flashing during transitions Note: The search bar will still sometimes flash the very first time the icon is clicked because of a long tasks associated with creating the components and waiting for the autocomplete response, but that's a separate issue J=SLAP-1473 TEST=manual See that when the loading indicator is enabled, the icon will no longer flash when clicking on and off the search bar.
- surface email error from backend with code 22 and display corresponding error message in hbs template - update questionSubmission URLs to use liveapi version - minor fix: added optional chaining in case analyticsReporter is not set J=SLAP-1020 TEST=manual - serve page from dist folder with QASubmission component, submit with invalid email domain and see that the error message is displayed.
- Add a script to generate the exports field in package.json that specified import paths to css, js, and template bundles for different language. This will execute in build step. J=SLAP-1422 TEST=manual Create jest test to see that exports field is created as expected import answers-search-ui locally in another repo. Tried import statements for different bundles and verified no NoModuleFound error. Bundled with webpack, serve page and console.log Answers
If sessionStorage doesn't exist or usage is blocked by the browser we still default to using the old session-id cookie, but an error would still be printed even though nothing is "going wrong". Rose said we can change to a warning. I also added a little extra context. J=SLAP-1518 TEST=manual
J=SLAP-1519 TEST=manual see that check mark is not inverted in filter box from en and ar locale
This PR adds translations for the following new languages: Arabic, Chinese (Traditional and Simplified), Polish, Portugese, Dutch, Swedish, Korea, Hindi, and Russian. Because new static text has been added for Speech Recognition, new translations were added to the existing language files as well. A subsequent PR will update the `constants.js` file to include the new languages and their supported locales. Translations for the QA submission email errors will appear in a later PR, once Smartling is done with them. TEST=none
- create github action to add commit with updated 3rd party notices if it's not up to date - remove the check from circleci J=SLAP-1505 TEST=auto push a package.json with version different from what's listed in the 3rd party notice file and see that a automated commit is made in this pr
…irs. (#1512) Rose provided these new pairs directly from Knowledge Graph. TEST=manual I ran `build-locales` and saw assets generated for the new pairs and languages.
add config options for voice search and loading indicator in search bar component in README.md J=SLAP-1523 TEST=none
This commit makes the "Note: for Safari users, Siri must be enabled" message only appear on Safari, using user-agent sniffing. Generally speaking you want to avoid UA sniffing where you can, but here it doesn't seem like there are any alternatives. I tried using https://www.npmjs.com/package/bowser for sniffing, but that adds an extra 8KB to our modern bundle (128KB -> 134KB). Our use case is pretty small so it seems a little overkill to use a fully featured library. Bowser also does not try to use userAgentData internally (AKA user agent clients hints), which are more robust than the regular user-agent string. J=SLAP-1522 TEST=manual,auto test that the Safari specific not only shows up in Safari I couldn't figure out how to naturally get the 'service-not-allowed' error to show up on safari/chrome, so I changed the error switching code to always go into this case. For Chrome I disconneted from wifi to trigger the 'network' error. For Edge I ended the voice recognition before it was done to trigger the 'no-speech' error. Instead of writing unit tests for specific UA strings, which aren't particularly useful for making sure your sniffing works in a real scenario (since issues normally arise from the strings becoming out of date, NOT somebody changing the source code), I added a useragent acceptance test suite. This suite spins up instances of specific browsers, and checks that the sniffer methods work as expected on each of them. If need be, we can run these tests on specific browser versions. I moved the quarantine-mode flag to only the tests run by CI. Locally, we typically don't want to run the tests in quarnatine mode. Also these tests don't need to run in quarantine mode. The useragentsuite is in a different folder than the other acceptance suites, because it's meant to be run separately with a specific suite of browsers.
This PR adds a new entry point to the SDK's source. This entry point defines a class, `AnswersSearchBar`, that powers a `SearchBar` only integration. The class is defined in `answers-search-bar.js`, which bears many similarities to `answers-umd.js`. There are a few key differences: - The `FilterNodeFactory`, `formatRichText`, and `processTranslations` methods are not exported on the top-level object. These are not needed for this type of integration. - We will not handle CSS variables in this integration. Styling is very limited and prescriptive. So, all related ponyfills were removed. - It is assumed that the client has pulled down the `TemplateBundle` on their own and we will not need to load it for them. So, the `DefaultTemplateLoader` is not used. A new registry of `Components`, specific to this type of integration, was added. This registry was put in a new file, `search-bar-only-registry.js`. At first, I attempted to export a second registry from the existing `registry.js`. But, Gulp's tree-shaking was still including all `Component` classes in the `SearchBar`-only bundle. Creating a new file solved that issue. Finally, the `ComponentManager` class is no longer a singleton. This is because it can now accept different `componentRegistry`s. I don't think this should cause an issue. If you attempt to `init` twice on your page, you would already get the same `componentManager` since `ANSWERS` itself is a singleton. Likewise if you tried to make multiple instances of either on your page. The Gulp infrastructure of the SDK was modified to support building the assets for this integration. There is a new top-level command, `npm run build-search-bar-only`. The existing `npm run build`, `npm run build-languages`, and `npm run build-locales` commands work as before. They do not produce the assets for this integration. The `build-search-bar-only` command has not been added to the CI either. We still need to determine what the automated build/release process for this integration looks like. It is versioned separately from the SDK. One thing to note is that Product asked the same asset names (`answers.js`, `answers.min.js`, `answers.css`, etc.) be used for this integration. J=SLAP-1271 TEST=auto,manual Built a new JS and TemplateBundle asset from this entry point. Verified the following: - The `SearchBar` appears on the page and works as expected. - The `Autocomplete` works as expected. - The `setContext` method could add a context to the search. - The `redirectUrl` worked as expected and the correct query params were added to it. - The `defaultInitialSearch` worked as expected. - I could configure the `SearchBar` component. - The `setSessionsOptIn` method worked as expected. A new acceptance test was added for this integration. I verified it passed when the integration's assets were present in `dist`. Note that the test is not run by default since we do not build this integration's assets by default.
The `QuestionSubmission` component was recently updated to display a detailed error message about invalid emails. This PR provides all the necessary translations for that error message. J=SLAP-1487 TEST=none
J=SLAP-1525 TEST=manual ran build-languages for just chinese, assets had correct paths
Ran my codepen that brute force checks locales on edge, which works by by turning on speech recognition for 10s, and adding the locale to a list if a 'network' occurs. After 10s, the speech recognition is aborted and a 'no-speech' error is expected. Also added a zh-cn and zh-tw to the supported locales list, even though they're not currently locales the SDK has built in, in case a user manually supplies these locales. J=SLAP-1532 TEST=manual,auto manually test a number of the locales (~a third of them)
Update locale parsing to use the new utility J=SLAP-1531 TEST=manual Run an i18n build and smoke test with the theme sample site
Add support for additional languages and language scripts Most notably, this adds support for Simplified and Traditional Chinese for the maps J=1534 TEST=manual Load a test site with traditional and simplifed Chinese for mapbox and google maps
Setup Circle CI to build and deploy the search bar only assets The deploy process for the search bar is based on the same deployment process of the regular assets. I added a deploy-bucket param to the deploy-to-aws so that we can specify which bucket to deploy the assets to. I updated the github action for the npm publish so that we only publish the full answers assets to NPM and not the search bar assets. J=SLAP-1509 TEST=manual Create a test release (v0.0.1) and see the tests pass in circle CI and see the assets deploy under the appropriate version (v0, v0.0, and v0.0.1)
Bump core version to 1.3.0 Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Closed
yen-tt
approved these changes
Aug 24, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New Features
universalLimitconfig option (Added universalLimit to universal searches. #1444)querySourcecan now be set at runtime usingANSWERS.setQuerySource()(Query Source Setter #1464)Speed Improvements
Infrastructure
canary/latestassets are now built with i18n support (build develop with i18n assets #1459)SearchBar-only release notes