@atlaskit/link-datasource 1.11.0 → 1.12.0

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

@@ -29,7 +29,8 @@ const tableHeadStyles = css({
   zIndex: stickyTableHeadersIndex
 });
 const ColumnPickerHeader = styled.th`
-  width: 40px;
+  width: 56px;
+  z-index: 10;
   position: sticky;
   right: calc(-1 * ${tableSidePadding});
   background-color: ${"var(--ds-surface, #FFF)"};
@@ -43,6 +44,7 @@ const ColumnPickerHeader = styled.th`
   &:last-of-type {
     padding-right: ${tableSidePadding};
   }
+  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
 `;
 const truncatedCellStyles = css({
   overflow: 'hidden',
@@ -56,6 +58,7 @@ const scrollableContainerStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 const tableStyles = css({
+  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -74,7 +77,7 @@ function extractIndex(data) {
   invariant(typeof index === 'number');
   return index;
 }
-export const orderColumns = (columns, visibleColumnKeys) => {
+export const getOrderedColumns = (columns, visibleColumnKeys) => {
   const visibleColumns = columns.filter(column => visibleColumnKeys.includes(column.key)).sort((a, b) => {
     const indexB = visibleColumnKeys.indexOf(b.key);
     const indexA = visibleColumnKeys.indexOf(a.key);
@@ -84,25 +87,28 @@ export const orderColumns = (columns, visibleColumnKeys) => {
   return [...visibleColumns, ...invisibleColumns];
 };
 const BASE_WIDTH = 8;
-function getColumnWidth(key, type) {
-  const keyBasedWidth = {
-    assignee: BASE_WIDTH * 22,
-    labels: BASE_WIDTH * 22,
-    priority: BASE_WIDTH * 8,
-    status: BASE_WIDTH * 18,
-    summary: BASE_WIDTH * 45,
-    description: BASE_WIDTH * 31.25
-  };
-  if (keyBasedWidth[key]) {
-    return keyBasedWidth[key];
+const DEFAULT_WIDTH = BASE_WIDTH * 22;
+export const COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+const keyBasedWidthMap = {
+  priority: BASE_WIDTH * 4,
+  status: BASE_WIDTH * 18,
+  summary: BASE_WIDTH * 45,
+  description: BASE_WIDTH * 31.25,
+  type: BASE_WIDTH * 4,
+  key: BASE_WIDTH * 13
+};
+function getDefaultColumnWidth(key, type) {
+  const keyBasedWidth = keyBasedWidthMap[key];
+  if (keyBasedWidth) {
+    return keyBasedWidth;
   }
   switch (type) {
     case 'date':
       return BASE_WIDTH * 14;
-    case 'string':
-      return BASE_WIDTH * 22;
+    case 'icon':
+      return BASE_WIDTH * 4;
     default:
-      return undefined;
+      return DEFAULT_WIDTH;
   }
 }
 export const IssueLikeDataTableView = ({
@@ -114,6 +120,8 @@ export const IssueLikeDataTableView = ({
   renderItem = fallbackRenderType,
   visibleColumnKeys,
   onVisibleColumnKeysChange,
+  columnCustomSizes,
+  onColumnResize,
   status,
   hasNextPage,
   scrollableContainerHeight,
@@ -121,14 +129,15 @@ export const IssueLikeDataTableView = ({
   extensionKey
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
+  const tableHeaderRowRef = useRef(null);
   const [lastRowElement, setLastRowElement] = useState(null);
   const [hasFullSchema, setHasFullSchema] = useState(false);
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
-  const [orderedColumns, setOrderedColumns] = useState(() => orderColumns([...columns], [...visibleColumnKeys]));
+  const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
   useEffect(() => {
     if (!hasFullSchema) {
-      setOrderedColumns(orderColumns([...columns], [...visibleColumnKeys]));
+      setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
     }
   }, [columns, visibleColumnKeys, hasFullSchema]);
   useEffect(() => {
@@ -147,24 +156,8 @@ export const IssueLikeDataTableView = ({
   // or some other combination.
 
   const identityColumnKey = 'id';
-  const loadingRow = useMemo(() => ({
-    key: 'loading',
-    cells: visibleSortedColumns.map(({
-      key
-    }) => {
-      const content = jsx(Skeleton, {
-        borderRadius: 8,
-        width: "100%",
-        height: 14,
-        testId: "issues-table-row-loading"
-      });
-      return {
-        key,
-        content
-      };
-    })
-  }), [visibleSortedColumns]);
-  const headColumns = useMemo(() => visibleSortedColumns.map(({
+  const getColumnWidth = useCallback((key, type) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type), [columnCustomSizes]);
+  const headerColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
@@ -172,8 +165,20 @@ export const IssueLikeDataTableView = ({
     key,
     content: title,
     shouldTruncate: true,
-    maxWidth: getColumnWidth(key, type)
-  })), [visibleSortedColumns]);
+    width: getColumnWidth(key, type)
+  })), [getColumnWidth, visibleSortedColumns]);
+  const loadingRow = useMemo(() => ({
+    key: 'loading',
+    cells: headerColumns.map(column => ({
+      ...column,
+      content: jsx(Skeleton, {
+        borderRadius: 8,
+        width: "100%",
+        height: 14,
+        testId: "issues-table-row-loading"
+      })
+    }))
+  }), [headerColumns]);
   useEffect(() => {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -193,32 +198,38 @@ export const IssueLikeDataTableView = ({
     }
     return combine(monitorForElements({
       onDragStart: ({
-        location
+        location,
+        source
       }) => {
-        var _containerRef$current;
         initialAutoScrollerClientY.current = location.current.input.clientY;
-        autoScroller.start({
-          input: {
-            ...location.current.input,
-            clientY:
-            // The goal is to have clientY the same and in the middle of the scrollable area
-            // Since clientY is taken from to of the viewport we need to plus that in order to get
-            // middle of the scrollable area in reference to the viewport
-            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
-          },
-          behavior: 'container-only'
-        });
+        if (source.data.type === 'table-header') {
+          var _containerRef$current;
+          autoScroller.start({
+            input: {
+              ...location.current.input,
+              clientY:
+              // The goal is to have clientY the same and in the middle of the scrollable area
+              // Since clientY is taken from to of the viewport we need to plus that in order to get
+              // middle of the scrollable area in reference to the viewport
+              (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+            },
+            behavior: 'container-only'
+          });
+        }
       },
       onDrag: ({
-        location
+        location,
+        source
       }) => {
-        var _containerRef$current2;
-        autoScroller.updateInput({
-          input: {
-            ...location.current.input,
-            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
-          }
-        });
+        if (source.data.type === 'table-header') {
+          var _containerRef$current2;
+          autoScroller.updateInput({
+            input: {
+              ...location.current.input,
+              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
+            }
+          });
+        }
       },
       onDrop({
         source,
@@ -247,9 +258,7 @@ export const IssueLikeDataTableView = ({
           onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange([...newColumnKeyOrder]);
 
           // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
-          setOrderedColumns(columns => {
-            return orderColumns([...columns], [...newColumnKeyOrder]);
-          });
+          setOrderedColumns(columns => getOrderedColumns([...columns], [...newColumnKeyOrder]));
         }
       }
     }));
@@ -270,11 +279,11 @@ export const IssueLikeDataTableView = ({
       return {
         key,
         content: content.length === 1 ? content[0] : content,
-        maxWidth: getColumnWidth(key, type)
+        width: getColumnWidth(key, type)
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
-  })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
+  })), [items, visibleSortedColumns, getColumnWidth, renderItem]);
   const rows = useMemo(() => {
     if (status !== 'loading') {
       return tableRows;
@@ -328,10 +337,12 @@ export const IssueLikeDataTableView = ({
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
     css: [noDefaultBorderStyles, tableHeadStyles]
-  }, jsx("tr", null, headColumns.map(({
+  }, jsx("tr", {
+    ref: tableHeaderRowRef
+  }, headerColumns.map(({
     key,
     content,
-    maxWidth
+    width
   }, cellIndex) => {
     const heading = jsx(Tooltip, {
       content: content,
@@ -362,7 +373,8 @@ export const IssueLikeDataTableView = ({
         key: key,
         id: key,
         index: cellIndex,
-        maxWidth: maxWidth,
+        width: width,
+        onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
       }, heading);
@@ -371,9 +383,7 @@ export const IssueLikeDataTableView = ({
         key: key,
         "data-testid": `${key}-column-heading`,
         style: {
-          // this keeps the column headers from collapsing horizontally during loading states
-          minWidth: maxWidth,
-          maxWidth
+          width
         }
       }, heading);
     }
@@ -397,10 +407,10 @@ export const IssueLikeDataTableView = ({
   }, cells.map(({
     key: cellKey,
     content,
-    maxWidth
+    width
   }, cellIndex) => {
     let loadingRowStyle = {
-      maxWidth
+      width
     };
     // extra padding is required around skeleton loader to avoid vertical jumps when data loads
     if (key !== null && key !== void 0 && key.includes('loading')) {

package/dist/es2019/ui/jira-issues-modal/basic-filters/mocks/fieldValuesEmptyResponse.js

@@ -0,0 +1,14 @@
+export const fieldValuesEmptyResponse = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        fieldValues: {
+          totalCount: 0,
+          pageInfo: {},
+          edges: []
+        }
+      }
+    }
+  }
+};
+export const fieldValuesEmptyResponseMapped = [];

package/dist/es2019/ui/jira-issues-modal/basic-filters/mocks/fieldValuesExpectedResponseForAssignees.js

@@ -0,0 +1,149 @@
+export const fieldValuesResponseForAssignees = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        fieldValues: {
+          totalCount: 21,
+          pageInfo: {
+            endCursor: 'YXJyYXljb25uZWN0aW9uOjk='
+          },
+          edges: [{
+            node: {
+              jqlTerm: 'membersOf(administrators)',
+              displayName: 'administrators',
+              group: {
+                name: 'administrators'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '62df272c3aaeedcae755c533',
+              displayName: 'Atlas for Jira (staging)',
+              user: {
+                picture: 'https://secure.gravatar.com/avatar/1c65adef3d88d3eb97507f4952523df0?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Fdefault-avatar-2.png'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(atlassian-addons-admin)',
+              displayName: 'atlassian-addons-admin',
+              group: {
+                name: 'atlassian-addons-admin'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(confluence-admins-nmccormick2)',
+              displayName: 'confluence-admins-nmccormick2',
+              group: {
+                name: 'confluence-admins-nmccormick2'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(confluence-guests-nmccormick2)',
+              displayName: 'confluence-guests-nmccormick2',
+              group: {
+                name: 'confluence-guests-nmccormick2'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(confluence-user-access-admins-nmccormick2)',
+              displayName: 'confluence-user-access-admins-nmccormick2',
+              group: {
+                name: 'confluence-user-access-admins-nmccormick2'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(confluence-users-nmccormick2)',
+              displayName: 'confluence-users-nmccormick2',
+              group: {
+                name: 'confluence-users-nmccormick2'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '63d708e8c3eb74ad8e949fef',
+              displayName: 'eu-test',
+              user: {
+                picture: 'https://secure.gravatar.com/avatar/587a67c5b8494943560a3a24ada6408d?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Finitials%2FE-4.png'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '5d959053ede9300dd30c304d',
+              displayName: 'GitLab for Jira (gitlab.com)',
+              user: {
+                picture: 'https://secure.gravatar.com/avatar/38baf1356a59e6822365c81b245ba811?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Fdefault-avatar-5.png'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'membersOf(jira-admins-nmccormick2)',
+              displayName: 'jira-admins-nmccormick2',
+              group: {
+                name: 'jira-admins-nmccormick2'
+              }
+            }
+          }]
+        }
+      }
+    }
+  }
+};
+export const fieldValuesResponseForAssigneesMapped = [{
+  isGroup: true,
+  label: 'administrators',
+  optionType: 'avatarLabel',
+  value: 'membersOf(administrators)'
+}, {
+  avatar: 'https://secure.gravatar.com/avatar/1c65adef3d88d3eb97507f4952523df0?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Fdefault-avatar-2.png',
+  isSquare: true,
+  label: 'Atlas for Jira (staging)',
+  optionType: 'avatarLabel',
+  value: '62df272c3aaeedcae755c533'
+}, {
+  isGroup: true,
+  label: 'atlassian-addons-admin',
+  optionType: 'avatarLabel',
+  value: 'membersOf(atlassian-addons-admin)'
+}, {
+  isGroup: true,
+  label: 'confluence-admins-nmccormick2',
+  optionType: 'avatarLabel',
+  value: 'membersOf(confluence-admins-nmccormick2)'
+}, {
+  isGroup: true,
+  label: 'confluence-guests-nmccormick2',
+  optionType: 'avatarLabel',
+  value: 'membersOf(confluence-guests-nmccormick2)'
+}, {
+  isGroup: true,
+  label: 'confluence-user-access-admins-nmccormick2',
+  optionType: 'avatarLabel',
+  value: 'membersOf(confluence-user-access-admins-nmccormick2)'
+}, {
+  isGroup: true,
+  label: 'confluence-users-nmccormick2',
+  optionType: 'avatarLabel',
+  value: 'membersOf(confluence-users-nmccormick2)'
+}, {
+  avatar: 'https://secure.gravatar.com/avatar/587a67c5b8494943560a3a24ada6408d?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Finitials%2FE-4.png',
+  isSquare: true,
+  label: 'eu-test',
+  optionType: 'avatarLabel',
+  value: '63d708e8c3eb74ad8e949fef'
+}, {
+  avatar: 'https://secure.gravatar.com/avatar/38baf1356a59e6822365c81b245ba811?d=https%3A%2F%2Favatar-management--avatars.us-west-2.staging.public.atl-paas.net%2Fdefault-avatar-5.png',
+  isSquare: true,
+  label: 'GitLab for Jira (gitlab.com)',
+  optionType: 'avatarLabel',
+  value: '5d959053ede9300dd30c304d'
+}, {
+  isGroup: true,
+  label: 'jira-admins-nmccormick2',
+  optionType: 'avatarLabel',
+  value: 'membersOf(jira-admins-nmccormick2)'
+}];

package/dist/es2019/ui/jira-issues-modal/basic-filters/mocks/fieldValuesStandardResponseForProjects.js

@@ -0,0 +1,76 @@
+export const fieldValuesResponseForProjects = {
+  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'
+                }
+              }
+            }
+          }]
+        }
+      }
+    }
+  }
+};
+export const fieldValuesResponseForProjectsMapped = [{
+  icon: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10403?size=small',
+  label: 'My IT TEST',
+  optionType: 'iconLabel',
+  value: '"My IT TEST"'
+}, {
+  icon: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10411?size=small',
+  label: 'Test',
+  optionType: 'iconLabel',
+  value: 'Test'
+}, {
+  icon: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10405?size=small',
+  label: 'Test rights',
+  optionType: 'iconLabel',
+  value: '"Test rights"'
+}, {
+  icon: 'https://nmccormick2.jira-dev.com/rest/api/2/universal_avatar/view/type/project/avatar/10410?size=small',
+  label: 'Test2',
+  optionType: 'iconLabel',
+  value: 'Test2'
+}];

package/dist/es2019/ui/jira-issues-modal/basic-filters/mocks/fieldValuesStandardResponseForStatuses.js

@@ -0,0 +1,81 @@
+export const fieldValuesResponseForStatuses = {
+  data: {
+    jira: {
+      jqlBuilder: {
+        fieldValues: {
+          totalCount: 27,
+          pageInfo: {
+            endCursor: 'YXJyYXljb25uZWN0aW9uOjQ='
+          },
+          edges: [{
+            node: {
+              jqlTerm: 'Authorize',
+              displayName: 'Authorize',
+              statusCategory: {
+                colorName: 'YELLOW'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '"Awaiting approval"',
+              displayName: 'Awaiting approval',
+              statusCategory: {
+                colorName: 'YELLOW'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: '"Awaiting implementation"',
+              displayName: 'Awaiting implementation',
+              statusCategory: {
+                colorName: 'YELLOW'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'Canceled',
+              displayName: 'Canceled',
+              statusCategory: {
+                colorName: 'GREEN'
+              }
+            }
+          }, {
+            node: {
+              jqlTerm: 'Closed',
+              displayName: 'Closed',
+              statusCategory: {
+                colorName: 'GREEN'
+              }
+            }
+          }]
+        }
+      }
+    }
+  }
+};
+export const fieldValuesResponseForStatusesMapped = [{
+  appearance: 'inprogress',
+  label: 'Authorize',
+  optionType: 'lozengeLabel',
+  value: 'Authorize'
+}, {
+  appearance: 'inprogress',
+  label: 'Awaiting approval',
+  optionType: 'lozengeLabel',
+  value: '"Awaiting approval"'
+}, {
+  appearance: 'inprogress',
+  label: 'Awaiting implementation',
+  optionType: 'lozengeLabel',
+  value: '"Awaiting implementation"'
+}, {
+  appearance: 'success',
+  label: 'Canceled',
+  optionType: 'lozengeLabel',
+  value: 'Canceled'
+}, {
+  appearance: 'success',
+  label: 'Closed',
+  optionType: 'lozengeLabel',
+  value: 'Closed'
+}];