Merged PR 565: 代行操作中はサインアウトを非活性or非表示にする

## 概要
[Task3066: 代行操作中はサインアウトを非活性or非表示にする](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3066)

- 代行操作中はサインアウトボタンが非活性となるように修正しました。
- ログアウト時に自ユーザー情報取得APIを呼ばないように修正しました。
  - アクセストークンの削除後に呼ばれ、401エラーになるため

## レビューポイント
- 代行操作中はサインアウトボタンのマウスイベントを無効にすることで非活性としていますが対応として適切でしょうか？
- ログアウト時（アクセストークンがない場合）はヘッダで自ユーザー情報取得APIを呼ばないように修正しましたが、処理として適切でしょうか？
  - エラーになる呼び出しはしないようにしたい＆使っているのはヘッダでのみなのでほかの箇所への影響はない認識です。

## UIの変更
- [Task3066](https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task3066?csf=1&web=1&e=3ztNOy)

## 動作確認状況
- ローカルで確認

dictation_client/src/components/auth/constants.ts

@@ -36,7 +36,7 @@ export const TIERS = {
 export const UNAUTHORIZED_TO_CONTINUE_ERROR_CODES = [
   "E010209",
   "E010503",
-  "E10501",
+  "E010501",
 ];
 
 /**

dictation_client/src/components/header/loginedHeader.tsx

@@ -3,7 +3,7 @@ import styles from "styles/app.module.scss";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch } from "app/store";
 import { useMsal } from "@azure/msal-react";
-import { clearToken } from "features/auth";
+import { clearToken, loadAccessToken } from "features/auth";
 import { useTranslation } from "react-i18next";
 import {
   getUserInfoAsync,
@@ -35,6 +35,7 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
 
   // メニューの代行操作表示制御
   const isDelegation = useSelector(selectDelegationAccessToken) !== null;
+  const accessToken = loadAccessToken();
   const filterMenus = getFilteredMenus(isDelegation);
 
   // Headerのユーザー情報を取得する
@@ -42,20 +43,26 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
   const userName = useSelector(selectUserName);
 
   useEffect(() => {
-    if (isUserNameEmpty) {
+    // ユーザー情報が空の場合、ユーザー情報を取得する（アクセストークンがある場合のみ）
+    // ログアウト時にユーザー情報とアクセストークンをクリアするため、失敗するそのタイミングでユーザー情報を取得しないようにする
+    if (accessToken !== null && isUserNameEmpty) {
       dispatch(getUserInfoAsync());
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, isUserNameEmpty]);
 
   // ログアウト
   const onSignoutButton = useCallback(
     async () => {
       // ダイアログ確認
-      // eslint-disable-next-line no-alert
-      if (window.confirm(t(getTranslationID("common.message.displayDialog")))) {
-        instance.logoutRedirect({ postLogoutRedirectUri: "/" });
+      if (
+        !isDelegation &&
+        // eslint-disable-next-line no-alert
+        window.confirm(t(getTranslationID("common.message.displayDialog")))
+      ) {
         dispatch(clearToken());
         dispatch(clearUserInfo());
+        instance.logoutRedirect({ postLogoutRedirectUri: "/" });
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -91,7 +98,11 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
           <img src={ac} alt="" className={styles.accountIcon} />
           <span>{userName}</span>
           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-          <span className={styles.accountSignout} onClick={onSignoutButton}>
+          <span
+            className={styles.accountSignout}
+            onClick={onSignoutButton}
+            style={{ pointerEvents: isDelegation ? "none" : "auto" }}
+          >
             <img src={logout} alt="" className={styles.accountIcon} />
             {t(getTranslationID("common.label.signOutButton"))}
           </span>

dictation_client/src/features/login/operations.ts

@@ -66,8 +66,7 @@ export const getUserInfoAsync = createAsyncThunk<
   // apiのConfigurationを取得する
   const { getState } = thunkApi;
   const state = getState() as RootState;
-  const { configuration } = state.auth;
-  const accessToken = getAccessToken(state.auth);
+  const { configuration, accessToken } = state.auth;
   const config = new Configuration(configuration);
   const usersApi = new UsersApi(config);