@atlaskit/link-datasource 1.11.1 → 1.12.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-datasource
 
+## 1.12.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.12.0
+
+### Minor Changes
+
+- [#38725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38725) [`da6ee1eea9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da6ee1eea9c) - [ux] `JiraIssuesConfigModal` now has new optional prop `columnCustomSizes` which is an object with keys representing column key and value being a width of that column.
+  `DatasourceTableView` now has two new props: `columnCustomSizes` with same type and `onColumnResize` callback of shape `(key: string, width: number) => void;` that will be called
+  every time customer resizing a column.
+
+### Patch Changes
+
+- [#42539](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42539) [`581b3f7a822`](https://bitbucket.org/atlassian/atlassian-frontend/commits/581b3f7a822) - [ux] Assets Config Modal now allows users to search again when datasource is 'rejected'
+- [#42383](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42383) [`624c5e73c9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/624c5e73c9d) - Add transformers for mapping the AGG response for field values and hydrated JQL values to arrays of SelectOption for use within basic filters. Add new types defining each potential lozenge appearance and their mappings to status category colors.
+- Updated dependencies
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.11.1"
+  packageVersion: "1.12.1"
 };

package/dist/cjs/services/mocks.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockHydrateJqlResponse = exports.mockFieldValuesResponse = void 0;
+var mockHydrateJqlResponse = exports.mockHydrateJqlResponse = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        hydrateJqlQuery: {
+          fields: [{
+            jqlTerm: 'issuetype',
+            values: [{
+              values: [{
+                displayName: 'Category',
+                jqlTerm: 'Category',
+                issueTypes: [{
+                  avatar: {
+                    small: '/rest/api/2/universal_avatar/view/type/issuetype/avatar/16627?size=medium'
+                  }
+                }]
+              }]
+            }, {
+              values: [{
+                displayName: '!disturbed',
+                jqlTerm: '"!disturbed"',
+                issueTypes: [{
+                  avatar: {
+                    small: '/rest/api/2/universal_avatar/view/type/issuetype/avatar/16640?size=medium'
+                  }
+                }, {
+                  avatar: {
+                    small: '/rest/api/2/universal_avatar/view/type/issuetype/avatar/16628?size=medium'
+                  }
+                }]
+              }]
+            }]
+          }, {
+            jqlTerm: 'project',
+            values: [{
+              values: [{
+                displayName: '(Deprecated) Koopa Troopas',
+                jqlTerm: '"(Deprecated) Koopa Troopas"',
+                project: {
+                  avatar: {
+                    small: 'https://hello.atlassian.net/rest/api/2/universal_avatar/view/type/project/avatar/36328?size=small'
+                  }
+                }
+              }]
+            }]
+          }, {
+            jqlTerm: 'assignee',
+            values: [{
+              values: [{
+                displayName: 'Nidhin Joseph',
+                jqlTerm: '70121:97052100-1513-42bc-a2f0-d77e71f0b7eb',
+                user: {
+                  picture: 'https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net/70121:97052100-1513-42bc-a2f0-d77e71f0b7eb/3d737224-7e8f-4e0c-888c-d5ff6044d484/128'
+                }
+              }]
+            }]
+          }, {
+            jqlTerm: 'status',
+            values: [{
+              values: [{
+                displayName: 'Done',
+                jqlTerm: 'Done',
+                statusCategory: {
+                  colorName: 'GREEN'
+                }
+              }]
+            }]
+          }]
+        }
+      }
+    }
+  }
+};
+var mockFieldValuesResponse = exports.mockFieldValuesResponse = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        fieldValues: {
+          totalCount: 4,
+          pageInfo: {
+            endCursor: 'YXJyYXljb25uZWN0aW9uOjM='
+          },
+          edges: [{
+            node: {
+              jqlTerm: '"My IT TEST"',
+              displayName: 'My IT TEST',
+              project: {
+                avatar: {
+                  small: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10403?size=small'
+                }
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'Test',
+              displayName: 'Test',
+              project: {
+                avatar: {
+                  small: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10411?size=small'
+                }
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '"Test rights"',
+              displayName: 'Test rights',
+              project: {
+                avatar: {
+                  small: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10405?size=small'
+                }
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'Test2',
+              displayName: 'Test2',
+              project: {
+                avatar: {
+                  small: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10410?size=small'
+                }
+              }
+            }
+          }]
+        }
+      }
+    }
+  }
+};

package/dist/cjs/services/useBasicFilterAGG.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBasicFilterAGG = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _linkProvider = require("@atlaskit/link-provider");
+var _linkingCommon = require("@atlaskit/linking-common");
+var _utils = require("./utils");
+var getGraphqlUrl = function getGraphqlUrl(envKey, baseUrlOverride) {
+  var baseUrl = baseUrlOverride || (0, _linkingCommon.getBaseUrl)(envKey);
+  return baseUrl ? "".concat(baseUrl, "/graphql") : '/gateway/api/graphql';
+};
+var useBasicFilterAGG = exports.useBasicFilterAGG = function useBasicFilterAGG() {
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    client = _useSmartLinkContext.connections.client;
+  var gatewayGraphqlUrl = getGraphqlUrl(client.envKey, client.baseUrlOverride);
+  var aggHeaders = (0, _react.useMemo)(function () {
+    return new Headers({
+      'Content-Type': 'application/json',
+      'X-ExperimentalApi': 'JiraJqlBuilder'
+    });
+  }, []);
+  var getHydratedJQL = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(cloudId, jql) {
+      var body, request, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            body = JSON.stringify({
+              variables: {
+                cloudId: cloudId,
+                jql: jql
+              },
+              operationName: 'hydrate',
+              query: _utils.hydrateJQLQuery
+            });
+            request = new Request(gatewayGraphqlUrl, {
+              method: 'POST',
+              headers: aggHeaders,
+              body: body
+            });
+            _context.prev = 2;
+            _context.next = 5;
+            return fetch(request);
+          case 5:
+            response = _context.sent;
+            return _context.abrupt("return", response.json());
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](2);
+            throw new Error(_context.t0);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 9]]);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [gatewayGraphqlUrl, aggHeaders]);
+  var getFieldValues = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(cloudId, jql, jqlTerm, searchString, pageCursor) {
+      var body, request, response;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            body = JSON.stringify({
+              variables: {
+                cloudId: cloudId,
+                jql: jql,
+                first: 10,
+                jqlTerm: jqlTerm,
+                searchString: searchString,
+                after: pageCursor
+              },
+              operationName: 'fieldValues',
+              query: _utils.fieldValuesQuery
+            });
+            request = new Request(gatewayGraphqlUrl, {
+              method: 'POST',
+              headers: aggHeaders,
+              body: body
+            });
+            _context2.prev = 2;
+            _context2.next = 5;
+            return fetch(request);
+          case 5:
+            response = _context2.sent;
+            _context2.next = 8;
+            return response.json();
+          case 8:
+            return _context2.abrupt("return", _context2.sent);
+          case 11:
+            _context2.prev = 11;
+            _context2.t0 = _context2["catch"](2);
+            throw new Error(_context2.t0);
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 11]]);
+    }));
+    return function (_x3, _x4, _x5, _x6, _x7) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [gatewayGraphqlUrl, aggHeaders]);
+  return (0, _react.useMemo)(function () {
+    return {
+      getHydratedJQL: getHydratedJQL,
+      getFieldValues: getFieldValues
+    };
+  }, [getHydratedJQL, getFieldValues]);
+};

