Mm 46916 lhs not refreshed after unfollow

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);

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);

webapp/src/components/backstage/playbook_runs/playbook_run/rhs_info_overview.tsx

@@ -47,13 +47,15 @@ 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;
         action(runID)
             .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 (
-            <FollowButton onClick={toggleFollow}>
+            <FollowButton
+                data-testid={'rdp-rhs-follow-button'}
+                onClick={toggleFollow}
+            >
                 {formatMessage({defaultMessage: 'Follow'})}
             </FollowButton>
         );