diff --git a/tests-e2e/cypress/integration/lhs_spec.js b/tests-e2e/cypress/integration/lhs_spec.js index 677010723a..8d44b9d3e4 100644 --- a/tests-e2e/cypress/integration/lhs_spec.js +++ b/tests-e2e/cypress/integration/lhs_spec.js @@ -112,6 +112,31 @@ describe('lhs', () => { }); }); + it('lhs refresh on follow/unfollow', () => { + cy.apiLogin(testViewerUser).then(() => { + // # Visit the playbook run + cy.visit(`/playbooks/runs/${playbookRun.id}`); + + // # Follow the run + cy.findByTestId('rdp-rhs-follow-button').click(); + + // # Wait to lhs refresh + cy.wait(3000); + + // * Verify that the run was added to the lhs + cy.findByTestId('Runs').findByTestId(playbookRun.name).should('exist'); + + // # Click on unfollow menu item + getRunDropdownItemByText('Runs', playbookRun.name, 'Unfollow').click().then(() => { + // # Wait to lhs refresh + cy.wait(3000); + + // * Verify that the run is removed lhs + cy.findByTestId('Runs').findByTestId(playbookRun.name).should('not.exist'); + }); + }); + }); + it('leave run', () => { // # Add viewer user to the channel cy.apiAddUserToChannel(playbookRun.channel_id, testViewerUser.id); diff --git a/webapp/src/components/backstage/lhs_run_dot_menu.tsx b/webapp/src/components/backstage/lhs_run_dot_menu.tsx index fba4f01203..88a7d8d452 100644 --- a/webapp/src/components/backstage/lhs_run_dot_menu.tsx +++ b/webapp/src/components/backstage/lhs_run_dot_menu.tsx @@ -18,6 +18,7 @@ import {useLeaveRun} from './playbook_runs/playbook_run/context_menu'; import {useFollowers} from './playbook_runs/playbook_run/playbook_run'; import {CopyRunLinkMenuItem, FavoriteRunMenuItem, FollowRunMenuItem, LeaveRunMenuItem} from './playbook_runs/playbook_run/controls'; import {DotMenuButtonStyled} from './shared'; +import {useLHSRefresh} from './lhs_navigation'; interface Props { playbookRunId: string; @@ -33,6 +34,7 @@ export const LHSRunDotMenu = ({playbookRunId, isFavorite, ownerUserId, participa const {add: addToast} = useToaster(); const updateRun = useUpdateRun(playbookRunId); const currentUser = useSelector(getCurrentUser); + const refreshLHS = useLHSRefresh(); const followState = useFollowers(followerIDs); const {isFollowing, followers, setFollowers} = followState; @@ -50,6 +52,7 @@ export const LHSRunDotMenu = ({playbookRunId, isFavorite, ownerUserId, participa .then(() => { const newFollowers = isFollowing ? followers.filter((userId) => userId !== currentUser.id) : [...followers, currentUser.id]; setFollowers(newFollowers); + refreshLHS(); }) .catch(() => { addToast(formatMessage({defaultMessage: 'It was not possible to {isFollowing, select, true {unfollow} other {follow}} the run'}, {isFollowing}), ToastType.Failure); diff --git a/webapp/src/components/backstage/playbook_runs/playbook_run/rhs_info_overview.tsx b/webapp/src/components/backstage/playbook_runs/playbook_run/rhs_info_overview.tsx index 4130e706ed..4e68d2828b 100644 --- a/webapp/src/components/backstage/playbook_runs/playbook_run/rhs_info_overview.tsx +++ b/webapp/src/components/backstage/playbook_runs/playbook_run/rhs_info_overview.tsx @@ -47,6 +47,7 @@ export const useFollow = (runID: string, followState: FollowState) => { const addToast = useToaster().add; const {isFollowing, followers, setFollowers} = followState; const currentUser = useSelector(getCurrentUser); + const refreshLHS = useLHSRefresh(); const toggleFollow = () => { const action = isFollowing ? unfollowPlaybookRun : followPlaybookRun; @@ -54,6 +55,7 @@ export const useFollow = (runID: string, followState: FollowState) => { .then(() => { const newFollowers = isFollowing ? followers.filter((userId) => userId !== currentUser.id) : [...followers, currentUser.id]; setFollowers(newFollowers); + refreshLHS(); }) .catch(() => { addToast(formatMessage({defaultMessage: 'It was not possible to {isFollowing, select, true {unfollow} other {follow}} the run'}, {isFollowing}), ToastType.Failure); @@ -70,7 +72,10 @@ export const useFollow = (runID: string, followState: FollowState) => { } return ( - + {formatMessage({defaultMessage: 'Follow'})} );