@atlaskit/link-datasource 1.16.4 → 1.17.0

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.16.4"
+  packageVersion: "1.17.0"
 };

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -10,8 +10,13 @@ export const useDatasourceTableState = ({
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const idFieldCount = 1;
+  const keyFieldCount = 1;
   const [defaultVisibleColumnKeys, setDefaultVisibleColumnKeys] = useState([]);
   const [lastRequestedFieldKeys, setLastRequestedFieldKeys] = useState([]);
+  const [fullSchema, setFullSchema] = useState({
+    properties: []
+  });
   const [status, setStatus] = useState('empty');
   const [responseItems, setResponseItems] = useState([]);
   const [hasNextPage, setHasNextPage] = useState(true);
@@ -56,19 +61,38 @@ export const useDatasourceTableState = ({
       setStatus('rejected');
     }
   }, [columns, datasourceId, getDatasourceDetails, parameters]);
-  const applySchemaProperties = useCallback(properties => {
-    if (!isEqual(columns, properties)) {
-      setColumns(properties);
+  const applySchemaProperties = useCallback((schema, fieldKeys) => {
+    let {
+      properties,
+      defaultProperties = []
+    } = schema;
+    let propertiesToBeUsed = properties;
+    const propertyKeysToBeUsed = Array.isArray(fieldKeys) && fieldKeys.length > 0 ? fieldKeys : defaultProperties;
+    if (fieldKeys.length > 0 || defaultProperties.length > 0) {
+      propertiesToBeUsed = properties.filter(property => {
+        return propertyKeysToBeUsed.includes(property.key);
+      });
+    }
+
+    /*Jira adds identifier fields like id and key to all data responses
+    Since defaultProperties already send back the keyField, we are accounting only
+    for the idField when we are using defaulProperties
+    */
+    if (properties.length > fieldKeys.length + idFieldCount + keyFieldCount && properties.length > defaultProperties.length + idFieldCount) {
+      setFullSchema(schema);
+    }
+    if (!isEqual(columns, propertiesToBeUsed)) {
+      setColumns(propertiesToBeUsed);
     }
-    const defaultProperties = properties.map(prop => prop.key);
+    const newProperties = propertiesToBeUsed.map(prop => prop.key);
 
     // when loading for the first time, we will need to set default visible props as /data does not give you that info
     // also, since we dont pass any fields, we will need to set this info as lastRequestedFieldKeys
-    if (!isEqual(defaultVisibleColumnKeys, defaultProperties)) {
-      setDefaultVisibleColumnKeys(defaultProperties);
+    if (!isEqual(defaultVisibleColumnKeys, newProperties)) {
+      setDefaultVisibleColumnKeys(newProperties);
     }
-    if (!isEqual(lastRequestedFieldKeys, defaultProperties)) {
-      setLastRequestedFieldKeys(defaultProperties);
+    if (!isEqual(lastRequestedFieldKeys, newProperties)) {
+      setLastRequestedFieldKeys(newProperties);
     }
   }, [columns, defaultVisibleColumnKeys, lastRequestedFieldKeys]);
   const onNextPage = useCallback(async (requestInfo = {}) => {
@@ -80,12 +104,13 @@ export const useDatasourceTableState = ({
       shouldRequestFirstPage,
       shouldForceRequest = false
     } = requestInfo;
+    const isFullSchemaLoaded = fullSchema.properties.length > 0;
     const datasourceDataRequest = {
       parameters,
       pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
       pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
       fields: fieldKeys,
-      includeSchema: isSchemaFromData
+      includeSchema: isFullSchemaLoaded ? false : isSchemaFromData
     };
     setStatus('loading');
     try {
@@ -120,8 +145,8 @@ export const useDatasourceTableState = ({
       if (fieldKeys.length > 0) {
         setLastRequestedFieldKeys(fieldKeys);
       }
-      if (isSchemaFromData && schema && items.length > 0) {
-        applySchemaProperties(schema.properties);
+      if ((isSchemaFromData && schema || fullSchema.properties.length > 0) && items.length > 0) {
+        applySchemaProperties(schema || fullSchema, fieldKeys);
       }
       const isUserLoadingNextPage = (responseItems === null || responseItems === void 0 ? void 0 : responseItems.length) !== 0 && !shouldRequestFirstPage;
       if (isUserLoadingNextPage) {
@@ -141,7 +166,7 @@ export const useDatasourceTableState = ({
       }
       setStatus('rejected');
     }
-  }, [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent]);
+  }, [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
   const reset = useCallback(options => {
     setStatus('empty');
     setResponseItems([]);
@@ -149,6 +174,9 @@ export const useDatasourceTableState = ({
     setNextCursor(undefined);
     setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
+    setFullSchema({
+      properties: []
+    });
     setShouldForceRequest((options === null || options === void 0 ? void 0 : options.shouldForceRequest) || false);
     if (options !== null && options !== void 0 && options.shouldResetColumns) {
       setColumns([]);

package/dist/es2019/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -8,6 +8,7 @@ export const useFilterOptions = ({
   const [filterOptions, setFilterOptions] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [status, setStatus] = useState('empty');
+  const [errors, setErrors] = useState([]);
   const [nextPageCursor, setNextPageCursor] = useState(undefined);
   const initialData = useRef();
   const {
@@ -33,6 +34,7 @@ export const useFilterOptions = ({
       });
       if (response.errors && response.errors.length > 0) {
         setStatus('rejected');
+        setErrors(response.errors);
         return;
       }
       if (isNewSearch) {
@@ -51,6 +53,7 @@ export const useFilterOptions = ({
       setNextPageCursor(mapFieldValuesToPageCursor(response));
       setStatus('resolved');
     } catch (error) {
+      setErrors([error]);
       setStatus('rejected');
     }
   }, [cloudId, filterOptions, filterType, getFieldValues]);
@@ -59,6 +62,7 @@ export const useFilterOptions = ({
     fetchFilterOptions,
     totalCount,
     pageCursor: nextPageCursor,
-    status
+    status,
+    errors: status === 'rejected' ? errors : []
   };
 };

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
@@ -24,15 +24,16 @@ const AsyncPopupSelect = ({
   const {
     formatMessage
   } = useIntl();
-  const pickerRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
+  const [sortedOptions, setSortedOptions] = useState(selectedOptions);
   const {
     filterOptions,
     fetchFilterOptions,
     totalCount,
     status,
-    pageCursor
+    pageCursor,
+    errors
   } = useFilterOptions({
     filterType,
     cloudId
@@ -52,14 +53,32 @@ const AsyncPopupSelect = ({
     setSelectedOptions(newValue);
     onSelectionChange(newValue);
   };
-  const handleOpenPopup = useCallback(() => {
-    if (status === 'empty' || status === 'rejected') {
-      // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
-      fetchFilterOptions({
-        searchString: searchTerm
+  const sortOptionsOnPopupOpen = useCallback(() => {
+    if (selectedOptions.length === 0) {
+      setSortedOptions(filterOptions);
+      return;
+    }
+    const nonSelectedOptions = filterOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
+    const newOptions = [...selectedOptions, ...nonSelectedOptions];
+    setSortedOptions(newOptions);
+  }, [selectedOptions, filterOptions]);
+  const sortOptionsOnResolve = useCallback(() => {
+    const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));
+    let shouldSetSortOptions = false;
+    if (sortedOptions.length !== filterOptions.length) {
+      shouldSetSortOptions = true;
+    } else {
+      sortedOptions.forEach(sortedOption => {
+        if (!filterOptions.some(filterOption => filterOption.value === sortedOption.value)) {
+          shouldSetSortOptions = true;
+        }
       });
     }
-  }, [fetchFilterOptions, searchTerm, status]);
+    if (shouldSetSortOptions) {
+      const sortedOptionsFiltered = sortedOptions.filter(sortedOption => filterOptions.some(filterOption => filterOption.value === sortedOption.value));
+      setSortedOptions([...sortedOptionsFiltered, ...newOptions]);
+    }
+  }, [filterOptions, sortedOptions]);
   const handleShowMore = useCallback(() => {
     if (pageCursor) {
       fetchFilterOptions({
@@ -68,28 +87,34 @@ const AsyncPopupSelect = ({
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
+  const handleOpenPopup = useCallback(() => {
+    if (status === 'empty' || status === 'rejected') {
+      // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
+      fetchFilterOptions({
+        searchString: searchTerm
+      });
+    } else if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
   useEffect(() => {
     if (status === 'resolved') {
-      var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
-      // necessary to refocus the search input after the loading state
-      pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.inputRef) === null || _pickerRef$current$se2 === void 0 ? void 0 : _pickerRef$current$se2.focus();
+      sortOptionsOnResolve();
     }
-  }, [status]);
+  }, [sortOptionsOnResolve, status]);
   const filterOptionsLength = filterOptions.length;
   const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
+  const popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
   const areAllResultsLoaded = filterOptions.length === totalCount;
   const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
-  const options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
-
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
     maxMenuWidth: 300,
     minMenuWidth: 300,
-    ref: pickerRef,
     testId: "jlol-basic-filter-popup-select",
     inputId: "jlol-basic-filter-popup-select--input"
     /*
@@ -114,7 +139,8 @@ const AsyncPopupSelect = ({
         isLoading: isLoading,
         isLoadingMore: isLoadingMore,
         showMore: shouldDisplayShowMoreButton,
-        handleShowMore: handleShowMore
+        handleShowMore: handleShowMore,
+        errors: errors
       })),
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,
@@ -122,7 +148,7 @@ const AsyncPopupSelect = ({
       IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
 
-    options: options,
+    options: popupSelectOptions,
     value: selectedOptions,
     filterOption: noFilterOptions,
     formatOptionLabel: formatOptionLabel,
@@ -133,6 +159,7 @@ const AsyncPopupSelect = ({
       ...triggerProps
     }) => /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, triggerProps, {
       filterType: filterType,
+      selectedOptions: selectedOptions,
       isSelected: isOpen,
       onClick: handleOpenPopup,
       isDisabled: isDisabled

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/trigger.js

@@ -1,24 +1,44 @@
 import React, { forwardRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { asyncPopupSelectMessages } from './messages';
+const triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '150px'
+});
+const badgeStyles = xcss({
+  marginLeft: 'space.050'
+});
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   filterType,
   isSelected,
   isDisabled,
-  onClick
+  onClick,
+  selectedOptions
 }, ref) => {
+  const [firstOption] = selectedOptions || [];
+  const hasOptions = selectedOptions && selectedOptions.length > 0;
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
-    isSelected: isSelected,
+    isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
     onClick: onClick,
     testId: `jlol-basic-filter-${filterType}-trigger`,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })
-  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]));
+  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: triggerButtonLabelStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`]), firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+    xcss: badgeStyles,
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    appearance: "primary"
+  }, "+", selectedOptions.length - 1))));
 });
 export default PopupTrigger;

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
 import AsyncPopupSelect from './async-popup-select';
@@ -10,13 +10,15 @@ const BasicFilterContainer = ({
   jql,
   cloudId
 }) => {
-  const [selection] = useState([]);
+  const [selection, setSelection] = useState([]);
   useEffect(() => {
     if (isValidJql(jql)) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  const handleSelectionChange = () => {};
+  const handleSelectionChange = useCallback(options => {
+    setSelection(options);
+  }, [setSelection]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/menu-list/errorMessage.js

@@ -1,9 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N500 } from '@atlaskit/theme/colors';
+import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { SEARCH_DEBOUNCE_MS } from '../async-popup-select';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
-const CustomErrorMessage = () => {
+const getErrorReasonType = errors => {
+  const [error] = errors || [];
+  if (error instanceof Error) {
+    return 'network';
+  }
+  if (errors && errors.length > 0) {
+    return 'agg';
+  }
+  return 'unknown';
+};
+const CustomErrorMessage = ({
+  filterType,
+  errors
+}) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+
+  /**
+   * Debounce is required because our search is debounced
+   * ref: ./noOptionsMessage.tsx
+   */
+  const [debouncedAnalyticsCallback] = useDebouncedCallback(() => {
+    fireEvent('ui.error.shown.basicSearchDropdown', {
+      filterType,
+      reason: getErrorReasonType(errors)
+    });
+  }, SEARCH_DEBOUNCE_MS);
+  useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
   return /*#__PURE__*/React.createElement(CustomSelectMessage, {
     icon: /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -12,6 +12,7 @@ const CustomMenuList = ({
   isLoadingMore,
   isError,
   isEmpty,
+  errors,
   showMore,
   handleShowMore,
   children,
@@ -29,7 +30,10 @@ const CustomMenuList = ({
       return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
     }
     if (isError) {
-      return /*#__PURE__*/React.createElement(CustomErrorMessage, null);
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, {
+        filterType: filterType,
+        errors: errors
+      });
     }
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.16.4"
+  packageVersion: "1.17.0"
 };

package/dist/esm/hooks/useDatasourceTableState.js

@@ -13,6 +13,8 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     fieldKeys = _ref$fieldKeys === void 0 ? [] : _ref$fieldKeys;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var idFieldCount = 1;
+  var keyFieldCount = 1;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     defaultVisibleColumnKeys = _useState2[0],
@@ -21,42 +23,48 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     lastRequestedFieldKeys = _useState4[0],
     setLastRequestedFieldKeys = _useState4[1];
-  var _useState5 = useState('empty'),
+  var _useState5 = useState({
+      properties: []
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    status = _useState6[0],
-    setStatus = _useState6[1];
-  var _useState7 = useState([]),
+    fullSchema = _useState6[0],
+    setFullSchema = _useState6[1];
+  var _useState7 = useState('empty'),
     _useState8 = _slicedToArray(_useState7, 2),
-    responseItems = _useState8[0],
-    setResponseItems = _useState8[1];
-  var _useState9 = useState(true),
+    status = _useState8[0],
+    setStatus = _useState8[1];
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    hasNextPage = _useState10[0],
-    setHasNextPage = _useState10[1];
-  var _useState11 = useState(undefined),
+    responseItems = _useState10[0],
+    setResponseItems = _useState10[1];
+  var _useState11 = useState(true),
     _useState12 = _slicedToArray(_useState11, 2),
-    nextCursor = _useState12[0],
-    setNextCursor = _useState12[1];
-  var _useState13 = useState([]),
+    hasNextPage = _useState12[0],
+    setHasNextPage = _useState12[1];
+  var _useState13 = useState(undefined),
     _useState14 = _slicedToArray(_useState13, 2),
-    columns = _useState14[0],
-    setColumns = _useState14[1];
-  var _useState15 = useState(undefined),
+    nextCursor = _useState14[0],
+    setNextCursor = _useState14[1];
+  var _useState15 = useState([]),
     _useState16 = _slicedToArray(_useState15, 2),
-    totalCount = _useState16[0],
-    setTotalCount = _useState16[1];
-  var _useState17 = useState(false),
+    columns = _useState16[0],
+    setColumns = _useState16[1];
+  var _useState17 = useState(undefined),
     _useState18 = _slicedToArray(_useState17, 2),
-    shouldForceRequest = _useState18[0],
-    setShouldForceRequest = _useState18[1];
-  var _useState19 = useState([]),
+    totalCount = _useState18[0],
+    setTotalCount = _useState18[1];
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    destinationObjectTypes = _useState20[0],
-    setDestinationObjectTypes = _useState20[1];
-  var _useState21 = useState(),
+    shouldForceRequest = _useState20[0],
+    setShouldForceRequest = _useState20[1];
+  var _useState21 = useState([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    extensionKey = _useState22[0],
-    setExtensionKey = _useState22[1];
+    destinationObjectTypes = _useState22[0],
+    setDestinationObjectTypes = _useState22[1];
+  var _useState23 = useState(),
+    _useState24 = _slicedToArray(_useState23, 2),
+    extensionKey = _useState24[0],
+    setExtensionKey = _useState24[1];
   var _useDatasourceClientE = useDatasourceClientExtension(),
     getDatasourceData = _useDatasourceClientE.getDatasourceData,
     getDatasourceDetails = _useDatasourceClientE.getDatasourceDetails;
@@ -114,21 +122,39 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       }
     }, _callee, null, [[2, 17]]);
   })), [columns, datasourceId, getDatasourceDetails, parameters]);
-  var applySchemaProperties = useCallback(function (properties) {
-    if (!isEqual(columns, properties)) {
-      setColumns(properties);
+  var applySchemaProperties = useCallback(function (schema, fieldKeys) {
+    var properties = schema.properties,
+      _schema$defaultProper = schema.defaultProperties,
+      defaultProperties = _schema$defaultProper === void 0 ? [] : _schema$defaultProper;
+    var propertiesToBeUsed = properties;
+    var propertyKeysToBeUsed = Array.isArray(fieldKeys) && fieldKeys.length > 0 ? fieldKeys : defaultProperties;
+    if (fieldKeys.length > 0 || defaultProperties.length > 0) {
+      propertiesToBeUsed = properties.filter(function (property) {
+        return propertyKeysToBeUsed.includes(property.key);
+      });
+    }
+
+    /*Jira adds identifier fields like id and key to all data responses
+    Since defaultProperties already send back the keyField, we are accounting only
+    for the idField when we are using defaulProperties
+    */
+    if (properties.length > fieldKeys.length + idFieldCount + keyFieldCount && properties.length > defaultProperties.length + idFieldCount) {
+      setFullSchema(schema);
     }
-    var defaultProperties = properties.map(function (prop) {
+    if (!isEqual(columns, propertiesToBeUsed)) {
+      setColumns(propertiesToBeUsed);
+    }
+    var newProperties = propertiesToBeUsed.map(function (prop) {
       return prop.key;
     });
 
     // when loading for the first time, we will need to set default visible props as /data does not give you that info
     // also, since we dont pass any fields, we will need to set this info as lastRequestedFieldKeys
-    if (!isEqual(defaultVisibleColumnKeys, defaultProperties)) {
-      setDefaultVisibleColumnKeys(defaultProperties);
+    if (!isEqual(defaultVisibleColumnKeys, newProperties)) {
+      setDefaultVisibleColumnKeys(newProperties);
     }
-    if (!isEqual(lastRequestedFieldKeys, defaultProperties)) {
-      setLastRequestedFieldKeys(defaultProperties);
+    if (!isEqual(lastRequestedFieldKeys, newProperties)) {
+      setLastRequestedFieldKeys(newProperties);
     }
   }, [columns, defaultVisibleColumnKeys, lastRequestedFieldKeys]);
   var onNextPage = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
@@ -138,6 +164,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       shouldRequestFirstPage,
       _requestInfo$shouldFo,
       shouldForceRequest,
+      isFullSchemaLoaded,
       datasourceDataRequest,
       _yield$getDatasourceD2,
       _yield$getDatasourceD3,
@@ -164,18 +191,19 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           return _context2.abrupt("return");
         case 3:
           _requestInfo$isSchema = requestInfo.isSchemaFromData, isSchemaFromData = _requestInfo$isSchema === void 0 ? true : _requestInfo$isSchema, shouldRequestFirstPage = requestInfo.shouldRequestFirstPage, _requestInfo$shouldFo = requestInfo.shouldForceRequest, shouldForceRequest = _requestInfo$shouldFo === void 0 ? false : _requestInfo$shouldFo;
+          isFullSchemaLoaded = fullSchema.properties.length > 0;
           datasourceDataRequest = {
             parameters: parameters,
             pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
             pageCursor: shouldRequestFirstPage ? undefined : nextCursor,
             fields: fieldKeys,
-            includeSchema: isSchemaFromData
+            includeSchema: isFullSchemaLoaded ? false : isSchemaFromData
           };
           setStatus('loading');
-          _context2.prev = 6;
-          _context2.next = 9;
+          _context2.prev = 7;
+          _context2.next = 10;
           return getDatasourceData(datasourceId, datasourceDataRequest, shouldForceRequest);
-        case 9:
+        case 10:
           _yield$getDatasourceD2 = _context2.sent;
           _yield$getDatasourceD3 = _yield$getDatasourceD2.meta;
           access = _yield$getDatasourceD3.access;
@@ -187,12 +215,12 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           _totalCount = _yield$getDatasourceD4.totalCount;
           schema = _yield$getDatasourceD4.schema;
           if (!(access === 'forbidden' || access === 'unauthorized')) {
-            _context2.next = 22;
+            _context2.next = 23;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 22:
+        case 23:
           setExtensionKey(_extensionKey);
           setDestinationObjectTypes(_destinationObjectTypes);
           setTotalCount(_totalCount);
@@ -207,8 +235,8 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           if (fieldKeys.length > 0) {
             setLastRequestedFieldKeys(fieldKeys);
           }
-          if (isSchemaFromData && schema && items.length > 0) {
-            applySchemaProperties(schema.properties);
+          if ((isSchemaFromData && schema || fullSchema.properties.length > 0) && items.length > 0) {
+            applySchemaProperties(schema || fullSchema, fieldKeys);
           }
           isUserLoadingNextPage = (responseItems === null || responseItems === void 0 ? void 0 : responseItems.length) !== 0 && !shouldRequestFirstPage;
           if (isUserLoadingNextPage) {
@@ -221,25 +249,25 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
             });
           }
           setStatus('resolved');
-          _context2.next = 41;
+          _context2.next = 42;
           break;
-        case 35:
-          _context2.prev = 35;
-          _context2.t0 = _context2["catch"](6);
+        case 36:
+          _context2.prev = 36;
+          _context2.t0 = _context2["catch"](7);
           if (!(_context2.t0 instanceof Response && (_context2.t0.status === 401 || _context2.t0.status === 403))) {
-            _context2.next = 40;
+            _context2.next = 41;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 40:
-          setStatus('rejected');
         case 41:
+          setStatus('rejected');
+        case 42:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[6, 35]]);
-  })), [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent]);
+    }, _callee2, null, [[7, 36]]);
+  })), [parameters, fieldKeys, nextCursor, getDatasourceData, datasourceId, responseItems === null || responseItems === void 0 ? void 0 : responseItems.length, applySchemaProperties, fireEvent, fullSchema]);
   var reset = useCallback(function (options) {
     setStatus('empty');
     setResponseItems([]);
@@ -247,6 +275,9 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
     setNextCursor(undefined);
     setTotalCount(undefined);
     setLastRequestedFieldKeys([]);
+    setFullSchema({
+      properties: []
+    });
     setShouldForceRequest((options === null || options === void 0 ? void 0 : options.shouldForceRequest) || false);
     if (options !== null && options !== void 0 && options.shouldResetColumns) {
       setColumns([]);