@atlaskit/link-datasource 1.11.0 → 1.12.0

package/dist/es2019/services/mocks.js

@@ -0,0 +1,128 @@
+export const 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 const 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/es2019/services/useBasicFilterAGG.js

@@ -0,0 +1,72 @@
+import { useCallback, useMemo } from 'react';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { getBaseUrl } from '@atlaskit/linking-common';
+import { fieldValuesQuery, hydrateJQLQuery } from './utils';
+const getGraphqlUrl = (envKey, baseUrlOverride) => {
+  const baseUrl = baseUrlOverride || getBaseUrl(envKey);
+  return baseUrl ? `${baseUrl}/graphql` : '/gateway/api/graphql';
+};
+export const useBasicFilterAGG = () => {
+  const {
+    connections: {
+      client
+    }
+  } = useSmartLinkContext();
+  const gatewayGraphqlUrl = getGraphqlUrl(client.envKey, client.baseUrlOverride);
+  const aggHeaders = useMemo(() => {
+    return new Headers({
+      'Content-Type': 'application/json',
+      'X-ExperimentalApi': 'JiraJqlBuilder'
+    });
+  }, []);
+  const getHydratedJQL = useCallback(async (cloudId, jql) => {
+    const body = JSON.stringify({
+      variables: {
+        cloudId,
+        jql
+      },
+      operationName: 'hydrate',
+      query: hydrateJQLQuery
+    });
+    const request = new Request(gatewayGraphqlUrl, {
+      method: 'POST',
+      headers: aggHeaders,
+      body
+    });
+    try {
+      const response = await fetch(request);
+      return response.json();
+    } catch (e) {
+      throw new Error(e);
+    }
+  }, [gatewayGraphqlUrl, aggHeaders]);
+  const getFieldValues = useCallback(async (cloudId, jql, jqlTerm, searchString, pageCursor) => {
+    const body = JSON.stringify({
+      variables: {
+        cloudId,
+        jql,
+        first: 10,
+        jqlTerm,
+        searchString,
+        after: pageCursor
+      },
+      operationName: 'fieldValues',
+      query: fieldValuesQuery
+    });
+    const request = new Request(gatewayGraphqlUrl, {
+      method: 'POST',
+      headers: aggHeaders,
+      body
+    });
+    try {
+      const response = await fetch(request);
+      return await response.json();
+    } catch (e) {
+      throw new Error(e);
+    }
+  }, [gatewayGraphqlUrl, aggHeaders]);
+  return useMemo(() => ({
+    getHydratedJQL,
+    getFieldValues
+  }), [getHydratedJQL, getFieldValues]);
+};

package/dist/es2019/services/utils.js

