Show tooltip to explain why JWT access token toggle is disabled

ref DEV-2951

Author: louischan-oursky

portal/src/graphql/portal/EditOAuthClientForm.tsx

@@ -32,6 +32,7 @@ import {
   DeleteClientSecretConfirmationDialog,
   DeleteClientSecretConfirmationDialogData,
 } from "../../components/applications/DeleteClientSecretConfirmationDialog";
+import Tooltip from "../../Tooltip";
 
 const MASKED_SECRET = "***************";
 
@@ -372,13 +373,17 @@ const EditOAuthClientForm: React.VFC<EditOAuthClientFormProps> =
       );
     }, [clientConfig.x_application_type, showRefreshTokenSettings]);
 
-    const alwaysIssueJWTAccessToken = useMemo(
-      () =>
-        (["m2m"] as OAuthClientConfig["x_application_type"][]).includes(
-          clientConfig.x_application_type
-        ),
-      [clientConfig.x_application_type]
-    );
+    const alwaysIssueJWTAccessTokenTooltipMessageID = useMemo(() => {
+      const map: Map<OAuthClientConfig["x_application_type"], string | null> =
+        new Map([
+          ["m2m", "EditOAuthClientForm.issue-jwt-access-token.tooltip-m2m"],
+        ]);
+      return map.get(clientConfig.x_application_type) ?? null;
+    }, [clientConfig.x_application_type]);
+
+    const isIssueJWTAccessTokenToggleDisabled = useMemo(() => {
+      return alwaysIssueJWTAccessTokenTooltipMessageID != null;
+    }, [alwaysIssueJWTAccessTokenTooltipMessageID]);
 
     const showApp2AppSettings =
       clientConfig.x_application_type === "native" && app2appEnabled;
@@ -823,14 +828,29 @@ const EditOAuthClientForm: React.VFC<EditOAuthClientFormProps> =
               }
               onChange={onAccessTokenLifetimeChange}
             />
-            <Toggle
-              checked={clientConfig.issue_jwt_access_token}
-              disabled={alwaysIssueJWTAccessToken}
-              onChange={onIssueJWTAccessTokenChange}
-              label={renderToString(
-                "EditOAuthClientForm.issue-jwt-access-token.label"
-              )}
-            />
+            <div>
+              <Label
+                htmlFor="issue-jwt-access-token-toggle"
+                disabled={isIssueJWTAccessTokenToggleDisabled}
+              >
+                {renderToString(
+                  "EditOAuthClientForm.issue-jwt-access-token.label"
+                )}
+              </Label>
+              <Tooltip
+                tooltipMessageId={
+                  alwaysIssueJWTAccessTokenTooltipMessageID ?? ""
+                }
+                isHidden={alwaysIssueJWTAccessTokenTooltipMessageID == null}
+              >
+                <Toggle
+                  id="issue-jwt-access-token-toggle"
+                  checked={clientConfig.issue_jwt_access_token}
+                  disabled={isIssueJWTAccessTokenToggleDisabled}
+                  onChange={onIssueJWTAccessTokenChange}
+                />
+              </Tooltip>
+            </div>
           </Widget>
         ) : null}
         {showCookieSettings ? (

portal/src/locale-data/en.json

@@ -895,6 +895,7 @@
   "EditOAuthClientForm.access-token.description": "How frequent the access token should be refreshed. This will affect the timeliness of the information held in the JWT token.",
   "EditOAuthClientForm.access-token.description.m2m": "How frequent the access token should be requested again. This will affect the timeliness of the infromation held in the JWT token.",
   "EditOAuthClientForm.issue-jwt-access-token.label": "Issue JWT as access token",
+  "EditOAuthClientForm.issue-jwt-access-token.tooltip-m2m": "Access token must be in JWT format for M2M applications",
   "EditOAuthClientForm.endpoints.title": "Endpoints",
   "EditOAuthClientForm.authorization-endpoint.label": "Authorization Endpoint",
   "EditOAuthClientForm.token-endpoint.label": "Token Endpoint",