@atlaskit/link-datasource 3.22.6 → 4.0.0

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

@@ -1,190 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
-import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
-import { useDatasourceAnalyticsEvents } from '../../analytics';
-import { componentMetadata } from '../../analytics/constants';
-import { startUfoExperience } from '../../analytics/ufoExperiences';
-import { useColumnPickerRenderedFailedUfoExperience } from '../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
-import { useDataRenderedUfoExperience } from '../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
-import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
-import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
-import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
-import i18nEN from '../../i18n/en';
-import { StoreContainer } from '../../state';
-import { ScrollableContainerHeight } from '../../ui/issue-like-table/styled';
-import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
-import { AccessRequired } from '../common/error-state/access-required';
-import { LoadingError } from '../common/error-state/loading-error';
-import { NoResults } from '../common/error-state/no-results';
-import { ProviderAuthRequired } from '../common/error-state/provider-auth-required';
-import { IssueLikeDataTableView } from '../issue-like-table';
-import EmptyState from '../issue-like-table/empty-state';
-import { TableFooter } from '../table-footer';
-const containerStyles = css({
-  borderRadius: 'inherit'
-});
-const DatasourceTableViewWithoutAnalytics = ({
-  datasourceId,
-  parameters,
-  visibleColumnKeys,
-  onVisibleColumnKeysChange,
-  url,
-  columnCustomSizes,
-  onColumnResize,
-  wrappedColumnKeys,
-  onWrappedColumnChange
-}) => {
-  const {
-    reset,
-    status,
-    onNextPage,
-    responseItems,
-    responseItemIds,
-    hasNextPage,
-    columns,
-    defaultVisibleColumnKeys,
-    totalCount,
-    loadDatasourceDetails,
-    extensionKey = null,
-    providerName,
-    destinationObjectTypes,
-    authDetails
-  } = useDatasourceTableState({
-    datasourceId,
-    parameters,
-    fieldKeys: visibleColumnKeys
-  });
-  const {
-    fireEvent
-  } = useDatasourceAnalyticsEvents();
-  const experienceId = useDatasourceExperienceId();
-  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
-
-  /*  Need this to make sure that the datasource in the editor gets updated new info if any edits are made in the modal
-       But we don't want to call it on initial load. This screws up useDatasourceTableState's internal
-       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
-    */
-  const isInitialRender = useRef(true);
-  const hasColumns = !!columns.length;
-  const isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
-  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
-  useEffect(() => {
-    if (!isInitialRender.current) {
-      reset();
-    }
-    isInitialRender.current = false;
-  }, [reset, parameters]);
-  useEffect(() => {
-    if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
-      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
-    }
-  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
-  useEffect(() => {
-    const isTableViewRenderedWithData = status === 'resolved' && isDataReady;
-    if (isTableViewRenderedWithData) {
-      fireEvent('ui.datasource.renderSuccess', {
-        extensionKey,
-        destinationObjectTypes,
-        totalItemCount: totalCount,
-        displayedColumnCount: visibleColumnCount.current,
-        display: 'table'
-      });
-    }
-  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
-  useEffect(() => {
-    const shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
-    if (shouldStartUfoExperience) {
-      startUfoExperience({
-        name: 'datasource-rendered'
-      }, experienceId);
-    }
-  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
-  useColumnPickerRenderedFailedUfoExperience(status, experienceId);
-  useDataRenderedUfoExperience({
-    status,
-    experienceId: experienceId,
-    itemCount: responseItems.length,
-    extensionKey
-  });
-  const forcedReset = useCallback(() => {
-    reset({
-      shouldForceRequest: true,
-      shouldResetColumns: datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID
-    });
-  }, [reset, datasourceId]);
-  const onRefresh = useCallback(() => {
-    fireEvent('ui.button.clicked.sync', {
-      extensionKey,
-      destinationObjectTypes
-    });
-    forcedReset();
-  }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
-  const handleErrorRefresh = useCallback(() => {
-    reset({
-      shouldForceRequest: true
-    });
-  }, [reset]);
-  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
-    return jsx(NoResults, {
-      onRefresh: handleErrorRefresh
-    });
-  }
-  if (status === 'unauthorized') {
-    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? jsx(ProviderAuthRequired, {
-      auth: authDetails,
-      extensionKey: extensionKey,
-      providerName: providerName,
-      onAuthSuccess: forcedReset,
-      onAuthError: forcedReset,
-      datasourceId: datasourceId
-    }) : jsx(AccessRequired, {
-      url: url
-    });
-  }
-  if (status === 'rejected') {
-    return jsx(LoadingError, {
-      onRefresh: handleErrorRefresh
-    });
-  }
-  return jsx(IntlMessagesProvider, {
-    defaultMessages: i18nEN,
-    loaderFn: fetchMessagesForLocale
-  }, jsx("div", {
-    css: containerStyles,
-    className: "datasource-table"
-  }, hasColumns ? jsx(IssueLikeDataTableView, {
-    testId: 'datasource-table-view',
-    hasNextPage: hasNextPage,
-    items: responseItems,
-    itemIds: responseItemIds,
-    onNextPage: onNextPage,
-    onLoadDatasourceDetails: loadDatasourceDetails,
-    status: status,
-    columns: columns,
-    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
-    columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
-    wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange,
-    scrollableContainerHeight: ScrollableContainerHeight,
-    extensionKey: extensionKey
-  }) : jsx(EmptyState, {
-    testId: "datasource-table-view-skeleton",
-    isCompact: true
-  }), jsx(TableFooter, {
-    datasourceId: datasourceId,
-    itemCount: isDataReady ? totalCount : undefined,
-    onRefresh: onRefresh,
-    isLoading: !isDataReady || status === 'loading',
-    url: url
-  })));
-};
-export const DatasourceTableViewOld = withAnalyticsContext(componentMetadata.tableView)(props => jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(DatasourceTableViewWithoutAnalytics, props))));

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

@@ -1,155 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/new';
-import BoardIcon from '@atlaskit/icon/core/migration/board';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
-import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
-import Tooltip from '@atlaskit/tooltip';
-import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
-import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
-import { ConcatenatedMenuList } from './concatenated-menu-list';
-import { columnPickerMessages } from './messages';
-const chevronIconStyles = xcss({
-  display: 'flex',
-  alignItems: 'center'
-});
-export const ColumnPickerOld = ({
-  columns,
-  selectedColumnKeys,
-  onSelectedColumnKeysChange,
-  onOpen
-}) => {
-  const intl = useIntl();
-  const experienceId = useDatasourceExperienceId();
-  const [allOptions, setAllOptions] = useState([]);
-  const pickerRef = useRef(null);
-  const mapColumnToOption = useCallback(({
-    key,
-    title
-  }) => ({
-    label: title,
-    value: key
-  }), []);
-  const selectedOptions = columns.filter(({
-    key
-  }) => selectedColumnKeys.includes(key)).map(mapColumnToOption);
-  useEffect(() => {
-    setAllOptions(columns.filter(({
-      title
-    }) => title).map(mapColumnToOption));
-  }, [columns, mapColumnToOption]);
-  const handleChange = useCallback(selectedOptions => {
-    const selectedValues = selectedOptions.map(({
-      value
-    }) => value);
-    selectedValues.sort((a, b) => {
-      const indexB = columns.findIndex(({
-        key
-      }) => key === b);
-      const indexA = columns.findIndex(({
-        key
-      }) => key === a);
-      return indexA - indexB;
-    });
-    onSelectedColumnKeysChange(selectedValues);
-  }, [columns, onSelectedColumnKeysChange]);
-  const sortSelectedColumnsTop = useCallback(() => {
-    if (!allOptions.length) {
-      return;
-    }
-    const nonSelectedOptions = allOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
-    const sortedOptions = [...selectedOptions, ...nonSelectedOptions];
-    sortedOptions.length > 0 && setAllOptions(sortedOptions);
-  }, [allOptions, selectedOptions]);
-  const stopEscapePropagationWhenOpen = e => {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-    }
-  };
-  const handleOpen = useCallback(() => {
-    onOpen && onOpen();
-    void sortSelectedColumnsTop();
-  }, [onOpen, sortSelectedColumnsTop]);
-
-  // If only 1 option is selected, disable it since we don't want user to uncheck everything
-  const handleIsOptionDisabled = (option, selectValue) => {
-    return selectValue.length === 1 && selectValue.some(selectedValue => selectedValue.value === option.value);
-  };
-  useEffect(() => {
-    if (allOptions.length) {
-      var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2, _pickerRef$current$se3;
-      // necessary to refocus the search input after the loading state
-      pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.select) === null || _pickerRef$current$se2 === void 0 ? void 0 : (_pickerRef$current$se3 = _pickerRef$current$se2.inputRef) === null || _pickerRef$current$se3 === void 0 ? void 0 : _pickerRef$current$se3.focus();
-    }
-  }, [allOptions]);
-  useEffect(() => {
-    if (allOptions.length) {
-      if (experienceId) {
-        succeedUfoExperience({
-          name: 'column-picker-rendered'
-        }, experienceId);
-      }
-    }
-  }, [allOptions, experienceId]);
-  return jsx(PopupSelect, {
-    classNamePrefix: 'column-picker-popup',
-    testId: 'column-picker-popup',
-    components: {
-      Option: CheckboxOption,
-      MenuList: ConcatenatedMenuList
-    },
-    filterOption: createFilter({
-      ignoreAccents: false
-    }),
-    options: allOptions,
-    value: selectedOptions
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-    ,
-    onOpen: handleOpen,
-    closeMenuOnSelect: false,
-    hideSelectedOptions: false,
-    id: 'column-picker-popup',
-    isMulti: true,
-    ref: pickerRef,
-    isOptionDisabled: handleIsOptionDisabled,
-    placeholder: intl.formatMessage(columnPickerMessages.search),
-    onKeyDown: stopEscapePropagationWhenOpen,
-    label: "Search for fields",
-    onChange: handleChange,
-    isLoading: allOptions.length === 0,
-    target: ({
-      isOpen,
-      ...triggerProps
-    }) => jsx(Tooltip, {
-      content: intl.formatMessage(columnPickerMessages.tooltip)
-    }, tooltipProps => jsx(Button, _extends({}, tooltipProps, triggerProps, {
-      isSelected: isOpen,
-      spacing: "compact",
-      appearance: "subtle",
-      testId: "column-picker-trigger-button",
-      iconBefore: () => jsx(Box, {
-        as: "span",
-        xcss: chevronIconStyles
-      }, jsx(BoardIcon, {
-        color: "currentColor",
-        label: "board",
-        LEGACY_size: "medium",
-        spacing: "spacious",
-        LEGACY_margin: "0 0 0 4px"
-      }), jsx(ChevronDownIcon, {
-        color: "currentColor",
-        label: "down",
-        LEGACY_size: "medium"
-      }))
-    }), ''))
-  });
-};

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list-old.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
-import { components } from '@atlaskit/select';
-import { fontFallback } from '@atlaskit/theme/typography';
-import { columnPickerMessages } from './messages';
-export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
-const messageStyles = css({
-  color: "var(--ds-text-subtle, #44546F)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
-  fontWeight: "var(--ds-font-weight-regular, 400)"
-});
-export const ConcatenatedMenuListOld = ({
-  children,
-  ...props
-}) => {
-  const shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
-  if (shouldUseDefaultMenuList) {
-    return jsx(components.MenuList, props, children);
-  }
-  const optionStyle = {
-    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"}`,
-    height: 'auto'
-  };
-  const maximumLimitReachedMessage =
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: messageStyles,
-    style: optionStyle
-  }, jsx(FormattedMessage, _extends({
-    tagName: 'div'
-  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
-    tagName: 'div'
-  }, columnPickerMessages.maximumItemsShownLine2)));
-  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
-};

package/dist/es2019/ui/issue-like-table/drag-column-preview-old.js

@@ -1,62 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { N40 } from '@atlaskit/theme/colors';
-import { fontFallback } from '@atlaskit/theme/typography';
-import { TableHeading } from './styled';
-const maxWidth = '200px';
-const firstLastChildOverride = `
-  &:first-of-type, &:last-of-type {
-    padding-left: ${"var(--ds-space-100, 8px)"};
-    padding-right: ${"var(--ds-space-100, 8px)"};
-  }
-`;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const TablePreviewHeading = styled(TableHeading)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  background: "var(--ds-background-disabled, #091E4224)",
-  maxWidth: maxWidth
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-firstLastChildOverride);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const TablePreviewCell = styled.td({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  maxWidth: maxWidth,
-  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
-  boxSizing: 'border-box',
-  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  height: '30px'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-firstLastChildOverride);
-const tableStyles = css({
-  background: "var(--ds-surface, #FFF)",
-  borderCollapse: 'separate',
-  borderSpacing: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
-  maxWidth
-});
-export const DragColumnPreviewOld = ({
-  title,
-  rows
-}) => {
-  return jsx("table", {
-    css: tableStyles
-  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map((data, i) => jsx("tr", {
-    key: i
-  }, jsx(TablePreviewCell, null, data))), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
-};