Add pagination to manage automations

frontend/components/PaginatedList/PaginatedList.tsx

@@ -0,0 +1,204 @@
+import React, {
+  useState,
+  useEffect,
+  useImperativeHandle,
+  forwardRef,
+  Ref,
+} from "react";
+import { ReactElement } from "react-markdown/lib/react-markdown";
+import Checkbox from "components/forms/fields/Checkbox";
+import Spinner from "components/Spinner";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
+// @ts-ignore
+import Pagination from "components/Pagination";
+
+const baseClass = "paginated-list";
+
+// Create an interface for the Ref, so that when parents use `useRef` to provide
+// a reference to this list, they can call `getDirtyItems()` on it to retrieve
+// the list of dirty items.
+export interface IPaginatedListHandle<TItem> {
+  getDirtyItems: () => TItem[];
+}
+interface IPaginatedListProps<TItem> {
+  // Function to fetch one page of data.
+  fetchPage: (pageNumber: number) => Promise<TItem[]>;
+  // UID property in an item. Defaults to `id`.
+  idKey?: string;
+  // Property to use as an item's label. Defaults to `name`.
+  labelKey?: string;
+  // How to determine whether to check an item's checkbox.
+  // If string, a key in an item whose truthiness will be checked.
+  // if function, a function that given an item, returns a boolean.
+  isSelected: string | ((item: TItem) => boolean);
+  // Custom function to render the label for an item.
+  renderItemLabel?: (item: TItem) => ReactElement | null;
+  // Custom function to render extra markup (besides the label) in an item row.
+  renderItemRow?: (
+    item: TItem,
+    // A callback function that the extra markup logic can call to indicate a change
+    // to the item, for example if a dropdown is changed.
+    onChange: (item: TItem) => void
+  ) => ReactElement | false | null | undefined;
+  // A function to call when an item's checkbox is toggled.
+  // Parents can use this to change whatever item metadata is needed to toggle
+  // the value indicated by `isSelected`.
+  onToggleItem: (item: TItem) => TItem;
+  // The size of the page to fetch and show.
+  pageSize?: number;
+  onUpdate?: (changedItems: TItem[]) => void;
+}
+
+function PaginatedListInner<TItem extends Record<string, any>>(
+  {
+    fetchPage,
+    idKey: _idKey,
+    labelKey: _labelKey,
+    pageSize: _pageSize,
+    renderItemLabel,
+    renderItemRow,
+    onToggleItem,
+    onUpdate,
+    isSelected,
+  }: IPaginatedListProps<TItem>,
+  ref: Ref<IPaginatedListHandle<TItem>>
+) {
+  // The # of the page to display.
+  const [currentPage, setCurrentPage] = useState(0);
+  // The set of items fetched via `fetchPage`.
+  const [items, setItems] = useState<TItem[]>([]);
+  // The set of items that have been changed in some way.
+  const [dirtyItems, setDirtyItems] = useState<Record<string | number, TItem>>(
+    {}
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const idKey = _idKey ?? "id";
+  const labelKey = _labelKey ?? "name";
+  const pageSize = _pageSize ?? 20;
+
+  // When the current page # changes, fetch a new page of data.
+  useEffect(() => {
+    let isCancelled = false;
+
+    async function loadPage() {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const result = await fetchPage(currentPage);
+        if (!isCancelled) {
+          setItems(result);
+        }
+      } catch (err) {
+        if (!isCancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    loadPage();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [currentPage, fetchPage]);
+
+  // Whenever the dirty items list changes, notify the parent.
+  useEffect(() => {
+    if (onUpdate) {
+      onUpdate(Object.values(dirtyItems));
+    }
+  }, [onUpdate, dirtyItems]);
+
+  // Create an imperative handle for this component so that parents
+  // can call `ref.current.getDirtyItems()` to get the changed set.
+  useImperativeHandle(ref, () => ({
+    getDirtyItems() {
+      return Object.values(dirtyItems);
+    },
+  }));
+
+  // TODO -- better error state?
+  if (error) return <p>Error: {error.message}</p>;
+
+  // Redner the list.
+  return (
+    <div className={baseClass}>
+      {isLoading && (
+        <div className="loading-overlay">
+          <Spinner />
+        </div>
+      )}
+      <ul className={`${baseClass}__list`}>
+        {items.map((_item) => {
+          // If an item has been marked as changed, use the changed version
+          // of the item rather than the one from the page fetch.  This allows
+          // us to render an item correctly even after we've navigated away
+          // from its page and then back again.
+          const item = dirtyItems[_item[idKey]] ?? _item;
+          return (
+            <li className={`${baseClass}__row`} key={item[idKey]}>
+              <Checkbox
+                value={
+                  typeof isSelected === "function"
+                    ? isSelected(item)
+                    : item[isSelected]
+                }
+                name={`item_${item[idKey]}_checkbox`}
+                onChange={() => {
+                  // When checkbox is toggled, set item as dirty.
+                  // The parent is responsible for actually updating item properties via onToggleItem().
+                  setDirtyItems({
+                    ...dirtyItems,
+                    [item[idKey]]: onToggleItem(item),
+                  });
+                }}
+              >
+                {renderItemLabel ? (
+                  renderItemLabel(item)
+                ) : (
+                  <TooltipTruncatedText
+                    value={
+                      <span className={`${baseClass}__item-label`}>
+                        {item[labelKey]}
+                      </span>
+                    }
+                  />
+                )}
+              </Checkbox>
+              {renderItemRow &&
+                // If a custom row renderer was supplied, call it with the item value
+                // as well as the callback the parent can use to indicate changes to an item.
+                renderItemRow(item, (changedItem) => {
+                  setDirtyItems({
+                    ...dirtyItems,
+                    [changedItem[idKey]]: changedItem,
+                  });
+                })}
+            </li>
+          );
+        })}
+      </ul>
+      <Pagination
+        resultsOnCurrentPage={items.length}
+        currentPage={currentPage}
+        resultsPerPage={pageSize}
+        onPaginationChange={setCurrentPage}
+      />
+    </div>
+  );
+}
+
+// Wrap with forwardRef to expose the imperative handle.
+// TODO -- can remove this after upgrading to React 19.
+const PaginatedList = forwardRef(PaginatedListInner) as <TItem>(
+  props: IPaginatedListProps<TItem> & {
+    ref?: Ref<IPaginatedListHandle<TItem>>;
+  }
+) => JSX.Element;
+
+export default PaginatedList;

frontend/components/PaginatedList/_styles.scss

@@ -0,0 +1,93 @@
+.paginated-list {
+
+    .loading-overlay {
+        display: flex;
+        flex-grow: 1;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(255, 255, 255, 0.8);
+        z-index: 1;
+
+        .loading-spinner {
+            position: sticky;
+            top: 0px;
+            left: 0px
+        }
+    }
+
+    &__list {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        border-radius: 4px;
+        border: 1px solid $ui-fleet-black-10;
+        // negate ul padding
+        padding-left: 0;
+        margin: 0;
+    }
+
+    &__row {
+        display: flex;
+        max-width: 100%;
+        padding: 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        border-bottom: 1px solid $ui-fleet-black-10;
+        gap: 20px;
+
+        .form-field--checkbox {
+            flex: 1 1 0%;
+            /* This allows growing and shrinking */
+            min-width: 0;
+            /* This is crucial for proper shrinking */
+        }
+
+        .fleet-checkbox__tick {
+            flex: 0 0 auto;
+            /* This prevents growing and shrinking */
+            width: fit-content;
+            /* This ensures button isn't cut off */
+        }
+
+        .fleet-checkbox__label {
+            display: flex;
+            white-space: nowrap;
+            flex: 1 1 0%;
+            /* This allows growing and shrinking */
+            min-width: 0;
+            /* This is crucial for proper shrinking */
+        }
+
+        &:hover {
+            background: $ui-off-white;
+            cursor: pointer;
+
+            label {
+                cursor: pointer;
+            }
+
+            .policy-row__preview-button {
+                visibility: visible;
+            }
+        }
+
+        &:first-child {
+            border-radius: 4px 4px 0 0;
+        }
+
+        &:last-child {
+            border-radius: 0 0 4px 4px;
+            border-bottom: none;
+        }
+    }
+
+    // For TooltipTruncatedText
+    .fleet-checkbox__label {
+        display: flex;
+    }
+}

frontend/components/PaginatedList/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./PaginatedList";
+export type { IPaginatedListHandle } from "./PaginatedList";

frontend/components/forms/fields/Checkbox/Checkbox.tsx

@@ -118,7 +118,7 @@ const Checkbox = (props: ICheckboxProps) => {
           type="checkbox"
           ref={inputRef}
           name={name}
-          checked={value || undefined}
+          checked={!!value}
           onChange={noop} // Empty onChange to avoid React warning
           disabled={disabled || readOnly}
           style={{ display: "none" }} // Hide the input