@atlaskit/link-datasource 0.29.5 → 0.30.0

package/dist/esm/ui/assets-modal/modal/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
@@ -12,7 +12,11 @@ import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
-import { ModalContentContainer } from './styled';
+var modalBodyWrapperStyles = css({
+  display: 'grid',
+  height: '420px',
+  overflow: 'auto'
+});
 var AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 export var AssetsConfigModal = function AssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
@@ -43,22 +47,32 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: '',
+      workspaceId: workspaceId || '',
       cloudId: ''
     };
-  }, [aql, schemaId]);
+  }, [aql, schemaId, workspaceId]);
+  var isParametersSet = !!(aql && workspaceId && schemaId);
   var _useDatasourceTableSt = useDatasourceTableState({
       datasourceId: datasourceId,
-      parameters: parameters
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: visibleColumnKeys
     }),
     status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
     responseItems = _useDatasourceTableSt.responseItems,
+    reset = _useDatasourceTableSt.reset,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
     defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
+  var onVisibleColumnKeysChange = useCallback(function (visibleColumnKeys) {
+    setVisibleColumnKeys(visibleColumnKeys);
+  }, []);
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  var isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
+  var isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
   var retrieveUrlForSmartCardRender = useCallback(function () {
     var _data$key, _data$key$data;
     var _responseItems = _slicedToArray(responseItems, 1),
@@ -106,9 +120,10 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   var handleOnSearch = useCallback(function (aql, schemaId) {
+    reset();
     setAql(aql);
     setSchemaId(schemaId);
-  }, []);
+  }, [reset]);
   var renderModalTitleContent = useCallback(function () {
     if (workspaceError) {
       return undefined;
@@ -125,21 +140,36 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
           objectSchema: objectSchema
         },
         onSearch: handleOnSearch,
-        modalTitle: AssetsModalTitle
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
       });
     }
-  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, workspaceError, workspaceId]);
+  }, [aql, assetsClientLoading, handleOnSearch, objectSchema, status, workspaceError, workspaceId]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,
     width: "x-large",
-    shouldScrollInViewport: true
-  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, jsx(ModalContentContainer, null, workspaceError ? jsx(ModalLoadingError, null) : jsx(RenderAssetsContent, {
+    shouldScrollInViewport: true,
+    shouldCloseOnOverlayClick: false
+  }, jsx(ModalHeader, null, renderModalTitleContent()), jsx(ModalBody, null, jsx("div", {
+    css: modalBodyWrapperStyles
+  }, workspaceError ? jsx(ModalLoadingError, null) : jsx(RenderAssetsContent, {
     status: status,
-    responseItems: responseItems
+    responseItems: responseItems,
+    visibleColumnKeys: visibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    datasourceId: datasourceId,
+    aql: aql,
+    schemaId: schemaId,
+    onNextPage: onNextPage,
+    hasNextPage: hasNextPage,
+    loadDatasourceDetails: loadDatasourceDetails,
+    columns: columns,
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancel,
+    testId: 'asset-datasource-modal--cancel-button'
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,

package/dist/esm/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,19 +1,42 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
-import { EmptyState } from '../../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../../issue-like-table';
+import { InitialStateView } from './initial-state-view';
 export var RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
-    responseItems = props.responseItems;
+    responseItems = props.responseItems,
+    visibleColumnKeys = props.visibleColumnKeys,
+    onNextPage = props.onNextPage,
+    hasNextPage = props.hasNextPage,
+    loadDatasourceDetails = props.loadDatasourceDetails,
+    columns = props.columns,
+    defaultVisibleColumnKeys = props.defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange = props.onVisibleColumnKeysChange;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var issueLikeDataTableView = useMemo(function () {
+    return /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
+      testId: "asset-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
+      onVisibleColumnKeysChange: onVisibleColumnKeysChange
+    });
+  }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
   if (status === 'rejected') {
     return /*#__PURE__*/React.createElement(ModalLoadingError, null);
+  } else if (status === 'empty') {
+    return /*#__PURE__*/React.createElement(InitialStateView, null);
   } else if (resolvedWithNoResults) {
     return /*#__PURE__*/React.createElement(NoResults, null);
-  } else if (status === 'empty') {
+  } else if (status === 'loading' && !columns.length) {
     return /*#__PURE__*/React.createElement(EmptyState, {
-      testId: "assets-aql-datasource-modal--empty-state"
+      testId: "assets-aql-datasource-modal--loading-state"
     });
   }
-  return /*#__PURE__*/React.createElement("p", null, "TODO add IssueLikeDataTableView component.");
+  return issueLikeDataTableView;
 };