NocoBase 0.10: New features in the second quarter

New features in the second quarter

• Association field component improvements, support for multiple component switching
  • Select
  • Record picker
  • Sub-form/Sub-details
  • Sub-table
  • File manager
  • Title(read only)
• Quick creation of relational data, supports two quick creation modes
  • Add in drop-down menu to quickly create a new record based on the title field
  • Add in pop-up window to configure complex add forms
• Duplicate action, supports two modes
  • Direct duplicate
  • Copy into the form and continue to fill in
• Form data templates
• Filter data scope support variables
• List block
• Grid card block
• Mobile client plugin
• User authentication plugin, support for different authentication methods
  • Email/Password
  • SMS
  • OIDC
  • SAML
• Workflow nodes
  • Manual node upgrade, support for adding and editing from existing collections
  • Loop node
  • Aggregate node
• File manager
  • Provide file collection template
  • Provide file manager component

Upgrading applications

Upgrading for Docker compose

No change, upgrade reference Upgrading for Docker compose

Upgrading for Git source code

v0.10 has a major upgrade of dependencies, so to prevent errors when upgrading the source code, you need to delete the following directories before upgrading

# Remove .umi cache
yarn rimraf -rf "./**/{.umi,.umi-production}"
# Delete compiled files
yarn rimraf -rf "./packages/*/*/{lib,esm,es,dist,node_modules}"
# Remove dependencies
yarn rimraf -rf node_modules

See Upgrading for Git source code for more details

Upgrading for create-nocobase-app

It is recommended that yarn create re-download the new version and modify the .env configuration, for more details refer to major version upgrade guide

Upcoming deprecated and potentially incompatible changes

Sub-table field component

Not compatible with new version, block fields need to be removed and reassigned (UI reassignment only)

Attachment upload api changes

In addition to the built-in attachments table, users can also custom file collection, the upload api for attachments has been changed from /api/attachments:upload to /api/<file-collection>:create, upload is deprecated, still compatible with v0.10 but will be Removed.

signin/signup api changes

The nocobase kernel provides a more powerful auth module with the following changes to the user login, registration, verification, and logout apis:

/api/users:signin -> /api/auth:signIn
/api/users:signup -> /api/auth:signUp
/api/users:signout -> /api/auth:signOut
/api/users:check -> /api/auth:check

Note: The above users interface, which is deprecated, is still compatible with v0.10, but will be removed in the next major release.

Adjustments to date field filtering

If date related filtering was previously configured in the data range, it needs to be deleted and reconfigured.

Third-party plugin upgrade guide

Dependencies upgrade

dependencies mainly including

• react upgrade to v18
• react-dom upgrade to v18
• react-router upgrade to v6.11
• umi upgrade to v4
• dumi upgrade to v2

The package.json dependencies should be changed to the latest version, e.g:

{
  "devDependencies": {
+   "react": "^18".
+   "react-dom": "^18".
+   "react-router-dom": "^6.11.2".
-   "react": "^17".
-   "react-dom": "^17".
-   "react-router-dom": "^5".
  }
}

Code changes

Because react-router has been upgraded, the related code also needs to be changed, the main changes include

Layout Component

Layout component needs to use <Outlet /> instead of props.children.

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

if you use React.cloneElement to render the route component, you need to change it like this:

import React from 'react';
+ import { Outlet } from 'react-router-dom';

export default function RouteComponent(props) {
  return (
    <div>
-      { React.cloneElement(props.children, { someProp: 'p1' }) }
+      <Outlet context={{ someProp: 'p1' }} />
    </div>
  );
}

Change the route component to get the value from useOutletContext

import React from 'react';
+ import { useOutletContext } from 'react-router-dom';

- export function Comp(props){
+ export function Comp() {
+   const props = useOutletContext();
  return props.someProp;
}

Redirect

<Redirect> is changed to <Navigate replace />.

- <Redirect to="about" />
+ <Navigate to="about" replace />

useHistory

useNavigate is changed to useHistory.

- import { useHistory } from 'react-router-dom';
+ import { useNavigate} from 'react-router-dom';

- const history = useHistory();
+ const navigate = useNavigate();

- history.push('/about')
+ navigate('/about')

- history.replace('/about')
+ navigate('/about', { replace: true })

useLocation

useLocation<type>() is changed to useLocation.

- const location= useLocation<type>();
+ const location= useLocation();

const { query } = useLocation() is changed to useSearchParams()。

- const location = useLocation();
- const query = location.query;
- const name = query.name;
+ const [searchParams, setSearchParams] = useSearchParams();
+ searchParams.get('name');

path

All of the following are valid route paths in v6:

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

The following RegExp-style route paths are not valid in v6:

/tweets/:id(\d+)
/files/*/cat.jpg
/files-*

For more api changes, please refer to react-router@6。