@oneuptime/common 13.0.0 → 13.0.1

package/Typings/Index.d.ts

@@ -13,3 +13,66 @@ declare module "*.gif";
  * supplies the behaviour at runtime.
  */
 declare module "i18next-browser-languagedetector";
+
+/*
+ * Billing's Common tests import Dashboard pages and provide virtual Stripe
+ * mocks. Stripe's browser packages are installed only by Dashboard, so the
+ * Common-only CI job needs declarations for the browser API those tests use.
+ * Keep these contracts narrow rather than declaring the packages as `any`.
+ * Dashboard's tsconfig does not include this file: production compilation
+ * continues to check against the packages' complete upstream declarations.
+ */
+declare module "@stripe/stripe-js" {
+  export interface StripeError {
+    message?: string;
+  }
+
+  export type StripeElements = Record<string, unknown>;
+
+  export interface PaymentIntentResult {
+    error?: StripeError;
+  }
+
+  export interface Stripe {
+    confirmSetup(options: {
+      elements: StripeElements;
+      confirmParams: { return_url: string };
+    }): Promise<{ error?: StripeError }>;
+    confirmCardPayment(
+      clientSecret: string,
+      options: { payment_method: string },
+    ): Promise<PaymentIntentResult>;
+  }
+
+  export interface StripeElementsOptions {
+    clientSecret?: string;
+    appearance?: {
+      theme?: "stripe" | "night" | "flat";
+      variables?: Record<string, string>;
+    };
+  }
+
+  export function loadStripe(publishableKey: string): Promise<Stripe | null>;
+}
+
+declare module "@stripe/react-stripe-js" {
+  import {
+    Stripe,
+    StripeElements,
+    StripeElementsOptions,
+  } from "@stripe/stripe-js";
+  import { FunctionComponent, ReactNode } from "react";
+
+  export const Elements: FunctionComponent<{
+    stripe: Stripe | PromiseLike<Stripe | null> | null;
+    options?: StripeElementsOptions;
+    children?: ReactNode;
+  }>;
+  export const PaymentElement: FunctionComponent;
+  export function useStripe(): Stripe | null;
+  export function useElements(): StripeElements | null;
+}
+
+declare module "@stripe/stripe-js/pure" {
+  export { loadStripe } from "@stripe/stripe-js";
+}

