Merged PR 300: view detailsで第5階層の情報を参照した際、ログインアカウントではなく第5のアカウント情報を表示できるようにする

## 概要 [Task2335: view detailsで第5階層の情報を参照した際、ログインアカウントではなく第5のアカウント情報を表示できるようにする](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2335) パートナーライセンス一覧画面から「viewDetails」ボタンを押下した際の挙動を実装しました。具体的な対応は以下になります。・第五以外でも第五の情報を取得できるよう、ライセンス情報APIを呼び出す際の処理を修正・ライセンス情報APIのRoleGuardからtierの制限を削除・第五以外から第五の情報を表示する際に、「Order License」「Activate License Key」ボタンを表示しないよう修正・第五以外から第五の情報を表示する際に、「Return」ボタンを追加 ## レビューポイントなし ## UIの変更 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/Task2335?csf=1&web=1&e=SPJKzU ## 動作確認状況ローカルで動作確認済み ## 補足なし
2023-08-03 08:56:39 +00:00 · 2023-08-03 08:56:39 +00:00 · eb8c31cf05
commit eb8c31cf05
parent 6a2d2eabde
5 changed files with 106 additions and 37 deletions
--- a/dictation_client/src/features/license/licenseSummary/operations.ts
+++ b/dictation_client/src/features/license/licenseSummary/operations.ts
@ -2,7 +2,11 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import type { RootState } from "app/store";
 import { getTranslationID } from "translation";
 import { openSnackbar } from "features/ui/uiSlice";
-import { AccountsApi, GetLicenseSummaryResponse } from "../../../api/api";
+import {
+  AccountsApi,
+  GetLicenseSummaryResponse,
+  PartnerLicenseInfo,
+} from "../../../api/api";
 import { Configuration } from "../../../api/configuration";
 import { ErrorObject, createErrorObject } from "../../../common/errors";

@ -10,7 +14,7 @@ export const getLicenseSummaryAsync = createAsyncThunk<
  // 正常時の戻り値の型
  GetLicenseSummaryResponse,
  // 引数
-  void,
+  { selectedRow?: PartnerLicenseInfo },
  {
    // rejectした時の返却値の型
    rejectValue: {
@ -30,9 +34,13 @@ export const getLicenseSummaryAsync = createAsyncThunk<
      headers: { authorization: `Bearer ${accessToken}` },
    });

-    // 自分のアカウントID取得、取得したアカウントIDを使用して表示情報を取得する
-    const { accountId } = getMyAccountResponse.data.account;
+    const { selectedRow } = args;
+    // 引数がない場合は自分のアカウントID取得
+    const accountId = selectedRow
+      ? selectedRow.accountId
+      : getMyAccountResponse.data.account.accountId;

