Link datasource
UI Components to support linking platform dataset feature
yarn add @atlaskit/link-datasource3.22.0
Minor Changes
- #120472
73c800ab5f2fc- ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
Patch Changes
- #120487
13dfc62850467- [ux] Update JSM Assets branding to be standalone Assets
Note: This component is designed for internal Atlassian development.
External contributors will be able to use this component but will not be able to submit issues.
What is a Smart Link List View (Datasource)
A Smart Link List View allows users to query a Datasource and surface founds items to dynamically display in a user interface. For example:
- a JQL query surfacing a list of Jira issues
- a search query surfacing a list of Confluence pages
- a link to a list of Github issues
This Link Datasource package exposes various UI components including:
- a Smart Link List View which dynamically displays the items found in a Datasource, see
- Configuration Modals which can be used to configure datasources
These UI components are backed by backend capabilities offered by Object Resolver Service (ORS) and Linking Platform.
The package also exports (via elements) a renderType function which is used to render data of supported types in corresponding formats in the Smart Link List View. Please refer to platform/packages/linking-platform/link-datasource/src/ui/issue-like-table/render-type to view the available types.
Using the Smart Link List View package
If you want your app to be able to render a datasource as a list of items
You will need to do this 2 things in your app:
- checking if an url is a valid datasource url via ORS endpoint
/resolveor/resolve/batch. - if it is, you can render the surfaced items in a table view using the
DatasourceTableViewcomponent.
If you have an url that can be recognized as a datasource, and you want to expose it through the Smart Link List View
The capacity of unfurling an url to a Smart Link List View is called auto-resolve. Auto-resolve is done in the ORS. Please refer to ORS documentation for more information on how to add auto-resolve for your datasource.
Optionally, if you are looking to provide your customer a way to edit the datasource they created, you can do so by creating your own configuration modal. Please refer to the Writing a Datasource Modal guide.
If you have any questions, you can reach out to #help-bandicoots for help.
Installation
yarn add @atlaskit/link-datasourceUsing the Smart Link List View Component
import { DatasourceTableView } from '@atlaskit/link-datasource';
...
return (
<DatasourceTableView {...props} />
)Props
datasourceId string required
Unique identifier for which type of datasource is being rendered and for making its requests
parameters object required
Parameters for making the data requests necessary to render data within the table
Objecturl string
Url for an existing datasource, initially used for displaying to a user unauthorized to query that site
Smart Link List View Component Example
Smart Link List View
 |
| labelanotherthird | To do | 23 July 2020 | normal info panelcustom - missing defaults |  Major | |||||
| Audio in meeting room K909 doesn't work |
| In Progress | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 |  High | |||||
 |
| Done | 23 July 2020 | normal info panelcustom - missing defaults |  Medium | ||||||
| This level is hard | Closed | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 |  Low | ||||||
 | To do | 23 July 2020 | normal info panelcustom - missing defaults |  Trivial | |||||||
 | This level is hard |
| To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 |  Blocker | |||||
|
| To do | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard | To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | ||||||
|
| To do | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard |
| To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | |||||
|
| Closed | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level contains five Dragon coins |
| To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 |  | |||||
|
| In Progress | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard |
| Closed | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | |||||
|
| To do | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard |
| To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | |||||
|
| To do | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard |
| To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | |||||
|
| To do | 23 July 2020 | normal info panelcustom - missing defaults | | ||||||
| This level is hard | To do | 23 July 2020 | Header content 1Header content 2Header content 3Body content 1Body content 2Body content 3Header content 1Header content 2Header content 3Body content 1Body content 3 | | ||||||
| This level is hard |
| Closed | 23 July 2020 | normal info panelcustom - missing defaults | | |||||
import { ConfluenceSearchModal } from '@atlaskit/link-datasource';
...
return (
<ConfluenceSearchModal {...props} />
)Common Configuration Modal Props
Each Configuration Modal component type has additional unique props that will be explained further in their respective subpages. However, below are the common props that are shared between them.
export type DisplayViewModes = 'table' | 'inline';
export type ConfigModalProps<ADF, Parameters> = {
/** Unique identifier for which type of datasource is being rendered and for making its requests */
datasourceId: string;
/** The url that was used to insert a List of Links */
url?: string;
/** Parameters for making the data requests necessary to render data within the table */
parameters?: Parameters;
/** Callback function to be invoked when the modal is closed either via cancel button click, esc keydown, or modal blanket click */
onCancel: () => void;
/** Callback function to be invoked when the insert button is clicked */
onInsert: (adf: ADF, analyticsEvent?: UIAnalyticsEvent) => void;
/**
* The view mode that the modal will show on open:
* - Table = Displays a list of links in table format
* - Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.
*/
viewMode?: DisplayViewModes;
} & Partial<
Pick<
IssueLikeDataTableViewProps,
'visibleColumnKeys' | 'wrappedColumnKeys' | 'columnCustomSizes'
>
>;