From 1e3f43853146acdf538db68cf41f24876720d6ff Mon Sep 17 00:00:00 2001 From: Jan Monschke Date: Thu, 21 Sep 2023 15:57:48 +0200 Subject: [PATCH] [SecuritySolution] Rename timeline-saving-related components (#166740) ## Summary This PR prepares further work on the timeline-saving-related components. As a first step we're only renaming the components to make it easier to reason about their function. > `SaveTimelineButton` -> `EditTimelineButton`: We might have a dedicated `save` button more prominently in the UI in the near future. The former "save" button actually opened up a modal with the `edit` form. In cypress tests, the component was already referred to as the `edit` button. > `TimelineTitleAndDescription` -> `EditTimelineModal`: The original name did not make it clear that it's actually a form in a modal. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../components/flyout/header/index.tsx | 6 +- .../open_timeline/note_previews/index.tsx | 4 +- ...test.tsx => edit_timeline_button.test.tsx} | 59 +++++++-------- ...ne_button.tsx => edit_timeline_button.tsx} | 42 +++++------ ....test.tsx => edit_timeline_modal.test.tsx} | 73 ++++++++----------- ...escription.tsx => edit_timeline_modal.tsx} | 28 +++---- .../cypress/screens/timeline.ts | 12 +-- 7 files changed, 103 insertions(+), 121 deletions(-) rename x-pack/plugins/security_solution/public/timelines/components/timeline/header/{save_timeline_button.test.tsx => edit_timeline_button.test.tsx} (57%) rename x-pack/plugins/security_solution/public/timelines/components/timeline/header/{save_timeline_button.tsx => edit_timeline_button.tsx} (70%) rename x-pack/plugins/security_solution/public/timelines/components/timeline/header/{title_and_description.test.tsx => edit_timeline_modal.test.tsx} (72%) rename x-pack/plugins/security_solution/public/timelines/components/timeline/header/{title_and_description.tsx => edit_timeline_modal.tsx} (91%) diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx index 788618df6fee2..bf481d2e21a3d 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx @@ -35,7 +35,7 @@ import { AddToFavoritesButton } from '../../timeline/properties/helpers'; import type { TimerangeInput } from '../../../../../common/search_strategy'; import { AddToCaseButton } from '../add_to_case_button'; import { AddTimelineButton } from '../add_timeline_button'; -import { SaveTimelineButton } from '../../timeline/header/save_timeline_button'; +import { EditTimelineButton } from '../../timeline/header/edit_timeline_button'; import { useGetUserCasesPermissions, useKibana } from '../../../../common/lib/kibana'; import { InspectButton } from '../../../../common/components/inspect'; import { useTimelineKpis } from '../../../containers/kpis'; @@ -421,14 +421,14 @@ const FlyoutHeaderComponent: React.FC = ({ timelineId }) => { - + - + diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx index 7c82b3802e59f..2444d3b35addf 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.tsx @@ -30,7 +30,7 @@ import { NOTE_CONTENT_CLASS_NAME } from '../../timeline/body/helpers'; import * as i18n from './translations'; import { TimelineTabs } from '../../../../../common/types/timeline'; import { useDeepEqualSelector } from '../../../../common/hooks/use_selector'; -import { SaveTimelineButton } from '../../timeline/header/save_timeline_button'; +import { EditTimelineButton } from '../../timeline/header/edit_timeline_button'; import { SourcererScopeName } from '../../../../common/store/sourcerer/model'; import { useSourcererDataView } from '../../../../common/containers/sourcerer'; import { useKibana } from '../../../../common/lib/kibana'; @@ -226,7 +226,7 @@ export const NotePreviews = React.memo( size="l" /> ), - actions: , + actions: , }, ] : [], diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.test.tsx similarity index 57% rename from x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.test.tsx rename to x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.test.tsx index ee67b469e9250..e43fa5faf5c19 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.test.tsx @@ -7,15 +7,15 @@ import React from 'react'; import { render, fireEvent, waitFor, screen } from '@testing-library/react'; -import type { SaveTimelineComponentProps } from './save_timeline_button'; -import { SaveTimelineButton } from './save_timeline_button'; +import type { EditTimelineComponentProps } from './edit_timeline_button'; +import { EditTimelineButton } from './edit_timeline_button'; import { TestProviders } from '../../../../common/mock'; import { useUserPrivileges } from '../../../../common/components/user_privileges'; const TEST_ID = { - SAVE_TIMELINE_MODAL: 'save-timeline-modal', - SAVE_TIMELINE_BTN: 'save-timeline-button-icon', - SAVE_TIMELINE_TOOLTIP: 'save-timeline-tooltip', + EDIT_TIMELINE_MODAL: 'edit-timeline-modal', + EDIT_TIMELINE_BTN: 'edit-timeline-button-icon', + EDIT_TIMELINE_TOOLTIP: 'edit-timeline-tooltip', }; jest.mock('react-redux', () => { @@ -36,9 +36,9 @@ const props = { toolTip: 'tooltip message', }; -const TestSaveTimelineButton = (_props: SaveTimelineComponentProps) => ( +const TestEditTimelineButton = (_props: EditTimelineComponentProps) => ( - + ); @@ -46,21 +46,16 @@ jest.mock('raf', () => { return jest.fn().mockImplementation((cb) => cb()); }); -describe('SaveTimelineButton', () => { +describe('EditTimelineButton', () => { beforeEach(() => { jest.clearAllMocks(); }); - // skipping this test because popover is not getting visible by RTL gestures. - // - // Raised a bug with eui team: https://github.com/elastic/eui/issues/6065 - xit('Show tooltip', async () => { - render(); - const saveTimelineIcon = screen.queryAllByTestId(TEST_ID.SAVE_TIMELINE_BTN)[0]; + it('Show tooltip', async () => { + render(); + const editTimelineIcon = screen.queryAllByTestId(TEST_ID.EDIT_TIMELINE_BTN)[0]; - fireEvent.mouseOver(saveTimelineIcon); - - jest.runAllTimers(); + fireEvent.mouseOver(editTimelineIcon); await waitFor(() => { expect(screen.getByRole('tooltip')).toBeVisible(); @@ -68,9 +63,9 @@ describe('SaveTimelineButton', () => { }); it('should show a button with pencil icon', () => { - render(); + render(); - expect(screen.getByTestId(TEST_ID.SAVE_TIMELINE_BTN).firstChild).toHaveAttribute( + expect(screen.getByTestId(TEST_ID.EDIT_TIMELINE_BTN).firstChild).toHaveAttribute( 'data-euiicon-type', 'pencil' ); @@ -82,26 +77,26 @@ describe('SaveTimelineButton', () => { }); render( - + ); - expect(screen.getByTestId(TEST_ID.SAVE_TIMELINE_BTN)).toBeDisabled(); + expect(screen.getByTestId(TEST_ID.EDIT_TIMELINE_BTN)).toBeDisabled(); }); it('should not show modal if user does not have write access', async () => { (useUserPrivileges as jest.Mock).mockReturnValue({ kibanaSecuritySolutionsPrivileges: { crud: false }, }); - render(); + render(); - expect(screen.queryByTestId(TEST_ID.SAVE_TIMELINE_MODAL)).not.toBeInTheDocument(); + expect(screen.queryByTestId(TEST_ID.EDIT_TIMELINE_MODAL)).not.toBeInTheDocument(); - const saveTimelineIcon = screen.getByTestId(TEST_ID.SAVE_TIMELINE_BTN); + const editTimelineIcon = screen.getByTestId(TEST_ID.EDIT_TIMELINE_BTN); - fireEvent.click(saveTimelineIcon); + fireEvent.click(editTimelineIcon); await waitFor(() => { - expect(screen.queryAllByTestId(TEST_ID.SAVE_TIMELINE_MODAL)).toHaveLength(0); + expect(screen.queryAllByTestId(TEST_ID.EDIT_TIMELINE_MODAL)).toHaveLength(0); }); }); @@ -109,16 +104,16 @@ describe('SaveTimelineButton', () => { (useUserPrivileges as jest.Mock).mockReturnValue({ kibanaSecuritySolutionsPrivileges: { crud: true }, }); - render(); - expect(screen.queryByTestId(TEST_ID.SAVE_TIMELINE_MODAL)).not.toBeInTheDocument(); + render(); + expect(screen.queryByTestId(TEST_ID.EDIT_TIMELINE_MODAL)).not.toBeInTheDocument(); - const saveTimelineIcon = screen.queryAllByTestId(TEST_ID.SAVE_TIMELINE_BTN)[0]; + const editTimelineIcon = screen.queryAllByTestId(TEST_ID.EDIT_TIMELINE_BTN)[0]; - fireEvent.click(saveTimelineIcon); + fireEvent.click(editTimelineIcon); await waitFor(() => { - expect(screen.queryByTestId(TEST_ID.SAVE_TIMELINE_TOOLTIP)).not.toBeInTheDocument(); - expect(screen.queryAllByTestId(TEST_ID.SAVE_TIMELINE_MODAL)[0]).toBeVisible(); + expect(screen.queryByTestId(TEST_ID.EDIT_TIMELINE_TOOLTIP)).not.toBeInTheDocument(); + expect(screen.queryAllByTestId(TEST_ID.EDIT_TIMELINE_MODAL)[0]).toBeVisible(); }); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.tsx similarity index 70% rename from x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx rename to x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.tsx index 20657356063c7..ad59ffbbd6288 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_button.tsx @@ -14,24 +14,24 @@ import { TimelineId } from '../../../../../common/types/timeline'; import { useDeepEqualSelector } from '../../../../common/hooks/use_selector'; import { timelineActions } from '../../../store/timeline'; import { getTimelineSaveModalByIdSelector } from './selectors'; -import { TimelineTitleAndDescription } from './title_and_description'; +import { EditTimelineModal } from './edit_timeline_modal'; import * as timelineTranslations from './translations'; -export interface SaveTimelineComponentProps { +export interface EditTimelineComponentProps { initialFocus: 'title' | 'description'; timelineId: string; toolTip?: string; } -export const SaveTimelineButton = React.memo( +export const EditTimelineButton = React.memo( ({ initialFocus, timelineId, toolTip }) => { const dispatch = useDispatch(); const getTimelineSaveModal = useMemo(() => getTimelineSaveModalByIdSelector(), []); const show = useDeepEqualSelector((state) => getTimelineSaveModal(state, timelineId)); - const [showSaveTimelineOverlay, setShowSaveTimelineOverlay] = useState(false); + const [showEditTimelineOverlay, setShowEditTimelineOverlay] = useState(false); - const closeSaveTimeline = useCallback(() => { - setShowSaveTimelineOverlay(false); + const closeEditTimeline = useCallback(() => { + setShowEditTimelineOverlay(false); if (show) { dispatch( timelineActions.toggleModalSaveTimeline({ @@ -40,11 +40,11 @@ export const SaveTimelineButton = React.memo( }) ); } - }, [dispatch, setShowSaveTimelineOverlay, show]); + }, [dispatch, setShowEditTimelineOverlay, show]); - const openSaveTimeline = useCallback(() => { - setShowSaveTimelineOverlay(true); - }, [setShowSaveTimelineOverlay]); + const openEditTimeline = useCallback(() => { + setShowEditTimelineOverlay(true); + }, [setShowEditTimelineOverlay]); // Case: 1 // check if user has crud privileges so that user can be allowed to edit the timeline @@ -60,35 +60,35 @@ export const SaveTimelineButton = React.memo( [toolTip, hasKibanaCrud] ); - const saveTimelineButtonIcon = useMemo( + const editTimelineButtonIcon = useMemo( () => ( ), - [openSaveTimeline, hasKibanaCrud] + [openEditTimeline, hasKibanaCrud] ); - return (initialFocus === 'title' && show) || showSaveTimelineOverlay ? ( + return (initialFocus === 'title' && show) || showEditTimelineOverlay ? ( <> - {saveTimelineButtonIcon} - ) : ( - - {saveTimelineButtonIcon} + + {editTimelineButtonIcon} ); } ); -SaveTimelineButton.displayName = 'SaveTimelineButton'; +EditTimelineButton.displayName = 'EditTimelineButton'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.test.tsx similarity index 72% rename from x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.test.tsx rename to x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.test.tsx index 39b1cdef0063b..4581b38a2fd56 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.test.tsx @@ -11,7 +11,7 @@ import { mount } from 'enzyme'; import { TestProviders } from '../../../../common/mock'; import { useDeepEqualSelector } from '../../../../common/hooks/use_selector'; import { TimelineStatus, TimelineType } from '../../../../../common/api/timeline'; -import { TimelineTitleAndDescription } from './title_and_description'; +import { EditTimelineModal } from './edit_timeline_modal'; import * as i18n from './translations'; jest.mock('../../../../common/hooks/use_selector', () => ({ @@ -30,15 +30,12 @@ jest.mock('react-redux', () => { }; }); -describe('TimelineTitleAndDescription', () => { +describe('EditTimelineModal', () => { describe('save timeline', () => { const props = { initialFocus: 'title' as const, - closeSaveTimeline: jest.fn(), + closeEditTimeline: jest.fn(), timelineId: 'timeline-1', - onSaveTimeline: jest.fn(), - updateTitle: jest.fn(), - updateDescription: jest.fn(), }; const mockGetButton = jest.fn().mockReturnValue(
); @@ -59,14 +56,14 @@ describe('TimelineTitleAndDescription', () => { }); test('show process bar while saving', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="progress-bar"]').exists()).toEqual(true); }); - test('Show correct header for save timeline modal', () => { - const component = mount(, { + test('Show correct header for edit timeline modal', () => { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual( @@ -74,7 +71,7 @@ describe('TimelineTitleAndDescription', () => { ); }); - test('Show correct header for save timeline template modal', () => { + test('Show correct header for edit timeline template modal', () => { (useDeepEqualSelector as jest.Mock).mockReturnValue({ description: '', isSaving: true, @@ -82,7 +79,7 @@ describe('TimelineTitleAndDescription', () => { title: 'my timeline', timelineType: TimelineType.template, }); - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual( @@ -91,28 +88,28 @@ describe('TimelineTitleAndDescription', () => { }); test('Show name field', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); - expect(component.find('[data-test-subj="save-timeline-title"]').exists()).toEqual(true); + expect(component.find('[data-test-subj="edit-timeline-title"]').exists()).toEqual(true); }); test('Show description field', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); - expect(component.find('[data-test-subj="save-timeline-description"]').exists()).toEqual(true); + expect(component.find('[data-test-subj="edit-timeline-description"]').exists()).toEqual(true); }); test('Show close button', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="close-button"]').exists()).toEqual(true); }); test('Show saveButton', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="save-button"]').exists()).toEqual(true); @@ -122,13 +119,8 @@ describe('TimelineTitleAndDescription', () => { describe('update timeline', () => { const props = { initialFocus: 'title' as const, - closeSaveTimeline: jest.fn(), - openSaveTimeline: jest.fn(), + closeEditTimeline: jest.fn(), timelineId: 'timeline-1', - toggleSaveTimeline: jest.fn(), - onSaveTimeline: jest.fn(), - updateTitle: jest.fn(), - updateDescription: jest.fn(), }; const mockGetButton = jest.fn().mockReturnValue(
); @@ -149,14 +141,14 @@ describe('TimelineTitleAndDescription', () => { }); test('show process bar while saving', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="progress-bar"]').exists()).toEqual(true); }); test('Show correct header for save timeline modal', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual( @@ -164,7 +156,7 @@ describe('TimelineTitleAndDescription', () => { ); }); - test('Show correct header for save timeline template modal', () => { + test('Show correct header for edit timeline template modal', () => { (useDeepEqualSelector as jest.Mock).mockReturnValue({ description: 'xxxx', isSaving: true, @@ -172,7 +164,7 @@ describe('TimelineTitleAndDescription', () => { title: 'my timeline', timelineType: TimelineType.template, }); - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="modal-header"]').at(1).prop('children')).toEqual( @@ -181,21 +173,21 @@ describe('TimelineTitleAndDescription', () => { }); test('Show name field', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); - expect(component.find('[data-test-subj="save-timeline-title"]').exists()).toEqual(true); + expect(component.find('[data-test-subj="edit-timeline-title"]').exists()).toEqual(true); }); test('Show description field', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); - expect(component.find('[data-test-subj="save-timeline-description"]').exists()).toEqual(true); + expect(component.find('[data-test-subj="edit-timeline-description"]').exists()).toEqual(true); }); test('Show saveButton', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="save-button"]').exists()).toEqual(true); @@ -205,13 +197,8 @@ describe('TimelineTitleAndDescription', () => { describe('showWarning', () => { const props = { initialFocus: 'title' as const, - closeSaveTimeline: jest.fn(), - openSaveTimeline: jest.fn(), + closeEditTimeline: jest.fn(), timelineId: 'timeline-1', - toggleSaveTimeline: jest.fn(), - onSaveTimeline: jest.fn(), - updateTitle: jest.fn(), - updateDescription: jest.fn(), showWarning: true, }; @@ -234,14 +221,14 @@ describe('TimelineTitleAndDescription', () => { }); test('Show EuiCallOut', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); - expect(component.find('[data-test-subj="save-timeline-callout"]').exists()).toEqual(true); + expect(component.find('[data-test-subj="edit-timeline-callout"]').exists()).toEqual(true); }); test('Show discardTimelineButton', () => { - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="close-button"]').at(2).text()).toEqual( @@ -257,7 +244,7 @@ describe('TimelineTitleAndDescription', () => { title: 'my timeline', timelineType: TimelineType.template, }); - const component = mount(, { + const component = mount(, { wrappingComponent: TestProviders, }); expect(component.find('[data-test-subj="close-button"]').at(2).text()).toEqual( @@ -266,7 +253,7 @@ describe('TimelineTitleAndDescription', () => { }); test('Show saveButton', () => { - const component = mount(); + const component = mount(); expect(component.find('[data-test-subj="save-button"]').at(1).exists()).toEqual(true); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.tsx similarity index 91% rename from x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.tsx rename to x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.tsx index b4118355265ca..3a09d3b59601f 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/edit_timeline_modal.tsx @@ -35,8 +35,8 @@ import { useStartTransaction } from '../../../../common/lib/apm/use_start_transa import { TIMELINE_ACTIONS } from '../../../../common/lib/apm/user_actions'; const CommonUseField = getUseField({ component: Field }); -interface TimelineTitleAndDescriptionProps { - closeSaveTimeline: () => void; +interface EditTimelineModalProps { + closeEditTimeline: () => void; initialFocus: 'title' | 'description'; timelineId: string; showWarning?: boolean; @@ -45,8 +45,8 @@ interface TimelineTitleAndDescriptionProps { // when showWarning equals to true, // the modal is used as a reminder for users to save / discard // the unsaved timeline / template -export const TimelineTitleAndDescription = React.memo( - ({ closeSaveTimeline, initialFocus, timelineId, showWarning }) => { +export const EditTimelineModal = React.memo( + ({ closeEditTimeline, initialFocus, timelineId, showWarning }) => { const { startTransaction } = useStartTransaction(); const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []); const { @@ -112,8 +112,8 @@ export const TimelineTitleAndDescription = React.memo { if (status === TimelineStatus.draft && showWarning) { @@ -157,7 +157,7 @@ export const TimelineTitleAndDescription = React.memo ({ 'aria-label': i18n.TIMELINE_TITLE, autoFocus: initialFocus === 'title', - 'data-test-subj': 'save-timeline-title', + 'data-test-subj': 'edit-timeline-title', disabled: isSaving, spellCheck: true, placeholder: @@ -172,7 +172,7 @@ export const TimelineTitleAndDescription = React.memo ({ 'aria-label': i18n.TIMELINE_DESCRIPTION, autoFocus: initialFocus === 'description', - 'data-test-subj': 'save-timeline-description', + 'data-test-subj': 'edit-timeline-description', disabled: isSaving, placeholder: commonI18n.DESCRIPTION, }), @@ -181,15 +181,15 @@ export const TimelineTitleAndDescription = React.memo { if (isSubmitted && !isSaving && prevIsSaving) { - closeSaveTimeline(); + closeEditTimeline(); } - }, [isSubmitted, isSaving, prevIsSaving, closeSaveTimeline]); + }, [isSubmitted, isSaving, prevIsSaving, closeEditTimeline]); return ( {isSaving && ( @@ -203,7 +203,7 @@ export const TimelineTitleAndDescription = React.memo @@ -260,4 +260,4 @@ export const TimelineTitleAndDescription = React.memo