+    // 取得したアカウントIDを使用して表示情報を取得する
    const getLicenseSummaryResponse = await accountsApi.getLicenseSummary(
      { accountId },
      {
--- a/dictation_client/src/pages/LicensePage/index.tsx
+++ b/dictation_client/src/pages/LicensePage/index.tsx
@ -6,7 +6,7 @@ import { AppDispatch } from "app/store";
 import { clearToken } from "features/auth";
 import { useMsal } from "@azure/msal-react";
 import { Token } from "common/token";
-import LicenseSummary from "./licenseSummary";
+import { LicenseSummary } from "./licenseSummary";
 import PartnerLicense from "./partnerLicense";

 const LicensePage: React.FC = (): JSX.Element => {
--- a/dictation_client/src/pages/LicensePage/licenseSummary.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx
@ -11,19 +11,28 @@ import {
  getLicenseSummaryAsync,
  selecLicenseSummaryInfo,
 } from "features/license/licenseSummary";
+import { selectSelectedRow } from "features/license/partnerLicense";
 import postAdd from "../../assets/images/post_add.svg";
 import history from "../../assets/images/history.svg";
 import key from "../../assets/images/key.svg";
 import block from "../../assets/images/block.svg";
 import circle from "../../assets/images/circle.svg";
+import returnLabel from "../../assets/images/undo.svg";
 import { LicenseOrderPopup } from "./licenseOrderPopup";
 import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup";
 // eslint-disable-next-line import/no-named-as-default
 import LicenseOrderHistory from "./licenseOrderHistory";

-const LicenseSummary: React.FC = (): JSX.Element => {
+interface LicenseSummaryProps {
+  onReturn?: () => void;
+}
+export const LicenseSummary: React.FC<LicenseSummaryProps> = (
+  props
+): JSX.Element => {
+  const { onReturn } = props;
  const dispatch: AppDispatch = useDispatch();
  const [t] = useTranslation();
+  const selectedRow = useSelector(selectSelectedRow);

  // popup制御関係
  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
@ -50,9 +59,17 @@ const LicenseSummary: React.FC = (): JSX.Element => {
  const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo);

  useEffect(() => {
-    dispatch(getLicenseSummaryAsync());
+    dispatch(getLicenseSummaryAsync({ selectedRow }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

+  // Return押下時の処理
+  const returnClick = useCallback(() => {
+    if (onReturn) {
+      onReturn();
+    }
+  }, [onReturn]);
+
  return (
    <>
      {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */}
@ -60,7 +77,7 @@ const LicenseSummary: React.FC = (): JSX.Element => {
        <LicenseOrderPopup
          onClose={() => {
            setIslicenseOrderPopupOpen(false);
-            dispatch(getLicenseSummaryAsync());
+            dispatch(getLicenseSummaryAsync({ selectedRow }));
          }}
        />
      )}
@ -97,18 +114,46 @@ const LicenseSummary: React.FC = (): JSX.Element => {
                  </h2>
                  <ul className={styles.menuAction}>
                    <li>
-                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                      <a
-                        className={`${styles.menuLink} ${styles.isActive}`}
-                        onClick={onlicenseOrderOpen}
-                      >
-                        <img src={postAdd} alt="" className={styles.menuIcon} />
-                        {t(
-                          getTranslationID(
-                            "LicenseSummaryPage.label.orderLicense"
-                          )
-                        )}
-                      </a>
+                      {/* 他アカウントのライセンス情報を見ている場合は、前画面に戻る用のreturnボタンを表示 */}
+                      {selectedRow && (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                        <a
+                          className={`${styles.menuLink} ${styles.isActive}`}
+                          onClick={returnClick}
+                        >
+                          <img
+                            src={returnLabel}
+                            alt=""
+                            className={styles.menuIcon}
+                          />
+                          {t(
+                            getTranslationID(
+                              "partnerLicense.label.returnButton"
+                            )
+                          )}
+                        </a>
+                      )}
+                    </li>
+                    <li>
+                      {/* 他アカウントのライセンス情報を見ている場合は、ライセンス注文ボタンを非表示 */}
+                      {!selectedRow && (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                        <a
+                          className={`${styles.menuLink} ${styles.isActive}`}
+                          onClick={onlicenseOrderOpen}
+                        >
+                          <img
+                            src={postAdd}
+                            alt=""
+                            className={styles.menuIcon}
+                          />
+                          {t(
+                            getTranslationID(
+                              "LicenseSummaryPage.label.orderLicense"
+                            )
+                          )}
+                        </a>
+                      )}
                    </li>
                    <li>
                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
@ -125,18 +170,21 @@ const LicenseSummary: React.FC = (): JSX.Element => {
                      </a>
                    </li>
                    <li>
-                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                      <a
-                        className={`${styles.menuLink} ${styles.isActive}`}
-                        onClick={onCardLicenseActivateOpen}
-                      >
-                        <img src={key} alt="" className={styles.menuIcon} />
-                        {t(
-                          getTranslationID(
-                            "LicenseSummaryPage.label.activateLicenseKey"
-                          )
-                        )}
-                      </a>
+                      {/* 他アカウントのライセンス情報を見ている場合は、カードライセンス取り込みボタンを非表示 */}
+                      {!selectedRow && (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+                        <a
+                          className={`${styles.menuLink} ${styles.isActive}`}
+                          onClick={onCardLicenseActivateOpen}
+                        >
+                          <img src={key} alt="" className={styles.menuIcon} />
+                          {t(
+                            getTranslationID(
+                              "LicenseSummaryPage.label.activateLicenseKey"
+                            )
+                          )}
+                        </a>
+                      )}
                    </li>
                  </ul>
                  <dl className={`${styles.listVertical} ${styles.marginBtm5}`}>
@ -235,4 +283,8 @@ const LicenseSummary: React.FC = (): JSX.Element => {
  );
 };

+LicenseSummary.defaultProps = {
+  onReturn: undefined,
+};
+
 export default LicenseSummary;
--- a/dictation_client/src/pages/LicensePage/partnerLicense.tsx
+++ b/dictation_client/src/pages/LicensePage/partnerLicense.tsx
@ -35,6 +35,7 @@ import {
 } from "../../features/license/partnerLicense";
 import { LicenseOrderPopup } from "./licenseOrderPopup";
 import { LicenseOrderHistory } from "./licenseOrderHistory";
+import { LicenseSummary } from "./licenseSummary";
 import progress_activit from "../../assets/images/progress_activit.svg";

 const PartnerLicense: React.FC = (): JSX.Element => {
@ -47,6 +48,7 @@ const PartnerLicense: React.FC = (): JSX.Element => {
  const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
  const [islicenseOrderHistoryOpen, setIslicenseOrderHistoryOpen] =
    useState(false);
+  const [isViewDetailsOpen, setIsViewDetailsOpen] = useState(false);

  // 階層表示用
  const tierNames: { [key: number]: string } = {
@ -128,13 +130,13 @@ const PartnerLicense: React.FC = (): JSX.Element => {
  const isTier1 = isApproveTier([TIERS.TIER1]);
  const isTier2ToTier4 = isApproveTier([TIERS.TIER2, TIERS.TIER3, TIERS.TIER4]);

-  // licenseDetailsボタン押下時
-  // TODO 本PIBでは対象外のため、遷移先の内容の正しさは対象外
+  // viewDetailsボタン押下時
  const onClickViewDetails = useCallback(
    (value?: PartnerLicenseInfo) => {
      dispatch(changeSelectedRow({ value }));
+      setIsViewDetailsOpen(true);
    },
-    [dispatch]
+    [dispatch, setIsViewDetailsOpen]
  );

  // orderHistoryボタン押下時
@ -239,7 +241,14 @@ const PartnerLicense: React.FC = (): JSX.Element => {
          }}
        />
      )}
-      {!islicenseOrderHistoryOpen && (
+      {isViewDetailsOpen && (
+        <LicenseSummary
+          onReturn={() => {
+            setIsViewDetailsOpen(false);
+          }}
+        />
+      )}
+      {!islicenseOrderHistoryOpen && !isViewDetailsOpen && (
        <div className={styles.wrap}>
          <Header userName="XXXXXX" />
          <UpdateTokenTimer />
--- a/dictation_server/src/features/accounts/accounts.controller.ts
+++ b/dictation_server/src/features/accounts/accounts.controller.ts
@ -113,7 +113,7 @@ export class AccountsController {
  @ApiBearerAuth()
  @UseGuards(AuthGuard)
  @UseGuards(
-    RoleGuard.requireds({ roles: [ADMIN_ROLES.ADMIN], tiers: [TIERS.TIER5] }),
+    RoleGuard.requireds({ roles: [ADMIN_ROLES.ADMIN] }),
  )
  @Post('licenses/summary')
  async getLicenseSummary(