Changelog

v2.0.0

Breaking changes

These changes are breaking and will require you to update your Views code in order to use the new version.

Table columns prop sets rather than merges

Previously, the column prop was merged into the columns inferred from the Table data. Now, columns sets the columns for the Table.

Suppose you have a task-backed Table that executes a task my_task that returns a list of data with id and name fields. You pass a columns prop to the Table for the name column.

tsx
Copied
1
<Table task="my_task" columns={[{ accessor: "name", label: "My custom name" }]} />

Previously, the Table would show the inferred id and name columns with the name column overridden with the custom label.

Now, the Table will only show the name column. For Table components relying on the column merging behavior, we recommend explicitly defining the columns of your Table. To achieve the same behavior as before in the example, simply add back the missing id column.

tsx
Copied
1
<Table task="my_task" columns={["id", { accessor: "name", label: "My custom name" }]} />

Table columns prop respects column order

Since the columns prop now sets rather than merges, you can now define the order of the columns with just the columns prop.

For example, if you want to re-order the columns to show the name column first, previously you could do this by using the shownColumns prop.

tsx
Copied
1
<Table
2
  task="my_task"
3
  columns={[
4
    { accessor: "id", label: "ID" },
5
    { accessor: "name", label: "Name" },
6
  ]}
7
  showColumns={["name", "id"]}
8
/>

Now, you simply pass in the re-ordered columns prop.

tsx
Copied
1
<Table
2
  task="my_task"
3
  columns={[
4
    { accessor: "name", label: "Name" },
5
    { accessor: "id", label: "ID" },
6
  ]}
7
/>

As a result, the shownColumns prop has been removed.

Table columns are statically typechecked

When you define a table column as { accessor: "id", label: "ID" }, the typechecker will now ensure that id is present in your table data. One caveat is that if your columns are defined separately from the Table, e.g. columns={myColumns}, then you will need to type the columns object to prevent TypeScript from getting confused: const myColumns: Column[] = ...

SQL task-backed Table removes Q1 from output before outputTransform

SQL tasks return each executed query in a separate key in the output. For example, a SQL task executes two queries, the output would include Q1 and Q2, which include results of the two queries.

If the SQL task only includes one query, the SQL task-backed Table components automatically removes the outer Q1 object from the SQL task output.

Previously, outputTransform was applied before the removal of Q1. You would have to manually reference the Q1 field in the output to access the data rows.

tsx
Copied
1
<Table
2
  task="my_sql_task"
3
  outputTransform={(output) =>
4
    output.Q1.map((row) => {
5
      // ...
6
    })
7
  }
8
/>

Now, the outputTransform prop is applied after the removal of Q1, so outputTransform can be simplified.

tsx
Copied
1
<Table
2
  task="my_sql_task"
3
  outputTransform={(output) =>
4
    output.map((row) => {
5
      // ...
6
    })
7
  }
8
/>

Stack no longer behaves like a grid when direction="row"

Previously, you could use the Stack as a grid by setting direction="row". The Stack items accepted a width prop that could accept a 12-column Bootstrap-style column width. Stack items also accepted an offset prop that created empty space within the grid.

For example, you could previously use Stack to arrange a grid like the following.

tsx
Copied
1
<Stack direction="row">
2
  <Card width={6}>Content</Card>
3
  <Card width={6}>Content</Card>
4
  <Card width={4}>Content</Card>
5
  <Card width={4}>Content</Card>
6
  <Card width={4}>Content</Card>
7
</Stack>

This would create a grid with the two rows: the first row with two cards and the second row with three cards.

Now, Stack no longer behaves like a grid. Stack items no longer accepts column widths in width and offset is removed. You can accomplish the similar results by splitting up the grid into a Stack per grid row and using the new sizing props.

tsx
Copied
1
<Stack direction="row">
2
  <Card width="1/2">Content</Card>
3
  <Card width="1/2">Content</Card>
4
</Stack>
5
<Stack direction="row">
6
  <Card width="1/3">Content</Card>
7
  <Card width="1/3">Content</Card>
8
  <Card width="1/3">Content</Card>
9
</Stack>

Breakpoints are removed for width

Previously, the width prop on Stack items accepted an object where you could specify different widths for different screen size breakpoints.

tsx
Copied
1
<Card width={{ xs: "100%", sm: "33%" }}>1</Card>

We have removed this behavior as it added too much complexity to the item props. You can still introduce a level of responsiveness by using the Stack wrap prop.

Stack.Item is removed

We found the Stack.Item component unnecessary and have removed it.

weight prop in Text uses tokens

Previously, the weight prop accepted a number representing the CSS font-weight value.

tsx
Copied
1
<Text weight={700}>Bold text</Text>

Now, the weight prop accepts a token that maps to a font weight.

tsx
Copied
1
<Text weight="bold">Bold text</Text>

Table

Tables are core to almost every internal tool, so we've continued to polish our Table component in order to make it even more powerful and easier to use.

Change columns to set rather than merge. Read more.
Add a dirty indicator when the cell has been changed from its original value.
Integrate custom column components with our table editing system. Read more.
Add ability to customize the row ID so that row selection works even when the backing data changes.
Improve the look of the row action column by tightening its size.
We removed double-click to edit, but you can still edit by clicking on the edit icon.

Layout

While our Stack component worked fine for most cases, we found that it was too complicated. We've simplified the Stack component to make it easier to use.

Simplify Stack.
- Remove grid-like behavior when direction="row".
- Remove Stack.Item component.
- Add wrap prop to control wrapping behavior.
- Allow Stack to scroll with the scroll prop.
Add grow prop to our components that will cause them to grow within a Stack.
Add common layout props width and height that work outside of Stack. These props accept our new sizing tokens.

For more information on how to arrange your components in your View, check out the layout docs and the Stack docs.

Routing

We've added more ways to connect your view to other views and tasks within the Airplane ecosystem.

Add new task or view peek functionality. Read more.
Integrate Tab with routing. Read more.

Debugging

Nothing ever works perfectly the first time, so we've added some tools to help you debug your views during development.

Add a new expandable debug panel on the bottom of your view.
Move the activity panel into the debug panel.
Improve the activity panel.
- Add filters and better ways to preview the tasks executed by your view.
Add a panel that allows you to visualize the component state.

For more information, check out how to debug component state and how to use the activity panel.

Other

Allow DescriptionList to be task-backed by passing in a task prop.
Improve Form.
- Add onSuccess and onError props.
- Add refetchTasks, which allows you to specify tasks to refetch after a form submission.
- Add beforeSubmitTransform, which allows you to transform the form data before it's submitted.
- The ids of auto-generated inputs in a task-backed form are now prefixed by the form id, to avoid collisions.
Add styling props style and className to all components. Read more.
Improve some Typescript types.

Deprecated

These changes are deprecated. The deprecated features still exist but will be removed in a future release.

The sx prop is deprecated. Use style or className instead.
The transform and align props on Text are deprecated. Use style or className instead.
The Title component is deprecated. Use Heading instead.
The itemComponent prop on Select and MultiSelect is deprecated. Use ItemComponent instead.