@atlaskit/link-datasource 1.11.1 → 1.12.1

package/dist/esm/services/mocks.js

@@ -0,0 +1,128 @@
+export var 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'
+                }
+              }]
+            }]
+          }]
+        }
+      }
+    }
+  }
+};
+export var 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/esm/services/useBasicFilterAGG.js

@@ -0,0 +1,112 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback, useMemo } from 'react';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { getBaseUrl } from '@atlaskit/linking-common';
+import { fieldValuesQuery, hydrateJQLQuery } from './utils';
+var getGraphqlUrl = function getGraphqlUrl(envKey, baseUrlOverride) {
+  var baseUrl = baseUrlOverride || getBaseUrl(envKey);
+  return baseUrl ? "".concat(baseUrl, "/graphql") : '/gateway/api/graphql';
+};
+export var useBasicFilterAGG = function useBasicFilterAGG() {
+  var _useSmartLinkContext = useSmartLinkContext(),
+    client = _useSmartLinkContext.connections.client;
+  var gatewayGraphqlUrl = getGraphqlUrl(client.envKey, client.baseUrlOverride);
+  var aggHeaders = useMemo(function () {
+    return new Headers({
+      'Content-Type': 'application/json',
+      'X-ExperimentalApi': 'JiraJqlBuilder'
+    });
+  }, []);
+  var getHydratedJQL = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(cloudId, jql) {
+      var body, request, response;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            body = JSON.stringify({
+              variables: {
+                cloudId: cloudId,
+                jql: jql
+              },
+              operationName: 'hydrate',
+              query: 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 = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(cloudId, jql, jqlTerm, searchString, pageCursor) {
+      var body, request, response;
+      return _regeneratorRuntime.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: 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 useMemo(function () {
+    return {
+      getHydratedJQL: getHydratedJQL,
+      getFieldValues: getFieldValues
+    };
+  }, [getHydratedJQL, getFieldValues]);
+};

package/dist/esm/services/utils.js

@@ -0,0 +1,2 @@
+export var 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}";
+export var 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/esm/ui/assets-modal/modal/index.js

@@ -235,7 +235,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       return _regeneratorRuntime.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(DatasourceAction.SCHEMA_UPDATED);
@@ -259,7 +259,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), [aql, reset, schemaId]);
+  }(), [aql, reset, schemaId, status]);
   var renderModalTitleContent = useCallback(function () {
     if (workspaceError) {
       return undefined;

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

@@ -21,7 +21,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 = useDatasourceTableState({
       datasourceId: datasourceId,
       parameters: parameters,
@@ -129,6 +131,8 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
       scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey

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

@@ -7,10 +7,13 @@ import invariant from 'tiny-invariant';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { cancelUnhandled } from '@atlaskit/pragmatic-drag-and-drop/addon/cancel-unhandled';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/disable-native-drag-preview';
 import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
+import { COLUMN_MIN_WIDTH } from './index';
 var tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -36,6 +39,40 @@ var dropTargetStyles = css({
 var noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+var resizerStyles = 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 = 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'
 };
@@ -49,8 +86,10 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     tableId = _ref.tableId,
     dndPreviewHeight = _ref.dndPreviewHeight,
     dragPreview = _ref.dragPreview,
-    maxWidth = _ref.maxWidth;
-  var ref = useRef(null);
+    width = _ref.width,
+    onWidthChange = _ref.onWidthChange;
+  var mainHeaderCellRef = useRef(null);
+  var columnResizeHandleRef = useRef(null);
   var _useState = useState(idleState),
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
@@ -65,7 +104,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     setClosestEdge = _useState6[1];
   var dropTargetRef = useRef(null);
   useEffect(function () {
-    var cell = ref.current;
+    var cell = mainHeaderCellRef.current;
     invariant(cell);
     return combine(draggable({
       element: cell,
@@ -168,15 +207,80 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       }
     });
   }, [tableId]);
+
+  // Handling column resizing
+  useEffect(function () {
+    var resizeHandle = columnResizeHandleRef.current;
+    invariant(resizeHandle);
+    var mainHeaderCell = mainHeaderCellRef.current;
+    invariant(mainHeaderCell);
+    return 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
+        disableNativeDragPreview({
+          nativeSetDragImage: nativeSetDragImage
+        });
+        // Block drag operations outside `@atlaskit/pragmatic-drag-and-drop`
+        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;
+        invariant(state.type === 'resizing');
+        var initialWidth = state.initialWidth;
+
+        // Set the width of our header being resized
+        var proposedWidth = initialWidth + relativeDistanceX;
+        if (initialWidth >= COLUMN_MIN_WIDTH && proposedWidth < COLUMN_MIN_WIDTH) {
+          proposedWidth = COLUMN_MIN_WIDTH;
+        }
+
+        // We update width css directly live
+        mainHeaderCell.style.setProperty('width', "".concat(proposedWidth, "px"));
+      },
+      onDrop: function onDrop() {
+        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 jsx(TableHeading, {
-    ref: ref,
+    ref: mainHeaderCellRef,
     css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
-      maxWidth: maxWidth,
+      width: width,
       cursor: 'grab'
     }
   }, jsx("div", {
+    ref: columnResizeHandleRef,
+    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
+    style: {
+      height: "".concat(dndPreviewHeight, "px")
+    },
+    "data-testid": "column-resize-handle"
+  }), jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {