-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Edit Stream Scope Improvements (#374)
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
- Loading branch information
Showing
19 changed files
with
589 additions
and
449 deletions.
There are no files selected for viewing
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 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 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
21 changes: 0 additions & 21 deletions
21
packages/studio/src/components/AddPageButton/StreamScopeFieldLabel.tsx
This file was deleted.
Oops, something went wrong.
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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { ReactComponent as Scope } from "../icons/scope.svg"; | ||
| import { useCallback } from "react"; | ||
| import ButtonWithModal, { renderModalFunction } from "./common/ButtonWithModal"; | ||
| import EditStreamScopeModal from "./EditStreamScopeModal"; | ||
|
|
||
| interface EditStreamScopeButtonProps { | ||
| pageName: string; | ||
| } | ||
|
|
||
| // TODO: Consolidate with PageSettingsButton once we rework Form Modal (from SLAP-2918) | ||
| /** | ||
| * Renders a button for editing the Stream Scope for an Entity page in a PagesJS repo. | ||
| * When the button is clicked, a modal is displayed where the Stream Scope can | ||
| * be edited. | ||
| */ | ||
| export default function EditStreamScopeButton({ | ||
| pageName, | ||
| }: EditStreamScopeButtonProps): JSX.Element { | ||
| const renderModal: renderModalFunction = useCallback( | ||
| (isOpen, handleClose) => { | ||
| return ( | ||
| <EditStreamScopeModal | ||
| pageName={pageName} | ||
| isOpen={isOpen} | ||
| handleClose={handleClose} | ||
| /> | ||
| ); | ||
| }, | ||
| [pageName] | ||
| ); | ||
|
|
||
| return ( | ||
| <ButtonWithModal | ||
| buttonContent={<Scope />} | ||
| renderModal={renderModal} | ||
| ariaLabel={`Edit ${pageName} Stream Scope Settings`} | ||
| buttonClassName="text-gray-800" | ||
| /> | ||
| ); | ||
| } |
102 changes: 102 additions & 0 deletions
102
packages/studio/src/components/EditStreamScopeModal.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { useCallback, useMemo, useState } from "react"; | ||
| import DialogModal from "./common/DialogModal"; | ||
| import StreamScopePicker, { | ||
| updateScopeFieldFactory, | ||
| } from "./StreamScopePicker"; | ||
| import { ResponseType, StreamScope } from "@yext/studio-plugin"; | ||
| import useStudioStore from "../store/useStudioStore"; | ||
| import { isEqual, sortBy } from "lodash"; | ||
| import { toast } from "react-toastify"; | ||
|
|
||
| export interface EditStreamScopeModalProps { | ||
| pageName: string; | ||
| isOpen: boolean; | ||
| handleClose: () => void; | ||
| } | ||
|
|
||
| export default function EditStreamScopeModal(props: EditStreamScopeModalProps) { | ||
| const { pageName, isOpen, handleClose } = props; | ||
| const [streamScope, updateStreamScope, generateTestData] = useStudioStore( | ||
| (store) => [ | ||
| store.pages.pages[pageName].pagesJS?.streamScope, | ||
| store.pages.updateStreamScope, | ||
| store.actions.generateTestData, | ||
| ] | ||
| ); | ||
|
|
||
| const originalScope = useMemo(() => streamScope ?? {}, [streamScope]); | ||
| const [selectedScope, setSelectedScope] = useState(originalScope); | ||
|
|
||
| const onConfirm = useCallback(async () => { | ||
| updateStreamScope(pageName, selectedScope); | ||
| const regenerateTestData = async () => { | ||
| const response = await generateTestData(); | ||
| if (response.type === ResponseType.Error) { | ||
| toast.error( | ||
| "Error generating test data, but entity page settings were still updated." | ||
| ); | ||
| } | ||
| }; | ||
| await regenerateTestData(); | ||
| handleClose(); | ||
| }, [ | ||
| generateTestData, | ||
| handleClose, | ||
| pageName, | ||
| selectedScope, | ||
| updateStreamScope, | ||
| ]); | ||
|
|
||
| const updateSelection: updateScopeFieldFactory = useCallback( | ||
| (streamScopeField: keyof StreamScope) => (selectedIds: string[]) => { | ||
| if (selectedIds.length) { | ||
| setSelectedScope({ | ||
| [streamScopeField]: selectedIds, | ||
| }); | ||
| } else { | ||
| setSelectedScope({}); | ||
| } | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| const hasNoChanges = useMemo(() => { | ||
| const noScopeChanges = Object.keys(selectedScope).map((scope) => | ||
| isEqual(sortBy(selectedScope[scope]), sortBy(originalScope[scope])) | ||
| ); | ||
| return noScopeChanges.every((v) => v); | ||
| }, [selectedScope, originalScope]); | ||
|
|
||
| const modalBodyContent = useMemo(() => { | ||
| return ( | ||
| <> | ||
| <div className="italic mb-4"> | ||
| Use one of the optional fields below to edit which entities this page | ||
| can access. If multiple Stream Scopes were selected and all fields are | ||
| disabled, see a developer to edit the Stream Scope. | ||
| </div> | ||
| <StreamScopePicker | ||
| streamScope={selectedScope} | ||
| updateSelection={updateSelection} | ||
| /> | ||
| </> | ||
| ); | ||
| }, [selectedScope, updateSelection]); | ||
|
|
||
| const resetSelectedScopeAndClose = useCallback(() => { | ||
| setSelectedScope(originalScope); | ||
| handleClose(); | ||
| }, [handleClose, originalScope]); | ||
|
|
||
| return ( | ||
| <DialogModal | ||
| isOpen={isOpen} | ||
| title="Edit Content Scope" | ||
| handleClose={resetSelectedScopeAndClose} | ||
| handleConfirm={onConfirm} | ||
| body={modalBodyContent} | ||
| confirmButtonText="Confirm" | ||
| isConfirmButtonDisabled={hasNoChanges} | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.