UIPQB-74: Non-default fields that are part of the query are automatically displayed as columns

CHANGELOG.md

@@ -14,6 +14,7 @@
 * [UIPQB-82](https://folio-org.atlassian.net/browse/UIPQB-82) [Query Builder] Support querying based on nested objects within arrays.
 * [UIPQB-84](https://folio-org.atlassian.net/browse/UIPQB-84) Results viewer doesn't show 0 value for number type.
 * [UIPQB-78](https://folio-org.atlassian.net/browse/UIPQB-78) Query builder display if no records match the query
+* [UIPQB-74](https://folio-org.atlassian.net/browse/UIPQB-74)Non-default fields that are part of the query are automatically displayed as columns
 
 ## [1.0.0](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.0.0) (2023-10-12)
 

src/QueryBuilder/QueryBuilder/TestQuery/TestQuery.js

@@ -29,11 +29,13 @@ export const TestQuery = ({
   isTestQueryInProgress,
   setIsTestQueryInProgress,
   recordsLimit,
+  forcedVisibleValues,
 }) => {
   const queryClient = useQueryClient();
 
   const [columns, setColumns] = useState([]);
   const [visibleColumns, setVisibleColumns] = useState(recordColumns);
+
   const [includeContent, setIncludeContent] = useState(true);
   const [recordsLimitExceeded, setRecordsLimitExceeded] = useState(false);
 
@@ -115,10 +117,8 @@ export const TestQuery = ({
   };
 
   const handleDefaultVisibleColumnsChange = (values) => {
-    if (!visibleColumns.length) {
-      setVisibleColumns(values);
-      onSetDefaultVisibleColumns(values);
-    }
+    setVisibleColumns(values);
+    onSetDefaultVisibleColumns(values);
   };
 
   const renderDropdown = ({ currentRecordsCount }) => !!currentRecordsCount && (
@@ -166,6 +166,7 @@ export const TestQuery = ({
         <ResultViewer
           onSuccess={handleQueryRetrieved}
           onPreviewShown={handlePreviewShown}
+          forcedVisibleValues={forcedVisibleValues}
           onSetDefaultColumns={setColumns}
           onSetDefaultVisibleColumns={handleDefaultVisibleColumnsChange}
           contentDataSource={queryDetailsDataSource}
@@ -208,4 +209,5 @@ TestQuery.propTypes = {
   setIsTestQueryInProgress: PropTypes.func,
   recordsLimit: PropTypes.number,
   recordColumns: PropTypes.arrayOf(PropTypes.string),
+  forcedVisibleValues: PropTypes.arrayOf(PropTypes.string),
 };

src/QueryBuilder/ResultViewer/ResultViewer.js

@@ -31,6 +31,7 @@ export const ResultViewer = ({
   isPreviewLoading,
   additionalControls,
   refreshInProgress,
+  forcedVisibleValues,
 }) => {
   const intl = useIntl();
 
@@ -45,7 +46,6 @@ export const ResultViewer = ({
     isContentDataLoading,
     isContentDataFetching,
     isEntityTypeLoading,
-    isContentTypeFetchedAfterMount,
     columnMapping,
     defaultColumns,
     defaultVisibleColumns,
@@ -61,21 +61,22 @@ export const ResultViewer = ({
     queryParams,
     contentQueryOptions,
     contentQueryKeys,
+    forcedVisibleValues,
   });
 
   const isListLoading = isContentDataFetching || isContentDataLoading || isEntityTypeLoading || refreshInProgress;
   const currentRecordsCount = contentData?.length || 0;
 
   // set visible by default columns once
   useViewerCallbacks({
-    isContentTypeFetchedAfterMount,
     onSetDefaultColumns,
     defaultColumns,
     onSetDefaultVisibleColumns,
     defaultVisibleColumns,
     currentRecordsCount,
     onPreviewShown,
     defaultLimit,
+    forcedVisibleValues,
   });
 
   // refresh functionality
@@ -206,4 +207,5 @@ ResultViewer.propTypes = {
   contentQueryKeys: PropTypes.arrayOf(PropTypes.string),
   additionalControls: PropTypes.element,
   refreshInProgress: PropTypes.bool,
+  forcedVisibleValues: PropTypes.arrayOf(PropTypes.string),
 };

src/QueryBuilder/ResultViewer/ResultViewer.test.js

@@ -26,6 +26,7 @@ const renderResultViewer = (props) => (
         onSetDefaultColumns={setColumns}
         height={300}
         refreshInProgress={false}
+        forcedVisibleValues={['username']}
         {...props}
       />
     </QueryClientProvider>

src/QueryBuilder/ResultViewer/helpers.js

@@ -2,7 +2,7 @@ import { FormattedDate } from 'react-intl';
 import { DATA_TYPES } from '../../constants/dataTypes';
 import { DynamicTable } from './DynamicTable/DynamicTable';
 
-export const getTableMetadata = (entityType) => {
+export const getTableMetadata = (entityType, forcedVisibleValues) => {
   const defaultColumns = entityType?.columns?.map((cell) => ({
     label: cell.labelAlias,
     value: cell.name,
@@ -19,7 +19,9 @@ export const getTableMetadata = (entityType) => {
     return acc;
   }, {});
 
-  const defaultVisibleColumns = defaultColumns?.filter(col => col.selected).map(col => col.value) || [];
+  const defaultVisibleColumns = defaultColumns?.filter(col => !!forcedVisibleValues?.find(value => value === col.value)
+      || col.selected).map(col => col.value) || [];
+
   const formatter = defaultColumns.reduce((formatted, column) => {
     const { value, dataType, properties } = column;
 

src/hooks/useAsyncDataSource.js

@@ -13,6 +13,7 @@ export const useAsyncDataSource = ({
   onSuccess,
   contentQueryOptions,
   contentQueryKeys,
+  forcedVisibleValues,
 }) => {
   const [debouncedOffset, debouncedLimit] = useDebounce([offset, limit], 200);
 
@@ -44,7 +45,12 @@ export const useAsyncDataSource = ({
 
   const { content: contentData, totalRecords, status } = recordsData || {};
 
-  const { columnMapping, defaultColumns, defaultVisibleColumns, formatter } = getTableMetadata(entityType);
+  const {
+    columnMapping,
+    defaultColumns,
+    defaultVisibleColumns,
+    formatter,
+  } = getTableMetadata(entityType, forcedVisibleValues);
 
   return {
     contentData,

src/hooks/useViewerCallbacks.js

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 
 export const useViewerCallbacks = ({
-  isContentTypeFetchedAfterMount,
   onSetDefaultColumns,
   defaultColumns,
   onSetDefaultVisibleColumns,
@@ -11,11 +10,11 @@ export const useViewerCallbacks = ({
   defaultLimit,
 }) => {
   useEffect(() => {
-    if (isContentTypeFetchedAfterMount) {
+    if (defaultColumns.length !== 0) {
       onSetDefaultColumns?.(defaultColumns);
       onSetDefaultVisibleColumns?.(defaultVisibleColumns);
     }
-  }, [isContentTypeFetchedAfterMount]);
+  }, [currentRecordsCount]);
 
   useEffect(() => {
     if (currentRecordsCount) onPreviewShown?.({ currentRecordsCount, defaultLimit });