Process UXD feedback for client revocation (#1139)

cypress/integration/clients_test.spec.ts

@@ -120,18 +120,6 @@ describe("Clients test", function () {
       new AdminClient().deleteClient(client);
     });
 
-    it("Revocation", () => {
-      advancedTab.checkNone();
-
-      advancedTab.clickSetToNow().checkSetToNow();
-      advancedTab.clickClear().checkNone();
-
-      advancedTab.clickPush();
-      masthead.checkNotificationMessage(
-        "No push sent. No admin URI configured or no registered cluster nodes available"
-      );
-    });
-
     it("Clustering", () => {
       advancedTab.expandClusterNode();
 

src/clients/AdvancedTab.tsx

@@ -5,17 +5,19 @@ import {
   ButtonVariant,
   ExpandableSection,
   FormGroup,
+  InputGroup,
   PageSection,
   Split,
   SplitItem,
   Text,
   TextInput,
   ToolbarItem,
+  Tooltip,
 } from "@patternfly/react-core";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import type GlobalRequestResult from "@keycloak/keycloak-admin-client/lib/defs/globalRequestResult";
 import moment from "moment";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -52,6 +54,7 @@ export const AdvancedTab = ({
     attributes,
     protocol,
     authenticationFlowBindingOverrides,
+    adminUrl,
   },
 }: AdvancedProps) => {
   const { t } = useTranslation("clients");
@@ -68,6 +71,7 @@ export const AdvancedTab = ({
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
   const [nodes, setNodes] = useState(registeredNodes || {});
+  const pushRevocationButtonRef = useRef<HTMLElement>();
 
   const setNotBefore = (time: number, messageKey: string) => {
     setValue(revocationFieldName, time);
@@ -199,34 +203,48 @@ export const AdvancedTab = ({
                 />
               }
             >
-              <TextInput
+              <InputGroup>
-                type="text"
+                <TextInput
-                id="kc-not-before"
+                  type="text"
-                name="notBefore"
+                  id="kc-not-before"
-                isReadOnly
+                  name="notBefore"
-                value={formatDate()}
+                  isReadOnly
-              />
+                  value={formatDate()}
+                />
+                <Button
+                  id="setToNow"
+                  variant="control"
+                  onClick={() => {
+                    setNotBefore(moment.now() / 1000, "notBeforeSetToNow");
+                  }}
+                >
+                  {t("setToNow")}
+                </Button>
+                <Button
+                  id="clear"
+                  variant="control"
+                  onClick={() => {
+                    setNotBefore(0, "notBeforeNowClear");
+                  }}
+                >
+                  {t("clear")}
+                </Button>
+              </InputGroup>
             </FormGroup>
             <ActionGroup>
+              {!adminUrl && (
+                <Tooltip
+                  reference={pushRevocationButtonRef}
+                  content={t("clients-help:notBeforeTooltip")}
+                />
+              )}
               <Button
-                id="setToNow"
+                id="push"
-                variant="tertiary"
+                variant="secondary"
-                onClick={() => {
+                onClick={push}
-                  setNotBefore(moment.now() / 1000, "notBeforeSetToNow");
+                isAriaDisabled={!adminUrl}
-                }}
+                ref={pushRevocationButtonRef}
               >
-                {t("setToNow")}
-              </Button>
-              <Button
-                id="clear"
-                variant="tertiary"
-                onClick={() => {
-                  setNotBefore(0, "notBeforeNowClear");
-                }}
-              >
-                {t("clear")}
-              </Button>
-              <Button id="push" variant="secondary" onClick={push}>
                 {t("push")}
               </Button>
             </ActionGroup>

src/clients/help.ts

@@ -60,9 +60,11 @@ export default {
     scopeParameter:
       "You can copy/paste this value of scope parameter and use it in initial OpenID Connect Authentication Request sent from this client adapter. Default client scopes and selected optional client scopes will be used when generating token issued for this client",
     user: "Optionally select user, for whom the example access token will be generated. If you do not select a user, example access token will not be generated during evaluation",
-    notBefore: "Revoke any tokens issued before this date for this client.",
+    notBefore:
+      "Revoke any tokens issued before this time for this client. To push the policy, you should set an effective admin URL in the Settings tab first.",
     notBeforeIntro:
       "In order to successfully push a revocation policy to the client, you need to set an Admin URL under the <1>Settings</1> tab for this client first",
+    notBeforeTooltip: "The admin URL should be set in the Settings tab first.",
     nodeReRegistrationTimeout:
       "Interval to specify max time for registered clients cluster nodes to re-register. If cluster node will not send re-registration request to Keycloak within this time, it will be unregistered from Keycloak",
     fineGrainOpenIdConnectConfiguration: