Skip to main content

5.1 to 5.2

Atoti UI 5.2 is backward compatible with the dashboards, widgets and filters saved in 5.1. The upgrade requires code changes but no content migration.

Dependency upgrades

To upgrade to Atoti UI 5.2, you must upgrade your dependencies to the following versions:

  • react: 18.3.1
  • react-dom: 18.3.1
  • antd: 5.6.4
  • @emotion/react: 11.11.4
note

You can skip these upgrades if you do not have these dependencies.

Code changes

package.json

The following packages were renamed:

  • @activeviam/activeui-sdk -> @activeviam/atoti-ui-sdk
  • @activeviam/activeui-scripts -> @activeviam/atoti-ui-cli

The commands made available by @activeviam/atoti-ui-cli changed. They now allow to build and start individual extensions as well as to build and start an application with extensions. This makes them more useful if you build reusable extensions. Finally, our start command now features hot module replacement.

To benefit from these improvements, you must make the following changes to your package.json:

+"exports": "./dist/manifest.json",
"scripts": {
+ "prebuild": "atoti-ui-cli build-extension",
- "build": "activeui-scripts build",
+ "build": "atoti-ui-cli build-application --extensions . --env-file env.production.js",
- "start": "activeui-scripts start"
+ "start": "concurrently --raw npm:start-*",
+ "start-extension": "atoti-ui-cli start-extension --port 3001",
+ "start-application": "atoti-ui-cli start-application --port 3000 --extensions http://localhost:3001 --env-file env.development.js"
},
"dependencies": {
- "@activeviam/activeui-sdk": "5.1.19",
+ "@activeviam/atoti-ui-sdk": "5.2.0",
- "@activeviam/sandbox-clients": "5.1.19",
- "antd": "^5.1.0",
- "react": "^18.0.0"
},
"devDependencies": {
- "@activeviam/activeui-sdk": "5.1.19",
+ "@activeviam/atoti-ui-cli": "5.2.0",
+ "concurrently": "latest"
},
+ "peerDependencies": {
+ "antd": "5.6.4",
+ "react": "18.3.1",
+ "react-dom": "18.3.1"
+ }
note

For more information about the arguments you can pass to these commands, use --help. For instance:

atoti-ui-cli build-extension --help

env.js

The shape of our env.js files has changed. Update it as follows:

 window.env = {
- contentServerVersion: "6.1.0",
- contentServerUrl: "https://my-content-server.com",
+ contentServer: {
+ url: "https://my-content-server.com",
+ version: "6.1.0",
+ },
+ jwtServer: {
+ url: "https://my-jwt-server.com",
+ version: "6.1.0",
+ },
- activePivotServers: {
+ atotiServers: {
"serverKey": {
url: "https://my-server.com",
version: "6.1.0",
},
},
};

jwtServer represents the server handling authentication. See Authentication for more information.

API changes

Please refer to the "Removed" and "Changed" sections of the changelog.

Authentication

Off the shelf, Atoti UI 5.1 only supports basic authentication. To implement a different authentication scheme (in particular SSO), you must write both server-side code, and client-side JavaScript code.

On the other hand, Atoti UI 5.2 works with any authentication scheme. You do not need to write any client-side JavaScript code to handle your authentication. This is achieved through the withAuthenticatedClientsAndUser HOC, which can be used as a replacement for the deprecated withSandboxClients, and any custom connectivity HOC.

In your extension's activate function, this translates into the following changes:

- import { validateEnv, withSandboxClients } from "@activeviam/sandbox-clients";
+ import { validateEnv } from "@activeviam/application-env";
+ import { withAuthenticatedClientsAndUser } from "@activeviam/authenticated-clients-and-user";

const extension: ExtensionModule = {
activate: async (configuration) => {

- configuration.higherOrderComponents = [withSandboxClients];
+ configuration.higherOrderComponents = [withAuthenticatedClientsAndUser]

},
};

export default extension;

This is all you need to do if you are serving the UI from Atoti Server or the content server itself.

But if you are deploying Atoti UI remotely, then withAuthenticatedClientsAndUser requires some changes on the server side. Please refer to the dedicated page on authentication for more details.