@atlaskit/link-datasource 0.29.4 → 0.30.0

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

@@ -1,14 +1,22 @@
 /** @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';
+const modalBodyWrapperStyles = css({
+  display: 'grid',
+  height: '420px',
+  overflow: 'auto'
+});
+const AssetsModalTitle = jsx(ModalTitle, null, jsx(FormattedMessage, modalMessages.insertObjectsTitle));
 export const AssetsConfigModal = props => {
   const {
     datasourceId,
@@ -17,30 +25,46 @@ export const AssetsConfigModal = props => {
     onInsert,
     visibleColumnKeys: initialVisibleColumnKeys
   } = props;
-  const [aql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql);
-  const [schemaId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
+  const [aql, setAql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql);
+  const [schemaId, setSchemaId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // If a workspaceError occurs this is a critical error
   const {
-    workspaceId
-  } = useAssetsClient();
+    workspaceId,
+    workspaceError,
+    objectSchema,
+    assetsClientLoading
+  } = useAssetsClient(initialParameters);
   const parameters = useMemo(() => ({
     aql: aql || '',
     schemaId: schemaId || '',
-    workspaceId: '' /* TODO FLY-1240: Add workspace Id */
-  }), [aql, schemaId]);
+    workspaceId: workspaceId || '',
+    cloudId: ''
+  }), [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' || !aql || !workspaceId || !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;
@@ -48,7 +72,7 @@ export const 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]);
   const onInsertPressed = useCallback(() => {
-    if (!aql) {
+    if (!aql || !schemaId) {
       return;
     }
     const firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -84,17 +108,57 @@ 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;
+    } else {
+      if (!workspaceId || assetsClientLoading) {
+        return jsx(AssetsSearchContainerLoading, {
+          modalTitle: AssetsModalTitle
+        });
+      }
+      return jsx(AssetsSearchContainer, {
+        workspaceId: workspaceId,
+        initialSearchData: {
+          aql,
+          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/es2019/ui/assets-modal/modal/messages.js

@@ -9,5 +9,10 @@ export const 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/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;
 };