Migrate orderby to virtual combobox

jetstreamapp · Mar 8, 2023 · 885955a · 885955a
1 parent 2504b4d
commit 885955a
Showing 1 changed file with 17 additions and 31 deletions.
diff --git 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,15 +13,16 @@ 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 }) => {
   const [fieldFilter, setFieldFilter] = useState<string | null>(null);
   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