package/dist/cjs/services/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hydrateJQLQuery = exports.fieldValuesQuery = void 0;
+var hydrateJQLQuery = exports.hydrateJQLQuery = "query hydrate($cloudId: ID!, $jql: String!) {\n  jira {\n    jqlBuilder(cloudId: $cloudId) {\n      hydrateJqlQuery(query: $jql) {\n        ... on JiraJqlHydratedQuery {\n          fields {\n            ... on JiraJqlQueryHydratedField {\n              jqlTerm\n              values {\n                ... on JiraJqlQueryHydratedValue {\n                  values {\n                    ... on JiraJqlProjectFieldValue {\n                      jqlTerm\n                      displayName\n                      project {\n                        avatar {\n                          small\n                        }\n                      }\n                    }\n                    ... on JiraJqlStatusFieldValue {\n                      jqlTerm\n                      displayName\n                      statusCategory {\n                        colorName\n                      }\n                    }\n                    ... on JiraJqlIssueTypeFieldValue {\n                      jqlTerm\n                      displayName\n                      issueTypes {\n                        avatar {\n                          small\n                        }\n                      }\n                    }\n                    ... on JiraJqlUserFieldValue {\n                      jqlTerm\n                      displayName\n                      user {\n                        picture\n                      }\n                    }\n                    ... on JiraJqlGroupFieldValue {\n                      jqlTerm\n                      displayName\n                      group {\n                        name\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}";
+var fieldValuesQuery = exports.fieldValuesQuery = "query fieldValues($cloudId: ID!, $first: Int = 10, $jqlTerm: String!, $jql: String!, $searchString: String!, $after: String, $projectOptions: JiraProjectOptions) {\n  jira {\n    jqlBuilder(cloudId: $cloudId) {\n      fieldValues(\n        first: $first\n        jqlTerm: $jqlTerm\n        jqlContext: $jql\n        searchString: $searchString\n        after: $after\n      ) {\n        totalCount\n        pageInfo {\n          endCursor\n        }\n        edges {\n          node {\n            jqlTerm\n            displayName\n            ... on JiraJqlProjectFieldValue {\n              project {\n                avatar {\n                  small\n                }\n              }\n            }\n            ... on JiraJqlIssueTypeFieldValue {\n              issueTypes {\n                avatar {\n                  small\n                }\n              }\n            }\n            ... on JiraJqlStatusFieldValue {\n              statusCategory {\n                colorName\n              }\n            }\n            ... on JiraJqlUserFieldValue {\n              user {\n                picture\n              }\n            }\n            ... on JiraJqlGroupFieldValue {\n              group {\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}";

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

