@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/FilePicker/FilePicker.tsx

@@ -35,6 +35,14 @@ export interface ComponentProps {
   tabIndex?: number | undefined;
   error?: string | undefined;
   ariaLabelledby?: string | undefined;
+  /*
+   * The largest file this picker takes, in bytes, when it is less than the
+   * 10 MB every upload is held to - a form's logo takes 512 KB. A larger
+   * file is refused here, before it is uploaded, and the hint under the
+   * picker says the same limit, so the picker never promises more than the
+   * field will keep.
+   */
+  maxFileSizeInBytes?: number | undefined;
 }
 
 type UploadStatus = {
@@ -60,7 +68,44 @@ type BuildFileSizeErrorFunction = (fileNames: Array<string>) => string;
 type ResolveMimeTypeFunction = (file: File) => MimeType | undefined;
 type FormatFileSizeFunction = (file: FileModel) => string | null;
 
-const MAX_FILE_SIZE_BYTES: number = 10 * 1024 * 1024; // 10MB limit
+// What any upload may be, unless the picker is given less.
+export const DEFAULT_MAX_FILE_SIZE_IN_BYTES: number = 10 * 1024 * 1024;
+
+type GetMaxFileSizeInBytesFunction = (value: number | undefined) => number;
+
+// The picker's limit: its own when it is a smaller positive number.
+export const getMaxFileSizeInBytes: GetMaxFileSizeInBytesFunction = (
+  value: number | undefined,
+): number => {
+  return typeof value === "number" &&
+    Number.isFinite(value) &&
+    value > 0 &&
+    value < DEFAULT_MAX_FILE_SIZE_IN_BYTES
+    ? value
+    : DEFAULT_MAX_FILE_SIZE_IN_BYTES;
+};
+
+type FormatFileSizeLimitFunction = (bytes: number) => string;
+
+// A limit as people read it: "512 KB", "1 MB", "1.5 MB".
+export const formatFileSizeLimit: FormatFileSizeLimitFunction = (
+  bytes: number,
+): string => {
+  const megabytes: number = bytes / (1024 * 1024);
+
+  if (megabytes >= 1) {
+    return `${Math.round(megabytes * 10) / 10} MB`;
+  }
+
+  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+};
+
+/*
+ * The other name browsers give an ICO file ("image/vnd.microsoft.icon", on
+ * Linux and in Firefox), for a picker that takes ICO: it is accepted, by
+ * its extension too, and stored as MimeType.ico.
+ */
+const ICO_ALIAS_MIME_TYPE: string = "image/vnd.microsoft.icon";
 
 const FilePicker: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
@@ -73,6 +118,14 @@ const FilePicker: FunctionComponent<ComponentProps> = (
   const [acceptTypes, setAcceptTypes] = useState<Dictionary<Array<string>>>({});
   const [uploadStatuses, setUploadStatuses] = useState<Array<UploadStatus>>([]);
 
+  const maxFileSizeBytes: number = getMaxFileSizeInBytes(
+    props.maxFileSizeInBytes,
+  );
+  const maxFileSize: string = formatFileSizeLimit(maxFileSizeBytes);
+  // The everyday limit keeps its own wording (and its translations).
+  const hasOwnLimit: boolean =
+    maxFileSizeBytes !== DEFAULT_MAX_FILE_SIZE_IN_BYTES;
+
   const addUploadStatus: AddUploadStatusFunction = (
     status: UploadStatus,
   ): void => {
@@ -136,6 +189,11 @@ const FilePicker: FunctionComponent<ComponentProps> = (
     if (props.mimeTypes) {
       for (const key of props.mimeTypes) {
         _acceptTypes[key] = [];
+
+        if (key === MimeType.ico) {
+          _acceptTypes[key] = [".ico"];
+          _acceptTypes[ICO_ALIAS_MIME_TYPE] = [".ico"];
+        }
       }
     }
     setAcceptTypes(_acceptTypes);
@@ -172,6 +230,20 @@ const FilePicker: FunctionComponent<ComponentProps> = (
       return "";
     }
 
+    if (hasOwnLimit) {
+      if (fileNames.length === 1) {
+        return translator.translateTemplate(
+          '"{{fileName}}" exceeds the {{size}} limit.',
+          { fileName: fileNames[0] || "", size: maxFileSize },
+        );
+      }
+
+      return translator.translateTemplate(
+        "These files exceed the {{size}} limit: {{fileNames}}.",
+        { fileNames: fileNames.join(", "), size: maxFileSize },
+      );
+    }
+
     if (fileNames.length === 1) {
       return translator.translateTemplate(
         '"{{fileName}}" exceeds the 10MB limit.',
@@ -190,11 +262,11 @@ const FilePicker: FunctionComponent<ComponentProps> = (
     multiple: props.isMultiFilePicker,
     noClick: true,
     disabled: props.readOnly || isLoading,
-    maxSize: MAX_FILE_SIZE_BYTES,
+    maxSize: maxFileSizeBytes,
     onDropRejected: (fileRejections: Array<FileRejection>) => {
       const oversizedFiles: Array<string> = fileRejections
         .filter((rejection: FileRejection) => {
-          return rejection.file.size > MAX_FILE_SIZE_BYTES;
+          return rejection.file.size > maxFileSizeBytes;
         })
         .map((rejection: FileRejection) => {
           return rejection.file.name;
@@ -223,6 +295,10 @@ const FilePicker: FunctionComponent<ComponentProps> = (
             return direct as MimeType;
           }
 
+          if (direct === ICO_ALIAS_MIME_TYPE) {
+            return MimeType.ico;
+          }
+
           // fallback based on extension
           const ext: string | undefined = file.name
             .split(".")
@@ -238,6 +314,7 @@ const FilePicker: FunctionComponent<ComponentProps> = (
             svg: MimeType.svg,
             gif: MimeType.gif,
             webp: MimeType.webp,
+            ico: MimeType.ico,
             pdf: MimeType.pdf,
             doc: MimeType.doc,
             docx: MimeType.docx,
@@ -263,7 +340,7 @@ const FilePicker: FunctionComponent<ComponentProps> = (
         const oversizedFiles: Array<string> = [];
 
         for (const acceptedFile of acceptedFiles) {
-          if (acceptedFile.size > MAX_FILE_SIZE_BYTES) {
+          if (acceptedFile.size > maxFileSizeBytes) {
             oversizedFiles.push(acceptedFile.name);
             continue;
           }
@@ -480,8 +557,11 @@ const FilePicker: FunctionComponent<ComponentProps> = (
                   <p className="text-xs text-gray-500">
                     {props.mimeTypes && props.mimeTypes?.length > 0
                       ? translator.translateTemplate(
-                          "Types: {{types}}. Max 10MB each.",
+                          hasOwnLimit
+                            ? "Types: {{types}}. Max {{size}} each."
+                            : "Types: {{types}}. Max 10MB each.",
                           {
+                            size: maxFileSize,
                             types: props.mimeTypes
                               .map((type: MimeType) => {
                                 const enumKey: string | undefined =
@@ -502,7 +582,11 @@ const FilePicker: FunctionComponent<ComponentProps> = (
                               .join(", "),
                           },
                         )
-                      : translator.translateText("Max 10MB each.")}
+                      : hasOwnLimit
+                        ? translator.translateTemplate("Max {{size}} each.", {
+                            size: maxFileSize,
+                          })
+                        : translator.translateText("Max 10MB each.")}
                   </p>
                   {error && (
                     <p className="text-xs text-red-500 font-medium">{error}</p>

package/UI/Components/FoldedSection/FoldedSection.tsx

@@ -0,0 +1,370 @@
+import IconProp from "../../../Types/Icon/IconProp";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import Icon from "../Icon/Icon";
+import {
+  FoldedSectionItem,
+  FoldedSectionItemsShown,
+  getFoldedSectionItemsShown,
+} from "./FoldedSectionItem";
+import React, {
+  Fragment,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useId,
+  useState,
+} from "react";
+
+/*
+ * A fold: options most people never need, out of the way until someone
+ * opens them - a form's "More fields" (Forms/Utils/AdvancedFormSection), a
+ * page's "More settings" (AdvancedPageSection), and every other folded
+ * section a form draws (CollapsibleFormSection).
+ *
+ * Folded, its header says what is inside without being opened:
+ *   - the fields or cards it holds, by name, a few of them and how many
+ *     more ("Declared At · Initial State · Labels · Private Incident");
+ *   - the ones that are set, as chips with what they are set to ("Labels:
+ *     2", "Private Incident: On"), so nothing in force is hidden;
+ *   - what its defaults do, in a sentence, where the section says so ("The
+ *     key expires a year from today.").
+ * Open, it shows its description under the title instead, and the fields.
+ *
+ * The header is a real button: Tab reaches it, Enter and Space open it,
+ * aria-expanded says which way it is, and the line of what is inside is its
+ * description for a screen reader. Folded, the body stays mounted (fields
+ * keep what was typed) but is invisible, so nothing in it can be tabbed to
+ * or read out. It works the same in the dark theme (Theme.css remaps every
+ * colour class used here) and at phone width (the lines wrap; the chevron
+ * keeps its place).
+ */
+
+export const FOLDED_SECTION_TEST_ID: string = "folded-section";
+
+export interface ComponentProps {
+  // English; looked up when drawn.
+  title: string;
+  // Drawn in a tile before the title: what kind of section it is.
+  icon?: IconProp | undefined;
+  // Under the title while open.
+  description?: string | ReactElement | undefined;
+  // Folded: what is inside, set ones as chips.
+  items?: Array<FoldedSectionItem> | undefined;
+  /*
+   * Folded: what the section is set to or what its defaults do, as whole
+   * sentences - English (looked up here) or already translated.
+   */
+  summary?: string | ReactElement | undefined;
+  /*
+   * Folded: one short word beside what is inside ("Configured") - for a
+   * section that knows something in it is set but not what.
+   */
+  badge?: string | undefined;
+  // Controlled: follows the prop. Left out, starts as defaultCollapsed.
+  isCollapsed?: boolean | undefined;
+  // True when left out: a fold starts folded.
+  defaultCollapsed?: boolean | undefined;
+  onToggle?: ((isCollapsed: boolean) => void) | undefined;
+  // A block of its own on a page, among cards: a card's shadow.
+  isElevated?: boolean | undefined;
+  className?: string | undefined;
+  dataTestId?: string | undefined;
+  children: ReactNode;
+}
+
+const FoldedSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(
+    props.isCollapsed ?? props.defaultCollapsed ?? true,
+  );
+
+  useEffect(() => {
+    if (props.isCollapsed !== undefined) {
+      setIsCollapsed(props.isCollapsed);
+    }
+  }, [props.isCollapsed]);
+
+  const toggle: () => void = (): void => {
+    const next: boolean = !isCollapsed;
+    setIsCollapsed(next);
+    props.onToggle?.(next);
+  };
+
+  const id: string = useId();
+  const titleId: string = `folded-section-title-${id}`;
+  const bodyId: string = `folded-section-body-${id}`;
+  const contentsId: string = `folded-section-contents-${id}`;
+  const summaryId: string = `folded-section-summary-${id}`;
+  const descriptionId: string = `folded-section-description-${id}`;
+
+  const translate: (text: string) => string = (text: string): string => {
+    return translator.translateText(text) ?? text;
+  };
+
+  const { shown, hiddenCount }: FoldedSectionItemsShown =
+    getFoldedSectionItemsShown(props.items || []);
+
+  const hasSetItem: boolean = shown.some((item: FoldedSectionItem) => {
+    return item.isSet;
+  });
+
+  const showContents: boolean = isCollapsed && shown.length > 0;
+  const showSummary: boolean = Boolean(isCollapsed && props.summary);
+  const showBadge: boolean = Boolean(isCollapsed && props.badge);
+  const showDescription: boolean = Boolean(!isCollapsed && props.description);
+
+  const describedBy: Array<string> = [];
+
+  if (showContents || showBadge) {
+    describedBy.push(contentsId);
+  }
+
+  if (showSummary) {
+    describedBy.push(summaryId);
+  }
+
+  if (showDescription) {
+    describedBy.push(descriptionId);
+  }
+
+  /*
+   * Between two things listed: the pills are apart on screen already; a
+   * screen reader hears a comma, so the names are not read as one.
+   */
+  const renderSeparator: () => ReactElement = (): ReactElement => {
+    return <span className="sr-only">, </span>;
+  };
+
+  const renderItem: (item: FoldedSectionItem) => ReactElement = (
+    item: FoldedSectionItem,
+  ): ReactElement => {
+    const title: string = translate(item.title);
+
+    if (!item.isSet) {
+      return (
+        <span
+          data-testid="folded-section-item"
+          data-item-key={item.key}
+          data-item-set="false"
+          className="inline-flex min-w-0 max-w-full items-center rounded-full px-2 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-200"
+        >
+          <span className="truncate">{title}</span>
+        </span>
+      );
+    }
+
+    const value: string | undefined = item.value
+      ? item.translateValue
+        ? translate(item.value)
+        : item.value
+      : undefined;
+
+    return (
+      <span
+        data-testid="folded-section-item"
+        data-item-key={item.key}
+        data-item-set="true"
+        className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200"
+      >
+        <span
+          aria-hidden="true"
+          className="h-1.5 w-1.5 flex-none rounded-full bg-indigo-500"
+        />
+        <span className="truncate">
+          {title}
+          {value ? (
+            <>
+              {": "}
+              <span className="font-normal">{value}</span>
+            </>
+          ) : (
+            <></>
+          )}
+        </span>
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={`border border-gray-200 bg-white transition-colors duration-150 ${
+        props.isElevated ? "rounded-xl shadow-sm" : "rounded-lg"
+      } ${props.className || ""}`}
+      data-testid={props.dataTestId || FOLDED_SECTION_TEST_ID}
+      data-collapsed={isCollapsed ? "true" : "false"}
+    >
+      <button
+        type="button"
+        className={`flex w-full items-start gap-3 text-left transition-colors duration-150 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 ${
+          props.isElevated ? "px-5 py-4 md:px-6" : "px-4 py-3"
+        } ${
+          props.isElevated
+            ? isCollapsed
+              ? "rounded-xl"
+              : "rounded-t-xl"
+            : isCollapsed
+              ? "rounded-lg"
+              : "rounded-t-lg"
+        }`}
+        onClick={toggle}
+        aria-expanded={!isCollapsed}
+        aria-controls={bodyId}
+        aria-labelledby={titleId}
+        aria-describedby={
+          describedBy.length > 0 ? describedBy.join(" ") : undefined
+        }
+        data-testid="folded-section-header"
+      >
+        {props.icon ? (
+          <span
+            aria-hidden="true"
+            className={`mt-0.5 flex h-8 w-8 flex-none items-center justify-center rounded-md transition-colors duration-150 ${
+              hasSetItem
+                ? "bg-indigo-50 text-indigo-600"
+                : "bg-gray-100 text-gray-500"
+            }`}
+            data-testid="folded-section-icon"
+          >
+            <Icon icon={props.icon} className="h-4 w-4" />
+          </span>
+        ) : (
+          <></>
+        )}
+
+        <span className="min-w-0 flex-1">
+          <span
+            id={titleId}
+            className="block text-sm font-medium leading-6 text-gray-900"
+            data-testid="folded-section-title"
+          >
+            {translate(props.title)}
+          </span>
+
+          {showDescription ? (
+            <span
+              id={descriptionId}
+              className="mt-0.5 block text-sm text-gray-500"
+              data-testid="folded-section-description"
+            >
+              {typeof props.description === "string"
+                ? translate(props.description)
+                : props.description}
+            </span>
+          ) : (
+            <></>
+          )}
+
+          {showContents || showBadge ? (
+            <span
+              id={contentsId}
+              className="mt-1.5 flex flex-wrap items-center gap-1.5 text-xs leading-5 text-gray-500"
+              data-testid="folded-section-contents"
+            >
+              {shown.map(
+                (item: FoldedSectionItem, index: number): ReactElement => {
+                  return (
+                    <Fragment key={item.key}>
+                      {index > 0 ? renderSeparator() : <></>}
+                      {renderItem(item)}
+                    </Fragment>
+                  );
+                },
+              )}
+              {showContents && hiddenCount > 0 ? (
+                <>
+                  {renderSeparator()}
+                  <span
+                    className="px-1 font-medium"
+                    data-testid="folded-section-more"
+                  >
+                    {translator.translatePlural(
+                      { one: "{{count}} more", other: "{{count}} more" },
+                      hiddenCount,
+                    )}
+                  </span>
+                </>
+              ) : (
+                <></>
+              )}
+              {showBadge ? (
+                <>
+                  {showContents ? renderSeparator() : <></>}
+                  <span
+                    className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700"
+                    data-testid="folded-section-badge"
+                  >
+                    {translate(props.badge || "")}
+                  </span>
+                </>
+              ) : (
+                <></>
+              )}
+            </span>
+          ) : (
+            <></>
+          )}
+
+          {showSummary ? (
+            <span
+              id={summaryId}
+              className="mt-1 block break-words text-sm leading-5 text-gray-600"
+              data-testid="collapsible-section-summary"
+            >
+              {typeof props.summary === "string"
+                ? translate(props.summary)
+                : props.summary}
+            </span>
+          ) : (
+            <></>
+          )}
+        </span>
+
+        <span
+          aria-hidden="true"
+          className="mt-1 flex-none text-gray-400"
+          data-testid="folded-section-chevron"
+        >
+          <Icon
+            icon={IconProp.ChevronDown}
+            className={`h-5 w-5 transition-transform duration-200 motion-reduce:transition-none ${
+              isCollapsed ? "" : "-rotate-180"
+            }`}
+          />
+        </span>
+      </button>
+
+      {/*
+       * Folded, the body is out of sight (max-h-0, opacity-0) and out of
+       * reach (invisible: no tab stops, nothing read out), but mounted. A
+       * transition follows the property list of the state it goes to:
+       * folding transitions visibility with the rest, so it turns invisible
+       * once the fold has finished; opening leaves it out, so the fields can
+       * be tabbed to at once (CollapsibleSection does the same).
+       */}
+      <div
+        id={bodyId}
+        className={`overflow-hidden duration-200 ease-in-out motion-reduce:transition-none ${
+          isCollapsed
+            ? "max-h-0 opacity-0 invisible transition-all"
+            : "max-h-[5000px] opacity-100 transition-[max-height,opacity]"
+        }`}
+        data-testid="folded-section-body"
+      >
+        <div
+          className={`border-t border-gray-200 ${
+            props.isElevated ? "px-5 py-5 md:px-6" : "px-4 py-4"
+          }`}
+        >
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FoldedSection;

package/UI/Components/FoldedSection/FoldedSectionItem.ts

@@ -0,0 +1,141 @@
+import { translationKey } from "../../Utils/TranslateTemplate";
+
+/*
+ * What a folded section holds, as its folded header lists it.
+ *
+ * "The advanced section in the form should be called something better ...
+ * show what things are inside it when collapsed (small summary of things)."
+ * - the maintainer. A fold that only says "More fields" hides what is in it
+ * as well as the old "Advanced" did, so its header lists the fields (or, on
+ * a page, the cards) it holds - "Declared At · Initial State · Labels ·
+ * Private Incident" - and draws the ones that are set as small chips with
+ * what they are set to ("Labels: 2", "Private Incident: On"). Nobody has to
+ * open a fold to learn what is in it or whether anything in it is in force.
+ *
+ * Forms work their items out from their fields
+ * (Forms/Utils/FoldedFormFields.ts); a page names its cards itself
+ * (AdvancedPageSection's `items`).
+ */
+
+export interface FoldedSectionItem {
+  // Stable within the section: a field's name, a card's id.
+  key: string;
+  // English, as the field or card is titled: looked up when it is drawn.
+  title: string;
+  /*
+   * Holds something other than empty or its default: drawn as a chip, with
+   * its value, so what is in force shows while the section is folded.
+   */
+  isSet: boolean;
+  /*
+   * What it is set to, in a few words ("On", "2", "Investigating"). Only
+   * for a set item, and only where the value is short and safe to show -
+   * never a secret, never a paragraph.
+   */
+  value?: string | undefined;
+  // `value` is an English word to look up ("On"), not text as typed.
+  translateValue?: boolean | undefined;
+}
+
+/*
+ * How many unset names a folded header lists before it says how many more
+ * there are: a "small summary of things", not the form again. Set items are
+ * always listed - they are what a reader must not miss.
+ */
+export const FOLDED_SECTION_MAX_UNSET_ITEMS: number = 4;
+
+// Said after the names listed, for the rest: "Labels · 3 more".
+export const FOLDED_SECTION_MORE_ITEMS: { one: string; other: string } = {
+  one: translationKey("{{count}} more"),
+  other: translationKey("{{count}} more"),
+};
+
+// A set switch, folded: "Private Incident: On".
+export const FOLDED_SECTION_ON: string = translationKey("On");
+export const FOLDED_SECTION_OFF: string = translationKey("Off");
+
+export interface FoldedSectionItemsShown {
+  // In the order they were given.
+  shown: Array<FoldedSectionItem>;
+  // Unset items left out, said as "N more".
+  hiddenCount: number;
+}
+
+export type GetFoldedSectionItemsShownFunction = (
+  items: Array<FoldedSectionItem>,
+  maxUnsetItems?: number,
+) => FoldedSectionItemsShown;
+
+/*
+ * Which items a folded header lists: every set one, and unset ones in their
+ * order up to the limit. One left over is listed rather than counted - "1
+ * more" takes as much room as the name it stands for.
+ */
+export const getFoldedSectionItemsShown: GetFoldedSectionItemsShownFunction = (
+  items: Array<FoldedSectionItem>,
+  maxUnsetItems: number = FOLDED_SECTION_MAX_UNSET_ITEMS,
+): FoldedSectionItemsShown => {
+  const unsetCount: number = items.filter((item: FoldedSectionItem) => {
+    return !item.isSet;
+  }).length;
+
+  const limit: number =
+    unsetCount - maxUnsetItems <= 1 ? unsetCount : Math.max(0, maxUnsetItems);
+
+  const shown: Array<FoldedSectionItem> = [];
+  let unsetShown: number = 0;
+
+  for (const item of items) {
+    if (item.isSet) {
+      shown.push(item);
+      continue;
+    }
+
+    if (unsetShown < limit) {
+      shown.push(item);
+      unsetShown++;
+    }
+  }
+
+  return {
+    shown: shown,
+    hiddenCount: unsetCount - unsetShown,
+  };
+};
+
+export type FoldedSectionItemFromTitleFunction = (
+  title: string,
+  options?: {
+    key?: string | undefined;
+    isSet?: boolean | undefined;
+    value?: string | undefined;
+    translateValue?: boolean | undefined;
+  },
+) => FoldedSectionItem;
+
+// A page's way of naming a card in its folded section.
+export const foldedSectionItem: FoldedSectionItemFromTitleFunction = (
+  title: string,
+  options?: {
+    key?: string | undefined;
+    isSet?: boolean | undefined;
+    value?: string | undefined;
+    translateValue?: boolean | undefined;
+  },
+): FoldedSectionItem => {
+  const item: FoldedSectionItem = {
+    key: options?.key || title,
+    title: title,
+    isSet: Boolean(options?.isSet),
+  };
+
+  if (item.isSet && options?.value) {
+    item.value = options.value;
+
+    if (options.translateValue) {
+      item.translateValue = true;
+    }
+  }
+
+  return item;
+};