@oneuptime/common 13.0.4 → 13.0.6

package/UI/Components/Card/Card.tsx

@@ -21,6 +21,18 @@ export interface CardButtonSchema {
   buttonSize?: ButtonSize | undefined;
 }
 
+/*
+ * How the header shares its width.
+ *
+ * "default" puts the actions to the right of the title on md and up, which
+ * suits a full-width card. In a narrow column (the one-third sidebar of an
+ * overview page) that squeezes the title and description into a column a
+ * word or two wide beside the buttons, so "stacked" gives the title and
+ * description the whole width and moves the actions onto their own row
+ * underneath.
+ */
+export type CardHeaderLayout = "default" | "stacked";
+
 export interface ComponentProps {
   title?: string | ReactElement | undefined;
   description?: string | ReactElement | undefined;
@@ -29,106 +41,129 @@ export interface ComponentProps {
   className?: string | undefined;
   bodyClassName?: string | undefined;
   rightElement?: ReactElement | undefined;
+  headerLayout?: CardHeaderLayout | undefined;
 }
 
 const Card: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateValue } = useTranslateValue();
-  const noRightElementsOrButtons: boolean =
-    !props.rightElement && (!props.buttons || props.buttons.length === 0);
+  const hasButtons: boolean = Boolean(
+    props.buttons && props.buttons.length > 0,
+  );
+  const noRightElementsOrButtons: boolean = !props.rightElement && !hasButtons;
+  const isStacked: boolean = props.headerLayout === "stacked";
   const translatedTitle: string | ReactElement | undefined = translateValue(
     props.title,
   );
   const translatedDescription: string | ReactElement | undefined =
     translateValue(props.description);
 