@@ -0,0 +1,113 @@
+export const hydrateJQLQuery = `query hydrate($cloudId: ID!, $jql: String!) {
+  jira {
+    jqlBuilder(cloudId: $cloudId) {
+      hydrateJqlQuery(query: $jql) {
+        ... on JiraJqlHydratedQuery {
+          fields {
+            ... on JiraJqlQueryHydratedField {
+              jqlTerm
+              values {
+                ... on JiraJqlQueryHydratedValue {
+                  values {
+                    ... on JiraJqlProjectFieldValue {
+                      jqlTerm
+                      displayName
+                      project {
+                        avatar {
+                          small
+                        }
+                      }
+                    }
+                    ... on JiraJqlStatusFieldValue {
+                      jqlTerm
+                      displayName
+                      statusCategory {
+                        colorName
+                      }
+                    }
+                    ... on JiraJqlIssueTypeFieldValue {
+                      jqlTerm
+                      displayName
+                      issueTypes {
+                        avatar {
+                          small
+                        }
+                      }
+                    }
+                    ... on JiraJqlUserFieldValue {
+                      jqlTerm
+                      displayName
+                      user {
+                        picture
+                      }
+                    }
+                    ... on JiraJqlGroupFieldValue {
+                      jqlTerm
+                      displayName
+                      group {
+                        name
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+export const fieldValuesQuery = `query fieldValues($cloudId: ID!, $first: Int = 10, $jqlTerm: String!, $jql: String!, $searchString: String!, $after: String, $projectOptions: JiraProjectOptions) {
+  jira {
+    jqlBuilder(cloudId: $cloudId) {
+      fieldValues(
+        first: $first
+        jqlTerm: $jqlTerm
+        jqlContext: $jql
+        searchString: $searchString
+        after: $after
+      ) {
+        totalCount
+        pageInfo {
+          endCursor
+        }
+        edges {
+          node {
+            jqlTerm
+            displayName
+            ... on JiraJqlProjectFieldValue {
+              project {
+                avatar {
+                  small
+                }
+              }
+            }
+            ... on JiraJqlIssueTypeFieldValue {
+              issueTypes {
+                avatar {
+                  small
+                }
+              }
+            }
+            ... on JiraJqlStatusFieldValue {
+              statusCategory {
+                colorName
+              }
+            }
+            ... on JiraJqlUserFieldValue {
+              user {
+                picture
+              }
+            }
+            ... on JiraJqlGroupFieldValue {
+              group {
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}`;

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

@@ -216,7 +216,7 @@ const PlainAssetsConfigModal = props => {
     onCancel();
   }, [analyticsPayload, onCancel]);
   const handleOnSearch = useCallback(async (searchAql, searchSchemaId) => {
-    if (schemaId !== searchSchemaId || aql !== searchAql) {
+    if (schemaId !== searchSchemaId || aql !== searchAql || status === 'rejected') {
       searchCount.current++;
       if (schemaId !== searchSchemaId) {
         userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
@@ -231,7 +231,7 @@ const PlainAssetsConfigModal = props => {
       setSchemaId(searchSchemaId);
       setIsNewSearch(true);
     }
-  }, [aql, reset, schemaId]);
+  }, [aql, reset, schemaId, status]);
   const renderModalTitleContent = useCallback(() => {
     if (workspaceError) {
       return undefined;

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

@@ -21,7 +21,9 @@ const DatasourceTableViewWithoutAnalytics = ({
   parameters,
   visibleColumnKeys,
   onVisibleColumnKeysChange,
-  url
+  url,
+  columnCustomSizes,
+  onColumnResize
 }) => {
   const {
     reset,
@@ -132,6 +134,8 @@ const DatasourceTableViewWithoutAnalytics = ({
       columns: columns,
       visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
       scrollableContainerHeight: ScrollableContainerHeight,
       parentContainerRenderInstanceId: tableRenderInstanceId,
       extensionKey: extensionKey

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

@@ -6,10 +6,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';
 const tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -35,6 +38,40 @@ const dropTargetStyles = css({
 const noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+const 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
+  }
+});
+const 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
+  }
+});
 const idleState = {
   type: 'idle'
 };
@@ -48,15 +85,17 @@ export const DraggableTableHeading = ({
   tableId,
   dndPreviewHeight,
   dragPreview,
-  maxWidth
+  width,
+  onWidthChange
 }) => {
-  const ref = useRef(null);
+  const mainHeaderCellRef = useRef(null);
+  const columnResizeHandleRef = useRef(null);
   const [state, setState] = useState(idleState);
   const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
   const [closestEdge, setClosestEdge] = useState(null);
   const dropTargetRef = useRef(null);
   useEffect(() => {
-    const cell = ref.current;
+    const cell = mainHeaderCellRef.current;
     invariant(cell);
     return combine(draggable({
       element: cell,
@@ -161,15 +200,84 @@ export const DraggableTableHeading = ({
       }
     });
   }, [tableId]);
+
+  // Handling column resizing
+  useEffect(() => {
+    const resizeHandle = columnResizeHandleRef.current;
+    invariant(resizeHandle);
+    const mainHeaderCell = mainHeaderCellRef.current;
+    invariant(mainHeaderCell);
+    return draggable({
+      element: resizeHandle,
+      getInitialData() {
+        // metadata related to currently dragging item (can be read by drop events etc)
+        return {
+          type: 'column-resize',
+          id,
+          index,
+          tableId
+        };
+      },
+      // Is called when dragging started
+      onGenerateDragPreview({
+        nativeSetDragImage
+      }) {
+        // We don't show any preview, since column separator (handle) is moving with the cursor
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        // Block drag operations outside `@atlaskit/pragmatic-drag-and-drop`
+        cancelUnhandled.start();
+        setState({
+          type: 'resizing',
+          initialWidth: width
+        });
+      },
+      onDrag({
+        location
+      }) {
+        const relativeDistanceX = location.current.input.clientX - location.initial.input.clientX;
+        invariant(state.type === 'resizing');
+        const {
+          initialWidth
+        } = state;
+
+        // Set the width of our header being resized
+        let 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', `${proposedWidth}px`);
+      },
+      onDrop() {
+        cancelUnhandled.stop();
+        setState(idleState);
+        if (onWidthChange) {
+          // We use element's css value as a source of truth (compare to another Ref)
+          const 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": `${id}-column-heading`,
     style: {
-      maxWidth,
+      width,
       cursor: 'grab'
     }
   }, jsx("div", {
+    ref: columnResizeHandleRef,
+    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
+    style: {
+      height: `${dndPreviewHeight}px`
+    },
+    "data-testid": "column-resize-handle"
+  }), jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {