From f9b2c49f450182a4379189064a4d2a6259d80332 Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Thu, 14 Jul 2022 10:39:31 +0300
Subject: [PATCH 1/5] return focus to feedback button

---
 src/app/views/main-header/FeedbackButton.tsx | 10 ++++++++--
 src/app/views/main-header/MainHeader.tsx     |  8 +++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
index b83db73a2..75ff7085c 100644
--- a/src/app/views/main-header/FeedbackButton.tsx
+++ b/src/app/views/main-header/FeedbackButton.tsx
@@ -1,4 +1,4 @@
-import { getTheme, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
+import { getTheme, IButton, IconButton, IIconProps, IRefObject, TooltipHost } from '@fluentui/react';
 import React, { useState } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import { useSelector } from 'react-redux';
@@ -7,7 +7,11 @@ import { IRootState } from '../../../types/root';
 import { ACCOUNT_TYPE } from '../../services/graph-constants';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 
-export const FeedbackButton = () => {
+interface IFeedbackButton {
+  feedbackButtonRef: IRefObject<IButton>;
+  setFocus: Function;
+}
+export const FeedbackButton = (props: IFeedbackButton) => {
   const [enableSurvey, setEnableSurvey] = useState(false);
   const { profile } = useSelector( (state: IRootState) => state );
   const currentTheme = getTheme();
@@ -41,6 +45,7 @@ export const FeedbackButton = () => {
   }
 
   const disableSurvey = () => {
+    props.setFocus();
     setEnableSurvey(false);
   }
 
@@ -66,6 +71,7 @@ export const FeedbackButton = () => {
             styles={feedbackIconStyles}
             role={'button'}
             disabled={enableSurvey}
+            componentRef = {props.feedbackButtonRef}
           />
         </TooltipHost>
 
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index 2719f9500..ceea4e3b2 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -3,6 +3,7 @@ import {
   FontIcon,
   getId,
   getTheme,
+  IButton,
   IconButton,
   IStackTokens,
   Label,
@@ -49,6 +50,10 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
     feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
+  const feedbackButtonRef = React.createRef<IButton>();
+  const setFocus = () => {
+    feedbackButtonRef.current?.focus();
+  }
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack
@@ -113,7 +118,8 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
           }
           <span style={ moreInformationStyles }> <Settings /> </span>
           <span style={ moreInformationStyles }> <Help /> </span>
-          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton /> </span>
+          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton
+            feedbackButtonRef={feedbackButtonRef} setFocus={setFocus} /> </span>
           <Authentication />
         </Stack>
       </Stack>

From 240c49c995f0b676d6a75ab54239f499a7b2bd44 Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Thu, 14 Jul 2022 10:40:19 +0300
Subject: [PATCH 2/5] add space

---
 src/app/views/main-header/MainHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index ceea4e3b2..f128fc5e5 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -54,6 +54,7 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
   const setFocus = () => {
     feedbackButtonRef.current?.focus();
   }
+
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack

From a6a717b9898979edba2bab5e782fe7e6e24a6a8b Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Mon, 18 Jul 2022 18:51:29 +0300
Subject: [PATCH 3/5] add focus to feedback button

---
 src/app/views/main-header/FeedbackButton.tsx | 28 +++++++++++++-------
 src/app/views/main-header/MainHeader.tsx     | 11 +++-----
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
index 75ff7085c..c4106f9d3 100644
--- a/src/app/views/main-header/FeedbackButton.tsx
+++ b/src/app/views/main-header/FeedbackButton.tsx
@@ -1,5 +1,5 @@
 import { getTheme, IButton, IconButton, IIconProps, IRefObject, TooltipHost } from '@fluentui/react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import { useSelector } from 'react-redux';
 import FeedbackForm from '../query-runner/request/feedback/FeedbackForm';
@@ -7,11 +7,7 @@ import { IRootState } from '../../../types/root';
 import { ACCOUNT_TYPE } from '../../services/graph-constants';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 
-interface IFeedbackButton {
-  feedbackButtonRef: IRefObject<IButton>;
-  setFocus: Function;
-}
-export const FeedbackButton = (props: IFeedbackButton) => {
+export const FeedbackButton = () => {
   const [enableSurvey, setEnableSurvey] = useState(false);
   const { profile } = useSelector( (state: IRootState) => state );
   const currentTheme = getTheme();
@@ -21,6 +17,19 @@ export const FeedbackButton = (props: IFeedbackButton) => {
   const feedbackTitle = translateMessage('Feedback');
   const content = <div style={{padding:'3px'}}>{translateMessage('Feedback')}</div>
 
+  const feedbackButtonRef = React.useRef<IButton>(null)
+  const isFirstRender = React.useRef(true);
+  useEffect( () => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if(!enableSurvey){
+      feedbackButtonRef.current?.focus();
+    }
+  },[enableSurvey])
+
+
   const feedbackIconStyles = {
     root:{
       height: '50px',
@@ -45,7 +54,6 @@ export const FeedbackButton = (props: IFeedbackButton) => {
   }
 
   const disableSurvey = () => {
-    props.setFocus();
     setEnableSurvey(false);
   }
 
@@ -56,9 +64,9 @@ export const FeedbackButton = (props: IFeedbackButton) => {
   }
 
   return (
-    <div>
+    <div >
       {profile?.profileType !== ACCOUNT_TYPE.AAD &&
-      <div>
+      <div >
         <TooltipHost
           content={content}
           calloutProps={calloutProps}
@@ -71,7 +79,7 @@ export const FeedbackButton = (props: IFeedbackButton) => {
             styles={feedbackIconStyles}
             role={'button'}
             disabled={enableSurvey}
-            componentRef = {props.feedbackButtonRef}
+            componentRef={feedbackButtonRef}
           />
         </TooltipHost>
 
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index f128fc5e5..f47153b0b 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -3,7 +3,6 @@ import {
   FontIcon,
   getId,
   getTheme,
-  IButton,
   IconButton,
   IStackTokens,
   Label,
@@ -22,6 +21,7 @@ import { IRootState } from '../../../types/root';
 import { mainHeaderStyles } from './MainHeader.styles';
 import TenantIcon from './tenantIcon';
 import { Mode } from '../../../types/enums';
+import { useRef } from 'react';
 
 interface MainHeaderProps {
   minimised: boolean;
@@ -50,10 +50,6 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
     feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
-  const feedbackButtonRef = React.createRef<IButton>();
-  const setFocus = () => {
-    feedbackButtonRef.current?.focus();
-  }
 
   return (
     <Stack tokens={sectionStackTokens}>
@@ -119,8 +115,9 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
           }
           <span style={ moreInformationStyles }> <Settings /> </span>
           <span style={ moreInformationStyles }> <Help /> </span>
-          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton
-            feedbackButtonRef={feedbackButtonRef} setFocus={setFocus} /> </span>
+          <span style={ feedbackIconAdjustmentStyles } >
+            <FeedbackButton />
+          </span>
           <Authentication />
         </Stack>
       </Stack>

From 8ccc3306e5331d6dd3e14d5efa6900e245361a61 Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Mon, 18 Jul 2022 18:55:12 +0300
Subject: [PATCH 4/5] remove extra spaces

---
 src/app/views/main-header/FeedbackButton.tsx | 1 -
 src/app/views/main-header/MainHeader.tsx     | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
index c4106f9d3..0c63031fa 100644
--- a/src/app/views/main-header/FeedbackButton.tsx
+++ b/src/app/views/main-header/FeedbackButton.tsx
@@ -29,7 +29,6 @@ export const FeedbackButton = () => {
     }
   },[enableSurvey])
 
-
   const feedbackIconStyles = {
     root:{
       height: '50px',
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index f47153b0b..03fdbd8ac 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -115,9 +115,7 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
           }
           <span style={ moreInformationStyles }> <Settings /> </span>
           <span style={ moreInformationStyles }> <Help /> </span>
-          <span style={ feedbackIconAdjustmentStyles } >
-            <FeedbackButton />
-          </span>
+          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton /> </span>
           <Authentication />
         </Stack>
       </Stack>

From 0270e57f7cf4e3885b1181eaf033b3ae96be251e Mon Sep 17 00:00:00 2001
From: Onokaev <evansonoka05.j@gmail.com>
Date: Mon, 18 Jul 2022 19:54:37 +0300
Subject: [PATCH 5/5] fix code smells

---
 src/app/views/main-header/FeedbackButton.tsx | 6 +++---
 src/app/views/main-header/MainHeader.tsx     | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
index 0c63031fa..7ec28749a 100644
--- a/src/app/views/main-header/FeedbackButton.tsx
+++ b/src/app/views/main-header/FeedbackButton.tsx
@@ -1,4 +1,4 @@
-import { getTheme, IButton, IconButton, IIconProps, IRefObject, TooltipHost } from '@fluentui/react';
+import { getTheme, IButton, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
 import React, { useState, useEffect } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import { useSelector } from 'react-redux';
@@ -63,9 +63,9 @@ export const FeedbackButton = () => {
   }
 
   return (
-    <div >
+    <div>
       {profile?.profileType !== ACCOUNT_TYPE.AAD &&
-      <div >
+      <div>
         <TooltipHost
           content={content}
           calloutProps={calloutProps}
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index 03fdbd8ac..234260d57 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -21,7 +21,6 @@ import { IRootState } from '../../../types/root';
 import { mainHeaderStyles } from './MainHeader.styles';
 import TenantIcon from './tenantIcon';
 import { Mode } from '../../../types/enums';
-import { useRef } from 'react';
 
 interface MainHeaderProps {
   minimised: boolean;