C3 AI Documentation Home

UI Infrastructure Overview

UI Infrastructure React Overview

Build a C3 UI application consisting of routes and UI metadata in JSON format, rendered by React components under the hood, and compile it with Webpack.

The uiInfrastructureReact package is an implementation of uiInfrastructure for the React rendering library.

Webpack configuration

The Webpack configuration for React-based web applications is fully-managed by uiInfrastructureReact and claims the c3 namespace.

Applications developers do not need to provide any additional configuration other than the UiSdlRoute metadata for their routes and the UI metadata for their components.

Features

HTML Generation

The HTML files served to browsers are not hard-coded, instead we instruct Webpack to generate them for us based on the index.tsx and test.tsx files in ui/c3/src/.

TypeScript checker

Error messages from UiBundler will include type issues detected by the TS compiler. Errors don't block the bundle generation unless they are syntax errors or cause runtime errors at time of bundling.

Federated Modules

Most of the application development doesn't need to worry about this implementation detail, but if you are building features that require loading code from other servers, tenant or tags, you can leverage federated imports as needed.

Module federation refers to separating code in modules that are independent but can also work together, it allows multiple applications to seamlessly become one.

For more information, see Module Federation in SDL

Tests

All tests are written using the Jasmine testing framework. Any test file in test/browser/webpack will be processed and made available for test.html to load.

To load a test test_MyType.tsx from the browser, visit http://vanity-url:8080/c3/test.html?file=test_MyType.tsx.

Spies

Support for spies in tests is given by using the UiSdlSpecHelper.createSpy method. Spies rely on federated imports and require the spied code and their callers to be imported that way.

For that reason, you need to import the relevant methods or classes with UiSdlSpecHelper.importType like this:

JavaScript
import { importType, createSpy } from '@c3/ui/UiSdlSpecHelper';

// Import with a dynamic import
const { actionCaller } = await importType('MyType');

describe('test_MyType', function () {
  it('should call doSomethingAction', function () {
    // Spy on the internal method called by actionCaller from the federated module.
    // You can also spy on functions directly imported inside MyType implementation
    this.spy = await createSpy('MyType', 'doSomethingAction', {
      returnValue: 123,
    });

    actionCaller();

    expect(this.spy).toHaveBeenCalled();
  });
});

This only works for spies one-level deep, in other words, only on functions or types defined on or directly imported rom the tested component or type.

It is recomended to not spy on lower levels as that implies tight coupling between test and internals of other components or types. If you think you need to spy on indirect dependencies of your component, consider moving those tests further in the dependency chain and test from the component or type that directly depends on the code to spy

CSS

Importing scss files is supported but discouraged in the current version. If you need style changes, check the CSS Library package.

Adding styles that are constrained to only one component can be done by creating a .module.scss file and importing it from the component renderer type. For more information, see CSS Modules.

This way of importing means the css will be modularized and will not leak styles out of the component but it also means that particular component cannot work with only the styles in the CSS Library.

Because of that, it is recomended to only define .module.scss for components that are either not part of the CSS Library or that need extra styles that are outside the CSS Library. In future versions of both uiInfrastructure and cssLibrary modules will be fully supported and developers will be able to use CSS modules even for the CSS Library.

Was this page helpful?