@atlaskit/link-datasource 0.29.5 → 0.30.1

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

@@ -1,6 +1,6 @@
 /** @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';
@@ -11,7 +11,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';
+const modalBodyWrapperStyles = css({
+  display: 'grid',
+  height: '420px',
+  overflow: 'auto'
+});
 const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 export const AssetsConfigModal = props => {
   const {
@@ -35,22 +39,32 @@ export const AssetsConfigModal = props => {
   const parameters = useMemo(() => ({
     aql: aql || '',
     schemaId: schemaId || '',
-    workspaceId: '',
+    workspaceId: workspaceId || '',
     cloudId: ''
-  }), [aql, schemaId]);
+  }), [aql, schemaId, workspaceId]);
+  const isParametersSet = !!(aql && workspaceId && schemaId);
   const {
     status,
+    onNextPage,
     responseItems,
+    reset,
+    loadDatasourceDetails,
+    hasNextPage,
+    columns,
     defaultVisibleColumnKeys
   } = useDatasourceTableState({
     datasourceId,
-    parameters
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
   });
+  const onVisibleColumnKeysChange = useCallback(visibleColumnKeys => {
+    setVisibleColumnKeys(visibleColumnKeys);
+  }, []);
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
-  const isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
+  const isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
@@ -95,9 +109,10 @@ export const AssetsConfigModal = props => {
     }
   }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   const handleOnSearch = useCallback((aql, schemaId) => {
+    reset();
     setAql(aql);
     setSchemaId(schemaId);
-  }, []);
+  }, [reset]);
   const renderModalTitleContent = useCallback(() => {
     if (workspaceError) {
       return undefined;
@@ -114,21 +129,36 @@ export const AssetsConfigModal = props => {
           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/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,21 +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 const RenderAssetsContent = props => {
   const {
     status,
-    responseItems
+    responseItems,
+    visibleColumnKeys,
+    onNextPage,
+    hasNextPage,
+    loadDatasourceDetails,
+    columns,
+    defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const issueLikeDataTableView = useMemo(() => /*#__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;
 };