@@ -244,7 +244,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (schemaId !== searchSchemaId || aql !== searchAql) {
+            if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
               searchCount.current++;
               if (schemaId !== searchSchemaId) {
                 userInteractionActions.current.add(_types.DatasourceAction.SCHEMA_UPDATED);
@@ -268,7 +268,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), [aql, reset, schemaId]);
+  }(), [aql, reset, schemaId, status]);
   var renderModalTitleContent = (0, _react.useCallback)(function () {
     if (workspaceError) {
       return undefined;

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -29,7 +29,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     parameters = _ref.parameters,
     visibleColumnKeys = _ref.visibleColumnKeys,
     onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
-    url = _ref.url;
+    url = _ref.url,
+    columnCustomSizes = _ref.columnCustomSizes,
+    onColumnResize = _ref.onColumnResize;
   var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
       datasourceId: datasourceId,
       parameters: parameters,
@@ -137,6 +139,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
       scrollableContainerHeight: _styled.ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -13,10 +13,13 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _cancelUnhandled = require("@atlaskit/pragmatic-drag-and-drop/addon/cancel-unhandled");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
+var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/disable-native-drag-preview");
 var _offsetFromPointer = require("@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
 var _styled = require("./styled");
+var _index = require("./index");
 /** @jsx jsx */
 
 var tableHeadingStatusStyles = {
@@ -44,6 +47,40 @@ var dropTargetStyles = (0, _react2.css)({
 var noPointerEventsStyles = (0, _react2.css)({
   pointerEvents: 'none'
 });
+var resizerStyles = (0, _react2.css)({
+  '--local-hitbox-width': "var(--ds-space-300, 24px)",
+  width: 'var(--local-hitbox-width)',
+  cursor: 'col-resize',
+  flexGrow: '0',
+  position: 'absolute',
+  zIndex: 1,
+  // we want this to sit on top of adjacent column headers
+  right: 'calc(-1 * calc(var(--local-hitbox-width) / 2))',
+  top: 0,
+  '::before': {
+    opacity: 0,
+    '--local-line-width': "var(--ds-border-width, 2px)",
+    content: '""',
+    position: 'absolute',
+    background: "var(--ds-border-brand, #0052CC)",
+    width: 'var(--local-line-width)',
+    inset: 0,
+    left: "calc(50% - calc(var(--local-line-width) / 2))",
+    transition: 'opacity 0.2s ease'
+  },
+  ':hover::before': {
+    opacity: 1
+  }
+});
+var resizingStyles = (0, _react2.css)({
+  // turning off the resizing cursor as sometimes it can cause the cursor to flicker
+  // while resizing. The browser controls the cursor while dragging, but the browser
+  // can sometimes bug out.
+  cursor: 'unset',
+  '::before': {
+    opacity: 1
+  }
+});
 var idleState = {
   type: 'idle'
 };
@@ -57,8 +94,10 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     tableId = _ref.tableId,
     dndPreviewHeight = _ref.dndPreviewHeight,
     dragPreview = _ref.dragPreview,
-    maxWidth = _ref.maxWidth;
-  var ref = (0, _react.useRef)(null);
+    width = _ref.width,
+    onWidthChange = _ref.onWidthChange;
+  var mainHeaderCellRef = (0, _react.useRef)(null);
+  var columnResizeHandleRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(idleState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     state = _useState2[0],
@@ -73,7 +112,7 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     setClosestEdge = _useState6[1];
   var dropTargetRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var cell = ref.current;
+    var cell = mainHeaderCellRef.current;
     (0, _tinyInvariant.default)(cell);
     return (0, _combine.combine)((0, _element.draggable)({
       element: cell,
@@ -176,15 +215,80 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       }
     });
   }, [tableId]);
+
+  // Handling column resizing
+  (0, _react.useEffect)(function () {
+    var resizeHandle = columnResizeHandleRef.current;
+    (0, _tinyInvariant.default)(resizeHandle);
+    var mainHeaderCell = mainHeaderCellRef.current;
+    (0, _tinyInvariant.default)(mainHeaderCell);
+    return (0, _element.draggable)({
+      element: resizeHandle,
+      getInitialData: function getInitialData() {
+        // metadata related to currently dragging item (can be read by drop events etc)
+        return {
+          type: 'column-resize',
+          id: id,
+          index: index,
+          tableId: tableId
+        };
+      },
+      // Is called when dragging started
+      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
+        var nativeSetDragImage = _ref6.nativeSetDragImage;
+        // We don't show any preview, since column separator (handle) is moving with the cursor
+        (0, _disableNativeDragPreview.disableNativeDragPreview)({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        // Block drag operations outside `@atlaskit/pragmatic-drag-and-drop`
+        _cancelUnhandled.cancelUnhandled.start();
+        setState({
+          type: 'resizing',
+          initialWidth: width
+        });
+      },
+      onDrag: function onDrag(_ref7) {
+        var location = _ref7.location;
+        var relativeDistanceX = location.current.input.clientX - location.initial.input.clientX;
+        (0, _tinyInvariant.default)(state.type === 'resizing');
+        var initialWidth = state.initialWidth;
+
+        // Set the width of our header being resized
+        var proposedWidth = initialWidth + relativeDistanceX;
+        if (initialWidth >= _index.COLUMN_MIN_WIDTH && proposedWidth < _index.COLUMN_MIN_WIDTH) {
+          proposedWidth = _index.COLUMN_MIN_WIDTH;
+        }
+
+        // We update width css directly live
+        mainHeaderCell.style.setProperty('width', "".concat(proposedWidth, "px"));
+      },
+      onDrop: function onDrop() {
+        _cancelUnhandled.cancelUnhandled.stop();
+        setState(idleState);
+        if (onWidthChange) {
+          // We use element's css value as a source of truth (compare to another Ref)
+          var currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
+          onWidthChange(+currentWidthPx.slice(0, -2));
+        }
+      }
+    });
+  }, [id, index, onWidthChange, state, tableId, width]);
   return (0, _react2.jsx)(_styled.TableHeading, {
-    ref: ref,
+    ref: mainHeaderCellRef,
     css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
-      maxWidth: maxWidth,
+      width: width,
       cursor: 'grab'
     }
   }, (0, _react2.jsx)("div", {
+    ref: columnResizeHandleRef,
+    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
+    style: {
+      height: "".concat(dndPreviewHeight, "px")
+    },
+    "data-testid": "column-resize-handle"
+  }), (0, _react2.jsx)("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {