@atlaskit/link-datasource 1.27.4 → 1.28.1

package/dist/types/ui/confluence-search-modal/basic-filters/hooks/useCurrentUserInfo.d.ts

@@ -0,0 +1,7 @@
+import { UserInfo } from '../types';
+interface useUserInfoState {
+    user?: UserInfo;
+    getCurrentUserInfo: () => Promise<void>;
+}
+export declare const useCurrentUserInfo: () => useUserInfoState;
+export {};

package/dist/types/ui/confluence-search-modal/basic-filters/hooks/useRecommendation.d.ts

@@ -0,0 +1,16 @@
+import { FilterPopupSelectProps } from '../../../common/modal/popup-select';
+import { SelectOption } from '../../../common/modal/popup-select/types';
+interface FetchFilterOptionsProps {
+    cloudId: string;
+    userId: string;
+    searchTerm: string;
+}
+interface UserRecommendationState {
+    filterOptions: SelectOption[];
+    reset: () => void;
+    status: FilterPopupSelectProps['status'];
+    errors: unknown[];
+    fetchFilterOptions: (prop: FetchFilterOptionsProps) => Promise<any>;
+}
+declare const useRecommendation: () => UserRecommendationState;
+export default useRecommendation;

package/dist/types/ui/confluence-search-modal/basic-filters/index.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
+import { SelectOption } from '../../common/modal/popup-select/types';
+import { CLOLBasicFilters, SelectedOptionsMap } from './types';
 export interface BasicFilterContainerProps {
+    cloudId?: string;
+    selections: SelectedOptionsMap;
+    onChange: (filterType: CLOLBasicFilters, options: SelectOption[]) => void;
 }
-declare const BasicFilterContainer: ({}: BasicFilterContainerProps) => JSX.Element;
+declare const BasicFilterContainer: ({ cloudId, onChange, selections, }: BasicFilterContainerProps) => JSX.Element;
 export default BasicFilterContainer;

package/dist/types/ui/confluence-search-modal/basic-filters/types.d.ts

@@ -0,0 +1,20 @@
+import { SelectOption } from '../../common/modal/popup-select/types';
+export interface UserInfo {
+    accountId: string;
+    id: string;
+}
+export interface UserInfoAGGResponse {
+    data?: {
+        me: {
+            user: UserInfo;
+        };
+    };
+    errors?: Array<object>;
+}
+export declare enum CLOLBasicFilters {
+    editedOrCreatedBy = "editedOrCreatedBy",
+    lastModified = "lastModified"
+}
+export type SelectedOptionsMap = {
+    [key in CLOLBasicFilters]?: SelectOption[];
+};

package/dist/types/ui/confluence-search-modal/confluence-search-container/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { SelectedOptionsMap } from '../basic-filters/types';
 interface Props {
     cloudId?: string;
     initialSearchValue?: string;
     isSearching: boolean;
-    onSearch: (searchTerm: string) => void;
+    onSearch: (searchTerm: string, filters?: SelectedOptionsMap) => void;
 }
 declare const ConfluenceSearchContainer: ({ cloudId, initialSearchValue, isSearching, onSearch, }: Props) => JSX.Element;
 export default ConfluenceSearchContainer;

package/dist/types/ui/confluence-search-modal/types.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceAdf, InlineCardAdf } from '@atlaskit/linking-common/types';
 import { ConfigModalProps } from '../../common/types';
+import { DateRangeType } from '../common/modal/popup-select/types';
 export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<InlineCardAdf | ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
     disableDisplayDropdown?: boolean;
     overrideParameters?: Pick<ConfluenceSearchDatasourceParameters, 'entityTypes'>;
@@ -16,7 +17,7 @@ export type ConfluenceSearchDatasourceParameters = {
     containerStatus?: string[];
     contentStatuses?: string[];
     creatorAccountIds?: string[];
-    lastModified?: 'today' | 'yesterday' | 'past7Days' | 'past30Days' | 'pastYear' | 'custom';
+    lastModified?: DateRangeType;
     lastModifiedFrom?: string;
     lastModifiedTo?: string;
     shouldMatchTitleOnly?: boolean;

package/dist/types/ui/table-footer/index.d.ts

@@ -1,8 +1,9 @@
 import { jsx } from '@emotion/react';
 export type TableFooterProps = {
+    datasourceId: string;
     itemCount?: number;
     onRefresh?: () => void;
     isLoading: boolean;
     url?: string;
 };
-export declare const TableFooter: ({ itemCount, onRefresh, isLoading, url, }: TableFooterProps) => jsx.JSX.Element | null;
+export declare const TableFooter: ({ datasourceId, itemCount, onRefresh, isLoading, url, }: TableFooterProps) => jsx.JSX.Element | null;

package/dist/types/ui/table-footer/messages.d.ts

@@ -14,4 +14,9 @@ export declare const footerMessages: {
         description: string;
         defaultMessage: string;
     };
+    powerByJSM: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types/ui/table-footer/powered-by-jsm-assets/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PoweredByJSMAssets: (props: {
+    text: string;
+}) => JSX.Element;

package/dist/types-ts4.5/analytics/generated/analytics.types.d.ts

@@ -16,6 +16,10 @@ export type AnalyticsContextAttributesType = {
     dataProvider: 'jira-issues' | 'jsm-assets' | 'confluence-search';
 };
 export type DatasourceModalDialogViewedAttributesType = {};
+export type LinkClickedPoweredByAttributesType = {
+    extensionKey: string;
+    componentHierarchy: string;
+};
 export type ModalReadyDatasourceAttributesType = {
     instancesCount: number | null;
     schemasCount: number | null;
@@ -211,6 +215,9 @@ export type AnalyticsEventAttributes = {
     /**
      * Fired when the “show more” button inside the dropdown menu is clicked */
     'ui.button.clicked.basicSearchDropdown': ButtonClickedBasicSearchDropdownAttributesType;
+    /**
+     * Fired when the “show more” button inside the dropdown menu is clicked */
+    'ui.link.clicked.poweredBy': LinkClickedPoweredByAttributesType;
     /**
      * Fired when search is initiated via the search icon or enter key press for aql editor input field. */
     'ui.aqlEditor.searched': AqlEditorSearchedAttributesType;

package/dist/types-ts4.5/services/mocks.d.ts

@@ -1,3 +1,54 @@
 import { FieldValuesResponse, HydrateResponse } from '../ui/jira-issues-modal/basic-filters/types';
 export declare const mockHydrateJqlResponse: HydrateResponse;
 export declare const mockFieldValuesResponse: FieldValuesResponse;
+export declare const mockUserRecommendationsResponse: {
+    recommendedUsers: ({
+        entityType: string;
+        id: string;
+        name: string;
+        avatarUrl: string;
+        nickname: string;
+        matchPositions: {};
+        accessLevel: string;
+        accountStatus: string;
+        notMentionable: boolean;
+        userType: string;
+        attributes: {
+            isConfluenceExternalCollaborator: boolean;
+        };
+        email?: undefined;
+        locale?: undefined;
+    } | {
+        entityType: string;
+        id: string;
+        name: string;
+        email: string;
+        avatarUrl: string;
+        nickname: string;
+        matchPositions: {};
+        accessLevel: string;
+        accountStatus: string;
+        notMentionable: boolean;
+        locale: string;
+        userType: string;
+        attributes: {
+            isConfluenceExternalCollaborator: boolean;
+        };
+    } | {
+        entityType: string;
+        id: string;
+        name: string;
+        avatarUrl: string;
+        nickname: string;
+        matchPositions: {};
+        accessLevel: string;
+        accountStatus: string;
+        notMentionable: boolean;
+        locale: string;
+        userType: string;
+        attributes: {
+            isConfluenceExternalCollaborator: boolean;
+        };
+        email?: undefined;
+    })[];
+};

package/dist/types-ts4.5/services/useBasicFilterAGG.d.ts

@@ -1,3 +1,4 @@
+import { UserInfoAGGResponse } from '../ui/confluence-search-modal/basic-filters/types';
 import { BasicFilterFieldType, FieldValuesResponse, HydrateResponse } from '../ui/jira-issues-modal/basic-filters/types';
 interface GetFieldValuesProps {
     cloudId: string;
@@ -9,5 +10,6 @@ interface GetFieldValuesProps {
 export declare const useBasicFilterAGG: () => {
     getHydratedJQL: (cloudId: string, jql: string) => Promise<HydrateResponse>;
     getFieldValues: ({ cloudId, jql, jqlTerm, searchString, pageCursor, }: GetFieldValuesProps) => Promise<FieldValuesResponse>;
+    getCurrentUserInfo: () => Promise<UserInfoAGGResponse>;
 };
 export {};

package/dist/types-ts4.5/services/utils.d.ts

@@ -6,3 +6,4 @@
  */
 export declare const 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 declare const fieldValuesQuery = "query fieldValues($cloudId: ID!, $first: Int = 10, $jqlTerm: String!, $jql: String!, $searchString: String!, $after: String) {\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}";
+export declare const userQuery = "query userQuery {\n  me {\n    user {\n      id\n      accountId\n    }\n  }\n}";

package/dist/types-ts4.5/ui/common/modal/popup-select/index.d.ts

@@ -4,7 +4,7 @@ import { CustomMenuListProps } from './menu-list';
 import { SelectOption } from './types';
 export interface FilterPopupSelectProps {
     buttonLabel: string;
-    totalCount: number;
+    totalCount?: number;
     filterName: string;
     isDisabled: boolean;
     showLoading: boolean;

package/dist/types-ts4.5/ui/common/modal/popup-select/types.d.ts

@@ -18,5 +18,10 @@ export type AvatarLabelOption = OptionBase & {
     isSquare?: boolean;
     isGroup?: boolean;
 };
-export type SelectOption = IconLabelOption | LozengeLabelOption | AvatarLabelOption;
+export type DateRangeType = 'anyTime' | 'today' | 'yesterday' | 'past7Days' | 'past30Days' | 'pastYear' | 'custom';
+export type DateRangeOption = OptionBase & {
+    optionType: 'defaultOption';
+    value: DateRangeType;
+};
+export type SelectOption = IconLabelOption | LozengeLabelOption | AvatarLabelOption | DateRangeOption;
 export type FormatOptionLabel = (option: SelectOption) => ReactElement;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/PopupComponent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PopupComponentProps } from '@atlaskit/popup';
+export declare const PopupComponent: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "style" | "children" | "id" | "tabIndex" | "data-testid" | "shouldRenderToParent" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectOption } from '../../../../common/modal/popup-select/types';
+import { CLOLBasicFilters } from '../../types';
+interface DateRangeProps {
+    onSelectionChange: (filterType: CLOLBasicFilters, options: SelectOption[]) => void;
+}
+export declare const DateRangePicker: ({ onSelectionChange }: DateRangeProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/messages.d.ts

@@ -0,0 +1,42 @@
+export declare const dateRangeMessages: {
+    dateRangeTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeAnyTime: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeToday: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeYesterday: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeLastWeek: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeLastMonth: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeLastYear: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dateRangeCustom: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/styled.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const PopupComponentContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CustomDropdown: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CustomDropdownItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isSelected: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CustomDateWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DatePickersWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectDateRangeButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const DateRangeErrorMessage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/date-range-picker/trigger.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { TriggerProps } from '@atlaskit/popup/types';
+export interface PopupTriggerProps {
+    triggerProps: TriggerProps;
+    optionSelected: boolean;
+    label?: string;
+    selectedLabel?: string;
+    onClickButton: () => void;
+}
+export declare const PopupTrigger: ({ triggerProps, optionSelected, label, selectedLabel, onClickButton, }: PopupTriggerProps) => JSX.Element;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/edited-or-created-by/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SelectOption } from '../../../../common/modal/popup-select/types';
+import { CLOLBasicFilters } from '../../types';
+interface EditedOrCreatedByFilterProps {
+    cloudId?: string;
+    selection: SelectOption[];
+    onSelectionChange: (filterType: CLOLBasicFilters, selection: SelectOption[]) => void;
+}
+declare const EditedOrCreatedByFilter: ({ cloudId, onSelectionChange, selection, }: EditedOrCreatedByFilterProps) => JSX.Element;
+export default EditedOrCreatedByFilter;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/filters/edited-or-created-by/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const editedOrCreatedByMessage: {
+    buttonLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/hooks/useCurrentUserInfo.d.ts

@@ -0,0 +1,7 @@
+import { UserInfo } from '../types';
+interface useUserInfoState {
+    user?: UserInfo;
+    getCurrentUserInfo: () => Promise<void>;
+}
+export declare const useCurrentUserInfo: () => useUserInfoState;
+export {};

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/hooks/useRecommendation.d.ts

@@ -0,0 +1,16 @@
+import { FilterPopupSelectProps } from '../../../common/modal/popup-select';
+import { SelectOption } from '../../../common/modal/popup-select/types';
+interface FetchFilterOptionsProps {
+    cloudId: string;
+    userId: string;
+    searchTerm: string;
+}
+interface UserRecommendationState {
+    filterOptions: SelectOption[];
+    reset: () => void;
+    status: FilterPopupSelectProps['status'];
+    errors: unknown[];
+    fetchFilterOptions: (prop: FetchFilterOptionsProps) => Promise<any>;
+}
+declare const useRecommendation: () => UserRecommendationState;
+export default useRecommendation;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/index.d.ts

@@ -1,5 +1,10 @@
 /// <reference types="react" />
+import { SelectOption } from '../../common/modal/popup-select/types';
+import { CLOLBasicFilters, SelectedOptionsMap } from './types';
 export interface BasicFilterContainerProps {
+    cloudId?: string;
+    selections: SelectedOptionsMap;
+    onChange: (filterType: CLOLBasicFilters, options: SelectOption[]) => void;
 }
-declare const BasicFilterContainer: ({}: BasicFilterContainerProps) => JSX.Element;
+declare const BasicFilterContainer: ({ cloudId, onChange, selections, }: BasicFilterContainerProps) => JSX.Element;
 export default BasicFilterContainer;

package/dist/types-ts4.5/ui/confluence-search-modal/basic-filters/types.d.ts

@@ -0,0 +1,20 @@
+import { SelectOption } from '../../common/modal/popup-select/types';
+export interface UserInfo {
+    accountId: string;
+    id: string;
+}
+export interface UserInfoAGGResponse {
+    data?: {
+        me: {
+            user: UserInfo;
+        };
+    };
+    errors?: Array<object>;
+}
+export declare enum CLOLBasicFilters {
+    editedOrCreatedBy = "editedOrCreatedBy",
+    lastModified = "lastModified"
+}
+export type SelectedOptionsMap = {
+    [key in CLOLBasicFilters]?: SelectOption[];
+};

package/dist/types-ts4.5/ui/confluence-search-modal/confluence-search-container/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { SelectedOptionsMap } from '../basic-filters/types';
 interface Props {
     cloudId?: string;
     initialSearchValue?: string;
     isSearching: boolean;
-    onSearch: (searchTerm: string) => void;
+    onSearch: (searchTerm: string, filters?: SelectedOptionsMap) => void;
 }
 declare const ConfluenceSearchContainer: ({ cloudId, initialSearchValue, isSearching, onSearch, }: Props) => JSX.Element;
 export default ConfluenceSearchContainer;

package/dist/types-ts4.5/ui/confluence-search-modal/types.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceAdf, InlineCardAdf } from '@atlaskit/linking-common/types';
 import { ConfigModalProps } from '../../common/types';
+import { DateRangeType } from '../common/modal/popup-select/types';
 export interface ConfluenceSearchConfigModalProps extends ConfigModalProps<InlineCardAdf | ConfluenceSearchDatasourceAdf, ConfluenceSearchDatasourceParameters> {
     disableDisplayDropdown?: boolean;
     overrideParameters?: Pick<ConfluenceSearchDatasourceParameters, 'entityTypes'>;
@@ -16,7 +17,7 @@ export type ConfluenceSearchDatasourceParameters = {
     containerStatus?: string[];
     contentStatuses?: string[];
     creatorAccountIds?: string[];
-    lastModified?: 'today' | 'yesterday' | 'past7Days' | 'past30Days' | 'pastYear' | 'custom';
+    lastModified?: DateRangeType;
     lastModifiedFrom?: string;
     lastModifiedTo?: string;
     shouldMatchTitleOnly?: boolean;

package/dist/types-ts4.5/ui/table-footer/index.d.ts

@@ -1,8 +1,9 @@
 import { jsx } from '@emotion/react';
 export type TableFooterProps = {
+    datasourceId: string;
     itemCount?: number;
     onRefresh?: () => void;
     isLoading: boolean;
     url?: string;
 };
-export declare const TableFooter: ({ itemCount, onRefresh, isLoading, url, }: TableFooterProps) => jsx.JSX.Element | null;
+export declare const TableFooter: ({ datasourceId, itemCount, onRefresh, isLoading, url, }: TableFooterProps) => jsx.JSX.Element | null;

package/dist/types-ts4.5/ui/table-footer/messages.d.ts

@@ -14,4 +14,9 @@ export declare const footerMessages: {
         description: string;
         defaultMessage: string;
     };
+    powerByJSM: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/types-ts4.5/ui/table-footer/powered-by-jsm-assets/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PoweredByJSMAssets: (props: {
+    text: string;
+}) => JSX.Element;

package/examples-helpers/buildAssetsIssuesTable.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { SmartCardProvider } from '@atlaskit/link-provider';
+import { mockAssetsClientFetchRequests } from '@atlaskit/link-test-helpers/datasource';
+import { DatasourceParameters } from '@atlaskit/linking-types';
+
+import { DatasourceTableView } from '../src';
+import { fetchMessagesForLocale } from '../src/common/utils/locale/fetch-messages-for-locale';
+import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../src/ui/assets-modal';
+import { AssetsDatasourceParameters } from '../src/ui/assets-modal/types';
+
+import SmartLinkClient from './smartLinkCustomClient';
+import { useAssetsTableProps } from './useAssetsTableProps';
+
+interface AssetsTableViewProps {
+  parameters?: DatasourceParameters;
+  mockDatasourceFetchRequest?: boolean;
+}
+
+const AssetsTableView = () => {
+  const datasourceParameters: AssetsDatasourceParameters = {
+    workspaceId: 'workspaceId',
+    aql: 'name like a',
+    schemaId: '2',
+  };
+
+  const {
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+  } = useAssetsTableProps({
+    defaultColumnCustomSizes: {
+      people: 100,
+    },
+  });
+
+  return (
+    <DatasourceTableView
+      datasourceId={ASSETS_LIST_OF_LINKS_DATASOURCE_ID}
+      parameters={datasourceParameters}
+      visibleColumnKeys={visibleColumnKeys}
+      onVisibleColumnKeysChange={onVisibleColumnKeysChange}
+      columnCustomSizes={columnCustomSizes}
+      onColumnResize={onColumnResize}
+      onWrappedColumnChange={onWrappedColumnChange}
+      wrappedColumnKeys={wrappedColumnKeys}
+    />
+  );
+};
+
+export const ExampleAssetsIssuesTableView = ({
+  mockDatasourceFetchRequest = true,
+}: AssetsTableViewProps) => {
+  useEffect(() => {
+    if (mockDatasourceFetchRequest) {
+      mockAssetsClientFetchRequests();
+    }
+  }, [mockDatasourceFetchRequest]);
+
+  return (
+    <IntlMessagesProvider loaderFn={fetchMessagesForLocale}>
+      <SmartCardProvider client={new SmartLinkClient()}>
+        <AssetsTableView />
+      </SmartCardProvider>
+    </IntlMessagesProvider>
+  );
+};

package/examples-helpers/useAssetsTableProps.tsx

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react';
+
+import { assetsDefaultInitialVisibleColumnKeys } from '@atlaskit/link-test-helpers/datasource';
+
+import { DatasourceTableViewProps } from '../src/ui/datasource-table-view/types';
+import { ColumnSizesMap } from '../src/ui/issue-like-table/types';
+
+export const useAssetsTableProps = (
+  props: { defaultColumnCustomSizes?: ColumnSizesMap } = {},
+): Required<
+  Pick<
+    DatasourceTableViewProps,
+    | 'visibleColumnKeys'
+    | 'onVisibleColumnKeysChange'
+    | 'wrappedColumnKeys'
+    | 'onWrappedColumnChange'
+    | 'onColumnResize'
+  >
+> &
+  Pick<DatasourceTableViewProps, 'columnCustomSizes'> => {
+  const [visibleColumnKeys, onVisibleColumnKeysChange] = useState<string[]>(
+    assetsDefaultInitialVisibleColumnKeys,
+  );
+
+  const [columnCustomSizes, setColumnCustomSizes] = useState<
+    ColumnSizesMap | undefined
+  >(props.defaultColumnCustomSizes);
+
+  const onColumnResize = useCallback(
+    (key: string, width: number) => {
+      setColumnCustomSizes({ ...columnCustomSizes, [key]: width });
+    },
+    [columnCustomSizes],
+  );
+
+  const [wrappedColumnKeys, setWrappedColumnKeys] = useState<string[]>([]);
+
+  const onWrappedColumnChange = useCallback(
+    (key: string, shouldWrap: boolean) => {
+      if (shouldWrap) {
+        setWrappedColumnKeys([...wrappedColumnKeys, key]);
+      } else {
+        setWrappedColumnKeys(wrappedColumnKeys.filter(k => k !== key));
+      }
+    },
+    [wrappedColumnKeys],
+  );
+
+  return {
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+  };
+};