From 885955ab1990f6c7aecd0ddb96d0937801932bc1 Mon Sep 17 00:00:00 2001
From: Austin Turner <paustint@gmail.com>
Date: Tue, 7 Mar 2023 19:44:19 -0700
Subject: [PATCH] Migrate orderby to virtual combobox

---
 .../query/QueryOptions/QueryOrderByRow.tsx    | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/apps/jetstream/src/app/components/query/QueryOptions/QueryOrderByRow.tsx b/apps/jetstream/src/app/components/query/QueryOptions/QueryOrderByRow.tsx
index 287785ffc..80cc858e2 100644
--- a/apps/jetstream/src/app/components/query/QueryOptions/QueryOrderByRow.tsx
+++ b/apps/jetstream/src/app/components/query/QueryOptions/QueryOrderByRow.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { multiWordObjectFilter } from '@jetstream/shared/utils';
+import { getFlattenedListItems, multiWordObjectFilter } from '@jetstream/shared/utils';
 import { AscDesc, FirstLast, ListItem, ListItemGroup, QueryOrderByClause } from '@jetstream/types';
-import { Combobox, ComboboxListItem, ComboboxListItemGroup, FormRowButton, Picklist } from '@jetstream/ui';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import { ComboboxWithItemsVirtual, FormRowButton, Picklist } from '@jetstream/ui';
+import { FunctionComponent, useEffect, useState } from 'react';
 
 export interface QueryOrderByProps {
   orderBy: QueryOrderByClause;
@@ -13,8 +13,8 @@ export interface QueryOrderByProps {
   onDelete: (orderBy: QueryOrderByClause) => void;
 }
 
-function getSelectionLabel(groupLabel: string, item: ListItem<string, unknown>) {
-  return `${groupLabel} - ${item.label} ${item.secondaryLabel || ''}`;
+function getSelectionLabel(item: ListItem<string, unknown>) {
+  return item.group ? `${item.group.label} - ${item.label} ${item.secondaryLabel || ''}` : `${item.label} ${item.secondaryLabel || ''}`;
 }
 
 export const QueryOrderBy: FunctionComponent<QueryOrderByProps> = ({ orderBy, fields, order, nulls, onChange, onDelete }) => {
@@ -22,6 +22,7 @@ export const QueryOrderBy: FunctionComponent<QueryOrderByProps> = ({ orderBy, fi
   const [visibleFields, setVisibleFields] = useState(fields);
   const [initialSelectedOrder] = useState(order.find((item) => item.value === orderBy.order) || order[0]);
   const [initialSelectedNulls] = useState(nulls.find((item) => item.value === orderBy.nulls) || nulls[0]);
+  const [flattenedResources, setFlattenedResources] = useState<ListItem[]>(() => getFlattenedListItems(fields));
 
   useEffect(() => {
     if (!fieldFilter) {
@@ -43,32 +44,17 @@ export const QueryOrderBy: FunctionComponent<QueryOrderByProps> = ({ orderBy, fi
     <div className="slds-grid slds-gutters_xx-small">
       {/* Resource */}
       <div className="slds-col">
-        <Combobox
-          label="Field"
-          labelHelp="Related fields must be selected to appear in this list and only fields that allow sorting are included."
-          onInputChange={(filter) => setFieldFilter(filter)}
-          selectedItemLabel={orderBy.fieldLabel}
-          selectedItemTitle={null}
-        >
-          {visibleFields
-            .filter((group) => group.items.length > 0)
-            .map((group) => (
-              <ComboboxListItemGroup key={group.id} label={group.label}>
-                {group.items.map((item) => (
-                  <ComboboxListItem
-                    key={item.id}
-                    id={item.id}
-                    label={item.label}
-                    secondaryLabel={item.secondaryLabel}
-                    selected={item.id === orderBy.field}
-                    onSelection={(id) => {
-                      onChange({ ...orderBy, field: item.value, fieldLabel: getSelectionLabel(group.label, item) });
-                    }}
-                  />
-                ))}
-              </ComboboxListItemGroup>
-            ))}
-        </Combobox>
+        <ComboboxWithItemsVirtual
+          comboboxProps={{
+            label: 'Field',
+            labelHelp: 'Related fields must be selected to appear in this list and only fields that allow sorting are included.',
+            itemLength: 10,
+          }}
+          selectedItemLabelFn={getSelectionLabel}
+          selectedItemId={orderBy.field}
+          items={flattenedResources}
+          onSelected={(item) => onChange({ ...orderBy, field: item.value, fieldLabel: getSelectionLabel(item) })}
+        />
       </div>
       <div className="slds-col slds-grow-none">
         <Picklist