@atlaskit/link-datasource 0.28.5 → 0.29.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 0.29.1
+
+### Patch Changes
+
+- [`f10d32545d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f10d32545d2) - Fix bug where clicking anything in column picker inside Datasource table triggers editor focus toggling
+
+## 0.29.0
+
+### Minor Changes
+
+- [`dd0db85e7b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd0db85e7b7) - [ux] Added onInsertPressed method to insert ADF into doc and updated helper test mocks
+
 ## 0.28.5
 
 ### Patch Changes

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

@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _useAssetsClient2 = require("../../../hooks/useAssetsClient");
 var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _messages = require("./messages");
 var _renderAssetsContent = require("./render-assets-content");
@@ -23,13 +24,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var AssetsConfigModal = function AssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    onInsert = props.onInsert,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.aql),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     aql = _useState2[0];
   var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
     schemaId = _useState4[0];
+  var _useState5 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    visibleColumnKeys = _useState6[0],
+    setVisibleColumnKeys = _useState6[1];
+  var _useAssetsClient = (0, _useAssetsClient2.useAssetsClient)(),
+    workspaceId = _useAssetsClient.workspaceId;
   var parameters = (0, _react.useMemo)(function () {
     return {
       aql: aql || '',
@@ -42,11 +51,59 @@ var AssetsConfigModal = function AssetsConfigModal(props) {
       parameters: parameters
     }),
     status = _useDatasourceTableSt.status,
-    responseItems = _useDatasourceTableSt.responseItems;
-  var isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || status === 'resolved' && !responseItems.length;
+    responseItems = _useDatasourceTableSt.responseItems,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
+  (0, _react.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 retrieveUrlForSmartCardRender = (0, _react.useCallback)(function () {
+    var _data$key, _data$key$data;
+    var _responseItems = (0, _slicedToArray2.default)(responseItems, 1),
+      data = _responseItems[0];
+    // agreement with BE that we will use `key` for rendering smartlink
+    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 = (0, _react.useCallback)(function () {
-    /* Placeholder for inserting of ADF, to do in FLY-1241 */
-  }, []);
+    if (!aql) {
+      return;
+    }
+    var firstAssetUrl = retrieveUrlForSmartCardRender();
+    if (responseItems.length === 1 && firstAssetUrl) {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: firstAssetUrl
+        }
+      });
+    } else {
+      onInsert({
+        type: 'blockCard',
+        attrs: {
+          datasource: {
+            id: datasourceId,
+            parameters: {
+              cloudId: '',
+              // TODO FLY-1278: get actual cloudID
+              aql: aql,
+              schemaId: schemaId
+            },
+            views: [{
+              type: 'table',
+              properties: {
+                columns: visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.map(function (key) {
+                  return {
+                    key: key
+                  };
+                })
+              }
+            }]
+          }
+        }
+      });
+    }
+  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   return (0, _react2.jsx)(_modalDialog.ModalTransition, null, (0, _react2.jsx)(_modalDialog.default, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -84,7 +84,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     }
   };
   var handleOpen = (0, _react.useCallback)(function () {
-    onOpen && void onOpen();
+    onOpen && onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
 
@@ -105,6 +105,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
+    id: 'column-picker-popup',
     isMulti: true,
     isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(_messages.columnPickerMessages.search),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.28.5",
+	"version": "0.29.1",
 	"sideEffects": false
 }

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

@@ -1,9 +1,10 @@
 /** @jsx jsx */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { 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 { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
@@ -12,10 +13,16 @@ export const AssetsConfigModal = props => {
   const {
     datasourceId,
     parameters: initialParameters,
-    onCancel
+    onCancel,
+    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 [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const {
+    workspaceId
+  } = useAssetsClient();
   const parameters = useMemo(() => ({
     aql: aql || '',
     schemaId: schemaId || '',
@@ -23,15 +30,60 @@ export const AssetsConfigModal = props => {
   }), [aql, schemaId]);
   const {
     status,
-    responseItems
+    responseItems,
+    defaultVisibleColumnKeys
   } = useDatasourceTableState({
     datasourceId,
     parameters
   });
-  const isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || status === 'resolved' && !responseItems.length;
+  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 retrieveUrlForSmartCardRender = useCallback(() => {
+    var _data$key, _data$key$data;
+    const [data] = responseItems;
+    // agreement with BE that we will use `key` for rendering smartlink
+    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(() => {
-    /* Placeholder for inserting of ADF, to do in FLY-1241 */
-  }, []);
+    if (!aql) {
+      return;
+    }
+    const firstAssetUrl = retrieveUrlForSmartCardRender();
+    if (responseItems.length === 1 && firstAssetUrl) {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: firstAssetUrl
+        }
+      });
+    } else {
+      onInsert({
+        type: 'blockCard',
+        attrs: {
+          datasource: {
+            id: datasourceId,
+            parameters: {
+              cloudId: '',
+              // TODO FLY-1278: get actual cloudID
+              aql: aql,
+              schemaId
+            },
+            views: [{
+              type: 'table',
+              properties: {
+                columns: visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.map(key => ({
+                  key
+                }))
+              }
+            }]
+          }
+        }
+      });
+    }
+  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -61,7 +61,7 @@ export const ColumnPicker = ({
     }
   };
   const handleOpen = useCallback(() => {
-    onOpen && void onOpen();
+    onOpen && onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
 
@@ -80,6 +80,7 @@ export const ColumnPicker = ({
     onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
+    id: 'column-picker-popup',
     isMulti: true,
     isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(columnPickerMessages.search),

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.28.5",
+	"version": "0.29.1",
 	"sideEffects": false
 }

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

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { 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 { modalMessages } from './messages';
 import { RenderAssetsContent } from './render-assets-content';
@@ -12,13 +13,21 @@ import { ModalContentContainer } from './styled';
 export var AssetsConfigModal = function AssetsConfigModal(props) {
   var datasourceId = props.datasourceId,
     initialParameters = props.parameters,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    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];
   var _useState3 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.schemaId),
     _useState4 = _slicedToArray(_useState3, 1),
     schemaId = _useState4[0];
+  var _useState5 = useState(initialVisibleColumnKeys),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleColumnKeys = _useState6[0],
+    setVisibleColumnKeys = _useState6[1];
+  var _useAssetsClient = useAssetsClient(),
+    workspaceId = _useAssetsClient.workspaceId;
   var parameters = useMemo(function () {
     return {
       aql: aql || '',
@@ -31,11 +40,59 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
       parameters: parameters
     }),
     status = _useDatasourceTableSt.status,
-    responseItems = _useDatasourceTableSt.responseItems;
-  var isDisabled = status === 'rejected' || status === 'loading' || status === 'empty' || status === 'resolved' && !responseItems.length;
+    responseItems = _useDatasourceTableSt.responseItems,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
+  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 retrieveUrlForSmartCardRender = useCallback(function () {
+    var _data$key, _data$key$data;
+    var _responseItems = _slicedToArray(responseItems, 1),
+      data = _responseItems[0];
+    // agreement with BE that we will use `key` for rendering smartlink
+    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 () {
-    /* Placeholder for inserting of ADF, to do in FLY-1241 */
-  }, []);
+    if (!aql) {
+      return;
+    }
+    var firstAssetUrl = retrieveUrlForSmartCardRender();
+    if (responseItems.length === 1 && firstAssetUrl) {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: firstAssetUrl
+        }
+      });
+    } else {
+      onInsert({
+        type: 'blockCard',
+        attrs: {
+          datasource: {
+            id: datasourceId,
+            parameters: {
+              cloudId: '',
+              // TODO FLY-1278: get actual cloudID
+              aql: aql,
+              schemaId: schemaId
+            },
+            views: [{
+              type: 'table',
+              properties: {
+                columns: visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.map(function (key) {
+                  return {
+                    key: key
+                  };
+                })
+              }
+            }]
+          }
+        }
+      });
+    }
+  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'asset-datasource-modal',
     onClose: onCancel,

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -77,7 +77,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     }
   };
   var handleOpen = useCallback(function () {
-    onOpen && void onOpen();
+    onOpen && onOpen();
     void sortSelectedColumnsTop();
   }, [onOpen, sortSelectedColumnsTop]);
 
@@ -98,6 +98,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
+    id: 'column-picker-popup',
     isMulti: true,
     isOptionDisabled: handleIsOptionDisabled,
     placeholder: intl.formatMessage(columnPickerMessages.search),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.28.5",
+	"version": "0.29.1",
 	"sideEffects": false
 }

package/dist/types/hooks/useAssetsClient.d.ts

@@ -1,6 +1,7 @@
 import { ObjectSchema } from '../types/assets/types';
-export declare const useAssetsClient: (hostname?: string) => {
-    workspaceId: string | undefined;
-    objectSchemas: ObjectSchema[] | undefined;
-    error: Error | undefined;
-};
+export interface AssetsClientState {
+    workspaceId?: string;
+    objectSchemas?: ObjectSchema[];
+    error?: Error;
+}
+export declare const useAssetsClient: (hostname?: string) => AssetsClientState;

package/dist/types-ts4.5/hooks/useAssetsClient.d.ts

@@ -1,6 +1,7 @@
 import { ObjectSchema } from '../types/assets/types';
-export declare const useAssetsClient: (hostname?: string) => {
-    workspaceId: string | undefined;
-    objectSchemas: ObjectSchema[] | undefined;
-    error: Error | undefined;
-};
+export interface AssetsClientState {
+    workspaceId?: string;
+    objectSchemas?: ObjectSchema[];
+    error?: Error;
+}
+export declare const useAssetsClient: (hostname?: string) => AssetsClientState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.28.5",
+  "version": "0.29.1",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,7 +50,7 @@
     "@atlaskit/tag": "^11.5.0",
     "@atlaskit/textfield": "5.6.3",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@atlassianlabs/jql-editor": "^2.0.1",
     "@atlassianlabs/jql-editor-autocomplete-rest": "^1.1.2",
     "@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@af/visual-regression": "*",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^4.1.0",
+    "@atlaskit/link-test-helpers": "^4.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",