Fix SObject list

Ensure empty state is now shown on load instead of loading Ensure empty state does not flash on page
jetstreamapp · Mar 1, 2023 · 5c7b341 · 5c7b341
1 parent 26bafe0
commit 5c7b341
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 31 deletions.
diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlSelection.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlSelection.tsx
@@ -107,7 +107,7 @@ export const AutomationControlSelection: FunctionComponent<AutomationControlSele
           <div className="slds-p-horizontal_x-small">
             <ConnectedSobjectListMultiSelect
               selectedOrg={selectedOrg}
-              sobjects={sobjects || []}
+              sobjects={sobjects}
               selectedSObjects={selectedSObjects}
               filterFn={filterPermissionsSobjects}
               onSobjects={handleSobjectChange}

diff --git a/apps/jetstream/src/app/components/query/QueryBuilder/QueryBuilder.tsx b/apps/jetstream/src/app/components/query/QueryBuilder/QueryBuilder.tsx
@@ -274,7 +274,7 @@ export const QueryBuilder: FunctionComponent<QueryBuilderProps> = () => {
               <ConnectedSobjectList
                 label={isTooling ? 'Metadata' : 'Objects'}
                 selectedOrg={selectedOrg}
-                sobjects={sobjects || []}
+                sobjects={sobjects}
                 selectedSObject={selectedSObject}
                 isTooling={isTooling}
                 initialSearchTerm={sObjectFilterTerm}

diff --git a/libs/ui/src/lib/sobject-field-list/SobjectFieldList.tsx b/libs/ui/src/lib/sobject-field-list/SobjectFieldList.tsx
@@ -17,6 +17,13 @@ import { filterFieldsFn, getBgColor } from './sobject-field-list-utils';
 import { DEFAULT_FILTER_TYPES, FilterTypes, SobjectFieldListFilter } from './SobjectFieldListFilterNew';
 import SobjectFieldListItem from './SobjectFieldListItem';
 
+function getFilteredFields(visibleFields: Set<string>, queryFields: QueryFields, activeFilters: FilterTypes) {
+  return Array.from(visibleFields)
+    .map((key) => queryFields?.fields?.[key])
+    .filter(Boolean)
+    .filter(filterFieldsFn(activeFilters)) as FieldWrapper[];
+}
+
 export interface SobjectFieldListProps {
   org: SalesforceOrgUi;
   serverUrl: string;
@@ -69,12 +76,7 @@ export const SobjectFieldList: FunctionComponent<SobjectFieldListProps> = ({
     }
     return null;
   });
-  const [visibleFields, setVisibleFields] = useState<Set<string> | null>(() => {
-    if (isString(itemKey) && queryFieldsMap[itemKey]) {
-      return queryFieldsMap[itemKey].visibleFields;
-    }
-    return null;
-  });
+
   const [selectAll, setSelectAll] = useState<boolean>(false);
   const [searchInputId] = useState(`object-field-${sobject}-filter-${Date.now()}`);
   const [searchTerm, setSearchTerm] = useState<string>('');
@@ -85,20 +87,9 @@ export const SobjectFieldList: FunctionComponent<SobjectFieldListProps> = ({
       const queryFields = queryFieldsMap[itemKey];
       setQueryFields(queryFields);
       setFieldLength(Object.keys(queryFields.fields).length);
-      setVisibleFields(queryFields.visibleFields); // instance only changes if filtered fields was actually modified
-    }
-  }, [itemKey, queryFieldsMap]);
-
-  useNonInitialEffect(() => {
-    if (visibleFields) {
-      setFilteredFields(
-        Array.from(visibleFields)
-          .map((key) => queryFields?.fields?.[key])
-          .filter(Boolean)
-          .filter(filterFieldsFn(activeFilters)) as FieldWrapper[]
-      );
+      setFilteredFields(getFilteredFields(queryFields.visibleFields, queryFields, activeFilters));
     }
-  }, [visibleFields, activeFilters, queryFields?.fields]);
+  }, [activeFilters, itemKey, queryFieldsMap]);
 
   // when filtered fields changes, see if handleFieldFilterChanged fields are selected and possibly update allSelected state
   useEffect(() => {
@@ -269,7 +260,7 @@ export const SobjectFieldList: FunctionComponent<SobjectFieldListProps> = ({
             onSelected={handleFieldSelected}
             getContent={getFieldContent}
           />
-          {!filteredFields.length && (
+          {!queryFields.loading && !filteredFields.length && (
             <EmptyState
               omitIllustration={level > 0}
               headline="There are no matching fields"

diff --git a/libs/ui/src/lib/sobject-field-list/sobject-field-list-utils.tsx b/libs/ui/src/lib/sobject-field-list/sobject-field-list-utils.tsx
@@ -1,8 +1,8 @@
 import { REGEX } from '@jetstream/shared/utils';
-import { FieldWrapper } from '@jetstream/types';
+import { FieldWrapper, Maybe } from '@jetstream/types';
 import { FilterTypes } from './SobjectFieldListFilterNew';
 
-export function getBgColor(level: number): string {
+export function getBgColor(level: number): string | undefined {
   switch (level) {
     case 1: {
       return '#eef1f6';
@@ -16,8 +16,7 @@ export function getBgColor(level: number): string {
     case 4: {
       return '#96c5f7';
     }
-    case 5:
-    default: {
+    case 5: {
       return '#758ecd';
     }
   }

diff --git a/libs/ui/src/lib/sobject-list/ConnectedSobjectList.tsx b/libs/ui/src/lib/sobject-list/ConnectedSobjectList.tsx
@@ -26,7 +26,7 @@ export function filterToolingSobjectFn(sobject: DescribeGlobalSObjectResult): bo
 export interface ConnectedSobjectListProps {
   label?: string;
   selectedOrg: SalesforceOrgUi;
-  sobjects: DescribeGlobalSObjectResult[];
+  sobjects: Maybe<DescribeGlobalSObjectResult[]>;
   selectedSObject: Maybe<DescribeGlobalSObjectResult>;
   isTooling?: boolean;
   initialSearchTerm?: string;

diff --git a/libs/ui/src/lib/sobject-list/SobjectList.tsx b/libs/ui/src/lib/sobject-list/SobjectList.tsx
@@ -12,7 +12,7 @@ import Spinner from '../widgets/Spinner';
 
 export interface SobjectListProps {
   isTooling?: boolean;
-  sobjects: DescribeGlobalSObjectResult[];
+  sobjects: Maybe<DescribeGlobalSObjectResult[]>;
   selectedSObject: Maybe<DescribeGlobalSObjectResult>;
   loading: boolean;
   errorMessage?: Maybe<string>;
@@ -38,7 +38,7 @@ export const SobjectList: FunctionComponent<SobjectListProps> = ({
     if (sobjects && sobjects.length > 0 && searchTerm) {
       return sobjects.filter(multiWordObjectFilter(['name', 'label'], searchTerm));
     } else {
-      return sobjects;
+      return sobjects || [];
     }
   });
   const [searchInputId] = useState(`object-filter-${Date.now()}`);
@@ -48,7 +48,7 @@ export const SobjectList: FunctionComponent<SobjectListProps> = ({
     if (sobjects && sobjects.length > 0 && searchTerm) {
       setFilteredSobjects(sobjects.filter(multiWordObjectFilter(['name', 'label'], searchTerm)));
     } else {
-      setFilteredSobjects(sobjects);
+      setFilteredSobjects(sobjects || []);
     }
   }, [sobjects, searchTerm]);
 
@@ -119,7 +119,7 @@ export const SobjectList: FunctionComponent<SobjectListProps> = ({
                 searchTerm={searchTerm}
                 highlightText
               />
-              {!filteredSobjects.length && (
+              {!loading && !filteredSobjects.length && (
                 <EmptyState headline="There are no matching objects" subHeading="Adjust your selection."></EmptyState>
               )}
             </AutoFullHeightContainer>