@atlaskit/link-datasource 0.29.4 → 0.30.0

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

@@ -1,15 +1,23 @@
 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';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+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,
     initialParameters = props.parameters,
@@ -17,36 +25,54 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     onInsert = props.onInsert,
     initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql),
-    _useState2 = _slicedToArray(_useState, 1),
-    aql = _useState2[0];
+    _useState2 = _slicedToArray(_useState, 2),
+    aql = _useState2[0],
+    setAql = _useState2[1];
   var _useState3 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
-    _useState4 = _slicedToArray(_useState3, 1),
-    schemaId = _useState4[0];
+    _useState4 = _slicedToArray(_useState3, 2),
+    schemaId = _useState4[0],
+    setSchemaId = _useState4[1];
   var _useState5 = useState(initialVisibleColumnKeys),
     _useState6 = _slicedToArray(_useState5, 2),
     visibleColumnKeys = _useState6[0],
     setVisibleColumnKeys = _useState6[1];
-  var _useAssetsClient = useAssetsClient(),
-    workspaceId = _useAssetsClient.workspaceId;
+
+  // If a workspaceError occurs this is a critical error
+  var _useAssetsClient = useAssetsClient(initialParameters),
+    workspaceId = _useAssetsClient.workspaceId,
+    workspaceError = _useAssetsClient.workspaceError,
+    objectSchema = _useAssetsClient.objectSchema,
+    assetsClientLoading = _useAssetsClient.assetsClientLoading;
   var parameters = useMemo(function () {
     return {
       aql: aql || '',
       schemaId: schemaId || '',
-      workspaceId: '' /* TODO FLY-1240: Add workspace Id */
+      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' || !aql || !workspaceId || !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),
@@ -55,7 +81,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
   var onInsertPressed = useCallback(function () {
-    if (!aql) {
+    if (!aql || !schemaId) {
       return;
     }
     var firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -93,17 +119,57 @@ 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;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return jsx(AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return jsx(AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql: aql,
+          objectSchema: objectSchema
+        },
+        onSearch: handleOnSearch,
+        modalTitle: AssetsModalTitle,
+        isSearching: status === 'loading'
+      });
+    }
+  }, [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, jsx(ModalTitle, null)), jsx(ModalBody, null, jsx(ModalContentContainer, 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/messages.js

@@ -9,5 +9,10 @@ export var modalMessages = defineMessages({
     id: 'linkDataSource.assets.configmodal.insertIssuesButtonText',
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert objects'
+  },
+  insertObjectsTitle: {
+    id: 'linkDataSource.assets.configmodal.insertObjectsTitle',
+    description: 'Title for the Assets Objects Datasource config modal which prefixes a select picker',
+    defaultMessage: 'Insert objects from'
   }
 });

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;
 };