+  const renderButtons: () => Array<ReactElement> = (): Array<ReactElement> => {
+    return (props.buttons || []).map(
+      (button: CardButtonSchema | ReactElement, i: number) => {
+        return (
+          <div key={i} className="flex items-center">
+            {React.isValidElement(button) ? button : null}
+            {React.isValidElement(button) ? null : (
+              <Button
+                key={i}
+                title={(button as CardButtonSchema).title}
+                buttonStyle={(button as CardButtonSchema).buttonStyle}
+                buttonSize={(button as CardButtonSchema).buttonSize}
+                className={(button as CardButtonSchema).className}
+                onClick={() => {
+                  if ((button as CardButtonSchema).onClick) {
+                    (button as CardButtonSchema).onClick();
+                  }
+                }}
+                disabled={(button as CardButtonSchema).disabled}
+                tooltip={(button as CardButtonSchema).tooltip}
+                icon={(button as CardButtonSchema).icon}
+                shortcutKey={(button as CardButtonSchema).shortcutKey}
+                dataTestId="card-button"
+                isLoading={(button as CardButtonSchema).isLoading}
+              />
+            )}
+          </div>
+        );
+      },
+    );
+  };
+
+  const titleAndDescription: ReactElement = (
+    <React.Fragment>
+      {translatedTitle && (
+        <h2
+          data-testid="card-details-heading"
+          id="card-details-heading"
+          className="text-lg font-semibold leading-6 text-gray-900"
+        >
+          {translatedTitle}
+        </h2>
+      )}
+      {translatedDescription && (
+        <p
+          data-testid="card-description"
+          className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
+        >
+          {translatedDescription}
+        </p>
+      )}
+    </React.Fragment>
+  );
+
+  /*
+   * Button carries a left margin for the side-by-side header (ml-1 or
+   * md:ml-3, depending on its style). On a row of its own that margin only
+   * pushes the first button off the title's left edge, and the gap already
+   * spaces the rest, so it is cleared here.
+   */
+  const stackedHeader: ReactElement = (
+    <div data-testid="card-header" data-header-layout="stacked">
+      <div className="w-full min-w-0">{titleAndDescription}</div>
+      {(props.rightElement || hasButtons) && (
+        <div
+          data-testid="card-header-actions"
+          className="mt-3 flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0"
+        >
+          {props.rightElement && (
+            <div className="flex items-center">{props.rightElement}</div>
+          )}
+          {hasButtons && renderButtons()}
+        </div>
+      )}
+    </div>
+  );
+
+  const defaultHeader: ReactElement = (
+    <div className="flex flex-col md:flex-row md:justify-between md:items-start">
+      <div
+        className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
+      >
+        {titleAndDescription}
+      </div>
+      {(props.rightElement || hasButtons) && (
+        <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
+          {props.rightElement && (
+            <div className="mb-2 md:mb-0 md:mr-3">{props.rightElement}</div>
+          )}
+          {hasButtons && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              {renderButtons()}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <React.Fragment>
       <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
         <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible">
           <div className="py-6 px-5 md:px-6">
-            <div className="flex flex-col md:flex-row md:justify-between md:items-start">
-              <div
-                className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
-              >
-                {translatedTitle && (
-                  <h2
-                    data-testid="card-details-heading"
-                    id="card-details-heading"
-                    className="text-lg font-semibold leading-6 text-gray-900"
-                  >
-                    {translatedTitle}
-                  </h2>
-                )}
-                {translatedDescription && (
-                  <p
-                    data-testid="card-description"
-                    className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
-                  >
-                    {translatedDescription}
-                  </p>
-                )}
-              </div>
-              {(props.rightElement ||
-                (props.buttons && props.buttons.length > 0)) && (
-                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
-                  {props.rightElement && (
-                    <div className="mb-2 md:mb-0 md:mr-3">
-                      {props.rightElement}
-                    </div>
-                  )}
-                  {props.buttons && props.buttons.length > 0 && (
-                    <div className="flex flex-wrap items-center gap-1.5">
-                      {props.buttons.map(
-                        (
-                          button: CardButtonSchema | ReactElement,
-                          i: number,
-                        ) => {
-                          return (
-                            <div key={i} className="flex items-center">
-                              {React.isValidElement(button) ? button : null}
-                              {React.isValidElement(button) ? null : (
-                                <Button
-                                  key={i}
-                                  title={(button as CardButtonSchema).title}
-                                  buttonStyle={
-                                    (button as CardButtonSchema).buttonStyle
-                                  }
-                                  buttonSize={
-                                    (button as CardButtonSchema).buttonSize
-                                  }
-                                  className={
-                                    (button as CardButtonSchema).className
-                                  }
-                                  onClick={() => {
-                                    if ((button as CardButtonSchema).onClick) {
-                                      (button as CardButtonSchema).onClick();
-                                    }
-                                  }}
-                                  disabled={
-                                    (button as CardButtonSchema).disabled
-                                  }
-                                  tooltip={(button as CardButtonSchema).tooltip}
-                                  icon={(button as CardButtonSchema).icon}
-                                  shortcutKey={
-                                    (button as CardButtonSchema).shortcutKey
-                                  }
-                                  dataTestId="card-button"
-                                  isLoading={
-                                    (button as CardButtonSchema).isLoading
-                                  }
-                                />
-                              )}
-                            </div>
-                          );
-                        },
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
+            {isStacked ? stackedHeader : defaultHeader}
 
             {props.children && (
               <div className={props.bodyClassName || "mt-4"}>

package/UI/Components/Checkbox/Checkbox.tsx

@@ -38,6 +38,8 @@ export interface CategoryProps {
 const CheckboxElement: FunctionComponent<CategoryProps> = (
   props: CategoryProps,
 ): ReactElement => {
+  const checkboxId: string = React.useId();
+  const descriptionId: string = `${checkboxId}-description`;
   const [value, setValue] = React.useState<boolean>(
     props.initialValue || false,
   );
@@ -65,6 +67,7 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
       >
         <div className="flex h-6 items-center">
           <input
+            id={checkboxId}
             checked={value}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               setValue(event.target.checked);
@@ -83,9 +86,7 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
             data-testid={props.dataTestId}
             aria-label={props.ariaLabel}
             title={props.hoverText}
-            aria-describedby={
-              props.description ? "checkbox-description" : undefined
-            }
+            aria-describedby={props.description ? descriptionId : undefined}
             aria-invalid={props.error ? "true" : undefined}
             type="checkbox"
             className={`accent-indigo-600 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 ${
@@ -94,9 +95,11 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
           />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label className="font-medium text-gray-900">{props.title}</label>
+          <label className="font-medium text-gray-900" htmlFor={checkboxId}>
+            {props.title}
+          </label>
           {props.description && (
-            <div id="checkbox-description" className="text-gray-500">
+            <div id={descriptionId} className="text-gray-500">
               {props.description}
             </div>
           )}

package/UI/Components/CopyTextButton/CopyTextButton.tsx

@@ -33,7 +33,13 @@ const CopyTextButton: FunctionComponent<ComponentProps> = (
   ) => {
     event.preventDefault();
     event.stopPropagation();
-    await Clipboard.copyToClipboard(props.textToBeCopied);
+    // A refused or unavailable clipboard resolves false; "Copied!" would lie.
+    const succeeded: boolean = await Clipboard.copyToClipboard(
+      props.textToBeCopied,
+    );
+    if (!succeeded) {
+      return;
+    }
     setCopied(true);
     setTimeout(() => {
       setCopied(false);

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -5,7 +5,7 @@ import PermissionGate, {
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
-import Card, { CardButtonSchema } from "../Card/Card";
+import Card, { CardButtonSchema, CardHeaderLayout } from "../Card/Card";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Detail from "../Detail/Detail";
 import { DropdownOption } from "../Dropdown/Dropdown";
@@ -95,6 +95,8 @@ export interface ComponentProps {
    * somebody edits it here.
    */
   onValuesLoaded?: ((customFields: JSONObject) => void) | undefined;
+  // Handed to the Card; "stacked" suits a narrow column.
+  headerLayout?: CardHeaderLayout | undefined;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
@@ -362,6 +364,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       title={props.title}
       description={props.description}
       buttons={cardButtons}
+      headerLayout={props.headerLayout}
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !loadError && <ComponentLoader />}

package/UI/Components/Detail/Detail.tsx

@@ -8,6 +8,7 @@ import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
 import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import DropdownValueBadge from "../Dropdown/DropdownValueBadge";
 import HiddenText from "../HiddenText/HiddenText";
+import Link from "../Link/Link";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
 import FieldType from "../Types/FieldType";
@@ -27,6 +28,12 @@ export enum DetailStyle {
   Default = "default",
   Card = "card",
   Minimal = "minimal",
+  /*
+   * Dense label-over-value rows split by hairline dividers, for the narrow
+   * right-hand details column of an overview page. Opt-in: the other styles
+   * render exactly as before.
+   */
+  Compact = "compact",
 }
 
 export interface ComponentProps<T extends GenericObject> {
@@ -44,7 +51,7 @@ type DetailFunction = <T extends GenericObject>(
 const Detail: DetailFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  const { translateString } = useTranslateValue();
+  const { translateString, translateValue } = useTranslateValue();
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -385,6 +392,116 @@ const Detail: DetailFunction = <T extends GenericObject>(
     );
   };
 
+  type GetFieldValueContentFunction = (
+    field: Field<T>,
+    data: string | ReactElement,
+  ) => ReactElement;
+
+  // The rendered value (or its placeholder), shared by every style.
+  const getFieldValueContent: GetFieldValueContentFunction = (
+    field: Field<T>,
+    data: string | ReactElement,
+  ): ReactElement => {
+    return (
+      <>
+        {data && (
+          <div
+            className={`${field.contentClassName || ""} w-full ${
+              field.opts?.isCopyable
+                ? "flex items-center gap-3 group/copyable"
+                : ""
+            }`}
+          >
+            <div className="break-words leading-relaxed">{data}</div>
+
+            {field.opts?.isCopyable &&
+              field.fieldType !== FieldType.HiddenText && (
+                <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
+                  <CopyableButton textToBeCopied={data.toString()} />
+                </div>
+              )}
+          </div>
+        )}
+        {(data === null || data === undefined || data === "") &&
+          field.placeholder && <PlaceholderText text={field.placeholder} />}
+      </>
+    );
+  };
+
+  type GetCompactFieldFunction = (
+    field: Field<T>,
+    index: number,
+    data: string | ReactElement,
+    colSpanClassName: string,
+    alignClassName: string,
+  ) => ReactElement;
+
+  /*
+   * DetailStyle.Compact. The DOM keeps the same shape as the other styles -
+   * a row holding the label block (div.space-y-1) and then the value - so
+   * anything that walks from a label to its value keeps working; only the
+   * spacing and type scale change. Rows sit flush in a single column (the
+   * container draws hairline dividers between them) and fall back to plain
+   * vertical rhythm when several columns share a row.
+   */
+  const getCompactField: GetCompactFieldFunction = (
+    field: Field<T>,
+    index: number,
+    data: string | ReactElement,
+    colSpanClassName: string,
+    alignClassName: string,
+  ): ReactElement => {
+    const translatedTitle: string | undefined = translateString(field.title);
+    const translatedDescription: string | ReactElement | undefined =
+      translateValue(field.description);
+    const translatedSideLinkText: string | undefined = translateString(
+      field.sideLink?.text,
+    );
+    const isSingleColumn: boolean =
+      (props.showDetailsInNumberOfColumns || 1) <= 1;
+
+    return (
+      <div
+        className={`${colSpanClassName} min-w-0 py-3${
+          isSingleColumn ? " first:pt-0 last:pb-0" : ""
+        }`}
+        key={index}
+      >
+        <div className="space-y-1">
+          {translatedTitle && (
+            <label
+              className={`${alignClassName} items-center gap-2 text-xs font-medium text-gray-500`}
+            >
+              <span>{translatedTitle}</span>
+              {field.sideLink &&
+                translatedSideLinkText &&
+                field.sideLink.url && (
+                  <Link
+                    to={field.sideLink.url}
+                    openInNewTab={field.sideLink.openLinkInNewTab}
+                    className="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 hover:underline underline-offset-2"
+                  >
+                    {translatedSideLinkText}
+                  </Link>
+                )}
+            </label>
+          )}
+          {translatedDescription && (
+            <div
+              className={`${alignClassName} text-xs leading-5 text-gray-400`}
+            >
+              {translatedDescription}
+            </div>
+          )}
+        </div>
+
+        <div className={`mt-1 text-sm text-gray-900 ${alignClassName}`}>
+          {getFieldValueContent(field, data)}
+        </div>
+      </div>
+    );
+  };
+
   type GetFieldFunction = (field: Field<T>, index: number) => ReactElement;
 
   // Helper function to get nested property values using dot notation
@@ -795,6 +912,10 @@ const Detail: DetailFunction = <T extends GenericObject>(
     const isCardStyle: boolean = styleType === DetailStyle.Card;
     const isMinimalStyle: boolean = styleType === DetailStyle.Minimal;
 
+    if (styleType === DetailStyle.Compact) {
+      return getCompactField(field, index, data, className, alignClassName);
+    }
+
     /* Container classes based on style - uses first:pt-0 to remove top padding from first field */
     let containerClasses: string =
       "group transition-all duration-200 ease-in-out";
@@ -814,7 +935,6 @@ const Detail: DetailFunction = <T extends GenericObject>(
       <div
         className={`${className} ${containerClasses}`}
         key={index}
-        id={props.id}
         style={
           props.showDetailsInNumberOfColumns
             ? {
@@ -837,26 +957,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
             isCardStyle ? "text-gray-800" : "text-gray-700"
           }`}
         >
-          {data && (
-            <div
-              className={`${field.contentClassName || ""} w-full ${
-                field.opts?.isCopyable
-                  ? "flex items-center gap-3 group/copyable"
-                  : ""
-              }`}
-            >
-              <div className="break-words leading-relaxed">{data}</div>
-
-              {field.opts?.isCopyable &&
-                field.fieldType !== FieldType.HiddenText && (
-                  <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
-                    <CopyableButton textToBeCopied={data.toString()} />
-                  </div>
-                )}
-            </div>
-          )}
-          {(data === null || data === undefined || data === "") &&
-            field.placeholder && <PlaceholderText text={field.placeholder} />}
+          {getFieldValueContent(field, data)}
         </div>
       </div>
     );
@@ -867,10 +968,31 @@ const Detail: DetailFunction = <T extends GenericObject>(
   const isCardStyle: boolean = styleType === DetailStyle.Card;
 
   // Grid gap classes - cards need more gap, others less since they have internal padding
-  const gapClasses: string = isCardStyle ? "gap-4" : "gap-0";
+  let gapClasses: string = isCardStyle ? "gap-4" : "gap-0";
+
+  if (styleType === DetailStyle.Compact) {
+    /*
+     * Hairline dividers between stacked rows. Once several columns share a
+     * row (sm and up) a top border would also land on the first row's
+     * right-hand cells, so that layout separates cells with whitespace.
+     */
+    gapClasses =
+      (props.showDetailsInNumberOfColumns || 1) > 1
+        ? "gap-0 divide-y divide-gray-100 sm:gap-x-6 sm:divide-y-0"
+        : "gap-0 divide-y divide-gray-100";
+  }
 
   return (
+    /*
+     * The id names this detail, so it belongs to the element that holds all of
+     * it. It used to be stamped on every row instead, which put the same id on
+     * as many elements as the detail had fields: invalid HTML, an anchor or
+     * getElementById that reaches only the first row, and a Playwright locator
+     * that resolves to several elements and fails strict mode - which is how
+     * the SLO settings E2E found it.
+     */
     <div
+      id={props.id}
       className={`grid grid-cols-1 ${gapClasses} sm:grid-cols-${
         props.showDetailsInNumberOfColumns || 1
       } w-full`}

package/UI/Components/Dropdown/Dropdown.tsx

@@ -6,16 +6,19 @@ import React, {
   ReactElement,
   useId,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
 import Color from "../../../Types/Color";
 import Label from "../../../Models/DatabaseModels/Label";
 import Select, {
+  components as ReactSelectComponents,
   ControlProps,
   CSSObjectWithLabel,
   FormatOptionLabelMeta,
   GroupBase,
+  MultiValueRemoveProps,
   OptionProps,
 } from "react-select";
 
@@ -64,6 +67,11 @@ export interface ComponentProps {
   ariaLabel?: string | undefined;
   ariaLabelledby?: string | undefined;
   disabled?: boolean | undefined;
+  /*
+   * Show the clear (×) control. Defaults to true; turn it off for a choice
+   * that must always have a value, where clearing would only be undone.
+   */
+  isClearable?: boolean | undefined;
 }
 
 const Dropdown: FunctionComponent<ComponentProps> = (
@@ -501,6 +509,60 @@ const Dropdown: FunctionComponent<ComponentProps> = (
     );
   };
 
+  /*
+   * react-select names a chip's remove button after whatever formatOptionLabel
+   * returned for it: `aria-label={"Remove " + children}` in its MultiValue.
+   * Ours returns an element - the option's text sits next to a colour dot and
+   * its labels - and concatenating that gives "Remove [object Object]", which
+   * is what a screen reader read out for every chip in every multi-select.
+   * Name the button after the option's own text instead, translated the same
+   * way the chip is.
+   *
+   * The identity has to hold still across renders: react-select rebuilds its
+   * component table whenever the components prop stops being shallow-equal, and
+   * a rebuilt table is a new element type, so React would throw the remove
+   * button away and mount a fresh one on every render - taking the focus with
+   * it if someone were tabbing through the chips. useTranslateValue hands back a
+   * new translateString each render, so keep the latest one in a ref and depend
+   * on nothing.
+   */
+  const translateStringRef: React.MutableRefObject<
+    (value: string | undefined) => string | undefined
+  > = useRef(translateString);
+  translateStringRef.current = translateString;
+
+  const MultiValueRemoveWithOptionName: FunctionComponent<
+    MultiValueRemoveProps<DropdownOption, boolean, GroupBase<DropdownOption>>
+  > = useMemo(() => {
+    const MultiValueRemove: FunctionComponent<
+      MultiValueRemoveProps<DropdownOption, boolean, GroupBase<DropdownOption>>
+    > = (
+      removeProps: MultiValueRemoveProps<
+        DropdownOption,
+        boolean,
+        GroupBase<DropdownOption>
+      >,
+    ): ReactElement => {
+      const optionLabel: string =
+        translateStringRef.current(removeProps.data.label) ??
+        removeProps.data.label;
+
+      return (
+        <ReactSelectComponents.MultiValueRemove
+          {...removeProps}
+          innerProps={{
+            ...removeProps.innerProps,
+            "aria-label": `Remove ${optionLabel}`,
+          }}
+        />
+      );
+    };
+
+    MultiValueRemove.displayName = "DropdownMultiValueRemove";
+
+    return MultiValueRemove;
+  }, []);
+
   useLayoutEffect(() => {
     if (firstUpdate.current && props.initialValue) {
       firstUpdate.current = false;
@@ -534,6 +596,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         classNamePrefix="ou-select"
         unstyled={false}
         formatOptionLabel={formatDropdownOptionLabel}
+        components={{ MultiValueRemove: MultiValueRemoveWithOptionName }}
         onBlur={() => {
           props.onBlur?.();
         }}
@@ -729,7 +792,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
         }}
         menuPortalTarget={menuPortalTarget}
         menuPosition="fixed"
-        isClearable={true}
+        isClearable={props.isClearable ?? true}
         isSearchable={true}
         placeholder={tx(props.placeholder) ?? props.placeholder}
         options={props.options as any}