package/UI/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -16,8 +16,8 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
 }: ComponentProps): ReactElement => {
   const { translateString } = useTranslateValue();
   return (
-    <nav className="flex hidden md:block" aria-label="Breadcrumb">
-      <ol role="list" className="flex items-center space-x-1">
+    <nav className="block" aria-label="Breadcrumb">
+      <ol role="list" className="flex flex-wrap items-center gap-x-1 gap-y-2">
         {links &&
           links.length > 0 &&
           links.map((link: Link, i: number) => {

package/UI/Components/Calendar/Calendar.css

@@ -302,3 +302,81 @@
   );
   border: 1px solid rgba(217, 119, 6, 0.4);
 }
+
+/* ---------- Override (substituted) events ----------
+   A block that says "somebody else is taking this person's alerts". The colour
+   alone cannot carry that: it is the SUBSTITUTE's colour, and a reader who does
+   not already know the roster cannot tell it from an ordinary shift. Three
+   independent cues, so none of them has to survive on its own:
+
+   1. a stripe down the leading edge in the OVERRIDDEN person's colour, which
+      is what makes the swap readable when the week-view column is too narrow
+      to show any text at all;
+   2. a dotted inner rule beside it, so the distinction still lands in
+      greyscale and for a reader who cannot separate the two hues;
+   3. the label itself, which the caller prefixes.
+
+   --oneuptime-event-accent is set per event by Calendar.tsx's eventPropGetter
+   from CalendarEvent.accentColor; the fallback keeps the stripe visible if a
+   caller sets the class without a colour. */
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override {
+  position: relative;
+  padding-left: 0.75rem;
+  overflow: hidden;
+}
+
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0.3125rem;
+  background-color: var(--oneuptime-event-accent, #6b7280);
+  /* Sits above the label so a long name cannot paint over the cue. */
+  z-index: 1;
+}
+
+.oneuptime-calendar .rbc-event.oneuptime-calendar-event--override::after {
+  content: "";
+  position: absolute;
+  top: 0.15rem;
+  bottom: 0.15rem;
+  left: 0.4375rem;
+  border-left: 1px dotted currentColor;
+  opacity: 0.65;
+  z-index: 1;
+}
+
+/* The agenda view renders events as table rows, where an absolutely positioned
+   stripe has nothing to anchor to. Give that view a plain left border instead
+   so the same event is still marked there. */
+.oneuptime-calendar
+  .rbc-agenda-view
+  table.rbc-agenda-table
+  tbody
+  > tr.oneuptime-calendar-event--override
+  > td:first-child {
+  border-left: 0.25rem solid var(--oneuptime-event-accent, #6b7280);
+}
+
+/* Legend swatch for the override key. The block it names is drawn in two
+   people's colours, so the swatch is too - generic hues here, since the key
+   speaks for every override on the grid rather than for one of them. */
+.oneuptime-calendar-override-swatch {
+  position: relative;
+  overflow: hidden;
+  background-color: #6366f1; /* indigo-500 - stands for the substitute */
+  border: 1px solid rgba(79, 70, 229, 0.35); /* indigo-600 */
+}
+
+.oneuptime-calendar-override-swatch::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 45%;
+  /* Stands for the person who was overridden. */
+  background-color: #9ca3af; /* gray-400 */
+}

package/UI/Components/Calendar/Calendar.tsx

@@ -75,9 +75,33 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
       display: "block",
     };
 
-    return {
-      style,
-    };
+    /*
+     * The accent colour reaches CSS as a custom property rather than as a
+     * border here, so the stylesheet decides how to draw it (an inset stripe
+     * today) and the two can be changed together in one place.
+     */
+    if (event.accentColor) {
+      (style as Record<string, string>)["--oneuptime-event-accent"] =
+        event.accentColor.toString();
+    }
+
+    const className: string | undefined = event.className
+      ? event.className.toString()
+      : undefined;
+
+    return className ? { style, className } : { style };
+  };
+
+  /*
+   * react-big-calendar's default tooltip is the title, which is already
+   * truncated in the block itself — so hovering a clipped label tells the
+   * reader exactly as little as looking at it did. Prefer `desc`, which callers
+   * use for the full, multi-line explanation of what the block means.
+   */
+  const eventTooltipGetter: (event: CalendarEvent) => string = (
+    event: CalendarEvent,
+  ): string => {
+    return event.desc?.toString() || event.title;
   };
 
   return (
@@ -94,6 +118,7 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
         views={CALENDAR_VIEWS}
         defaultView={props.defaultCalendarView || "week"}
         eventPropGetter={eventStyleGetter}
+        tooltipAccessor={eventTooltipGetter}
         popup
         onRangeChange={(range: Date[] | { start: Date; end: Date }) => {
           if (Array.isArray(range)) {

package/UI/Components/Forms/BasicForm.tsx

@@ -152,6 +152,15 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
     const isInitialValuesSet: MutableRefObject<boolean> = useRef(false);
 
+    /*
+     * Nothing may re-seed a form the user has already typed into. The guard
+     * above latches once, which is enough on its own, but "the value the user
+     * entered survives" is the one property of a form that must never quietly
+     * regress - so it is asserted directly rather than inferred from the order
+     * two effects happen to run in.
+     */
+    const hasUserEdited: MutableRefObject<boolean> = useRef(false);
+
     const refCurrentValue: React.MutableRefObject<FormValues<T>> = useRef(
       props.initialValues || {},
     );
@@ -310,6 +319,24 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       setFormFields(fields);
     }, [props.fields, currentFormStepId]);
 
+    /*
+     * A field is only worth disabling while options are being fetched if it is
+     * one of the fields those options belong to. Disabling everything meant a
+     * Text or Email field went read-only because some unrelated dropdown was
+     * refreshing - and Input renders `disabled` as `readOnly`, so it stays
+     * focusable and simply swallows the keystrokes with no visible reason.
+     */
+    type IsDropdownFieldFunction = (field: Field<T>) => boolean;
+
+    const isDropdownField: IsDropdownFieldFunction = (
+      field: Field<T>,
+    ): boolean => {
+      return (
+        field.fieldType === FormFieldSchemaType.Dropdown ||
+        field.fieldType === FormFieldSchemaType.MultiSelectDropdown
+      );
+    };
+
     type GetFieldNameFunction = (field: Field<T>) => string;
 
     const getFieldName: GetFieldNameFunction = (field: Field<T>): string => {
@@ -347,6 +374,8 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         [fieldName]: value as any,
       };
 
+      hasUserEdited.current = true;
+
       refCurrentValue.current = updatedValue;
 
       setCurrentValue(refCurrentValue.current);
@@ -484,7 +513,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         return;
       }
 
-      if (isInitialValuesSet.current) {
+      if (isInitialValuesSet.current || hasUserEdited.current) {
         return;
       }
 
@@ -601,7 +630,16 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
         if (field.getDefaultValue && (values as any)[fieldName] === undefined) {
           (values as any)[fieldName] = field.getDefaultValue(values);
         }
+      }
 
+      /*
+       * Latch only once the field list has actually arrived. formFields starts
+       * empty and is filled in by an effect, so latching before then would
+       * skip every default value and every dropdown/date normalisation above.
+       * (This used to be written as an assignment inside the loop, which had
+       * the same effect by accident.)
+       */
+      if (formFields.length > 0) {
         isInitialValuesSet.current = true;
       }
 
@@ -747,7 +785,8 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                       touched={touched[fieldName] || false}
                                       isDisabled={
                                         isLoading ||
-                                        isDropdownOptionsLoading ||
+                                        (isDropdownOptionsLoading &&
+                                          isDropdownField(field)) ||
                                         false
                                       }
                                       currentValues={refCurrentValue.current}
@@ -770,6 +809,9 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                                     {field.getFooterElement &&
                                       field.getFooterElement(
                                         refCurrentValue.current,
+                                        touched[fieldName]
+                                          ? errors[fieldName] || undefined
+                                          : undefined,
                                       )}
                                   </div>
                                 </Fragment>

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

@@ -14,7 +14,8 @@ import React, {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { ChromePicker, ColorResult } from "react-color";
+import ChromePicker from "react-color/lib/components/chrome/Chrome";
+import type { ColorResult } from "react-color";
 
 // ChromePicker renders at a fixed intrinsic width.
 const COLOR_PICKER_POPUP_WIDTH_PX: number = 225;

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

@@ -932,13 +932,26 @@ const FormField: <T extends GenericObject>(
               id={fieldId}
               tabIndex={0}
               disabled={props.isDisabled || props.field.disabled}
-              error={props.touched && props.error ? props.error : undefined}
+              error={
+                !props.field.errorMessageInFooter &&
+                props.touched &&
+                props.error
+                  ? props.error
+                  : undefined
+              }
+              ariaInvalid={Boolean(
+                props.field.errorMessageInFooter &&
+                  props.touched &&
+                  props.error,
+              )}
               dataTestId={props.field.dataTestId}
               type={fieldType as InputType}
+              ariaDescribedby={props.field.ariaDescribedby}
               autoComplete={
-                props.field.fieldType
+                props.field.autoComplete ||
+                (props.field.fieldType
                   ? getAutoComplete(props.field.fieldType)
-                  : undefined
+                  : undefined)
               }
               onChange={(value: string) => {
                 onChange(value);

package/UI/Components/Forms/ModelForm.tsx

@@ -51,7 +51,7 @@ import Permission, {
   UserPermission,
 } from "../../../Types/Permission";
 import Typeof from "../../../Types/Typeof";
-import React, { MutableRefObject, ReactElement, useState } from "react";
+import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 import useAsyncEffect from "use-async-effect";
 import Select from "../../../Types/BaseDatabase/Select";
 
@@ -132,6 +132,37 @@ const ModelForm: <TBaseModel extends BaseModel>(
   const [itemToEdit, setItemToEdit] = useState<TBaseModel | null>(null);
   const model: TBaseModel = new props.modelType();
 
+  /*
+   * Almost every caller writes its `fields` as an inline array literal in JSX,
+   * so the array is a brand new identity on every render of the page holding
+   * the form - which makes the effect below re-run whenever ANY unrelated
+   * state on that page changes, including while the user is typing into this
+   * form. Two guards keep that from being destructive:
+   *
+   *  - `dropdownOptionsCache` remembers the options already fetched for a
+   *    given dropdown, so a re-run does not fire the same list request again.
+   *    Without it the invite-user form issued a Team list request per
+   *    keystroke.
+   *  - `fieldsRunGeneration` discards a slower earlier run, so an in-flight
+   *    request that resolves after a newer one cannot put stale fields back
+   *    or clear a loading flag the newer run still owns.
+   */
+  type DropdownOptionsCacheEntry = {
+    dropdownOptions: Array<DropdownOption>;
+    selectByAccessControlProps: Field<TBaseModel>["selectByAccessControlProps"];
+  };
+
+  /*
+   * Keyed on the model CONSTRUCTOR rather than on its name, so two models can
+   * never share an entry however they are named - a model with neither a
+   * tableName nor a singularName would otherwise key as the empty string.
+   */
+  const dropdownOptionsCache: MutableRefObject<
+    Map<unknown, Dictionary<DropdownOptionsCacheEntry>>
+  > = useRef<Map<unknown, Dictionary<DropdownOptionsCacheEntry>>>(new Map());
+
+  const fieldsRunGeneration: MutableRefObject<number> = useRef<number>(0);
+
   const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
 
   type GetSelectFieldsFunction = () => Select<TBaseModel>;
@@ -242,6 +273,9 @@ const ModelForm: <TBaseModel extends BaseModel>(
   };
 
   const setFormFields: PromiseVoidFunction = async (): Promise<void> => {
+    fieldsRunGeneration.current = fieldsRunGeneration.current + 1;
+    const generation: number = fieldsRunGeneration.current;
+
     let fieldsToSet: Fields<TBaseModel> = [];
 
     for (const field of props.fields) {
@@ -314,7 +348,12 @@ const ModelForm: <TBaseModel extends BaseModel>(
       }
     }
 
-    fieldsToSet = await fetchDropdownOptions(fieldsToSet);
+    fieldsToSet = await fetchDropdownOptions(fieldsToSet, generation);
+
+    if (generation !== fieldsRunGeneration.current) {
+      // A newer run started while this one was fetching. It owns the state now.
+      return;
+    }
 
     // if there are no fields to set, then show permission error. This is useful when there are no fields to show.
     if (fieldsToSet.length === 0 && props.fields.length > 0) {
@@ -441,15 +480,103 @@ const ModelForm: <TBaseModel extends BaseModel>(
 
   type FetchDropdownOptionsFunction = (
     fields: Fields<TBaseModel>,
+    generation: number,
   ) => Promise<Fields<TBaseModel>>;
 
+  /*
+   * What a dropdown's options depend on, and nothing else: the model, and the
+   * two columns read off it. The request below takes no query and no closure
+   * state, so two fields with the same three always get the same list back -
+   * which is what makes caching them safe.
+   */
+  type GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => DropdownOptionsCacheEntry | undefined;
+
+  type SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ) => void;
+
+  const getDropdownColumnsKey: (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ) => string = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): string => {
+    return `${dropdownModal.labelField}|${dropdownModal.valueField}`;
+  };
+
+  const getCachedDropdownOptions: GetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+  ): DropdownOptionsCacheEntry | undefined => {
+    return dropdownOptionsCache.current.get(dropdownModal.type)?.[
+      getDropdownColumnsKey(dropdownModal)
+    ];
+  };
+
+  const setCachedDropdownOptions: SetCachedDropdownOptionsFunction = (
+    dropdownModal: NonNullable<Field<TBaseModel>["dropdownModal"]>,
+    entry: DropdownOptionsCacheEntry,
+  ): void => {
+    const byColumns: Dictionary<DropdownOptionsCacheEntry> =
+      dropdownOptionsCache.current.get(dropdownModal.type) || {};
+
+    byColumns[getDropdownColumnsKey(dropdownModal)] = entry;
+
+    dropdownOptionsCache.current.set(dropdownModal.type, byColumns);
+  };
+
   const fetchDropdownOptions: FetchDropdownOptionsFunction = async (
     fields: Fields<TBaseModel>,
+    generation: number,
   ): Promise<Fields<TBaseModel>> => {
+    /*
+     * Serve everything already fetched from the cache first, then work out
+     * whether anything is actually left to request. Flipping the loading flag
+     * for a run that has nothing to fetch used to blank the whole form (see
+     * the comment on the render guard below), so only flip it when a real
+     * request is about to go out.
+     */
+    const fieldsToFetch: Fields<TBaseModel> = [];
+
+    for (const field of fields) {
+      if (!field.dropdownModal || !field.dropdownModal.type) {
+        continue;
+      }
+
+      const cached: DropdownOptionsCacheEntry | undefined =
+        getCachedDropdownOptions(field.dropdownModal);
+
+      if (cached) {
+        field.dropdownOptions = cached.dropdownOptions;
+
+        if (cached.selectByAccessControlProps) {
+          field.selectByAccessControlProps = cached.selectByAccessControlProps;
+        }
+
+        continue;
+      }
+
+      fieldsToFetch.push(field);
+    }
+
+    if (fieldsToFetch.length === 0) {
+      /*
+       * Nothing to wait for. Clearing rather than just returning keeps the flag
+       * from being left on by an older run that lost the race and therefore
+       * declined to clear it - React bails out when it is already false.
+       */
+      if (generation === fieldsRunGeneration.current) {
+        setIsFetchingDropdownOptions(false);
+      }
+
+      return fields;
+    }
+
     setIsFetchingDropdownOptions(true);
 
     try {
-      for (const field of fields) {
+      for (const field of fieldsToFetch) {
         if (field.dropdownModal && field.dropdownModal.type) {
           const tempModel: BaseModel = new field.dropdownModal.type();
           const select: any = {
@@ -642,13 +769,21 @@ const ModelForm: <TBaseModel extends BaseModel>(
           } else {
             field.dropdownOptions = [];
           }
+
+          setCachedDropdownOptions(field.dropdownModal, {
+            dropdownOptions: (field.dropdownOptions ||
+              []) as Array<DropdownOption>,
+            selectByAccessControlProps: field.selectByAccessControlProps,
+          });
         }
       }
     } catch (err) {
       setError(API.getFriendlyMessage(err));
     }
 
-    setIsFetchingDropdownOptions(false);
+    if (generation === fieldsRunGeneration.current) {
+      setIsFetchingDropdownOptions(false);
+    }
 
     return fields;
   };
@@ -849,7 +984,26 @@ const ModelForm: <TBaseModel extends BaseModel>(
     }
   };
 
-  if (isFetching || isFetchingDropdownOptions) {
+  /*
+   * Only ever swap the form out for a loader while there is no form to show.
+   * Returning the loader over a form the user is already filling in unmounts
+   * BasicModelForm and everything under it, and a form's values live in that
+   * subtree - in BasicForm's refs and in each Input's own state, since Input
+   * is DOM-uncontrolled. So the remount silently threw the user's input away.
+   *
+   * That is what made inviting a user impossible: the invite form's Email field
+   * calls back into the page on every keystroke to check whether the address
+   * already has an account, the page re-renders with a fresh `fields` array
+   * literal, the effect above re-runs, and the form the user was typing into
+   * was destroyed and rebuilt empty.
+   *
+   * Once fields exist, options refresh in the background instead. The cache in
+   * fetchDropdownOptions means the usual re-run does not even reach the
+   * network, so in practice nothing about the form flickers at all.
+   */
+  const hasFieldsToRender: boolean = fields.length > 0;
+
+  if (isFetching || (isFetchingDropdownOptions && !hasFieldsToRender)) {
     return (
       <div className="row flex justify-center mt-20 mb-20">
         <Loader loaderType={LoaderType.Bar} color={VeryLightGray} size={200} />

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

@@ -130,7 +130,12 @@ export default interface Field<TEntity> {
     | undefined;
   radioButtonOptions?: Array<RadioButton>;
   footerElement?: ReactElement | undefined;
-  getFooterElement?: (values: FormValues<TEntity>) => ReactElement | undefined;
+  getFooterElement?: (
+    values: FormValues<TEntity>,
+    error?: string,
+  ) => ReactElement | undefined;
+  // For Input fields: render errors in the footer linked by ariaDescribedby.
+  errorMessageInFooter?: boolean | undefined;
   id?: string | undefined;
   getCustomElement?: (
     values: FormValues<TEntity>,
@@ -138,6 +143,8 @@ export default interface Field<TEntity> {
   ) => ReactElement | undefined; // custom element to render instead of the elements in the form.
   categoryCheckboxProps?: CategoryCheckboxProps | undefined; // props for the category checkbox component. If fieldType is CategoryCheckbox, this prop is required.
   dataTestId?: string | undefined;
+  autoComplete?: string | undefined;
+  ariaDescribedby?: string | undefined;
 
   // set this to true if you want to show this field in the form even when the form is in edit mode.
   doNotShowWhenEditing?: boolean | undefined;

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -12,6 +12,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -65,7 +66,12 @@ export interface ComponentProps {
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [days, setDays] = useState<number>(0);
+  const days: number = useMemo(() => {
+    return OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
+      props.startDate,
+      props.endDate,
+    );
+  }, [props.startDate, props.endDate]);
 
   /*
    * The strip is one tab stop with a roving tabindex inside it - see
@@ -100,15 +106,6 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     barRefs.current[focusedBarIndex]?.focus();
   }, [focusedBarIndex]);
 
-  useEffect(() => {
-    setDays(
-      OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
-        props.startDate,
-        props.endDate,
-      ),
-    );
-  }, [props.startDate, props.endDate]);
-
   const activeBarIndex: number = DayUptimeGraphUtil.getActiveBarIndex({
     storedIndex: focusedBarIndex,
     barCount: days,
@@ -360,6 +357,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     return (
       <Tooltip
         key={dayNumber}
+        lazy={true}
         richContent={
           <UptimeBarTooltip
             date={todaysDay}

package/UI/Components/Icon/Icon.tsx

@@ -3022,6 +3022,22 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M4.928 1.825c-1.09.553-1.09.64-.07 1.78 5.655 6.295 7.004 7.782 7.107 7.782.139.017 7.971-8.542 8.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115 2.455-.899 1.003-1.66 1.833-1.66 1.833-.017 0-.76-.813-1.642-1.798S8.473 2.1 8.127 1.91c-.796-.45-2.421-.484-3.2-.086zM1.297 4.367C.45 4.695 0 5.007 0 5.248c0 .121 1.331 1.678 2.94 3.459 1.625 1.78 2.939 3.268 2.939 3.302 0 .035-1.331 1.522-2.94 3.303C1.314 17.11.017 18.683.035 18.822c.086.467 1.504 1.055 2.541 1.055 1.678-.018 2.058-.312 5.603-4.202 1.78-1.954 3.233-3.614 3.233-3.666 0-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764 1.505-3.943 3.891-1.763 1.937-3.199 3.562-3.199 3.631 0 .07 1.453 1.712 3.234 3.666 3.544 3.89 3.925 4.184 5.602 4.202 1.038 0 2.455-.588 2.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32 0-.034 1.332-1.539 2.94-3.32C22.72 6.91 24.017 5.352 24 5.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954 16.973c-2.144 2.369-3.908 4.374-3.943 4.46-.034.07.208.312.52.537.414.311.864.432 1.711.467 1.574.103 2.161-.26 4.15-2.508.864-.968 1.608-1.78 1.625-1.78s.761.812 1.643 1.798c2.023 2.248 2.559 2.576 4.132 2.49.848-.035 1.297-.156 1.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069 0-1.867 1.954-4.011 4.34z"
       />,
     );
+  } else if (icon === IconProp.VMware) {
+    /*
+     * VMware — hypervisor mark: a host chassis with three virtual machines
+     * stacked on the hypervisor layer. Drawn in the outlined house style
+     * (currentColor stroke) so it sits at 16px next to the other resource
+     * brand logos (Proxmox / Ceph / Docker) without a filled wordmark.
+     */
+    return getSvgWrapper(
+      <>
+        <rect x="3" y="4" width="18" height="16" rx="2" />
+        <path strokeLinecap="round" d="M3 16h18" />
+        <rect x="6" y="7" width="3" height="6" rx="0.75" />
+        <rect x="10.5" y="7" width="3" height="6" rx="0.75" />
+        <rect x="15" y="7" width="3" height="6" rx="0.75" />
+      </>,
+    );
   } else if (icon === IconProp.IoT) {
     // IoT — wireless/connectivity mark (reuses the Signal icon path).
     return getSvgWrapper(