Improve Add and Edit Page Flows #380
Merged
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 PR updates the modal for specifying the stream scope in the add page flow so the inputs have a similar UI to the custom Tailwind class input. Each input will have an icon that opens a dropdown with the possible options that can be added for setting the scope. So far, the dropdowns for entity types and saved filters will be correctly populated from the store (tested with dummy data for now). The remaining subtasks will populate the store with actual account content and populate the dropdown for entities, which is more complex. Also, make the disabled behavior for the Tailwind class prop input more robust: 1) the embed icon is no longer clickable when the input is disabled and 2) the disabled state is more visibly different from the enabled state. J=SLAP-2905, 2910 TEST=auto, manual Check that a new page can be created with a stream scope with zero, one, or multiple filters. Makes sure that the disabled state works correctly so that selecting one type of filter (e.g. entity type) will disable the other inputs (saved filters and entities).
This PR populates the store with the account content for saved filters, entity types, and the first 50 entities of each type. The `PillPicker` dropdown styling is also updated to be a fixed max height with scrollable content, instead of growing the dropdown to display all options. J=SLAP-2906 TEST=auto, manual Hard-code an API key in studio-plugin and see the stream scope modal for adding an entity page in the test site is populated with the entity types and saved filters from the Slapshot test account. Entity types with no entities are not included in the entity types dropdown.
This PR adds an entity type dropdown to the entityIds StreamScope field. It also adds dynamic fetching of entities once the user scrolls down the bottom of the select. J=SLAP-2907 TEST=manual I can specify an entity type, select entity ids, then switch entity type and select more ids saving the page correctly adds the entity ids to the TemplateConfig --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
This PR adds the add page flow stream scope improvements to the page edits. There is now a new edit scope button on the page panel next to the settings button which opens up a new Stream Scope Edit modal. The modal is pre-populated by the current stream scope config in the page template. Since we are only allowing users to edit one stream scope at a time, if the developer has specified a mix of stream scopes, all editing will be disabled. Users can only submit their new selection if changes have been made, similar to the old page settings. If there are no entity types or saved filters, then these fields will not be editable. In these cases, even if the developer has specified a stream scope, it will not be displayed. J=SLAP-2918 TEST=auto, manual
Note: the size limit needed to be updated now that we are importing the default export from `react-select`
#372) This PR adds logic to the creation of the Studio Vite Plugin. If there is an env var called `YEXT_STUDIO_API_KEY`, we use that to create an instance of the `ManagementApiService`. This environment variable should be available in all Studio CBD containers. The value of the variable is an API Key that will give the Studio instance access to the Management API. This is the API that powers Stream Scope Selection. TEST=manual Tested locally. I did not have the env var set and saw that Stream Scope Selection was disabled. Then I set the env var and saw that the Scope Selection dropdowns were populated correctly.
tmeyer2115
approved these changes
Sep 21, 2023
Merged
tmeyer2115
added a commit
that referenced
this pull request
Sep 22, 2023
## Features - We've introduced the concept of Page Layouts (or Layouts) to Studio. A Page Layout is a pre-prescribed set of Components that you can apply to a Page. By default, Layouts live in the `src/layouts` directory. In the UI, a Layout can be applied via the "Insert" button. (#370, #367, #375) - There is now improved UX for creating or editing an Entity Page's Stream Scope. Instead of being raw inputs, the fields for Entity Ids, Entity Types, and Saved Filters are now drop-downs with the relevant options populated from the account. (#380) ## Changes - Repeaters and Modules have been officially deprecated and removed from Studio. (#369)
alextaing
pushed a commit
that referenced
this pull request
Sep 22, 2023
## Features - We've introduced the concept of Page Layouts (or Layouts) to Studio. A Page Layout is a pre-prescribed set of Components that you can apply to a Page. By default, Layouts live in the `src/layouts` directory. In the UI, a Layout can be applied via the "Insert" button. (#370, #367, #375) - There is now improved UX for creating or editing an Entity Page's Stream Scope. Instead of being raw inputs, the fields for Entity Ids, Entity Types, and Saved Filters are now drop-downs with the relevant options populated from the account. (#380) ## Changes - Repeaters and Modules have been officially deprecated and removed from Studio. (#369)
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.
Update stream scope selection in the Add Page and Edit Page flows. The stream scope filters are now sourced from an account's content so only valid filters can be selected from curated dropdowns. The account is identified based on the API key present as the
YEXT_STUDIO_API_KEYenvironment variable.