@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Dictionary/Dictionary.tsx

@@ -36,6 +36,20 @@ export interface ComponentProps {
   valueTypes?: Array<ValueType>; // by default it'll be Text
   keys?: Array<string> | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
+  /*
+   * Per-key placeholder for the value input, falling back to valuePlaceholder
+   * for any key not listed. The record editor uses this to show the model's own
+   * example value against the column it belongs to, which is a far better
+   * answer to "what goes in this box" than one generic word repeated down the
+   * column.
+   */
+  valuePlaceholders?: Record<string, string> | undefined;
+  /*
+   * Suggestions offered on a row whose key has no entry in valueSuggestions.
+   * Used for suggestions that are about the form rather than the column - the
+   * workflow's {{...}} references, which are equally valid in any row.
+   */
+  defaultValueSuggestions?: Array<string> | undefined;
   onKeySelected?: ((key: string) => void) | undefined;
   isLoadingKeys?: boolean | undefined;
   loadingValueKeys?: Array<string> | undefined;
@@ -164,7 +178,16 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
        * numeric/boolean inputs always represent equality.
        */
       if (item.type === ValueType.Number) {
-        result[item.key] = item.value as number;
+        /*
+         * An empty number box is a row the user is still filling in, not a
+         * filter for "". Leaving the key out of the result keeps it out of the
+         * query until an actual number is typed — which is what the value
+         * input used to achieve by deleting the row outright.
+         */
+        if (typeof item.value !== "number" || isNaN(item.value)) {
+          return;
+        }
+        result[item.key] = item.value;
         return;
       }
       if (item.type === ValueType.Boolean) {
@@ -222,6 +245,35 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
     return "";
   };
 
+  type ValuePlaceholderForFunction = (key: string) => string | undefined;
+
+  const valuePlaceholderFor: ValuePlaceholderForFunction = (
+    key: string,
+  ): string | undefined => {
+    return (
+      (key ? props.valuePlaceholders?.[key] : undefined) ||
+      props.valuePlaceholder
+    );
+  };
+
+  type ValueSuggestionsForFunction = (key: string) => Array<string> | undefined;
+
+  const valueSuggestionsFor: ValueSuggestionsForFunction = (
+    key: string,
+  ): Array<string> | undefined => {
+    const forKey: Array<string> | undefined = key
+      ? props.valueSuggestions?.[key]
+      : undefined;
+
+    /*
+     * Column-specific suggestions win outright rather than merging: a column
+     * with a known set of values should not have workflow references mixed into
+     * that set, and a row with no such set is exactly where a reference is the
+     * likely thing to type.
+     */
+    return forKey && forKey.length > 0 ? forKey : props.defaultValueSuggestions;
+  };
+
   const operatorDropdownOptions: Array<DropdownOption> =
     DICTIONARY_FILTER_OPERATOR_OPTIONS.map(
       (option: DictionaryFilterOperatorOption) => {
@@ -400,7 +452,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   operatorOption.expectsMultiValue && (
                     <Dropdown
                       isMultiSelect={true}
-                      placeholder={props.valuePlaceholder}
+                      placeholder={valuePlaceholderFor(item.key)}
                       value={(Array.isArray(item.value) ? item.value : []).map(
                         (selectedValue: string) => {
                           return { label: selectedValue, value: selectedValue };
@@ -411,9 +463,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                           ...(Array.isArray(item.value)
                             ? (item.value as Array<string>)
                             : []),
-                          ...(item.key && props.valueSuggestions?.[item.key]
-                            ? props.valueSuggestions[item.key]!
-                            : []),
+                          ...(valueSuggestionsFor(item.key) || []),
                         ]),
                       ).map((optionValue: string) => {
                         return { label: optionValue, value: optionValue };
@@ -449,14 +499,12 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                       placeholder={
                         operatorOption.expectsNumericValue
                           ? "Number"
-                          : props.valuePlaceholder
+                          : valuePlaceholderFor(item.key)
                       }
                       suggestions={
                         operatorOption.expectsNumericValue
                           ? undefined
-                          : item.key && props.valueSuggestions?.[item.key]
-                            ? props.valueSuggestions[item.key]
-                            : undefined
+                          : valueSuggestionsFor(item.key)
                       }
                       isLoadingSuggestions={
                         operatorOption.expectsNumericValue
@@ -492,15 +540,23 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 {!hideValueInput && item.type === ValueType.Number && (
                   <Input
                     value={item.value.toString()}
-                    placeholder={props.valuePlaceholder}
+                    placeholder={valuePlaceholderFor(item.key)}
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
+                      const parsedValue: number = parseInt(value);
 
-                      if (typeof value === "string" && value.length > 0) {
-                        newData[index]!.value = parseInt(value);
-                      } else {
-                        delete newData[index];
-                      }
+                      /*
+                       * Emptying the box empties this row's value — it does not
+                       * remove the row. `delete` on an array leaves a hole, so
+                       * clearing the number silently threw away the filter the
+                       * user was in the middle of writing, and the next
+                       * `[...data]` materialised that hole as `undefined` and
+                       * crashed the whole form on the following render.
+                       */
+                      newData[index]!.value =
+                        value.length > 0 && !isNaN(parsedValue)
+                          ? parsedValue
+                          : "";
 
                       setData(newData);
                       onDataChange(newData);

package/UI/Components/FormModal/BasicFormModal.tsx

@@ -5,7 +5,7 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm, {
   BaseComponentProps as BasicFormComponentProps,
 } from "../Forms/BasicForm";
-import Modal from "../Modal/Modal";
+import Modal, { ModalWidth } from "../Modal/Modal";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement, useEffect, useRef, useState } from "react";
 
@@ -19,6 +19,7 @@ export interface ComponentProps<T extends GenericObject> {
   submitButtonStyleType?: undefined | ButtonStyleType;
   formProps: BasicFormComponentProps<T>;
   description?: string | undefined;
+  modalWidth?: ModalWidth | undefined;
 }
 
 const BasicFormModal: <T extends GenericObject>(

package/UI/Components/Forms/Fields/ColorPicker.tsx

@@ -10,6 +10,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
@@ -43,14 +44,20 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
     anchorRef,
     popupRef,
     isPopupOpen,
+    popupId,
     popupPosition,
     portalTarget,
+    onTriggerKeyDown,
     togglePopup,
   }: AnchoredFieldPopup = useAnchoredFieldPopup({
     popupMaxHeight: COLOR_PICKER_POPUP_MAX_HEIGHT_PX,
     popupWidth: COLOR_PICKER_POPUP_WIDTH_PX,
   });
 
+  const isInteractive: boolean = !props.readOnly && !props.disabled;
+  const generatedId: string = useId();
+  const errorId: string = `${generatedId}-color-picker-error`;
+
   const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
     useState<boolean>(false);
 
@@ -79,20 +86,39 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
       >
         <div
           onClick={() => {
-            if (!props.readOnly) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          aria-hidden="true"
           className="rounded h-5 w-5 border border-gray-200 cursor-pointer"
           style={{ backgroundColor: color.toString() }}
         ></div>
 
         <Input
           onClick={() => {
-            if (!props.readOnly) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          /*
+           * The field is a trigger, not a text box: it is readOnly and its only
+           * job is to open the picker. Without this a keyboard user cannot
+           * reach the picker at all, which on a required colour - the Create
+           * Label form - means they cannot submit the form either.
+           */
+          onKeyDown={isInteractive ? onTriggerKeyDown : undefined}
+          ariaHasPopup="dialog"
+          ariaExpanded={isPopupOpen}
+          ariaControls={isPopupOpen ? popupId : undefined}
+          /*
+           * The message below belongs to the whole control rather than to this
+           * input, so it has to be pointed at explicitly - otherwise "Label
+           * Color is required." is on screen and nowhere in the accessibility
+           * tree, and a screen reader user is told only that the form failed.
+           */
+          ariaDescribedby={props.error ? errorId : undefined}
+          ariaInvalid={Boolean(props.error)}
           disabled={props.disabled}
           dataTestId={props.dataTestId}
           onBlur={props.onBlur}
@@ -113,16 +139,24 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
           onFocus={props.onFocus || undefined}
         />
         {color && !props.disabled && (
-          <Icon
-            icon={IconProp.Close}
-            className="text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600"
+          /*
+           * A button, not a bare svg with a click handler: undoing a choice has
+           * to be reachable by the same keyboard that made it.
+           */
+          <button
+            type="button"
+            aria-label="Clear color"
+            title="Clear color"
+            className="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
             onClick={() => {
               setColor("");
               if (props.onChange) {
                 props.onChange(null);
               }
             }}
-          />
+          >
+            <Icon icon={IconProp.Close} className="h-5 w-5 cursor-pointer" />
+          </button>
         )}
       </div>
       {/*
@@ -134,6 +168,9 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
             <div
               ref={popupRef}
               data-testid="color-picker-popup"
+              id={popupId}
+              role="dialog"
+              aria-label="Color picker"
               tabIndex={-1}
               className="fixed overflow-auto rounded-md shadow-lg"
               style={{
@@ -147,10 +184,24 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
             >
               <ChromePicker
                 color={color}
+                /*
+                 * The field stores a bare hex, so an alpha channel it cannot
+                 * represent is worse than no alpha at all: react-color reports
+                 * a fully transparent colour as the literal "transparent",
+                 * which sails through Color (it validates nothing) and is then
+                 * rejected on save as longer than the ten characters the column
+                 * holds - for a colour the user can see in the swatch.
+                 */
+                disableAlpha={true}
+                /*
+                 * One callback, not two. The swatch used to be painted from
+                 * onChange and the form fed from onChangeComplete, which
+                 * react-color debounces by 100ms — so for that window the field
+                 * showed a colour the form did not hold yet. The value always
+                 * arrived in the end, but there is no reason for the two to
+                 * disagree at all.
+                 */
                 onChange={(color: ColorResult) => {
-                  setColor(color.hex);
-                }}
-                onChangeComplete={(color: ColorResult) => {
                   return handleChange(color.hex);
                 }}
               />
@@ -159,7 +210,12 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
           )
         : null}
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          role="alert"
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/Forms/Fields/IconPicker.tsx

@@ -9,6 +9,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
@@ -41,15 +42,21 @@ const IconPicker: FunctionComponent<ComponentProps> = (
     anchorRef,
     popupRef,
     isPopupOpen,
+    popupId,
     popupPosition,
     portalTarget,
     closePopup,
+    onTriggerKeyDown,
     togglePopup,
   }: AnchoredFieldPopup = useAnchoredFieldPopup({
     popupMaxHeight: ICON_PICKER_POPUP_MAX_HEIGHT_PX,
     popupWidth: ICON_PICKER_POPUP_WIDTH_PX,
   });
 
+  const isInteractive: boolean = !props.readOnly && !props.disabled;
+  const generatedId: string = useId();
+  const errorId: string = `${generatedId}-icon-picker-error`;
+
   const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
     useState<boolean>(false);
 
@@ -84,10 +91,11 @@ const IconPicker: FunctionComponent<ComponentProps> = (
       >
         <div
           onClick={() => {
-            if (!props.readOnly && !props.disabled) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          aria-hidden="true"
           className="flex items-center justify-center h-5 w-5 cursor-pointer"
         >
           {selectedIcon ? (
@@ -99,10 +107,18 @@ const IconPicker: FunctionComponent<ComponentProps> = (
 
         <Input
           onClick={() => {
-            if (!props.readOnly && !props.disabled) {
+            if (isInteractive) {
               togglePopup();
             }
           }}
+          // The field is a trigger, not a text box - see ColorPicker.
+          onKeyDown={isInteractive ? onTriggerKeyDown : undefined}
+          ariaHasPopup="dialog"
+          ariaExpanded={isPopupOpen}
+          ariaControls={isPopupOpen ? popupId : undefined}
+          // The message below belongs to the control, not to this input.
+          ariaDescribedby={props.error ? errorId : undefined}
+          ariaInvalid={Boolean(props.error)}
           disabled={props.disabled}
           dataTestId={props.dataTestId}
           onBlur={props.onBlur}
@@ -119,14 +135,19 @@ const IconPicker: FunctionComponent<ComponentProps> = (
           onFocus={props.onFocus || undefined}
         />
         {selectedIcon && !props.disabled && (
-          <Icon
-            icon={IconProp.Close}
-            className="text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600"
+          // A button, not a bare svg with a click handler - see ColorPicker.
+          <button
+            type="button"
+            aria-label="Clear icon"
+            title="Clear icon"
+            className="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded"
             onClick={() => {
               setSelectedIcon(null);
               props.onChange(null);
             }}
-          />
+          >
+            <Icon icon={IconProp.Close} className="h-5 w-5 cursor-pointer" />
+          </button>
         )}
       </div>
       {/*
@@ -138,6 +159,9 @@ const IconPicker: FunctionComponent<ComponentProps> = (
             <div
               ref={popupRef}
               data-testid="icon-picker-popup"
+              id={popupId}
+              role="dialog"
+              aria-label="Icon picker"
               tabIndex={-1}
               className="fixed flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-lg p-3"
               style={{
@@ -166,13 +190,22 @@ const IconPicker: FunctionComponent<ComponentProps> = (
               {/* Icons grid */}
               <div className="grid grid-cols-6 gap-2 min-h-0 flex-1 overflow-y-auto">
                 {filteredIcons.map((icon: IconProp) => {
+                  /*
+                   * A button rather than a div: the grid is the only way to set
+                   * this field, so every cell has to be reachable by Tab and
+                   * answer to Enter and Space. type="button" keeps it from
+                   * submitting the form the field sits in.
+                   */
                   return (
-                    <div
+                    <button
                       key={icon}
+                      type="button"
                       onClick={() => {
                         handleChange(icon);
                       }}
-                      className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${
+                      aria-pressed={selectedIcon === icon}
+                      aria-label={icon}
+                      className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 ${
                         selectedIcon === icon
                           ? "bg-indigo-100 ring-2 ring-indigo-500"
                           : ""
@@ -180,7 +213,7 @@ const IconPicker: FunctionComponent<ComponentProps> = (
                       title={icon}
                     >
                       <Icon icon={icon} className="h-5 w-5 text-gray-600" />
-                    </div>
+                    </button>
                   );
                 })}
               </div>
@@ -195,7 +228,12 @@ const IconPicker: FunctionComponent<ComponentProps> = (
           )
         : null}
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          role="alert"
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/Forms/Types/Field.ts

@@ -92,6 +92,13 @@ export default interface Field<TEntity> {
     | undefined;
   styleType?: FormFieldStyleType | undefined;
   showIf?: ((item: FormValues<TEntity>) => boolean) | undefined;
+  /**
+   * For a JSON field: judge its contents by JSON5's rules rather than JSON's.
+   * Set it where the code that eventually reads this value uses
+   * JSONFunctions.parse, so validation cannot reject a value that would have
+   * been read back perfectly well.
+   */
+  allowJSON5?: boolean | undefined;
   onChange?:
     | ((
         value: any,

package/UI/Components/Forms/Validation.ts

@@ -12,8 +12,12 @@ import Email from "../../../Types/Email";
 import BadDataException from "../../../Types/Exception/BadDataException";
 import Exception from "../../../Types/Exception/Exception";
 import GenericObject from "../../../Types/GenericObject";
-import { JSONObject } from "../../../Types/JSON";
+import { JSONObject, JSONValue } from "../../../Types/JSON";
 import Phone from "../../../Types/Phone";
+import {
+  JSONSyntaxCheckResult,
+  checkJSONSyntax,
+} from "../../../Types/Workflow/TemplateSyntax";
 import { Logger } from "../../Utils/Logger";
 import Port from "../../../Types/Port";
 import Typeof from "../../../Types/Typeof";
@@ -320,6 +324,50 @@ export default class Validation {
     return null;
   }
 
+  /**
+   * A JSON field whose contents are not JSON.
+   *
+   * Until this existed, a stray trailing comma saved cleanly and only surfaced
+   * when something tried to parse it — for a workflow that meant a real run,
+   * at whatever hour the trigger fired, ending in
+   * "Invalid JSON provided for argument request-body"
+   * (RunWorkflow.getComponentArguments).
+   *
+   * Takes the raw value rather than the stringified `content` the other
+   * validators get, because a JSON-typed field can legitimately already hold a
+   * parsed object, and `String(anObject)` is "[object Object]" — which is not
+   * JSON, and would fail every time.
+   *
+   * Tolerates {{...}} handlebars: workflow arguments are templates, and
+   * `{"retries": {{local.variables.retryCount}}}` is not JSON as written but is
+   * JSON by the time it is parsed. checkJSONSyntax masks those before parsing
+   * and declines to judge anything containing a {{#each}} loop at all.
+   */
+  public static validateJSONSyntax<T extends GenericObject>(
+    value: JSONValue | undefined,
+    field: Field<T>,
+  ): string | null {
+    if (field.fieldType !== FormFieldSchemaType.JSON) {
+      return null;
+    }
+
+    const result: JSONSyntaxCheckResult = checkJSONSyntax(value, {
+      allowJSON5: field.allowJSON5,
+    });
+
+    if (result.isValid) {
+      return null;
+    }
+
+    return translateValidationMessage(
+      "{{field}} is not valid JSON. {{parserMessage}}",
+      {
+        field: field.title || field.name || "",
+        parserMessage: result.errorMessage || "",
+      },
+    );
+  }
+
   public static validate<T extends GenericObject>(args: {
     formFields: Array<Field<T>>;
     values: FormValues<T>;
@@ -375,6 +423,20 @@ export default class Validation {
           errors[name] = resultValidateData;
         }
 
+        /*
+         * Fed the raw value, not `content` — see validateJSONSyntax. An
+         * already-parsed object stringifies to "[object Object]", which would
+         * fail the check every time it was handed the stringified form.
+         */
+        const resultJSONSyntax: string | null = this.validateJSONSyntax(
+          (entries as JSONObject)[name] as JSONValue | undefined,
+          field,
+        );
+
+        if (resultJSONSyntax) {
+          errors[name] = resultJSONSyntax;
+        }
+
         const resultMatch: string | null = this.validateMatchField(
           content,
           field,

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -1,6 +1,14 @@
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import Icon from "../Icon/Icon";
 import Image from "../Image/Image";
+import KeyboardShortcut, {
+  KeyboardShortcutSize,
+  KeyboardShortcutVariant,
+} from "../KeyboardShortcut/KeyboardShortcut";
+import {
+  KeyboardKeyUtil,
+  KeyboardShortcutKey,
+} from "../KeyboardShortcut/KeyboardKey";
 import Route from "../../../Types/API/Route";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, {
@@ -20,6 +28,13 @@ export interface ComponentProps {
   name: string;
   showDropdown: boolean;
   isPressed?: boolean | undefined;
+  /** Tints the icon, e.g. to mark an AI entry point. */
+  iconClassName?: string | undefined;
+  /**
+   * Shortcut that triggers this button, shown as keycaps beside the label in
+   * the notation of the user's platform (⌘ I on a Mac, Ctrl I elsewhere).
+   */
+  shortcut?: Array<KeyboardShortcutKey> | undefined;
 }
 
 const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
@@ -40,21 +55,42 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
 
   const hasLabel: boolean = Boolean(props.title);
   const hasDropdown: boolean = Boolean(props.children);
+  const hasShortcut: boolean = Boolean(props.shortcut?.length);
 
+  /*
+   * The keycaps are hidden below the sm breakpoint, so the tighter right
+   * padding they need comes in at the same breakpoint they do.
+   */
   const sizeClassName: string = hasLabel
-    ? "h-9 gap-1.5 pl-2.5 pr-3"
+    ? `h-9 gap-1.5 pl-2.5 ${hasShortcut ? "pr-3 sm:pr-1.5" : "pr-3"}`
     : "h-9 w-9 justify-center";
 
+  /*
+   * Native tooltip: the label alone on screen, the shortcut spelled out in
+   * words on hover ("Ask AI · Command + I") for anyone who missed the keycaps.
+   */
+  const tooltip: string = hasShortcut
+    ? `${props.title || props.name} · ${KeyboardKeyUtil.getShortcutLabel(
+        props.shortcut!,
+      )}`
+    : props.title || props.name;
+
   return (
     <div className="relative ml-2 flex-shrink-0">
       <div>
         <button
           type="button"
-          className={`flex items-center rounded-lg border border-gray-200 bg-gray-50 hover:bg-gray-100 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 ${sizeClassName}`}
+          title={tooltip}
+          className={`flex items-center rounded-lg border border-gray-200 bg-gray-50 hover:bg-white hover:border-gray-300 hover:shadow-sm active:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 ${sizeClassName}`}
           id={hasDropdown ? "user-menu-button" : undefined}
           aria-expanded={hasDropdown ? isDropdownVisible : undefined}
           aria-haspopup={hasDropdown ? "true" : undefined}
           aria-pressed={props.isPressed}
+          aria-keyshortcuts={
+            hasShortcut
+              ? KeyboardKeyUtil.getAriaKeyShortcuts(props.shortcut!)
+              : undefined
+          }
           onClick={() => {
             props.onClick?.();
             setIsComponentVisible(!isDropdownVisible);
@@ -73,7 +109,9 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
           )}
           {props.icon && (
             <Icon
-              className={`${hasLabel ? "h-4 w-4" : "h-5 w-5"} text-gray-500`}
+              className={`${hasLabel ? "h-4 w-4" : "h-5 w-5"} ${
+                props.iconClassName || "text-gray-500"
+              }`}
               icon={props.icon}
             />
           )}
@@ -82,6 +120,18 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
               {props.title}
             </span>
           )}
+          {hasShortcut && (
+            /*
+             * Ghost caps, not outlined ones: the button turns white on hover,
+             * and a filled cap keeps its edge against both backgrounds.
+             */
+            <KeyboardShortcut
+              keys={props.shortcut!}
+              size={KeyboardShortcutSize.ExtraSmall}
+              variant={KeyboardShortcutVariant.Ghost}
+              className="ml-0.5 hidden sm:inline-flex"
+            />
+          )}
         </button>
         {props.badge && props.badge > 0 && (
           <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-semibold text-white ring-2 ring-white">